File size: 3,183 Bytes
c415c9a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 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
# Modern Glass theme with macOS-inspired aesthetics
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"):
# Captured settings to pass to agents
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
|