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 + """
    /* Custom Page Loading Screen */
    #loading-screen {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: linear-gradient(135deg, #0a0e27 0%, #1a0e3a 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 99999 !important;
        opacity: 1 !important;
        transition: opacity 0.5s ease-out !important;
    }
    
    #loading-screen.hidden {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    
    .ladybug-loader {
        font-size: 100px;
        animation: ladybug-bounce 1.5s ease-in-out infinite;
        filter: drop-shadow(0 0 20px #ff0088);
    }
    
    @keyframes ladybug-bounce {
        0%, 100% { 
            transform: translateY(0) rotate(0deg);
        }
        25% { 
            transform: translateY(-30px) rotate(-15deg);
        }
        50% { 
            transform: translateY(0) rotate(0deg);
        }
        75% { 
            transform: translateY(-15px) rotate(15deg);
        }
    }
    
    .loading-text {
        margin-top: 30px;
        color: #00ff88;
        font-family: 'Fira Code', monospace;
        font-size: 24px;
        letter-spacing: 4px;
        text-shadow: 0 0 10px #00ff88;
        animation: pulse-glow 2s ease-in-out infinite;
    }
    
    .loading-subtext {
        margin-top: 15px;
        color: #00ffff;
        font-family: 'Fira Code', monospace;
        font-size: 16px;
        letter-spacing: 2px;
        text-shadow: 0 0 8px #00ffff;
        opacity: 0.8;
    }
    
    .loading-dots {
        margin-top: 10px;
        display: flex;
        gap: 5px;
        justify-content: center;
    }
    
    .loading-dots span {
        color: #ff00ff;
        font-size: 30px;
        animation: dot-bounce 1.4s ease-in-out infinite;
        text-shadow: 0 0 10px #ff00ff;
    }
    
    .loading-dots span:nth-child(1) {
        animation-delay: 0s;
    }
    
    .loading-dots span:nth-child(2) {
        animation-delay: 0.2s;
    }
    
    .loading-dots span:nth-child(3) {
        animation-delay: 0.4s;
    }
    
    @keyframes dot-bounce {
        0%, 80%, 100% {
            transform: translateY(0);
            opacity: 0.5;
        }
        40% {
            transform: translateY(-20px);
            opacity: 1;
        }
    }
    
    @keyframes pulse-glow {
        0%, 100% { 
            opacity: 0.6;
            text-shadow: 0 0 10px #00ff88;
        }
        50% { 
            opacity: 1;
            text-shadow: 0 0 20px #00ff88, 0 0 30px #00ff88;
        }
    }
    
    .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 + loading screen
    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;
        }
        
        // Hide loading screen after page loads
        setTimeout(function() {
            const loadingScreen = document.getElementById('loading-screen');
            if (loadingScreen) {
                loadingScreen.classList.add('hidden');
                setTimeout(function() {
                    loadingScreen.style.display = 'none';
                }, 500);
            }
        }, 2000);
        
        // Also hide on any interaction
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                const loadingScreen = document.getElementById('loading-screen');
                if (loadingScreen) {
                    loadingScreen.classList.add('hidden');
                    setTimeout(function() {
                        loadingScreen.style.display = 'none';
                    }, 500);
                }
            }, 2000);
        });
    }
    """

    ui_manager = WebuiManager()

    with gr.Blocks(
            title="Bug Matrix SQA TESTING LAB", 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:
        # Loading Screen
        gr.HTML("""
            <div id="loading-screen">
                <div style="display: flex; gap: 40px; align-items: center; justify-content: center;">
                    <div class="ladybug-loader" style="animation-delay: 0s;">🐞</div>
                    <div class="ladybug-loader" style="animation-delay: 0.3s;">🐞</div>
                </div>
                <div class="loading-text" style="margin-top: 40px;">INITIALIZING BUG MATRIX...</div>
                <div class="loading-subtext">Loading Testing Environment</div>
                <div class="loading-dots">
                    <span>.</span><span>.</span><span>.</span>
                </div>
            </div>
        """)
        
        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