Skip to content

Commit 8c5a5f7

Browse files
Wendong-FanWendong-Fan
authored
feat: improve webapp log-display box (#338)
2 parents ee4ea38 + c977dbe commit 8c5a5f7

File tree

2 files changed

+74
-64
lines changed

2 files changed

+74
-64
lines changed

‎owl/webapp.py‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,10 @@ def process_message(role, content):
180180
lines = [line.strip() for line in content.split("\n")]
181181
content = "\n".join(lines)
182182

183-
return f"[{role.title()} Agent]: {content}"
183+
role_emoji = "🙋" if role.lower() == "user" else "🤖"
184+
return f"""### {role_emoji} {role.title()} Agent
185+
186+
{content}"""
184187

185188
for log in filtered_logs:
186189
formatted_messages = []
@@ -234,7 +237,7 @@ def process_message(role, content):
234237
if not log.endswith("\n"):
235238
formatted_logs.append("\n")
236239

237-
return "".join(formatted_logs)
240+
return "\n".join(formatted_logs)
238241

239242

240243
# Dictionary containing module descriptions
@@ -929,6 +932,14 @@ def process_in_background():
929932
line-height: 1.4;
930933
}
931934
935+
.log-display {
936+
border-radius: 10px;
937+
padding: 15px;
938+
margin-bottom: 20px;
939+
min-height: 50vh;
940+
max-height: 75vh;
941+
}
942+
932943
/* Environment variable management style */
933944
.env-manager-container {
934945
border-radius: 10px;
@@ -1063,7 +1074,7 @@ def process_in_background():
10631074
""")
10641075

10651076
with gr.Row():
1066-
with gr.Column(scale=1):
1077+
with gr.Column(scale=0.5):
10671078
question_input = gr.Textbox(
10681079
lines=5,
10691080
placeholder="Please enter your question...",
@@ -1103,20 +1114,32 @@ def process_in_background():
11031114
label="Token Count", interactive=False, elem_classes="token-count"
11041115
)
11051116

1117+
# Example questions
1118+
examples = [
1119+
"Open Google search, summarize the github stars, fork counts, etc. of camel-ai's camel framework, and write the numbers into a python file using the plot package, save it locally, and run the generated python file.",
1120+
"Browse Amazon and find a product that is attractive to programmers. Please provide the product name and price",
1121+
"Write a hello world python file and save it locally",
1122+
]
1123+
1124+
gr.Examples(examples=examples, inputs=question_input)
1125+
1126+
gr.HTML("""
1127+
<div class="footer" id="about">
1128+
<h3>About OWL Multi-Agent Collaboration System</h3>
1129+
<p>OWL is an advanced multi-agent collaboration system developed based on the CAMEL framework, designed to solve complex problems through agent collaboration.</p>
1130+
<p>© 2025 CAMEL-AI.org. Based on Apache License 2.0 open source license</p>
1131+
<p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
1132+
</div>
1133+
""")
1134+
11061135
with gr.Tabs(): # Set conversation record as the default selected tab
11071136
with gr.TabItem("Conversation Record"):
11081137
# Add conversation record display area
1109-
log_display2 = gr.Textbox(
1110-
label="Conversation Record",
1111-
lines=25,
1112-
max_lines=100,
1113-
interactive=False,
1114-
autoscroll=True,
1115-
show_copy_button=True,
1116-
elem_classes="log-display",
1117-
container=True,
1118-
value="",
1119-
)
1138+
with gr.Box():
1139+
log_display2 = gr.Markdown(
1140+
value="No conversation records yet.",
1141+
elem_classes="log-display",
1142+
)
11201143

11211144
with gr.Row():
11221145
refresh_logs_button2 = gr.Button("Refresh Record")
@@ -1210,24 +1233,6 @@ def process_in_background():
12101233

12111234
refresh_button.click(fn=update_env_table, outputs=[env_table])
12121235

1213-
# Example questions
1214-
examples = [
1215-
"Open Google search, summarize the github stars, fork counts, etc. of camel-ai's camel framework, and write the numbers into a python file using the plot package, save it locally, and run the generated python file.",
1216-
"Browse Amazon and find a product that is attractive to programmers. Please provide the product name and price",
1217-
"Write a hello world python file and save it locally",
1218-
]
1219-
1220-
gr.Examples(examples=examples, inputs=question_input)
1221-
1222-
gr.HTML("""
1223-
<div class="footer" id="about">
1224-
<h3>About OWL Multi-Agent Collaboration System</h3>
1225-
<p>OWL is an advanced multi-agent collaboration system developed based on the CAMEL framework, designed to solve complex problems through agent collaboration.</p>
1226-
<p>© 2025 CAMEL-AI.org. Based on Apache License 2.0 open source license</p>
1227-
<p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
1228-
</div>
1229-
""")
1230-
12311236
# Set up event handling
12321237
run_button.click(
12331238
fn=process_with_live_logs,

‎owl/webapp_zh.py‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,10 @@ def process_message(role, content):
180180
lines = [line.strip() for line in content.split("\n")]
181181
content = "\n".join(lines)
182182

183-
return f"[{role.title()} Agent]: {content}"
183+
role_emoji = "🙋" if role.lower() == "user" else "🤖"
184+
return f"""### {role_emoji} {role.title()} Agent
185+
186+
{content}"""
184187

185188
for log in filtered_logs:
186189
formatted_messages = []
@@ -234,7 +237,7 @@ def process_message(role, content):
234237
if not log.endswith("\n"):
235238
formatted_logs.append("\n")
236239

237-
return "".join(formatted_logs)
240+
return "\n".join(formatted_logs)
238241

239242

240243
# Dictionary containing module descriptions
@@ -904,6 +907,14 @@ def process_in_background():
904907
white-space: pre-wrap;
905908
line-height: 1.4;
906909
}
910+
911+
.log-display {
912+
border-radius: 10px;
913+
padding: 15px;
914+
margin-bottom: 20px;
915+
min-height: 50vh;
916+
max-height: 75vh;
917+
}
907918
908919
/* 环境变量管理样式 */
909920
.env-manager-container {
@@ -1039,7 +1050,7 @@ def process_in_background():
10391050
""")
10401051

10411052
with gr.Row():
1042-
with gr.Column(scale=1):
1053+
with gr.Column(scale=0.5):
10431054
question_input = gr.Textbox(
10441055
lines=5,
10451056
placeholder="请输入您的问题...",
@@ -1079,20 +1090,32 @@ def process_in_background():
10791090
label="令牌计数", interactive=False, elem_classes="token-count"
10801091
)
10811092

1093+
# 示例问题
1094+
examples = [
1095+
"打开百度搜索，总结一下camel-ai的camel框架的github star、fork数目等，并把数字用plot包写成python文件保存到本地，并运行生成的python文件。",
1096+
"浏览亚马逊并找出一款对程序员有吸引力的产品。请提供产品名称和价格",
1097+
"写一个hello world的python文件，保存到本地",
1098+
]
1099+
1100+
gr.Examples(examples=examples, inputs=question_input)
1101+
1102+
gr.HTML("""
1103+
<div class="footer" id="about">
1104+
<h3>关于 OWL 多智能体协作系统</h3>
1105+
<p>OWL 是一个基于CAMEL框架开发的先进多智能体协作系统，旨在通过智能体协作解决复杂问题。</p>
1106+
<p>© 2025 CAMEL-AI.org. 基于Apache License 2.0开源协议</p>
1107+
<p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
1108+
</div>
1109+
""")
1110+
10821111
with gr.Tabs(): # 设置对话记录为默认选中的标签页
10831112
with gr.TabItem("对话记录"):
10841113
# 添加对话记录显示区域
1085-
log_display2 = gr.Textbox(
1086-
label="对话记录",
1087-
lines=25,
1088-
max_lines=100,
1089-
interactive=False,
1090-
autoscroll=True,
1091-
show_copy_button=True,
1092-
elem_classes="log-display",
1093-
container=True,
1094-
value="",
1095-
)
1114+
with gr.Box():
1115+
log_display2 = gr.Markdown(
1116+
value="暂无对话记录。",
1117+
elem_classes="log-display",
1118+
)
10961119

10971120
with gr.Row():
10981121
refresh_logs_button2 = gr.Button("刷新记录")
@@ -1180,24 +1203,6 @@ def process_in_background():
11801203

11811204
refresh_button.click(fn=update_env_table, outputs=[env_table])
11821205

1183-
# 示例问题
1184-
examples = [
1185-
"打开百度搜索，总结一下camel-ai的camel框架的github star、fork数目等，并把数字用plot包写成python文件保存到本地，并运行生成的python文件。",
1186-
"浏览亚马逊并找出一款对程序员有吸引力的产品。请提供产品名称和价格",
1187-
"写一个hello world的python文件，保存到本地",
1188-
]
1189-
1190-
gr.Examples(examples=examples, inputs=question_input)
1191-
1192-
gr.HTML("""
1193-
<div class="footer" id="about">
1194-
<h3>关于 OWL 多智能体协作系统</h3>
1195-
<p>OWL 是一个基于CAMEL框架开发的先进多智能体协作系统，旨在通过智能体协作解决复杂问题。</p>
1196-
<p>© 2025 CAMEL-AI.org. 基于Apache License 2.0开源协议</p>
1197-
<p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
1198-
</div>
1199-
""")
1200-
12011206
# 设置事件处理
12021207
run_button.click(
12031208
fn=process_with_live_logs,

0 commit comments

Comments
 (0)