Terrasse commited on
Commit
48678c8
·
1 Parent(s): f6ca5b1

better webapp displaying logs in Markdown Box

Browse files
Files changed (1) hide show
  1. owl/webapp_zh.py +41 -32
owl/webapp_zh.py CHANGED
@@ -180,7 +180,11 @@ def get_latest_logs(max_lines=100, queue_source=None):
180
  lines = [line.strip() for line in content.split("\n")]
181
  content = "\n".join(lines)
182
 
183
- return f"[{role.title()} Agent]: {content}"
 
 
 
 
184
 
185
  for log in filtered_logs:
186
  formatted_messages = []
@@ -234,7 +238,10 @@ def get_latest_logs(max_lines=100, queue_source=None):
234
  if not log.endswith("\n"):
235
  formatted_logs.append("\n")
236
 
237
- return "".join(formatted_logs)
 
 
 
238
 
239
 
240
  # Dictionary containing module descriptions
@@ -912,6 +919,14 @@ def create_ui():
912
  background-color: #f9f9f9;
913
  margin-bottom: 20px;
914
  }
 
 
 
 
 
 
 
 
915
 
916
  .env-controls, .api-help-container {
917
  border-radius: 8px;
@@ -1039,7 +1054,7 @@ def create_ui():
1039
  """)
1040
 
1041
  with gr.Row():
1042
- with gr.Column(scale=1):
1043
  question_input = gr.Textbox(
1044
  lines=5,
1045
  placeholder="请输入您的问题...",
@@ -1079,20 +1094,32 @@ def create_ui():
1079
  label="令牌计数", interactive=False, elem_classes="token-count"
1080
  )
1081
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1082
  with gr.Tabs(): # 设置对话记录为默认选中的标签页
1083
  with gr.TabItem("对话记录"):
1084
  # 添加对话记录显示区域
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
- )
1096
 
1097
  with gr.Row():
1098
  refresh_logs_button2 = gr.Button("刷新记录")
@@ -1180,24 +1207,6 @@ def create_ui():
1180
 
1181
  refresh_button.click(fn=update_env_table, outputs=[env_table])
1182
 
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
-
1201
  # 设置事件处理
1202
  run_button.click(
1203
  fn=process_with_live_logs,
 
180
  lines = [line.strip() for line in content.split("\n")]
181
  content = "\n".join(lines)
182
 
183
+ role_emoji = "🙋" if role.lower() == "user" else "🤖"
184
+ # return f"[{role.title()} Agent]: {content}"
185
+ return f"""### {role_emoji} {role.title()} Agent
186
+
187
+ {content}"""
188
 
189
  for log in filtered_logs:
190
  formatted_messages = []
 
238
  if not log.endswith("\n"):
239
  formatted_logs.append("\n")
240
 
241
+ with open("tmp.md", "w") as f:
242
+ f.write("\n".join(formatted_logs))
243
+
244
+ return "\n".join(formatted_logs)
245
 
246
 
247
  # Dictionary containing module descriptions
 
919
  background-color: #f9f9f9;
920
  margin-bottom: 20px;
921
  }
922
+
923
+ .log-display {
924
+ border-radius: 10px;
925
+ padding: 15px;
926
+ margin-bottom: 20px;
927
+ min-height: 50vh;
928
+ max-height: 75vh;
929
+ }
930
 
931
  .env-controls, .api-help-container {
932
  border-radius: 8px;
 
1054
  """)
1055
 
1056
  with gr.Row():
1057
+ with gr.Column(scale=0.5):
1058
  question_input = gr.Textbox(
1059
  lines=5,
1060
  placeholder="请输入您的问题...",
 
1094
  label="令牌计数", interactive=False, elem_classes="token-count"
1095
  )
1096
 
1097
+ # 示例问题
1098
+ examples = [
1099
+ "打开百度搜索,总结一下camel-ai的camel框架的github star、fork数目等,并把数字用plot包写成python文件保存到本地,并运行生成的python文件。",
1100
+ "浏览亚马逊并找出一款对程序员有吸引力的产品。请提供产品名称和价格",
1101
+ "写一个hello world的python文件,保存到本地",
1102
+ ]
1103
+
1104
+ gr.Examples(examples=examples, inputs=question_input)
1105
+
1106
+ gr.HTML("""
1107
+ <div class="footer" id="about">
1108
+ <h3>关于 OWL 多智能体协作系统</h3>
1109
+ <p>OWL 是一个基于CAMEL框架开发的先进多智能体协作系统,旨在通过智能体协作解决复杂问题。</p>
1110
+ <p>© 2025 CAMEL-AI.org. 基于Apache License 2.0开源协议</p>
1111
+ <p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
1112
+ </div>
1113
+ """)
1114
+
1115
  with gr.Tabs(): # 设置对话记录为默认选中的标签页
1116
  with gr.TabItem("对话记录"):
1117
  # 添加对话记录显示区域
1118
+ with gr.Box():
1119
+ log_display2 = gr.Markdown(
1120
+ value="暂无对话记录",
1121
+ elem_classes="log-display",
1122
+ )
 
 
 
 
 
 
1123
 
1124
  with gr.Row():
1125
  refresh_logs_button2 = gr.Button("刷新记录")
 
1207
 
1208
  refresh_button.click(fn=update_env_table, outputs=[env_table])
1209
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1210
  # 设置事件处理
1211
  run_button.click(
1212
  fn=process_with_live_logs,