feat: improve webapp log-display box (#338)

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("""
+                        <div class="footer" id="about">
+                            <h3>About OWL Multi-Agent Collaboration System</h3>
+                            <p>OWL is an advanced multi-agent collaboration system developed based on the CAMEL framework, designed to solve complex problems through agent collaboration.</p>
+                            <p>© 2025 CAMEL-AI.org. Based on Apache License 2.0 open source license</p>
+                            <p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
+                        </div>
+                    """)
+
             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("""
-                <div class="footer" id="about">
-                    <h3>About OWL Multi-Agent Collaboration System</h3>
-                    <p>OWL is an advanced multi-agent collaboration system developed based on the CAMEL framework, designed to solve complex problems through agent collaboration.</p>
-                    <p>© 2025 CAMEL-AI.org. Based on Apache License 2.0 open source license</p>
-                    <p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
-                </div>
-            """)
-
         # Set up event handling
         run_button.click(
             fn=process_with_live_logs,

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("""
+                        <div class="footer" id="about">
+                            <h3>关于 OWL 多智能体协作系统</h3>
+                            <p>OWL 是一个基于CAMEL框架开发的先进多智能体协作系统，旨在通过智能体协作解决复杂问题。</p>
+                            <p>© 2025 CAMEL-AI.org. 基于Apache License 2.0开源协议</p>
+                            <p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
+                        </div>
+                    """)
+
             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("""
-                <div class="footer" id="about">
-                    <h3>关于 OWL 多智能体协作系统</h3>
-                    <p>OWL 是一个基于CAMEL框架开发的先进多智能体协作系统，旨在通过智能体协作解决复杂问题。</p>
-                    <p>© 2025 CAMEL-AI.org. 基于Apache License 2.0开源协议</p>
-                    <p><a href="https://github.com/camel-ai/owl" target="_blank">GitHub</a></p>
-                </div>
-            """)
-
         # 设置事件处理
         run_button.click(
             fn=process_with_live_logs,