diff --git a/owl/webapp.py b/owl/webapp.py
index 3f07970..2aed709 100644
--- a/owl/webapp.py
+++ b/owl/webapp.py
@@ -180,7 +180,10 @@ def get_latest_logs(max_lines=100, queue_source=None):
lines = [line.strip() for line in content.split("\n")]
content = "\n".join(lines)
- return f"[{role.title()} Agent]: {content}"
+ role_emoji = "🙋" if role.lower() == "user" else "🤖"
+ return f"""### {role_emoji} {role.title()} Agent
+
+{content}"""
for log in filtered_logs:
formatted_messages = []
@@ -234,7 +237,7 @@ def get_latest_logs(max_lines=100, queue_source=None):
if not log.endswith("\n"):
formatted_logs.append("\n")
- return "".join(formatted_logs)
+ return "\n".join(formatted_logs)
# Dictionary containing module descriptions
@@ -929,6 +932,14 @@ def create_ui():
line-height: 1.4;
}
+ .log-display {
+ border-radius: 10px;
+ padding: 15px;
+ margin-bottom: 20px;
+ min-height: 50vh;
+ max-height: 75vh;
+ }
+
/* Environment variable management style */
.env-manager-container {
border-radius: 10px;
@@ -1063,7 +1074,7 @@ def create_ui():
""")
with gr.Row():
- with gr.Column(scale=1):
+ with gr.Column(scale=0.5):
question_input = gr.Textbox(
lines=5,
placeholder="Please enter your question...",
@@ -1103,20 +1114,32 @@ def create_ui():
label="Token Count", interactive=False, elem_classes="token-count"
)
+ # Example questions
+ examples = [
+ "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.",
+ "Browse Amazon and find a product that is attractive to programmers. Please provide the product name and price",
+ "Write a hello world python file and save it locally",
+ ]
+
+ gr.Examples(examples=examples, inputs=question_input)
+
+ gr.HTML("""
+
+ """)
+
with gr.Tabs(): # Set conversation record as the default selected tab
with gr.TabItem("Conversation Record"):
# Add conversation record display area
- log_display2 = gr.Textbox(
- label="Conversation Record",
- lines=25,
- max_lines=100,
- interactive=False,
- autoscroll=True,
- show_copy_button=True,
- elem_classes="log-display",
- container=True,
- value="",
- )
+ with gr.Box():
+ log_display2 = gr.Markdown(
+ value="No conversation records yet.",
+ elem_classes="log-display",
+ )
with gr.Row():
refresh_logs_button2 = gr.Button("Refresh Record")
@@ -1210,24 +1233,6 @@ def create_ui():
refresh_button.click(fn=update_env_table, outputs=[env_table])
- # Example questions
- examples = [
- "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.",
- "Browse Amazon and find a product that is attractive to programmers. Please provide the product name and price",
- "Write a hello world python file and save it locally",
- ]
-
- gr.Examples(examples=examples, inputs=question_input)
-
- gr.HTML("""
-
- """)
-
# Set up event handling
run_button.click(
fn=process_with_live_logs,
diff --git a/owl/webapp_zh.py b/owl/webapp_zh.py
index b0aa300..0dd8e40 100644
--- a/owl/webapp_zh.py
+++ b/owl/webapp_zh.py
@@ -180,7 +180,10 @@ def get_latest_logs(max_lines=100, queue_source=None):
lines = [line.strip() for line in content.split("\n")]
content = "\n".join(lines)
- return f"[{role.title()} Agent]: {content}"
+ role_emoji = "🙋" if role.lower() == "user" else "🤖"
+ return f"""### {role_emoji} {role.title()} Agent
+
+{content}"""
for log in filtered_logs:
formatted_messages = []
@@ -234,7 +237,7 @@ def get_latest_logs(max_lines=100, queue_source=None):
if not log.endswith("\n"):
formatted_logs.append("\n")
- return "".join(formatted_logs)
+ return "\n".join(formatted_logs)
# Dictionary containing module descriptions
@@ -904,6 +907,14 @@ def create_ui():
white-space: pre-wrap;
line-height: 1.4;
}
+
+ .log-display {
+ border-radius: 10px;
+ padding: 15px;
+ margin-bottom: 20px;
+ min-height: 50vh;
+ max-height: 75vh;
+ }
/* 环境变量管理样式 */
.env-manager-container {
@@ -1039,7 +1050,7 @@ def create_ui():
""")
with gr.Row():
- with gr.Column(scale=1):
+ with gr.Column(scale=0.5):
question_input = gr.Textbox(
lines=5,
placeholder="请输入您的问题...",
@@ -1079,20 +1090,32 @@ def create_ui():
label="令牌计数", interactive=False, elem_classes="token-count"
)
+ # 示例问题
+ examples = [
+ "打开百度搜索，总结一下camel-ai的camel框架的github star、fork数目等，并把数字用plot包写成python文件保存到本地，并运行生成的python文件。",
+ "浏览亚马逊并找出一款对程序员有吸引力的产品。请提供产品名称和价格",
+ "写一个hello world的python文件，保存到本地",
+ ]
+
+ gr.Examples(examples=examples, inputs=question_input)
+
+ gr.HTML("""
+
+ """)
+
with gr.Tabs(): # 设置对话记录为默认选中的标签页
with gr.TabItem("对话记录"):
# 添加对话记录显示区域
- log_display2 = gr.Textbox(
- label="对话记录",
- lines=25,
- max_lines=100,
- interactive=False,
- autoscroll=True,
- show_copy_button=True,
- elem_classes="log-display",
- container=True,
- value="",
- )
+ with gr.Box():
+ log_display2 = gr.Markdown(
+ value="暂无对话记录。",
+ elem_classes="log-display",
+ )
with gr.Row():
refresh_logs_button2 = gr.Button("刷新记录")
@@ -1180,24 +1203,6 @@ def create_ui():
refresh_button.click(fn=update_env_table, outputs=[env_table])
- # 示例问题
- examples = [
- "打开百度搜索，总结一下camel-ai的camel框架的github star、fork数目等，并把数字用plot包写成python文件保存到本地，并运行生成的python文件。",
- "浏览亚马逊并找出一款对程序员有吸引力的产品。请提供产品名称和价格",
- "写一个hello world的python文件，保存到本地",
- ]
-
- gr.Examples(examples=examples, inputs=question_input)
-
- gr.HTML("""
-
- """)
-
# 设置事件处理
run_button.click(
fn=process_with_live_logs,