From fbbb78b0c3187b7b6d325122811ea8514241f68d Mon Sep 17 00:00:00 2001 From: Terrasse Date: Tue, 18 Mar 2025 00:33:38 +0800 Subject: [PATCH 1/3] better webapp displaying logs in Markdown Box --- owl/webapp_zh.py | 73 +++++++++++++++++++++++++++--------------------- 1 file changed, 41 insertions(+), 32 deletions(-) diff --git a/owl/webapp_zh.py b/owl/webapp_zh.py index b0aa300..c3bfdff 100644 --- a/owl/webapp_zh.py +++ b/owl/webapp_zh.py @@ -180,7 +180,11 @@ 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.title()} Agent]: {content}" + return f"""### {role_emoji} {role.title()} Agent + +{content}""" for log in filtered_logs: formatted_messages = [] @@ -234,7 +238,10 @@ def get_latest_logs(max_lines=100, queue_source=None): if not log.endswith("\n"): formatted_logs.append("\n") - return "".join(formatted_logs) + with open("tmp.md", "w") as f: + f.write("\n".join(formatted_logs)) + + return "\n".join(formatted_logs) # Dictionary containing module descriptions @@ -912,6 +919,14 @@ def create_ui(): background-color: #f9f9f9; margin-bottom: 20px; } + + .log-display { + border-radius: 10px; + padding: 15px; + margin-bottom: 20px; + min-height: 50vh; + max-height: 75vh; + } .env-controls, .api-help-container { border-radius: 8px; @@ -1039,7 +1054,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 +1094,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 +1207,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, From d0d69fa7f0e5ed227774b363b2d2ccf07b6ba91d Mon Sep 17 00:00:00 2001 From: Terrasse Date: Tue, 18 Mar 2025 00:54:23 +0800 Subject: [PATCH 2/3] better webapp displaying logs in Markdown Box (for en version) --- owl/webapp.py | 72 +++++++++++++++++++++++++++--------------------- owl/webapp_zh.py | 21 +++++++------- 2 files changed, 50 insertions(+), 43 deletions(-) diff --git a/owl/webapp.py b/owl/webapp.py index 3f07970..add7337 100644 --- a/owl/webapp.py +++ b/owl/webapp.py @@ -180,7 +180,11 @@ 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.title()} Agent]: {content}" + return f"""### {role_emoji} {role.title()} Agent + +{content}""" for log in filtered_logs: formatted_messages = [] @@ -234,7 +238,9 @@ def get_latest_logs(max_lines=100, queue_source=None): if not log.endswith("\n"): formatted_logs.append("\n") - return "".join(formatted_logs) + # with open("logs.md", "w") as f: + # f.write("\n".join(formatted_logs)) + return "\n".join(formatted_logs) # Dictionary containing module descriptions @@ -929,6 +935,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 +1077,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 +1117,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="暂无对话记录", + elem_classes="log-display", + ) with gr.Row(): refresh_logs_button2 = gr.Button("Refresh Record") @@ -1210,24 +1236,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 c3bfdff..c762a07 100644 --- a/owl/webapp_zh.py +++ b/owl/webapp_zh.py @@ -238,9 +238,8 @@ def get_latest_logs(max_lines=100, queue_source=None): if not log.endswith("\n"): formatted_logs.append("\n") - with open("tmp.md", "w") as f: - f.write("\n".join(formatted_logs)) - + # with open("logs.md", "w") as f: + # f.write("\n".join(formatted_logs)) return "\n".join(formatted_logs) @@ -911,14 +910,6 @@ def create_ui(): white-space: pre-wrap; line-height: 1.4; } - - /* 环境变量管理样式 */ - .env-manager-container { - border-radius: 10px; - padding: 15px; - background-color: #f9f9f9; - margin-bottom: 20px; - } .log-display { border-radius: 10px; @@ -928,6 +919,14 @@ def create_ui(): max-height: 75vh; } + /* 环境变量管理样式 */ + .env-manager-container { + border-radius: 10px; + padding: 15px; + background-color: #f9f9f9; + margin-bottom: 20px; + } + .env-controls, .api-help-container { border-radius: 8px; padding: 15px; From c977dbeb537f7e2f72b7f9e8b2816824ec70ed1c Mon Sep 17 00:00:00 2001 From: Terrasse Date: Tue, 18 Mar 2025 10:42:18 +0800 Subject: [PATCH 3/3] fix: clear codes --- owl/webapp.py | 5 +---- owl/webapp_zh.py | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/owl/webapp.py b/owl/webapp.py index add7337..2aed709 100644 --- a/owl/webapp.py +++ b/owl/webapp.py @@ -181,7 +181,6 @@ def get_latest_logs(max_lines=100, queue_source=None): content = "\n".join(lines) role_emoji = "🙋" if role.lower() == "user" else "🤖" - # return f"[{role.title()} Agent]: {content}" return f"""### {role_emoji} {role.title()} Agent {content}""" @@ -238,8 +237,6 @@ def get_latest_logs(max_lines=100, queue_source=None): if not log.endswith("\n"): formatted_logs.append("\n") - # with open("logs.md", "w") as f: - # f.write("\n".join(formatted_logs)) return "\n".join(formatted_logs) @@ -1140,7 +1137,7 @@ def create_ui(): # Add conversation record display area with gr.Box(): log_display2 = gr.Markdown( - value="暂无对话记录", + value="No conversation records yet.", elem_classes="log-display", ) diff --git a/owl/webapp_zh.py b/owl/webapp_zh.py index c762a07..0dd8e40 100644 --- a/owl/webapp_zh.py +++ b/owl/webapp_zh.py @@ -181,7 +181,6 @@ def get_latest_logs(max_lines=100, queue_source=None): content = "\n".join(lines) role_emoji = "🙋" if role.lower() == "user" else "🤖" - # return f"[{role.title()} Agent]: {content}" return f"""### {role_emoji} {role.title()} Agent {content}""" @@ -238,8 +237,6 @@ def get_latest_logs(max_lines=100, queue_source=None): if not log.endswith("\n"): formatted_logs.append("\n") - # with open("logs.md", "w") as f: - # f.write("\n".join(formatted_logs)) return "\n".join(formatted_logs) @@ -1116,7 +1113,7 @@ def create_ui(): # 添加对话记录显示区域 with gr.Box(): log_display2 = gr.Markdown( - value="暂无对话记录", + value="暂无对话记录。", elem_classes="log-display", )