| import gradio as gr |
| import os |
|
|
| from src.webui.webui_manager import WebuiManager |
| from src.webui.components.settings import create_settings_tab |
| from src.webui.components.browser_use_agent_tab import create_browser_use_agent_tab |
| from src.webui.components.deep_research_agent_tab import create_deep_research_agent_tab |
|
|
| |
| custom_glass_theme = gr.themes.Soft().set( |
| body_background_fill="linear-gradient(135deg, #1a1c2c 0%, #4a192c 100%)", |
| background_fill_primary="rgba(30, 30, 45, 0.7)", |
| background_fill_secondary="rgba(40, 40, 60, 0.5)", |
| border_color_accent="rgba(255, 255, 255, 0.2)", |
| border_color_primary="rgba(255, 255, 255, 0.1)", |
| color_accent="#764ba2", |
| color_accent_soft="#667eea", |
| button_primary_background_fill="linear-gradient(90deg, #667eea 0%, #764ba2 100%)", |
| button_primary_text_color="white", |
| ) |
|
|
| theme_map = { |
| "Default": gr.themes.Default(), |
| "Soft": gr.themes.Soft(), |
| "Monochrome": gr.themes.Monochrome(), |
| "Glass": custom_glass_theme, |
| } |
|
|
| def create_ui(theme_name="Glass"): |
| css = """ |
| .gradio-container { |
| width: 100vw !important; |
| max-width: 100% !important; |
| height: 100vh !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| overflow: hidden !important; |
| } |
| .main-row { |
| height: 100vh !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| } |
| .sidebar { |
| background: rgba(0, 0, 0, 0.4) !important; |
| backdrop-filter: blur(20px) !important; |
| height: 100vh !important; |
| padding: 24px !important; |
| border-right: 1px solid rgba(255, 255, 255, 0.1) !important; |
| overflow-y: auto !important; |
| } |
| .main-content { |
| background: transparent !important; |
| height: 100vh !important; |
| padding: 40px !important; |
| overflow-y: auto !important; |
| } |
| /* Fix accordion density in sidebar */ |
| .sidebar .gr-accordion { |
| background: transparent !important; |
| border: none !important; |
| } |
| .sidebar .gr-accordion-header { |
| background: rgba(255, 255, 255, 0.05) !important; |
| border-radius: 8px !important; |
| padding: 10px !important; |
| } |
| """ |
|
|
| ui_manager = WebuiManager() |
|
|
| with gr.Blocks(title="Cerebrow", theme=theme_map.get(theme_name, custom_glass_theme), css=css) as demo: |
| gr.Markdown("<h1 style='text-align: center; font-size: 3em; margin-bottom: 20px;'>🧠 Cerebrow</h1>") |
| |
| with gr.Column(elem_classes=["main-content"]): |
| with gr.Tabs() as main_tabs: |
| with gr.TabItem("⚙️ Settings", id="settings_tab"): |
| |
| agent_s, browser_s = create_settings_tab(ui_manager) |
|
|
| with gr.TabItem("🤖 Run Agent", id="agent_tab"): |
| create_browser_use_agent_tab(ui_manager, agent_s, browser_s) |
| |
| with gr.TabItem("🔍 Deep Research", id="research_tab"): |
| create_deep_research_agent_tab(ui_manager, agent_s, browser_s) |
|
|
| return demo |
|
|
