GrowthDigital/browser-use-webui

1import gradio as gr
2
3from src.webui.webui_manager import WebuiManager
4from src.webui.components.agent_settings_tab import create_agent_settings_tab
5from src.webui.components.browser_settings_tab import create_browser_settings_tab
6from src.webui.components.browser_use_agent_tab import create_browser_use_agent_tab
7from src.webui.components.deep_research_agent_tab import create_deep_research_agent_tab
8from src.webui.components.load_save_config_tab import create_load_save_config_tab
9
10theme_map = {
11    "Default": gr.themes.Default(),
12    "Soft": gr.themes.Soft(),
13    "Monochrome": gr.themes.Monochrome(),
14    "Glass": gr.themes.Glass(),
15    "Origin": gr.themes.Origin(),
16    "Citrus": gr.themes.Citrus(),
17    "Ocean": gr.themes.Ocean(),
18    "Base": gr.themes.Base()
19}
20
21
22def create_ui(theme_name="Ocean"):
23    css = """
24    .gradio-container {
25        width: 70vw !important; 
26        max-width: 70% !important; 
27        margin-left: auto !important;
28        margin-right: auto !important;
29        padding-top: 10px !important;
30    }
31    .header-text {
32        text-align: center;
33        margin-bottom: 20px;
34    }
35    .tab-header-text {
36        text-align: center;
37    }
38    .theme-section {
39        margin-bottom: 10px;
40        padding: 15px;
41        border-radius: 10px;
42    }
43    """
44
45    # dark mode in default
46    js_func = """
47    function refresh() {
48        const url = new URL(window.location);
49
50        if (url.searchParams.get('__theme') !== 'dark') {
51            url.searchParams.set('__theme', 'dark');
52            window.location.href = url.href;
53        }
54    }
55    """
56
57    ui_manager = WebuiManager()
58
59    with gr.Blocks(
60            title="Browser Use WebUI", theme=theme_map[theme_name], css=css, js=js_func,
61    ) as demo:
62        with gr.Row():
63            gr.Markdown(
64                """
65                # 🌐 Browser Use WebUI
66                ### Control your browser with AI assistance
67                """,
68                elem_classes=["header-text"],
69            )
70
71        with gr.Tabs() as tabs:
72            with gr.TabItem("⚙️ Agent Settings"):
73                create_agent_settings_tab(ui_manager)
74
75            with gr.TabItem("🌐 Browser Settings"):
76                create_browser_settings_tab(ui_manager)
77
78            with gr.TabItem("🤖 Run Agent"):
79                create_browser_use_agent_tab(ui_manager)
80
81            with gr.TabItem("🎁 Agent Marketplace"):
82                gr.Markdown(
83                    """
84                    ### Agents built on Browser-Use
85                    """,
86                    elem_classes=["tab-header-text"],
87                )
88                with gr.Tabs():
89                    with gr.TabItem("Deep Research"):
90                        create_deep_research_agent_tab(ui_manager)
91
92            with gr.TabItem("📁 Load & Save Config"):
93                create_load_save_config_tab(ui_manager)
94
95    return demo
96