src/webui/interface.py

"""
🤖 Fagun Browser Automation Testing Agent - Web Interface
=========================================================

Web UI components for the Fagun Browser Automation Testing Agent.

Author: Mejbaur Bahar Fagun
Role: Software Engineer in Test
LinkedIn: https://www.linkedin.com/in/mejbaur/
"""

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
from src.webui.hacker_theme import get_hacker_theme

theme_map = {
    "Default": gr.themes.Default(),
    "Soft": gr.themes.Soft(),
    "Monochrome": gr.themes.Monochrome(),
    "Glass": gr.themes.Glass(),
    "Origin": gr.themes.Origin(),
    "Citrus": gr.themes.Citrus(),
    "Ocean": gr.themes.Ocean(),
    "Base": gr.themes.Base(),
    "Hacker": get_hacker_theme()[0]
}


def create_ui(theme_name="Hacker"):
    # Get hacker theme CSS
    hacker_theme, hacker_css = get_hacker_theme()
    
    css = hacker_css + """
    .gradio-container {
        width: 85vw !important; 
        max-width: 85% !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 120px !important;
    }
    .header-text {
        text-align: center;
        margin-bottom: 20px;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background: linear-gradient(135deg, #0a0e27 0%, #1a0e3a 100%) !important;
        padding: 25px 0 !important;
        border-bottom: 3px solid #00ff88 !important;
        box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        line-height: 1.2 !important;
    }
    .header-text h1 {
        margin: 0 0 10px 0 !important;
        font-size: 2.5em !important;
        line-height: 1.1 !important;
    }
    .header-text h3 {
        margin: 0 !important;
        font-size: 1.2em !important;
        line-height: 1.2 !important;
        opacity: 0.9 !important;
    }
    .tab-header-text {
        text-align: center;
    }
    .theme-section {
        margin-bottom: 10px;
        padding: 15px;
        border-radius: 10px;
    }
    /* Hide default Gradio footer */
    .gradio-container footer {
        display: none !important;
    }
    .gradio-container .footer {
        display: none !important;
    }
    /* Override hide-container behavior for header */
    .hide-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* Ensure header is always visible */
    .header-text, .header-text * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
    /* Override any Gradio hiding classes for header */
    .header-text.hide-container,
    .header-text.svelte-11xb1hd,
    .header-text.padded,
    .header-text.auto-margin {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }
    """

    # dark mode in default
    js_func = """
    function refresh() {
        const url = new URL(window.location);

        if (url.searchParams.get('__theme') !== 'dark') {
            url.searchParams.set('__theme', 'dark');
            window.location.href = url.href;
        }
    }
    """

    ui_manager = WebuiManager()

    with gr.Blocks(
            title="Fagun Browser Automation Testing Agent", theme=theme_map[theme_name], css=css, js=js_func,
            head="""
            <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            """,
    ) as demo:
        with gr.Row():
            gr.HTML(
                """
                <div class="header-text matrix-text">
                    <h1 style="font-size: 3em; margin: 0; background: linear-gradient(90deg, #00ff88, #00ffff, #ff00ff, #00ff88); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: matrix-rain 3s linear infinite;">
                        ⚡ Bug Matrix SQA TESTING LAB ⚡
                    </h1>
                    <h3 style="margin: 10px 0 0 0; color: #00ffff; text-shadow: 0 0 10px #00ffff; letter-spacing: 3px;">
                        [ BROWSER AUTOMATION • SECURITY TESTING • AI POWERED ]
                    </h3>
                    <p style="margin: 5px 0 0 0; color: #00ff88; font-size: 0.9em; letter-spacing: 2px;">
                        >> SYSTEM STATUS: <span style="color: #00ffff; text-shadow: 0 0 5px #00ffff;">ONLINE</span> <<
                    </p>
                </div>
                """,
                elem_classes=["header-text"],
            )

        with gr.Tabs() as tabs:
            with gr.TabItem("⚙️ AGENT CONFIG"):
                create_agent_settings_tab(ui_manager)

            with gr.TabItem("🌐 BROWSER SETUP"):
                create_browser_settings_tab(ui_manager)

            with gr.TabItem("⚡ EXECUTE MISSION"):
                create_browser_use_agent_tab(ui_manager)

        # Custom Footer
        with gr.Row():
            gr.HTML(
                """
                <div style="text-align: center; margin-top: 30px; padding: 20px; border-top: 2px solid #00ff88; background: linear-gradient(135deg, rgba(0, 255, 136, 0.05), rgba(0, 255, 255, 0.05));">
                    <p style="margin: 10px 0; color: #00ffff; font-size: 0.9em; letter-spacing: 1px;">
                        >> CONNECT WITH THE ARCHITECT <<
                    </p>
                    <p style="margin: 10px 0; font-weight: bold; font-size: 1.3em; background: linear-gradient(90deg, #00ff88, #00ffff, #ff00ff, #00ff88); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: matrix-rain 3s linear infinite; letter-spacing: 2px;">
                        MEJBAUR BAHAR FAGUN
                    </p>
                    <p style="margin: 10px 0; color: #ff00ff; font-size: 1em; text-shadow: 0 0 5px #ff00ff; letter-spacing: 1px;">
                        [ SOFTWARE ENGINEER IN TEST ]
                    </p>
                    <p style="margin: 15px 0;">
                        <a href="https://www.linkedin.com/in/mejbaur/" target="_blank" style="text-decoration: none; color: #00ff88; font-weight: 600; padding: 10px 20px; border: 2px solid #00ff88; border-radius: 6px; display: inline-block; transition: all 0.3s ease; letter-spacing: 1px;">
                            🔗 LINKEDIN PROFILE
                        </a>
                    </p>
                    <p style="margin: 10px 0; color: #00ffff; font-size: 0.8em; font-family: 'Fira Code', monospace;">
                        >> SYSTEM BUILD: v2.0.0 | STATUS: OPERATIONAL | UPTIME: 99.9% <<
                    </p>
                </div>
                <style>
                    @keyframes gradientShift {
                        0% { background-position: 0% 50%; }
                        50% { background-position: 100% 50%; }
                        100% { background-position: 0% 50%; }
                    }
                </style>
                """
            )

    return demo