mirror of
https://github.com/camel-ai/owl.git
synced 2026-03-22 05:57:17 +08:00
feat: improve webapp log-display box (#338)
This commit is contained in:
Wendong-Fan
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user