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 = '[CRITICAL] INPUT BUFFER EMPTY. ABORTING SEQUENCE. '
logs.append(error_msg)
gr.Warning("The canvas is blank, darling. Paint something first.")
return "[SYSTEM] INITIATING SEQUENCE: {action_type.upper()} ')
logs.append(f'[SYSTEM] MODEL: {model} // LANGUAGE: {language.upper()} ')
# Simulate processing
time.sleep(random.uniform(0.3, 0.8))
# 2. Action Logic
if action_type == "analyze":
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.4)
logs.append('[NATURE] Structure integrity: 98.4%. The species is cataloged. ')
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('[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.6)
logs.append('[PRINCE] Optimization complete. Doves cry when this runs. ')
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('[WU-TANG] PROTECT YA NECK! Scanning for intruders... ')
logs.append('[WU-TANG] Bring the ruckus! Patching vulnerabilities... ')
time.sleep(0.5)
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."
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 "
[FATAL ERROR] {error_trace}
'''
# 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"""
NEW LIFEFORM
{name}
Framework: {framework}
"{desc}"
"""
gr.Info(f"Habitat '{name}' established.")
return card
except Exception as e:
# Return error HTML to the display area
error_card = f'''
[GENESIS ERROR] {str(e)}
'''
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('
')
# HEADER
gr.HTML(f"""
""")
# 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='[SYSTEM] The Odyssey Engine is online. Awaiting input...
',
)
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='The void is empty. Create life to populate this sector.
Compute Power
99.9%
Efficiency: Transcendent
Cash Flow
∞
Dolla dolla bill, y'all
System Pulse
0.01ms
Bioluminescent
""")
# --- CHAMBER 4: THE CLAN ---
with gr.Tab("The Clan", id="clan"):
gr.HTML("""
P
The Architect
Visionary • Online
M
Method Man
Deployment • Smokin'
G
The Guardian
Security • Watchful
""")
# FOOTER
gr.HTML("""
© 2026 THE ODYSSEY ENGINE. Code is the canvas. Creativity is the color.
""")
# --- 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 = `
The Odyssey Engine
ESTABLISHING NEURAL LINK...
`;
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 = """