github/web-ui
1
0
Fork 0
mirror of https://github.com/browser-use/web-ui.git synced 2026-03-22 11:17:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

add ui

Browse Source
This commit is contained in:
vvincent1234
2025-04-27 23:28:47 +08:00
parent 70ac2f483a
commit 6ac9e268d3
7 changed files with 239 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/webui/components/agent_settings_tab.py
View File

@@ -1,8 +1,14 @@
import json
import os
import gradio as gr
from gradio.components import Component
from typing import Any, Dict, Optional
from src.webui.webui_manager import WebuiManager
from src.utils import config
import logging
logger = logging.getLogger(__name__)
def update_model_dropdown(llm_provider):
@@ -17,6 +23,20 @@ def update_model_dropdown(llm_provider):
return gr.Dropdown(choices=[], value="", interactive=True, allow_custom_value=True)
def update_mcp_server(mcp_file: str):
"""
Update the MCP server.
"""
if not mcp_file or not os.path.exists(mcp_file) or mcp_file.endswith('.json'):
logger.warning(f"{mcp_file} is not a valid MCP file.")
return gr.update()
with open(mcp_file, 'r') as f:
mcp_server = json.load(f)
return gr.update(value=json.dumps(mcp_server, indent=2), visible=True)
def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Component]:
"""
Creates an agent settings tab.
@@ -29,6 +49,10 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
override_system_prompt = gr.Textbox(label="Override system prompt", lines=4, interactive=True)
extend_system_prompt = gr.Textbox(label="Extend system prompt", lines=4, interactive=True)
with gr.Group():
mcp_json_file = gr.File(label="MCP server file", interactive=True, file_types=["json"])
mcp_server_config = gr.Textbox(label="MCP server", lines=6, interactive=True, visible=False)
with gr.Group():
with gr.Row():
llm_provider = gr.Dropdown(
@@ -92,7 +116,6 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
with gr.Row():
planner_llm_provider = gr.Dropdown(
choices=[provider for provider, model in config.model_names.items()],
value=None,
label="Planner LLM Provider",
info="Select LLM provider for LLM",
interactive=True
@@ -202,7 +225,8 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
max_actions=max_actions,
max_input_tokens=max_input_tokens,
tool_calling_method=tool_calling_method,
mcp_json_file=mcp_json_file,
mcp_server_config=mcp_server_config,
))
llm_provider.change(
fn=lambda x: gr.update(visible=x == "ollama"),
@@ -225,4 +249,10 @@ def create_agent_settings_tab(webui_manager: WebuiManager) -> dict[str, Componen
outputs=planner_llm_model_name
)
mcp_json_file.change(
update_mcp_server,
inputs=mcp_json_file,
outputs=mcp_server_config
)
return tab_components

125
src/webui/components/browser_settings_tab.py
View File

@@ -0,0 +1,125 @@
import gradio as gr
from gradio.components import Component
from src.webui.webui_manager import WebuiManager
from src.utils import config
def create_browser_settings_tab(webui_manager: WebuiManager) -> dict[str, Component]:
"""
Creates a browser settings tab.
"""
input_components = set(webui_manager.get_components())
tab_components = {}
with gr.Group():
with gr.Row():
browser_binary_path = gr.Textbox(
label="Browser Binary Path",
lines=1,
interactive=True,
placeholder="e.g. '/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome'"
)
browser_user_data_dir = gr.Textbox(
label="Browser User Data Dir",
lines=1,
interactive=True,
placeholder="Leave it empty if you use your default user data",
)
with gr.Row():
use_own_browser = gr.Checkbox(
label="Use Own Browser",
value=False,
info="Use your existing browser instance",
interactive=True
)
keep_browser_open = gr.Checkbox(
label="Keep Browser Open",
value=False,
info="Keep Browser Open between Tasks",
interactive=True
)
headless = gr.Checkbox(
label="Headless Mode",
value=False,
info="Run browser without GUI",
interactive=True
)
disable_security = gr.Checkbox(
label="Disable Security",
value=True,
info="Disable browser security features",
interactive=True
)
with gr.Row():
window_w = gr.Number(
label="Window Width",
value=1280,
info="Browser window width",
interactive=True
)
window_h = gr.Number(
label="Window Height",
value=1100,
info="Browser window height",
interactive=True
)
with gr.Row():
cdp_url = gr.Textbox(
label="CDP URL",
info="CDP URL for browser remote debugging",
interactive=True,
)
wss_url = gr.Textbox(
label="WSS URL",
info="WSS URL for browser remote debugging",
interactive=True,
)
with gr.Row():
save_recording_path = gr.Textbox(
label="Recording Path",
placeholder="e.g. ./tmp/record_videos",
info="Path to save browser recordings",
interactive=True,
)
save_trace_path = gr.Textbox(
label="Trace Path",
placeholder="e.g. ./tmp/traces",
info="Path to save Agent traces",
interactive=True,
)
with gr.Row():
save_agent_history_path = gr.Textbox(
label="Agent History Save Path",
value="./tmp/agent_history",
info="Specify the directory where agent history should be saved.",
interactive=True,
)
save_download_path = gr.Textbox(
label="Save Directory for browser downloads",
value="./tmp/downloads",
info="Specify the directory where downloaded files should be saved.",
interactive=True,
)
tab_components.update(
dict(
browser_binary_path=browser_binary_path,
browser_user_data_dir=browser_user_data_dir,
use_own_browser=use_own_browser,
keep_browser_open=keep_browser_open,
headless=headless,
disable_security=disable_security,
save_recording_path=save_recording_path,
save_trace_path=save_trace_path,
save_agent_history_path=save_agent_history_path,
save_download_path=save_download_path,
cdp_url=cdp_url,
wss_url=wss_url
)
)
return tab_components

62
src/webui/components/browser_use_agent_tab.py Normal file
View File

@@ -0,0 +1,62 @@
import gradio as gr
from gradio.components import Component
from src.webui.webui_manager import WebuiManager
from src.utils import config
def create_browser_use_agent_tab(webui_manager: WebuiManager) -> dict[str, Component]:
"""
Create the run agent tab
"""
input_components = set(webui_manager.get_components())
tab_components = {}
chatbot = gr.Chatbot(type='messages', label="Chat History", height=600)
user_input = gr.Textbox(
label="User Input",
lines=3,
value="go to google.com and type 'OpenAI' click search and give me the first url",
interactive=True
)
with gr.Row():
stop_button = gr.Button("⏹️ Stop", interactive=False, variant="stop", scale=2)
clear_button = gr.Button("🧹 Clear", interactive=False, variant="stop", scale=2)
run_button = gr.Button("▶️ Summit", variant="primary", scale=3)
browser_view = gr.HTML(
value="<h1 style='width:80vw; height:50vh'>Waiting for browser session...</h1>",
label="Browser Live View",
visible=False
)
with gr.Row():
agent_final_result = gr.Textbox(
label="Final Result", lines=3, show_label=True, interactive=False
)
agent_errors = gr.Textbox(
label="Errors", lines=3, show_label=True, interactive=False
)
with gr.Row():
agent_trace_file = gr.File(label="Trace File", interactive=False)
agent_history_file = gr.File(label="Agent History", interactive=False)
recording_gif = gr.Image(label="Result GIF", format="gif", interactive=False)
tab_components.update(
dict(
chatbot=chatbot,
user_input=user_input,
clear_button=clear_button,
run_button=run_button,
stop_button=stop_button,
agent_final_result=agent_final_result,
agent_errors=agent_errors,
agent_trace_file=agent_trace_file,
agent_history_file=agent_history_file,
recording_gif=recording_gif,
browser_view=browser_view
)
)
return tab_components

0
src/webui/components/run_deep_research_tab.py → src/webui/components/deep_research_agent_tab.py
View File

4
src/webui/components/run_agent_tab.py
View File

@@ -1,4 +0,0 @@
import gradio as gr
def creat_auto_agent_tab():
pass

6
src/webui/interface.py
View File

@@ -2,6 +2,8 @@ import gradio as gr
from src.webui.webui_manager import WebuiManager
from src.webui.components.agent_settings_tab import create_agent_settings_tab
from src.webui.components.browser_settings_tab import create_browser_settings_tab
from src.webui.components.browser_use_agent_tab import create_browser_use_agent_tab
theme_map = {
"Default": gr.themes.Default(),
@@ -54,10 +56,10 @@ def create_ui(theme_name="Ocean"):
ui_manager.add_components("agent_settings", create_agent_settings_tab(ui_manager))
with gr.TabItem("🌐 Browser Settings"):
pass
ui_manager.add_components("browser_settings", create_browser_settings_tab(ui_manager))
with gr.TabItem("🤖 Run Agent"):
pass
ui_manager.add_components("browser_use_agent", create_browser_use_agent_tab(ui_manager))
with gr.TabItem("🧐 Deep Research"):
pass

30
tests/test_controller.py
View File

@@ -46,21 +46,21 @@ async def test_controller_with_mcp():
from browser_use.controller.registry.views import ActionModel
test_server_config = {
# "playwright": {
# "command": "npx",
# "args": [
# "@playwright/mcp@latest",
# ],
# "transport": "stdio",
# },
# "filesystem": {
# "command": "npx",
# "args": [
# "-y",
# "@modelcontextprotocol/server-filesystem",
# "/Users/xxx/ai_workspace",
# ]
# },
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
],
"transport": "stdio",
},
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/xxx/ai_workspace",
]
},
"desktop-commander": {
"command": "npx",
"args": [