app.py

import gradio as gr
import time
import random

# --- THE ALCHEMICAL PALETTE v4.1 (CSS) ---
# Enhanced with Error Handling styles
custom_css = """
/* --- CSS Variables: The Elements of Change --- */
:root {
    /* The Deep Void */
    --bg-deep: #020204;
    --bg-panel: rgba(15, 15, 19, 0.7);
    
    /* Prince's Legacy */
    --prince-dark: #2e1065;
    --prince-main: #7c3aed;
    --prince-light: #c084fc;
    --prince-pink: #f472b6;
    
    /* Wu-Tang Gold */
    --wu-gold: #fbbf24;
    --wu-amber: #d97706;
    
    /* Attenborough's Green */
    --nature-green: #10b981;
    --nature-glow: #34d399;
    
    /* Error Red */
    --error-red: #ef4444;
    --error-glow: #b91c1c;

    /* Typography */
    --font-display: 'Cinzel', serif;
    --font-tech: 'Space Grotesk', sans-serif;
    --font-funk: 'Rye', serif;
    
    /* Effects */
    --border-glass: rgba(255, 255, 255, 0.08);
    --glow-purple: 0 0 20px rgba(124, 58, 237, 0.6);
    --glow-gold: 0 0 15px rgba(251, 191, 36, 0.5);
    --glow-error: 0 0 15px rgba(239, 68, 68, 0.6);
    --scanline-color: rgba(0, 0, 0, 0.5);
}

/* --- Global Atmosphere & Dreamscape --- */
.gradio-container {
    background-color: var(--bg-deep) !important;
    color: #f3f4f6 !important;
    font-family: var(--font-tech);
    overflow-x: hidden;
    position: relative;
}

/* The Neural Network Canvas Background */
#dreamscape-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* --- CRT Scanline Effect Overlay --- */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    ), linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.06),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.06)
    );
    background-size: 100% 2px, 3px 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.15;
}

/* --- Typography & Glitch Effects --- */
h1, h2, h3 {
    font-family: var(--font-display) !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.glitch-text {
    position: relative;
    animation: glitch-skew 3s infinite linear alternate-reverse;
}

/* --- The Odyssey Header --- */
.odyssey-header {
    background: linear-gradient(90deg, rgba(46, 16, 101, 0.8), rgba(2, 2, 4, 0.9));
    border-bottom: 2px solid var(--prince-main);
    padding: 2rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 10;
}

/* --- Component Alchemy --- */

/* The Terminal (The Log of the Journey) - CRT Style */
.terminal-log {
    background: #000505 !important;
    border: 1px solid var(--border-glass) !important;
    border-left: 3px solid var(--nature-green);
    font-family: 'Fira Code', monospace;
    color: #33ff33;
    padding: 1.5rem;
    border-radius: 4px;
    min-height: 300px;
    white-space: pre-wrap;
    box-shadow: inset 0 0 40px rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    line-height: 1.4;
    font-size: 0.9rem;
}

.log-prince { color: var(--prince-pink); text-shadow: 0 0 8px var(--prince-pink); }
.log-wu { color: var(--wu-gold); font-weight: bold; text-shadow: 0 0 8px var(--wu-gold); }
.log-nature { color: var(--nature-glow); }
.log-system { color: #6b7280; font-style: italic; }

/* NEW: Error Log Styling */
.log-error { 
    color: var(--error-red); 
    font-weight: bold; 
    text-shadow: var(--glow-error); 
    border-left: 3px solid var(--error-red);
    padding-left: 10px;
    background: rgba(239, 68, 68, 0.1);
    display: block;
    margin: 5px 0;
}

/* The Code Editor */
.ace_editor {
    border: 1px solid var(--border-glass) !important;
    border-radius: 8px !important;
    background: rgba(10, 10, 12, 0.8) !important;
    font-family: 'Fira Code', monospace !important;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.1);
}

/* Buttons: Enhanced Hover */
.prince-btn {
    background: linear-gradient(135deg, var(--prince-dark), var(--prince-main)) !important;
    color: white !important;
    border: 1px solid var(--prince-light) !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.prince-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 25px -5px var(--prince-main);
}

.wu-btn {
    background: transparent !important;
    color: var(--wu-gold) !important;
    border: 2px solid var(--wu-gold) !important;
    font-family: var(--font-funk) !important;
    text-shadow: 0 0 5px var(--wu-amber);
    transition: all 0.3s ease;
}

.wu-btn:hover {
    background: var(--wu-gold) !important;
    color: black !important;
    box-shadow: 0 0 30px var(--wu-gold);
    transform: rotate(-1deg);
}

.crash-btn {
    background: rgba(239, 68, 68, 0.2) !important;
    color: var(--error-red) !important;
    border: 1px solid var(--error-red) !important;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}
.crash-btn:hover {
    background: var(--error-red) !important;
    color: white !important;
    box-shadow: var(--glow-error);
}

.cyber-card {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.cyber-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: 0.5s;
}

.cyber-card:hover::before {
    left: 100%;
}

.cyber-card:hover {
    border-color: var(--prince-main);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- Splash Screen Overlay (Injected by JS) --- */
#splash-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #000;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease-out;
}

.loader-bar {
    width: 300px;
    height: 2px;
    background: #111;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.loader-progress {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: var(--prince-main);
    width: 0%;
    box-shadow: 0 0 10px var(--prince-main);
    animation: load 2s ease-in-out forwards;
}

@keyframes load {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}
"""

# --- THE LIVING MANIFESTO (LOGIC) ---

def run_odyssey(action_type: str, code: str, model: str, language: str):
    """
    The core processor with robust error handling.
    Returns HTML string for rich formatting in the terminal.
    """
    logs = []
    
    # --- ERROR HANDLING WRAPPER ---
    try:
        # 1. Input Validation
        if not code:
            # Instead of just a warning, we log it to the terminal AND warn the user
            error_msg = '<span class="log-error">[CRITICAL] INPUT BUFFER EMPTY. ABORTING SEQUENCE.</span>'
            logs.append(error_msg)
            gr.Warning("The canvas is blank, darling. Paint something first.")
            return "<br>".join(logs), ""
        
        logs.append(f'<span class="log-system">[SYSTEM] INITIATING SEQUENCE: {action_type.upper()}</span>')
        logs.append(f'<span class="log-system">[SYSTEM] MODEL: {model} // LANGUAGE: {language.upper()}</span>')
        
        # Simulate processing
        time.sleep(random.uniform(0.3, 0.8))
        
        # 2. Action Logic
        if action_type == "analyze":
            logs.append('<span class="log-nature">[NATURE] The syntax trees begin to unfurl in the morning light...</span>')
            logs.append('<span class="log-nature">[NATURE] We observe the function \'main\' stalking its prey...</span>')
            time.sleep(0.4)
            logs.append('<span class="log-nature">[NATURE] Structure integrity: 98.4%. The species is cataloged.</span>')
            result = f"# Analysis Report: The Digital Species\n# Habitat: {language}\n# Observer: {model}\n\n1. Behavior: Predictable yet elegant.\n2. Diet: Consumes memory efficiently.\n3. Status: Thriving in the compiler."
            gr.Info("Analysis complete.")
            
        elif action_type == "optimize":
            logs.append('<span class="log-prince">[PRINCE] Ooh! I like this code. It\'s got a nasty groove.</span>')
            logs.append('<span class="log-prince">[PRINCE] Let\'s take it to the bridge... refactoring the rhythm...</span>')
            time.sleep(0.6)
            logs.append('<span class="log-prince">[PRINCE] Optimization complete. Doves cry when this runs.</span>')
            result = code + "\n\n# --- THE PURPLE RAIN REMIX ---\n# Optimized for maximum funk."
            gr.Info("The Purple Rain Remix is ready.")
            
        elif action_type == "secure":
            logs.append('<span class="log-wu">[WU-TANG] PROTECT YA NECK! Scanning for intruders...</span>')
            logs.append('<span class="log-wu">[WU-TANG] Bring the ruckus! Patching vulnerabilities...</span>')
            time.sleep(0.5)
            logs.append('<span class="log-wu">[WU-TANG] C.R.E.A.M. (Code Rules Everything Around Me). System secured.</span>')
            result = code + "\n\n# --- WU-TANG SECURITY PROTOCOL ---\n# 36 Chambers of Defense activated."
            gr.Info("Protect Ya Neck! Security protocols active.")

        elif action_type == "crash":
            # --- DELIBERATE ERROR FOR TESTING ---
            raise ValueError("Simulated Neural Failure: Synapse Misfire Detected.")

        return "<br>".join(logs), result

    except Exception as e:
        # --- CATCH ALL ERRORS ---
        error_trace = str(e)
        error_html = f'''
        <span class="log-error">
            [FATAL ERROR] {error_trace}<br>
            &nbsp;&nbsp;> System attempting recovery...<br>
            &nbsp;&nbsp;> Recovery failed. Manual intervention required.
        </span>
        '''
        # Show Gradio native error modal AND log to terminal
        gr.Error(f"System Crash: {error_trace}")
        return error_html, f"# SYSTEM HALTED\n# ERROR: {error_trace}"

def create_habitat(name: str, framework: str, desc: str):
    """Founding a new ecosystem with error handling."""
    try:
        if not name:
            raise ValueError("Genesis requires a name.")
        
        card = f"""
        <div class="cyber-card" style="animation: fadeIn 0.5s ease-out;">
            <div style="position: absolute; top: 0; right: 0; background: var(--wu-gold); color: black; font-size: 0.7rem; padding: 2px 8px; font-weight: bold;">NEW LIFEFORM</div>
            <div style="font-family: var(--font-display); font-size: 1.4rem; color: var(--prince-light); margin-bottom: 0.5rem; text-shadow: 0 0 10px var(--prince-main);">{name}</div>
            <div style="color: #9ca3af; font-size: 0.9rem; margin-bottom: 0.5rem;">Framework: <span style="color: var(--nature-green); font-weight: bold;">{framework}</span></div>
            <div style="font-style: italic; color: #6b7280; font-size: 0.9rem;">"{desc}"</div>
        </div>
        """
        gr.Info(f"Habitat '{name}' established.")
        return card
    except Exception as e:
        # Return error HTML to the display area
        error_card = f'''
        <div style="padding: 1rem; border: 1px solid var(--error-red); background: rgba(239, 68, 68, 0.1); color: var(--error-red); font-family: monospace;">
            [GENESIS ERROR] {str(e)}
        </div>
        '''
        gr.Error("Failed to create habitat.")
        return error_card

# --- THE GRADIO 6 APP ---

with gr.Blocks() as demo:
    
    # Background Canvas for the "Dreamscape"
    gr.HTML('<canvas id="dreamscape-canvas"></canvas>')
    
    # CRT Overlay for retro vibe
    gr.HTML('<div class="crt-overlay"></div>')

    # HEADER
    gr.HTML(f"""
    <div class="odyssey-header">
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            <h1 class="glitch-text" data-text="THE ODYSSEY ENGINE" style="font-size: 2.8rem; margin: 0; color: white;">THE ODYSSEY ENGINE</h1>
            <div style="display: flex; gap: 2rem; align-items: center; font-size: 0.9rem;">
                <span style="color: var(--nature-green); font-family: 'Fira Code', monospace; text-shadow: 0 0 5px var(--nature-green);">v4.1 STABLE</span>
                <span style="color: var(--wu-gold); font-family: var(--font-funk);">REALITY: UNBOUND</span>
            </div>
        </div>
        <div style="text-align: right;">
            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" 
               style="background: transparent; border: 1px solid var(--prince-pink); color: var(--prince-pink); padding: 0.5rem 1.5rem; 
                      text-decoration: none; font-weight: bold; border-radius: 4px; 
                      font-family: var(--font-display); transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px;"
               onmouseover="this.style.background='var(--prince-pink)'; this.style.color='white'; this.style.boxShadow='var(--glow-purple)'"
               onmouseout="this.style.background='transparent'; this.style.color='var(--prince-pink)'; this.style.boxShadow='none'">
                Built with anycoder
            </a>
        </div>
    </div>
    """)

    # NAVIGATION
    with gr.Tabs() as tabs:
        
        # --- CHAMBER 1: THE FORGE ---
        with gr.Tab("The Forge", id="forge"):
            with gr.Row():
                with gr.Column(scale=3):
                    gr.Markdown("### **Alchemical Canvas**")
                    gr.Markdown("*Paint your logic. Watch it breathe.*")
                    
                    code_editor = gr.Code(
                        label="Source Material",
                        language="python",
                        value="# Begin your odyssey...\ndef purple_ritual():\n    return 'The dawn breaks on the digital horizon.'",
                        interactive=True,
                        lines=18,
                        elem_classes=["cyber-card"]
                    )
                    
                    with gr.Row():
                        lang_select = gr.Dropdown(
                            choices=["python", "javascript", "rust", "typescript", "go"],
                            value="python",
                            label="Dialect",
                            scale=1
                        )
                        model_select = gr.Dropdown(
                            choices=["GPT-4 Omni (The Architect)", "Claude 3.5 Sonnet (The Poet)", "Llama 3 (The Rebel)"],
                            value="GPT-4 Omni (The Architect)",
                            label="Consciousness",
                            scale=2
                        )
                    
                    with gr.Row():
                        btn_analyze = gr.Button("Inspect Species", variant="primary", scale=1, elem_classes=["wu-btn"])
                        btn_evolve = gr.Button("Purple Rain Remix", scale=1, elem_classes=["prince-btn"])
                        btn_secure = gr.Button("Protect Ya Neck", scale=1, elem_classes=["wu-btn"])
                        # NEW: Button to test error handling
                        btn_crash = gr.Button("Simulate Glitch", scale=1, elem_classes=["crash-btn"])

                with gr.Column(scale=2):
                    gr.Markdown("### **Transmission Log**")
                    terminal = gr.HTML(
                        value='<div class="terminal-log" id="terminal-content"><span class="log-system">[SYSTEM] The Odyssey Engine is online. Awaiting input...</span></div>',
                    )
                    
                    artifact = gr.Code(
                        label="The Artifact",
                        language="python",
                        value="// The transformed result manifests here...",
                        interactive=False,
                        lines=8,
                        elem_classes=["cyber-card"]
                    )

        # --- CHAMBER 2: THE HABITATS ---
        with gr.Tab("The Habitats", id="habitats"):
            gr.Markdown("### **Found New Ecosystems**")
            with gr.Row():
                with gr.Column(scale=1):
                    proj_name = gr.Textbox(label="Ecosystem Name", placeholder="e.g. Project Ouroboros")
                    proj_frame = gr.Dropdown(
                        label="Foundation",
                        choices=["Next.js Empire", "Go Micro-Kingdom", "Python Sanctuary"]
                    )
                    proj_desc = gr.Textbox(label="The Manifesto", lines=3, placeholder="Describe the purpose of this existence...")
                    btn_init = gr.Button("Genesis Event", variant="primary", elem_classes=["prince-btn"], size="lg")
                
                with gr.Column(scale=1):
                    gr.Markdown("### **Active Lifeforms**")
                    habitats_display = gr.HTML(
                        value='<div style="text-align: center; padding: 4rem; opacity: 0.5;"><h3>The void is empty.</h3><p>Create life to populate this sector.</p></div>'
                    )

        # --- CHAMBER 3: C.R.E.A.M. METRICS ---
        with gr.Tab("C.R.E.A.M. Metrics", id="cream"):
            gr.HTML("""
            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem;">
                <div class="cyber-card" style="border-top: 4px solid var(--prince-main);">
                    <div style="color: #9ca3af; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Compute Power</div>
                    <div style="font-size: 3.5rem; font-weight: 800; color: var(--prince-light); text-shadow: var(--glow-purple);">99.9%</div>
                    <div style="font-size: 0.8rem; color: var(--prince-pink);">Efficiency: Transcendent</div>
                </div>
                <div class="cyber-card" style="border-top: 4px solid var(--wu-gold);">
                    <div style="color: #9ca3af; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">Cash Flow</div>
                    <div style="font-size: 3.5rem; font-weight: 800; color: var(--wu-gold); text-shadow: var(--glow-gold);">∞</div>
                    <div style="font-size: 0.8rem; color: var(--wu-amber);">Dolla dolla bill, y'all</div>
                </div>
                <div class="cyber-card" style="border-top: 4px solid var(--nature-green);">
                    <div style="color: #9ca3af; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px;">System Pulse</div>
                    <div style="font-size: 3.5rem; font-weight: 800; color: var(--nature-green); text-shadow: 0 0 10px var(--nature-green);">0.01ms</div>
                    <div style="font-size: 0.8rem; color: var(--nature-glow);">Bioluminescent</div>
                </div>
            </div>
            """)

        # --- CHAMBER 4: THE CLAN ---
        with gr.Tab("The Clan", id="clan"):
            gr.HTML("""
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
                <div class="cyber-card" style="display: flex; align-items: center; gap: 1rem; border-left: 4px solid var(--prince-main);">
                    <div style="width: 50px; height: 50px; border-radius: 50%; background: var(--prince-dark); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--prince-pink); font-size: 1.2rem; box-shadow: var(--glow-purple);">P</div>
                    <div>
                        <div style="font-weight: bold; font-family: var(--font-display);">The Architect</div>
                        <div style="font-size: 0.8rem; color: var(--prince-light);">Visionary • Online</div>
                    </div>
                </div>
                <div class="cyber-card" style="display: flex; align-items: center; gap: 1rem; border-left: 4px solid var(--wu-gold);">
                    <div style="width: 50px; height: 50px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--wu-gold); font-size: 1.2rem; box-shadow: var(--glow-gold);">M</div>
                    <div>
                        <div style="font-weight: bold; font-family: var(--font-funk);">Method Man</div>
                        <div style="font-size: 0.8rem; color: var(--wu-amber);">Deployment • Smokin'</div>
                    </div>
                </div>
                <div class="cyber-card" style="display: flex; align-items: center; gap: 1rem; border-left: 4px solid var(--nature-green);">
                    <div style="width: 50px; height: 50px; border-radius: 50%; background: #022c22; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--nature-green); font-size: 1.2rem; box-shadow: 0 0 10px var(--nature-green);">G</div>
                    <div>
                        <div style="font-weight: bold; font-family: var(--font-display);">The Guardian</div>
                        <div style="font-size: 0.8rem; color: var(--nature-glow);">Security • Watchful</div>
                    </div>
                </div>
            </div>
            """)

    # FOOTER
    gr.HTML("""
    <div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-glass); text-align: center; color: #6b7280; font-size: 0.8rem;">
        <p>© 2026 THE ODYSSEY ENGINE. <span style="color: var(--prince-pink);">Code is the canvas.</span> <span style="color: var(--wu-gold);">Creativity is the color.</span></p>
    </div>
    """)

    # --- EVENT LISTENERS ---

    # Dynamic Language Switching
    lang_select.change(lambda l: gr.Code(language=l), lang_select, code_editor)

    # The Forge Actions
    btn_analyze.click(
        fn=run_odyssey,
        inputs=[gr.State("analyze"), code_editor, model_select, lang_select],
        outputs=[terminal, artifact],
        api_visibility="public"
    )
    
    btn_evolve.click(
        fn=run_odyssey,
        inputs=[gr.State("optimize"), code_editor, model_select, lang_select],
        outputs=[terminal, artifact],
        api_visibility="public"
    )
    
    btn_secure.click(
        fn=run_odyssey,
        inputs=[gr.State("secure"), code_editor, model_select, lang_select],
        outputs=[terminal, artifact],
        api_visibility="public"
    )

    # NEW: Test Error Handling
    btn_crash.click(
        fn=run_odyssey,
        inputs=[gr.State("crash"), code_editor, model_select, lang_select],
        outputs=[terminal, artifact],
        api_visibility="public"
    )

    # Habitat Creation
    btn_init.click(
        fn=create_habitat,
        inputs=[proj_name, proj_frame, proj_desc],
        outputs=[habitats_display],
        api_visibility="public"
    )

# --- JAVASCRIPT: THE NEURAL DREAMSCAPE & SPLASH SCREEN ---
custom_js = """
// 1. SPLASH SCREEN LOGIC
document.addEventListener("DOMContentLoaded", () => {
    const splash = document.createElement('div');
    splash.id = 'splash-screen';
    splash.innerHTML = `
        <h1 style="color: #7c3aed; font-family: 'Cinzel', serif; font-size: 3rem; letter-spacing: 0.2rem; text-transform: uppercase; text-shadow: 0 0 20px #7c3aed;">The Odyssey Engine</h1>
        <div style="color: #fbbf24; font-family: 'Space Grotesk', sans-serif; margin-top: 10px; letter-spacing: 2px;">ESTABLISHING NEURAL LINK...</div>
        <div class="loader-bar"><div class="loader-progress"></div></div>
    `;
    document.body.appendChild(splash);

    setTimeout(() => {
        splash.style.opacity = '0';
        setTimeout(() => {
            splash.remove();
            startDreamscape();
        }, 1000);
    }, 2500);
});

// 2. NEURAL DREAMSCAPE (PARTICLE SYSTEM)
function startDreamscape() {
    const canvas = document.getElementById('dreamscape-canvas');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    let width, height;
    let particles = [];
    
    const mouse = { x: null, y: null, radius: 150 };
    
    window.addEventListener('mousemove', (e) => {
        mouse.x = e.x;
        mouse.y = e.y;
    });

    function resize() {
        width = canvas.width = window.innerWidth;
        height = canvas.height = window.innerHeight;
        initParticles();
    }

    class Particle {
        constructor() {
            this.x = Math.random() * width;
            this.y = Math.random() * height;
            this.vx = (Math.random() - 0.5) * 0.5;
            this.vy = (Math.random() - 0.5) * 0.5;
            this.size = Math.random() * 2;
            this.color = Math.random() > 0.5 ? '#7c3aed' : '#10b981';
        }

        update() {
            this.x += this.vx;
            this.y += this.vy;

            if (this.x < 0 || this.x > width) this.vx *= -1;
            if (this.y < 0 || this.y > height) this.vy *= -1;

            const dx = mouse.x - this.x;
            const dy = mouse.y - this.y;
            const distance = Math.sqrt(dx*dx + dy*dy);
            
            if (distance < mouse.radius) {
                const forceDirectionX = dx / distance;
                const forceDirectionY = dy / distance;
                const force = (mouse.radius - distance) / mouse.radius;
                const directionX = forceDirectionX * force * 3;
                const directionY = forceDirectionY * force * 3;
                
                this.x -= directionX;
                this.y -= directionY;
            }
        }

        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.globalAlpha = 0.6;
            ctx.fill();
        }
    }

    function initParticles() {
        particles = [];
        const numberOfParticles = (width * height) / 15000;
        for (let i = 0; i < numberOfParticles; i++) {
            particles.push(new Particle());
        }
    }

    function connect() {
        let opacityValue = 1;
        for (let a = 0; a < particles.length; a++) {
            for (let b = a; b < particles.length; b++) {
                const distance = ((particles[a].x - particles[b].x) * (particles[a].x - particles[b].x)) + 
                                 ((particles[a].y - particles[b].y) * (particles[a].y - particles[b].y));
                
                if (distance < (width/7) * (height/7)) {
                    opacityValue = 1 - (distance / 20000);
                    ctx.strokeStyle = 'rgba(124, 58, 237,' + opacityValue * 0.2 + ')';
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    ctx.moveTo(particles[a].x, particles[a].y);
                    ctx.lineTo(particles[b].x, particles[b].y);
                    ctx.stroke();
                }
            }
        }
    }

    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, width, height);
        
        for (let i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();
        }
        connect();
    }

    window.addEventListener('resize', resize);
    resize();
    animate();
}
"""

# --- LAUNCH ---
custom_head = """
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Fira+Code:wght@400;500&family=Rye&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
"""

demo.launch(
    theme=gr.themes.Base(),
    css