24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145 | class GradioAgentChatPack(BaseLlamaPack):
"""Gradio聊天机器人，用于与您自己的代理进行对话。"""
def __init__(
self,
agent: BaseAgent,
**kwargs: Any,
) -> None:
"""初始化参数。"""
try:
from ansi2html import Ansi2HTMLConverter
except ImportError:
raise ImportError("Please install ansi2html via `pip install ansi2html`")
self.agent = agent
self.thoughts = ""
self.conv = Ansi2HTMLConverter()
def get_modules(self) -> Dict[str, Any]:
"""获取模块。"""
return {"agent": self.agent}
def _handle_user_message(self, user_message, history):
"""处理用户提交的消息。清空消息框，并将消息追加到历史记录中。
"""
return "", [*history, (user_message, "")]
def _generate_response(
self, chat_history: List[Tuple[str, str]]
) -> Tuple[str, List[Tuple[str, str]]]:
"""生成来自代理的响应，并捕获ReActAgent的思考过程中的标准输出。
"""
with Capturing() as output:
response = self.agent.stream_chat(chat_history[-1][0])
ansi = "\n========\n".join(output)
html_output = self.conv.convert(ansi)
for token in response.response_gen:
chat_history[-1][1] += token
yield chat_history, str(html_output)
def _reset_chat(self) -> Tuple[str, str]:
"""重置代理的聊天记录。并清除所有对话框。"""
# clear agent history
self.agent.reset()
return "", "", "" # clear textboxes
def run(self, *args: Any, **kwargs: Any) -> Any:
"""运行流水线。"""
import gradio as gr
from gradio.themes.utils import colors, fonts, sizes
llama_theme = gr.themes.Soft(
primary_hue=colors.purple,
secondary_hue=colors.pink,
neutral_hue=colors.gray,
spacing_size=sizes.spacing_md,
radius_size=sizes.radius_md,
text_size=sizes.text_lg,
font=(
fonts.GoogleFont("Quicksand"),
"ui-sans-serif",
"sans-serif",
),
font_mono=(
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"monospace",
),
)
llama_theme.set(
body_background_fill="#FFFFFF",
body_background_fill_dark="#000000",
button_primary_background_fill="linear-gradient(90deg, *primary_300, *secondary_400)",
button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
button_primary_text_color="white",
button_primary_background_fill_dark="linear-gradient(90deg, *primary_600, *secondary_800)",
slider_color="*secondary_300",
slider_color_dark="*secondary_600",
block_title_text_weight="600",
block_border_width="3px",
block_shadow="*shadow_drop_lg",
button_shadow="*shadow_drop_lg",
button_large_padding="32px",
)
demo = gr.Blocks(
theme=llama_theme,
css="#box { height: 420px; overflow-y: scroll !important} #logo { align-self: right }",
)
with demo:
with gr.Row():
gr.Markdown(
"# Gradio Chat With Your Agent Powered by LlamaIndex and LlamaHub 🦙\n"
"This Gradio app allows you to chat with your own agent (`BaseAgent`).\n"
)
gr.Markdown(
"[](https://llamaindex.ai)",
elem_id="logo",
)
with gr.Row():
chat_window = gr.Chatbot(
label="Message History",
scale=3,
)
console = gr.HTML(elem_id="box")
with gr.Row():
message = gr.Textbox(label="Write A Message", scale=4)
clear = gr.ClearButton()
message.submit(
self._handle_user_message,
[message, chat_window],
[message, chat_window],
queue=False,
).then(
self._generate_response,
chat_window,
[chat_window, console],
)
clear.click(self._reset_chat, None, [message, chat_window, console])
demo.launch(server_name="0.0.0.0", server_port=8080)
|