Spaces:
Running
Running
| 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> | |
| > System attempting recovery...<br> | |
| > 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 |