Update app.py from anycoder

app.py

@@ -2,139 +2,177 @@ import gradio as gr
 import time
 import random
 
-# --- THE ALCHEMICAL PALETTE (CSS) ---
-# Merging the organic, the royal, and the rugged into one stylesheet.
+# --- THE ALCHEMICAL PALETTE v4.0 (CSS) ---
+# Enhanced for the "Dreamscape" aesthetic
 custom_css = """
 /* --- CSS Variables: The Elements of Change --- */
 :root {
     /* The Deep Void */
-    --bg-deep: #050505;
-    --bg-panel: #0f0f13;
+    --bg-deep: #020204;
+    --bg-panel: rgba(15, 15, 19, 0.7);
     
-    /* Prince's Legacy (Purple Rain) */
+    /* Prince's Legacy */
     --prince-dark: #2e1065;
     --prince-main: #7c3aed;
     --prince-light: #c084fc;
     --prince-pink: #f472b6;
     
-    /* Wu-Tang Gold (C.R.E.A.M.) */
+    /* Wu-Tang Gold */
     --wu-gold: #fbbf24;
     --wu-amber: #d97706;
     
-    /* Attenborough's Green (Bioluminescence) */
+    /* Attenborough's Green */
     --nature-green: #10b981;
     --nature-glow: #34d399;
     
     /* Typography */
-    --font-display: 'Cinzel', serif; /* Mythical/Epic */
+    --font-display: 'Cinzel', serif;
     --font-tech: 'Space Grotesk', sans-serif;
-    --font-funk: 'Rye', serif; /* Western/Bold for Wu-Tang vibes */
+    --font-funk: 'Rye', serif;
     
-    /* Borders & Glows */
-    --border-glass: rgba(255, 255, 255, 0.1);
-    --glow-purple: 0 0 20px rgba(124, 58, 237, 0.5);
-    --glow-gold: 0 0 15px rgba(251, 191, 36, 0.4);
+    /* 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);
+    --scanline-color: rgba(0, 0, 0, 0.5);
 }
 
-/* --- Global Atmosphere --- */
+/* --- Global Atmosphere & Dreamscape --- */
 .gradio-container {
     background-color: var(--bg-deep) !important;
     color: #f3f4f6 !important;
     font-family: var(--font-tech);
-    background-image: 
-        radial-gradient(circle at 15% 50%, rgba(46, 16, 101, 0.2) 0%, transparent 50%), /* Purple Haze */
-        radial-gradient(circle at 85% 30%, rgba(251, 191, 36, 0.05) 0%, transparent 40%), /* Gold Dust */
-        linear-gradient(rgba(5, 5, 5, 0.95), rgba(5, 5, 5, 0.95)),
-        url('https://www.transparenttextures.com/patterns/cubes.png'); /* Digital Structure */
+    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; /* Let clicks pass through */
 }
 
-/* --- Typography & Headers --- */
+/* --- 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;
 }
 
-/* --- The Odyssey Header --- */
-.odyssey-header {
-    background: linear-gradient(90deg, rgba(46, 16, 101, 0.9), rgba(5, 5, 5, 0.95));
-    border-bottom: 2px solid var(--prince-main);
-    padding: 1.5rem 2rem;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+.glitch-text {
     position: relative;
-    overflow: hidden;
+    animation: glitch-skew 3s infinite linear alternate-reverse;
 }
 
-.odyssey-header::after {
-    content: '';
+.glitch-text::before, .glitch-text::after {
+    content: attr(data-text);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
-    height: 2px;
-    background: linear-gradient(90deg, var(--wu-gold), var(--prince-pink), var(--nature-green));
-    animation: flow 5s linear infinite;
+    height: 100%;
 }
 
-@keyframes flow {
-    0% { background-position: 0% 50%; }
-    100% { background-position: 100% 50%; }
+.glitch-text::before {
+    left: 2px;
+    text-shadow: -1px 0 var(--prince-pink);
+    clip: rect(44px, 450px, 56px, 0);
+    animation: glitch-anim 5s infinite linear alternate-reverse;
 }
 
-/* --- Navigation Tabs (The 36 Chambers) --- */
-.tabs {
-    border: none !important;
-    gap: 1rem;
+.glitch-text::after {
+    left: -2px;
+    text-shadow: -1px 0 var(--wu-gold);
+    clip: rect(44px, 450px, 56px, 0);
+    animation: glitch-anim2 5s infinite linear alternate-reverse;
 }
 
-.tab-nav {
-    display: flex !important;
-    gap: 0.5rem;
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--border-glass);
-    border-radius: 4px;
-    padding: 0.5rem;
-    backdrop-filter: blur(10px);
+@keyframes glitch-anim {
+    0% { clip: rect(12px, 9999px, 32px, 0); }
+    10% { clip: rect(64px, 9999px, 12px, 0); }
+    20% { clip: rect(32px, 9999px, 88px, 0); }
+    100% { clip: rect(12px, 9999px, 32px, 0); }
 }
 
-.tabitem {
-    border-radius: 4px !important;
-    color: var(--prince-light) !important;
-    font-family: var(--font-tech) !important;
-    font-weight: 600 !important;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    border: 1px solid transparent !important;
-    transition: all 0.3s ease;
+@keyframes glitch-anim2 {
+    0% { clip: rect(82px, 9999px, 2px, 0); }
+    10% { clip: rect(4px, 9999px, 92px, 0); }
+    20% { clip: rect(52px, 9999px, 22px, 0); }
+    100% { clip: rect(82px, 9999px, 2px, 0); }
 }
 
-.tabitem:hover {
-    background: rgba(124, 58, 237, 0.2) !important;
-    color: white !important;
-    border-color: var(--prince-main) !important;
-    box-shadow: var(--glow-purple);
+/* --- 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;
 }
 
-.tabitem[aria-selected="true"] {
-    background: linear-gradient(135deg, var(--prince-main), var(--wu-amber)) !important;
-    color: white !important;
-    border: none !important;
-    box-shadow: var(--glow-gold);
-    font-weight: 800 !important;
+/* --- 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; /* Terminal Green */
+    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;
 }
 
-/* --- Component Alchemy --- */
+.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; }
 
-/* The Code Editor (The Canvas) */
+/* The Code Editor */
 .ace_editor {
     border: 1px solid var(--border-glass) !important;
     border-radius: 8px !important;
-    background: #0a0a0c !important;
+    background: rgba(10, 10, 12, 0.8) !important;
     font-family: 'Fira Code', monospace !important;
-    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
+    box-shadow: 0 0 15px rgba(124, 58, 237, 0.1);
 }
 
-/* Buttons: The Triggers */
+/* Buttons: Enhanced Hover */
 .prince-btn {
     background: linear-gradient(135deg, var(--prince-dark), var(--prince-main)) !important;
     color: white !important;
@@ -142,12 +180,12 @@ h1, h2, h3 {
     text-transform: uppercase;
     font-weight: 700;
     letter-spacing: 1px;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .prince-btn:hover {
-    transform: scale(1.02);
-    box-shadow: 0 0 25px var(--prince-main);
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 10px 25px -5px var(--prince-main);
 }
 
 .wu-btn {
@@ -156,59 +194,81 @@ h1, h2, h3 {
     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: var(--glow-gold);
+    box-shadow: 0 0 30px var(--wu-gold);
+    transform: rotate(-1deg);
 }
 
-/* The Terminal (The Log of the Journey) */
-.terminal-log {
-    background: #000000 !important;
-    border: 1px solid var(--border-glass) !important;
-    border-left: 3px solid var(--nature-green);
-    font-family: 'Fira Code', monospace;
-    color: #d1d5db;
-    padding: 1rem;
-    border-radius: 4px;
-    min-height: 250px;
-    white-space: pre-wrap;
-    box-shadow: inset 0 0 30px rgba(16, 185, 129, 0.05);
-}
-
-.log-prince { color: var(--prince-pink); font-style: italic; }
-.log-wu { color: var(--wu-gold); font-weight: bold; text-transform: uppercase; }
-.log-nature { color: var(--nature-green); }
-.log-system { color: #6b7280; }
-
-/* The Cards (The Habitats) */
 .cyber-card {
     background: rgba(20, 20, 25, 0.6);
-    backdrop-filter: blur(12px);
+    backdrop-filter: blur(15px);
     border: 1px solid var(--border-glass);
     border-radius: 12px;
     padding: 1.5rem;
-    transition: border-color 0.3s;
+    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;
 }
 
-/* Glitter Effect */
-.glitter-text {
-    background: linear-gradient(to right, var(--wu-gold), var(--prince-pink), var(--wu-gold));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    background-size: 200% auto;
-    animation: glitter 3s linear infinite;
+.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 glitter {
-    to { background-position: 200% center; }
+@keyframes load {
+    0% { width: 0%; }
+    50% { width: 70%; }
+    100% { width: 100%; }
 }
 """
 
@@ -216,112 +276,105 @@ h1, h2, h3 {
 
 def run_odyssey(action_type: str, code: str, model: str, language: str):
     """
-    The core processor. It doesn't just run code; it transforms it.
+    The core processor. Returns HTML string for rich formatting.
     """
     if not code:
         gr.Warning("The canvas is blank, darling. Paint something first.")
-        return "[SYSTEM] ERROR: No input detected.", ""
+        return '<span class="log-system">[SYSTEM] ERROR: No input detected.</span>', ""
     
     logs = []
-    logs.append(f"[SYSTEM] INITIATING SEQUENCE: {action_type.upper()}")
-    logs.append(f"[SYSTEM] MODEL: {model} // LANGUAGE: {language.upper()}")
+    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 (The "Cooking")
-    time.sleep(random.uniform(0.5, 1.2))
+    # Simulate processing
+    time.sleep(random.uniform(0.3, 0.8))
     
     if action_type == "analyze":
-        # Attenborough Vibe
-        logs.append("[NATURE] The syntax trees begin to unfurl in the morning light...")
-        logs.append("[NATURE] We observe the function 'main' stalking its prey...")
-        time.sleep(0.5)
-        logs.append("[NATURE] A delicate balance of logic and entropy. Structure integrity: 98.4%.")
+        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. The species has been cataloged.")
+        gr.Info("Analysis complete.")
         
     elif action_type == "optimize":
-        # Prince Vibe
-        logs.append(f"[PRINCE] Ooh! I like this code. It's got a nasty groove.")
-        logs.append("[PRINCE] Let's take it to the bridge... refactoring the rhythm...")
-        time.sleep(0.8)
-        logs.append("[PRINCE] Exception: You sexy motherfucker. Optimization complete.")
-        result = code + "\n\n# --- THE PURPLE RAIN REMIX ---\n# Optimized for maximum funk and minimal latency.\n# Doves cry when this runs."
-        gr.Info("The Purple Rain Remix is ready to drop.")
+        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":
-        # Wu-Tang Vibe
-        logs.append("[WU-TANG] PROTECT YA NECK! Scanning for intruders...")
-        logs.append("[WU-TANG] Bring the ruckus! Patching vulnerabilities like Ghostface cuts a track...")
-        time.sleep(0.6)
-        logs.append("[WU-TANG] C.R.E.A.M. (Code Rules Everything Around Me). System secured.")
-        result = code + "\n\n# --- WU-TANG SECURITY PROTOCOL ---\n# 36 Chambers of Defense activated.\n# No weak links in the chain."
+        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.")
 
-    log_output = "\n".join(logs)
+    log_output = "<br>".join(logs)
     return log_output, result
 
 def create_habitat(name: str, framework: str, desc: str):
     """Founding a new ecosystem."""
     if not name:
-        gr.Warning("A name is required for this new species.")
-        return '<div style="text-align: center; padding: 4rem; color: var(--text-muted); opacity: 0.5;"><h3>Error</h3><p>Name required for genesis.</p></div>'
+        return '<div style="text-align: center; padding: 4rem; opacity: 0.5;"><h3>Error</h3><p>Name required for genesis.</p></div>'
     
-    # Generative HTML for the new project
     card = f"""
-    <div style="background: linear-gradient(145deg, rgba(46, 16, 101, 0.3), rgba(5, 5, 5, 0.8)); 
-                border: 1px solid var(--prince-main); 
-                padding: 1rem; 
-                border-radius: 8px; 
-                margin-bottom: 1rem; 
-                position: relative;
-                overflow: hidden;">
-        <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</div>
-        <div style="font-family: var(--font-display); font-size: 1.2rem; color: var(--prince-light); margin-bottom: 0.5rem;">{name}</div>
-        <div style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Framework: <span style="color: var(--nature-green);">{framework}</span></div>
-        <div style="font-style: italic; color: #9ca3af; font-size: 0.85rem;">"{desc}"</div>
+    <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 in the digital wild.")
+    gr.Info(f"Habitat '{name}' established.")
     return card
 
-# --- THE GRADIO 6 APP: THE ODYSSEY ENGINE ---
+# --- THE GRADIO 6 APP ---
 
-# Gradio 6 Syntax: gr.Blocks() takes NO parameters
 with gr.Blocks() as demo:
     
-    # HEADER: The Grand Unveiling
-    gr.HTML("""
+    # Background Canvas for the "Dreamscape"
+    # We place this first so it sits behind everything
+    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="glitter-text" style="font-size: 2.5rem; margin: 0;">The Odyssey Engine</h1>
-            <div style="display: flex; gap: 2rem; align-items: center;">
-                <span style="color: var(--nature-green); font-family: 'Fira Code', monospace;">v3.0 OMEGA // TRANSCENDENCE</span>
-                <span style="color: var(--wu-gold); font-family: var(--font-funk);">C.R.E.A.M. READY</span>
-                <span style="color: var(--prince-pink); font-style: italic;">"Let's go crazy"</span>
+            <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.0 NEURAL DREAMSCAPE</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: var(--wu-gold); color: black; padding: 0.5rem 1rem; 
+               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-funk); box-shadow: var(--glow-gold); transition: all 0.3s;"
-               onmouseover="this.style.transform='scale(1.05)'; this.style.boxShadow='0 0 30px var(--wu-amber)'"
-               onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 0 15px var(--wu-gold)'">
+                      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: The 36 Chambers
+    # NAVIGATION
     with gr.Tabs() as tabs:
         
-        # --- CHAMBER 1: THE FORGE (Code) ---
+        # --- CHAMBER 1: THE FORGE ---
         with gr.Tab("The Forge", id="forge"):
             with gr.Row():
                 with gr.Column(scale=3):
-                    gr.Markdown("### **The Alchemical Canvas**")
-                    gr.Markdown("*Paint your logic here. Watch it evolve.*")
+                    gr.Markdown("### **Alchemical Canvas**")
+                    gr.Markdown("*Paint your logic. Watch it breathe.*")
                     
                     code_editor = gr.Code(
                         label="Source Material",
@@ -336,30 +389,25 @@ with gr.Blocks() as demo:
                         lang_select = gr.Dropdown(
                             choices=["python", "javascript", "rust", "typescript", "go"],
                             value="python",
-                            label="Dialect (Language)",
+                            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="The Consciousness (Model)",
+                            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("The Purple Rain Remix", scale=1, elem_classes=["prince-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"])
 
                 with gr.Column(scale=2):
-                    gr.Markdown("### **The Transmission Log**")
-                    terminal = gr.Textbox(
-                        label="System Output",
-                        value="[SYSTEM] The Odyssey Engine is online. Awaiting input...",
-                        lines=12,
-                        interactive=False,
-                        elem_classes=["terminal-log"],
-                        show_label=False
+                    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(
@@ -371,7 +419,7 @@ with gr.Blocks() as demo:
                         elem_classes=["cyber-card"]
                     )
 
-        # --- CHAMBER 2: THE HABITATS (Projects) ---
+        # --- CHAMBER 2: THE HABITATS ---
         with gr.Tab("The Habitats", id="habitats"):
             gr.Markdown("### **Found New Ecosystems**")
             with gr.Row():
@@ -387,51 +435,51 @@ with gr.Blocks() as demo:
                 with gr.Column(scale=1):
                     gr.Markdown("### **Active Lifeforms**")
                     habitats_display = gr.HTML(
-                        value='<div style="text-align: center; padding: 4rem; color: var(--text-muted); opacity: 0.5;"><h3>The void is empty.</h3><p>Create life to populate this sector.</p></div>'
+                        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: THE C.R.E.A.M. (Analytics) ---
+        # --- 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: var(--text-muted); text-transform: uppercase; font-size: 0.8rem;">Compute Power</div>
-                    <div style="font-size: 3rem; font-weight: 800; color: var(--prince-light);">98.4%</div>
-                    <div style="font-size: 0.8rem; color: var(--prince-pink);">Efficiency: Maximum</div>
+                    <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: var(--text-muted); text-transform: uppercase; font-size: 0.8rem;">Cash Flow (Requests)</div>
-                    <div style="font-size: 3rem; font-weight: 800; color: var(--wu-gold);">2.4M</div>
+                    <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: var(--text-muted); text-transform: uppercase; font-size: 0.8rem;">System Pulse</div>
-                    <div style="font-size: 3rem; font-weight: 800; color: var(--nature-green);">12ms</div>
+                    <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 (Team) ---
+        # --- 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;">P</div>
+                    <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;">M</div>
+                    <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;">G</div>
+                    <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>
@@ -442,18 +490,18 @@ with gr.Blocks() as demo:
 
     # FOOTER
     gr.HTML("""
-    <div style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-glass); text-align: center; color: var(--text-muted); font-size: 0.8rem;">
+    <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: THE SYNAPSES ---
+    # --- EVENT LISTENERS ---
 
     # Dynamic Language Switching
     lang_select.change(lambda l: gr.Code(language=l), lang_select, code_editor)
 
     # The Forge Actions
-    # Gradio 6: Use api_visibility instead of api_name
+    # Note: We return HTML for the terminal now to support the colored logs
     btn_analyze.click(
         fn=run_odyssey,
         inputs=[gr.State("analyze"), code_editor, model_select, lang_select],
@@ -483,9 +531,143 @@ with gr.Blocks() as demo:
         api_visibility="public"
     )
 
-# --- LAUNCH: THE GRAND UNVEILING ---
-# Gradio 6 syntax: theme, css, js, head go in demo.launch()
-# Added Google Fonts import to head to ensure CSS variables work as intended
+# --- JAVASCRIPT: THE NEURAL DREAMSCAPE & SPLASH SCREEN ---
+custom_js = """
+// 1. SPLASH SCREEN LOGIC
+document.addEventListener("DOMContentLoaded", () => {
+    // Create splash screen
+    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);
+
+    // Remove splash after animation
+    setTimeout(() => {
+        splash.style.opacity = '0';
+        setTimeout(() => {
+            splash.remove();
+            startDreamscape(); // Start background animation only after load
+        }, 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 = [];
+    
+    // Mouse interaction
+    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'; // Prince Purple or Attenborough Green
+        }
+
+        update() {
+            this.x += this.vx;
+            this.y += this.vy;
+
+            // Bounce off edges
+            if (this.x < 0 || this.x > width) this.vx *= -1;
+            if (this.y < 0 || this.y > height) this.vy *= -1;
+
+            // Mouse interaction
+            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; // Push strength
+                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; // Density based on screen size
+        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 + ')'; // Purple connections
+                    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>
@@ -493,8 +675,9 @@ custom_head = """
 """
 
 demo.launch(
-    theme=gr.themes.Base(),  # Base theme to allow full CSS override
+    theme=gr.themes.Base(),
     css=custom_css,
+    js=custom_js,
     head=custom_head,
     footer_links=[{"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}]
 )