Spaces:

XXXMARK
/

anycoder-e1e4a867

Running

App Files Files Community

XXXMARK commited on Feb 4

Commit

918bcc1

verified ·

1 Parent(s): a0314d6

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +741 -618

index.html CHANGED Viewed

@@ -1,642 +1,765 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FLUX KLEIN | Next-Gen Generative Interface</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --neon-cyan: #00f3ff;
-            --neon-pink: #ff00aa;
-            --neon-purple: #bc13fe;
-            --glass-bg: rgba(10, 10, 15, 0.7);
-            --glass-border: rgba(255, 255, 255, 0.1);
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: #050505;
-            color: #e0e0e0;
-            overflow: hidden;
-        }
-        h1, h2, h3, .brand-font {
-            font-family: 'Space Grotesk', sans-serif;
-        }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #0a0a0a;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #333;
-            border-radius: 3px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--neon-cyan);
-        }
-        /* Glassmorphism Utilities */
-        .glass-panel {
-            background: var(--glass-bg);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--glass-border);
-            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
-        }
-        .glass-input {
-            background: rgba(0, 0, 0, 0.4);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: all 0.3s ease;
-        }
-        .glass-input:focus {
-            border-color: var(--neon-cyan);
-            box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
-            outline: none;
-        }
-        /* Animations */
-        @keyframes pulse-glow {
-            0%, 100% { box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); }
-            50% { box-shadow: 0 0 25px rgba(0, 243, 255, 0.6); }
-        }
-        @keyframes scanline {
-            0% { transform: translateY(-100%); }
-            100% { transform: translateY(100%); }
-        }
-        .scanline-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
-            background-size: 100% 4px;
-            pointer-events: none;
-            z-index: 10;
-        }
-        .crt-flicker {
-            animation: flicker 0.15s infinite;
-        }
-        @keyframes flicker {
-            0% { opacity: 0.97; }
-            50% { opacity: 1; }
-            100% { opacity: 0.98; }
-        }
-        /* Loader */
-        .loader-ring {
-            display: inline-block;
-            position: relative;
-            width: 24px;
-            height: 24px;
-        }
-        .loader-ring div {
-            box-sizing: border-box;
-            display: block;
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            margin: 2px;
-            border: 2px solid var(--neon-cyan);
-            border-radius: 50%;
-            animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-            border-color: var(--neon-cyan) transparent transparent transparent;
-        }
-        .loader-ring div:nth-child(1) { animation-delay: -0.45s; }
-        .loader-ring div:nth-child(2) { animation-delay: -0.3s; }
-        .loader-ring div:nth-child(3) { animation-delay: -0.15s; }
-        @keyframes loader-ring {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Range Slider Styling */
-        input[type=range] {
-            -webkit-appearance: none;
-            width: 100%;
-            background: transparent;
-        }
-        input[type=range]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            height: 16px;
-            width: 16px;
-            border-radius: 50%;
-            background: var(--neon-cyan);
-            cursor: pointer;
-            margin-top: -6px;
-            box-shadow: 0 0 10px var(--neon-cyan);
-        }
-        input[type=range]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 4px;
-            cursor: pointer;
-            background: #333;
-            border-radius: 2px;
-        }
-        /* Grid Background */
-        .bg-grid {
-            background-size: 40px 40px;
-            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-                              linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-            mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
-        }
-        .layer-active {
-            border-color: var(--neon-cyan);
-            background: rgba(0, 243, 255, 0.1);
-        }
-    </style>
-</head>
-<body class="h-screen w-screen flex flex-col text-sm selection:bg-cyan-500 selection:text-black">
-    <!-- Background Canvas for Particles -->
-    <canvas id="bgCanvas" class="fixed top-0 left-0 w-full h-full -z-10"></canvas>
-    <div class="fixed top-0 left-0 w-full h-full bg-grid -z-10 pointer-events-none"></div>
-    <!-- Header -->
-    <header class="h-16 glass-panel border-b border-white/10 flex items-center justify-between px-6 z-20 shrink-0">
-        <div class="flex items-center gap-3">
-            <div class="w-8 h-8 rounded bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-[0_0_15px_rgba(0,243,255,0.5)]">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
-                </svg>
             </div>
             <div>
-                <h1 class="text-xl font-bold tracking-wider text-white">FLUX <span class="text-cyan-400">KLEIN</span></h1>
-                <p class="text-[10px] text-gray-400 uppercase tracking-[0.2em]">Generative Synthesis Core v4.2</p>
             </div>
-        </div>
-        <div class="hidden md:flex items-center gap-6">
-             <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-gray-400 hover:text-cyan-400 transition-colors border border-gray-700 px-3 py-1 rounded-full hover:border-cyan-400">
-                Built with anycoder
-            </a>
-            <div class="flex items-center gap-2 text-xs text-gray-400">
-                <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
-                SYSTEM ONLINE
             </div>
         </div>
-    </header>
-    <!-- Main Workspace -->
-    <main class="flex-1 flex overflow-hidden relative z-10">
-        <!-- Left Control Panel -->
-        <aside class="w-80 glass-panel border-r border-white/10 flex flex-col overflow-y-auto shrink-0 transition-all duration-300" id="sidebar">
-            <!-- Prompt Section -->
-            <div class="p-5 border-b border-white/5">
-                <label class="flex justify-between text-xs font-semibold text-cyan-400 mb-2 uppercase tracking-wider">
-                    <span>Input Prompt</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                </label>
-                <textarea id="promptInput" class="w-full h-24 glass-input rounded p-3 text-gray-200 placeholder-gray-600 resize-none focus:ring-1 focus:ring-cyan-500" placeholder="Describe your vision here... (e.g., Cyberpunk city in neon rain)"></textarea>
-                <div class="mt-3 flex gap-2">
-                    <button onclick="randomizePrompt()" class="flex-1 py-1.5 text-xs border border-white/10 rounded hover:bg-white/5 text-gray-400 transition-colors">Randomize</button>
-                    <button onclick="clearPrompt()" class="flex-1 py-1.5 text-xs border border-white/10 rounded hover:bg-white/5 text-gray-400 transition-colors">Clear</button>
-                </div>
             </div>
-            <!-- Reference Layers -->
-            <div class="p-5 border-b border-white/5">
-                <label class="text-xs font-semibold text-purple-400 mb-3 uppercase tracking-wider block">Reference Layers</label>
-                <div class="space-y-3">
-                    <!-- Layer Main -->
-                    <div class="group relative">
-                        <div class="flex items-center justify-between mb-1">
-                            <span class="text-xs text-gray-300">Main Structure</span>
-                            <span class="text-[10px] text-gray-500" id="main-val">80%</span>
-                        </div>
-                        <input type="range" min="0" max="100" value="80" class="w-full" oninput="updateLayer('main', this.value)">
-                        <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
-                            <div id="bar-main" class="h-full bg-purple-500 transition-all duration-100" style="width: 80%"></div>
-                        </div>
-                    </div>
-                    <!-- Layer Aux A -->
-                    <div class="group relative">
-                        <div class="flex items-center justify-between mb-1">
-                            <span class="text-xs text-gray-300">Auxiliary A (Texture)</span>
-                            <span class="text-[10px] text-gray-500" id="auxa-val">45%</span>
-                        </div>
-                        <input type="range" min="0" max="100" value="45" class="w-full" oninput="updateLayer('auxa', this.value)">
-                        <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
-                            <div id="bar-auxa" class="h-full bg-pink-500 transition-all duration-100" style="width: 45%"></div>
-                        </div>
-                    </div>
-                    <!-- Layer Aux B -->
-                    <div class="group relative">
-                        <div class="flex items-center justify-between mb-1">
-                            <span class="text-xs text-gray-300">Auxiliary B (Lighting)</span>
-                            <span class="text-[10px] text-gray-500" id="auxb-val">60%</span>
-                        </div>
-                        <input type="range" min="0" max="100" value="60" class="w-full" oninput="updateLayer('auxb', this.value)">
-                        <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
-                            <div id="bar-auxb" class="h-full bg-cyan-500 transition-all duration-100" style="width: 60%"></div>
-                        </div>
-                    </div>
-                </div>
             </div>
-            <!-- Advanced Params -->
-            <div class="p-5">
-                 <label class="text-xs font-semibold text-gray-400 mb-3 uppercase tracking-wider block">Synthesis Parameters</label>
-                 <div class="grid grid-cols-2 gap-3">
-                     <div>
-                         <label class="text-[10px] text-gray-500 block mb-1">Seed</label>
-                         <input type="number" id="seedInput" class="w-full glass-input rounded px-2 py-1 text-xs text-gray-300" value="10294">
-                     </div>
-                     <div>
-                         <label class="text-[10px] text-gray-500 block mb-1">Guidance</label>
-                         <select class="w-full glass-input rounded px-2 py-1 text-xs text-gray-300 bg-black">
-                             <option>Standard</option>
-                             <option>High Fidelity</option>
-                             <option>Abstract</option>
-                         </select>
-                     </div>
-                 </div>
             </div>
-            <div class="mt-auto p-5">
-                <button id="generateBtn" onclick="startGeneration()" class="w-full group relative overflow-hidden rounded bg-gradient-to-r from-cyan-600 to-blue-600 p-3 text-white font-bold tracking-widest uppercase transition-all hover:shadow-[0_0_20px_rgba(0,243,255,0.4)] active:scale-95">
-                    <span class="relative z-10 flex items-center justify-center gap-2">
-                        Execute Synthesis
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /></svg>
-                    </span>
-                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
-                </button>
-            </div>
-        </aside>
-        <!-- Center Canvas Area -->
-        <section class="flex-1 relative bg-black/40 flex flex-col">
-            <!-- Toolbar -->
-            <div class="h-10 border-b border-white/5 flex items-center justify-between px-4 bg-black/20">
-                <div class="flex items-center gap-4">
-                    <span class="text-xs text-gray-500">CANVAS: <span class="text-gray-300">1024x1024</span></span>
-                    <span class="text-xs text-gray-500">MODE: <span class="text-cyan-400">REALTIME</span></span>
-                </div>
-                <div class="flex items-center gap-2">
-                    <button onclick="downloadImage()" class="p-1.5 rounded hover:bg-white/10 text-gray-400 hover:text-white transition-colors" title="Download">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
-                    </button>
-                    <button onclick="resetCanvas()" class="p-1.5 rounded hover:bg-white/10 text-gray-400 hover:text-white transition-colors" title="Reset">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
-                    </button>
-                </div>
-            </div>
-            <!-- The Canvas -->
-            <div class="flex-1 relative flex items-center justify-center p-8 overflow-hidden" id="canvasContainer">
-                <div class="relative w-full max-w-3xl aspect-square shadow-2xl border border-white/10 bg-black group">
-                    <!-- Scanlines -->
-                    <div class="scanline-overlay opacity-20"></div>
-                    <!-- Actual Drawing Canvas -->
-                    <canvas id="artCanvas" width="1024" height="1024" class="w-full h-full object-contain crt-flicker"></canvas>
-                    <!-- Overlay UI -->
-                    <div id="canvasOverlay" class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm transition-opacity duration-500 z-20">
-                        <div class="text-cyan-400 font-mono text-xs mb-2 tracking-widest">READY TO INITIALIZE</div>
-                        <div class="text-gray-500 text-xs">Awaiting Input Stream...</div>
-                    </div>
-                    <!-- Loading State -->
-                    <div id="loadingState" class="absolute inset-0 flex flex-col items-center justify-center bg-black/90 z-30 hidden">
-                        <div class="loader-ring mb-4"><div></div><div></div><div></div><div></div></div>
-                        <div class="text-cyan-400 font-mono text-xs tracking-widest animate-pulse">SYNTHESIZING NEURAL PATHWAYS...</div>
-                        <div class="w-64 h-1 bg-gray-800 mt-4 rounded overflow-hidden">
-                            <div id="progressBar" class="h-full bg-cyan-500 w-0 transition-all duration-100"></div>
-                        </div>
-                        <div id="statusText" class="text-[10px] text-gray-500 mt-2 font-mono">Initializing tensors...</div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <!-- Right Archives Panel -->
-        <aside class="w-64 glass-panel border-l border-white/10 flex flex-col shrink-0 hidden lg:flex">
-            <div class="p-4 border-b border-white/10 flex justify-between items-center">
-                <h3 class="text-xs font-bold text-gray-300 uppercase tracking-wider">Archives</h3>
-                <span class="text-[10px] bg-white/10 px-2 py-0.5 rounded text-gray-400">12 Items</span>
             </div>
-            <div class="flex-1 overflow-y-auto p-3 space-y-3" id="archiveList">
-                <!-- Archive Item Template -->
-                <div class="group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all">
-                    <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
-                    <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
-                        <div class="text-[10px] text-white truncate">Neon Genesis</div>
-                        <div class="text-[9px] text-gray-500">02:14 PM</div>
-                    </div>
-                </div>
-                 <div class="group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all">
-                    <img src="https://images.unsplash.com/photo-1633167606207-d840b5070fc2?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
-                    <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
-                        <div class="text-[10px] text-white truncate">Quantum Flux</div>
-                        <div class="text-[9px] text-gray-500">Yesterday</div>
-                    </div>
-                </div>
             </div>
-        </aside>
-    </main>
-    <script>
-        // --- Configuration & State ---
-        const canvas = document.getElementById('artCanvas');
-        const ctx = canvas.getContext('2d');
-        const bgCanvas = document.getElementById('bgCanvas');
-        const bgCtx = bgCanvas.getContext('2d');
-        let state = {
-            prompt: '',
-            layers: {
-                main: 80,
-                auxa: 45,
-                auxb: 60
-            },
-            seed: 10294,
-            isGenerating: false
-        };
-        const prompts = [
-            "Cybernetic organism in a rain-soaked metropolis",
-            "Abstract geometric landscape floating in void",
-            "Bioluminescent forest at midnight",
-            "Retro-futuristic car speeding through neon tunnel",
-            "Crystalline structure reflecting aurora borealis"
-        ];
-        // --- Initialization ---
-        function resizeCanvases() {
-            bgCanvas.width = window.innerWidth;
-            bgCanvas.height = window.innerHeight;
-            // Art canvas stays fixed logical size but scales via CSS
-        }
-        window.addEventListener('resize', resizeCanvases);
-        resizeCanvases();
-        // --- Particle System for Background ---
-        const particles = [];
-        class Particle {
-            constructor() {
-                this.x = Math.random() * bgCanvas.width;
-                this.y = Math.random() * bgCanvas.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 ? 'rgba(0, 243, 255, ' : 'rgba(188, 19, 254, ';
-            }
-            update() {
-                this.x += this.vx;
-                this.y += this.vy;
-                if (this.x < 0 || this.x > bgCanvas.width) this.vx *= -1;
-                if (this.y < 0 || this.y > bgCanvas.height) this.vy *= -1;
-            }
-            draw() {
-                bgCtx.beginPath();
-                bgCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-                bgCtx.fillStyle = this.color + (Math.random() * 0.5 + 0.1) + ')';
-                bgCtx.fill();
-            }
-        }
-        for (let i = 0; i < 50; i++) particles.push(new Particle());
-        function animateBg() {
-            bgCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
-            particles.forEach(p => {
-                p.update();
-                p.draw();
-            });
-            // Draw connecting lines
-            bgCtx.strokeStyle = 'rgba(255,255,255,0.03)';
-            bgCtx.lineWidth = 1;
-            for(let i=0; i<particles.length; i++) {
-                for(let j=i; j<particles.length; j++) {
-                    const dx = particles[i].x - particles[j].x;
-                    const dy = particles[i].y - particles[j].y;
-                    const dist = Math.sqrt(dx*dx + dy*dy);
-                    if(dist < 150) {
-                        bgCtx.beginPath();
-                        bgCtx.moveTo(particles[i].x, particles[i].y);
-                        bgCtx.lineTo(particles[j].x, particles[j].y);
-                        bgCtx.stroke();
-                    }
-                }
-            }
-            requestAnimationFrame(animateBg);
-        }
-        animateBg();
-        // --- UI Logic ---
-        function randomizePrompt() {
-            const r = Math.floor(Math.random() * prompts.length);
-            document.getElementById('promptInput').value = prompts[r];
-        }
-        function clearPrompt() {
-            document.getElementById('promptInput').value = '';
-        }
-        function updateLayer(id, val) {
-            state.layers[id] = parseInt(val);
-            document.getElementById(`${id}-val`).innerText = val + '%';
-            document.getElementById(`bar-${id}`).style.width = val + '%';
-        }
-        // --- Generative Art Engine (The Core) ---
-        // Seeded Random Number Generator
-        function seededRandom(seed) {
-            var x = Math.sin(seed++) * 10000;
-            return x - Math.floor(x);
-        }
-        function generateArt() {
-            const width = canvas.width;
-            const height = canvas.height;
-            const seed = parseInt(document.getElementById('seedInput').value) || 1234;
-            // Clear
-            ctx.fillStyle = '#000000';
-            ctx.fillRect(0, 0, width, height);
-            // 1. Base Noise / Gradient (Main Layer)
-            if (state.layers.main > 0) {
-                const opacity = state.layers.main / 100;
-                for (let i = 0; i < 400; i++) {
-                    const x = seededRandom(seed + i) * width;
-                    const y = seededRandom(seed + i + 1000) * height;
-                    const r = seededRandom(seed + i + 2000) * (state.layers.main * 3);
-                    const hue = seededRandom(seed + i + 3000) * 360;
-                    ctx.beginPath();
-                    ctx.arc(x, y, r, 0, Math.PI * 2);
-                    ctx.fillStyle = `hsla(${hue}, 70%, 50%, ${opacity * 0.05})`;
-                    ctx.fill();
-                }
-            }
-            // 2. Geometric Structures (Aux A - Texture)
-            if (state.layers.auxa > 0) {
-                const count = state.layers.auxa * 2;
-                ctx.lineWidth = 2;
-                for (let i = 0; i < count; i++) {
-                    const x = seededRandom(seed + i + 4000) * width;
-                    const y = seededRandom(seed + i + 5000) * height;
-                    const s = seededRandom(seed + i + 6000) * 200;
-                    ctx.strokeStyle = `rgba(255, 0, 170, ${state.layers.auxa/200})`;
-                    ctx.beginPath();
-                    if (seededRandom(seed + i + 7000) > 0.5) {
-                        ctx.rect(x, y, s, s);
-                    } else {
-                        ctx.moveTo(x, y);
-                        ctx.lineTo(x + s, y + s);
-                        ctx.lineTo(x - s, y + s);
-                        ctx.closePath();
-                    }
-                    ctx.stroke();
-                }
-            }
-            // 3. Light Beams / Flow Fields (Aux B - Lighting)
-            if (state.layers.auxb > 0) {
-                ctx.globalCompositeOperation = 'screen';
-                const beams = state.layers.auxb / 2;
-                for (let i = 0; i < beams; i++) {
-                    const x = seededRandom(seed + i + 8000) * width;
-                    const y = seededRandom(seed + i + 9000) * height;
-                    const angle = seededRandom(seed + i + 10000) * Math.PI * 2;
-                    const len = seededRandom(seed + i + 11000) * 500 + 200;
-                    const grad = ctx.createLinearGradient(x, y, x + Math.cos(angle)*len, y + Math.sin(angle)*len);
-                    grad.addColorStop(0, `rgba(0, 243, 255, 0)`);
-                    grad.addColorStop(0.5, `rgba(0, 243, 255, ${state.layers.auxb/150})`);
-                    grad.addColorStop(1, `rgba(0, 243, 255, 0)`);
-                    ctx.strokeStyle = grad;
-                    ctx.lineWidth = seededRandom(seed + i + 12000) * 20 + 5;
-                    ctx.beginPath();
-                    ctx.moveTo(x, y);
-                    ctx.lineTo(x + Math.cos(angle)*len, y + Math.sin(angle)*len);
-                    ctx.stroke();
-                }
-                ctx.globalCompositeOperation = 'source-over';
-            }
-            // 4. Glitch / Digital Artifact Overlay
-            if (Math.random() > 0.7) {
-                for(let i=0; i<10; i++) {
-                    const y = Math.random() * height;
-                    const h = Math.random() * 20 + 2;
-                    ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.1})`;
-                    ctx.fillRect(0, y, width, h);
-                }
-            }
-        }
-        // --- Execution Logic ---
-        async function startGeneration() {
-            if (state.isGenerating) return;
-            const btn = document.getElementById('generateBtn');
-            const overlay = document.getElementById('canvasOverlay');
-            const loader = document.getElementById('loadingState');
-            const progressBar = document.getElementById('progressBar');
-            const statusText = document.getElementById('statusText');
-            // UI Updates
-            state.isGenerating = true;
-            btn.disabled = true;
-            btn.classList.add('opacity-50', 'cursor-not-allowed');
-            overlay.style.opacity = '0';
-            setTimeout(() => overlay.style.display = 'none', 500);
-            loader.classList.remove('hidden');
-            // Simulation Steps
-            const steps = [
-                { pct: '10%', msg: 'Parsing semantic tokens...' },
-                { pct: '35%', msg: 'Allocating GPU tensors...' },
-                { pct: '60%', msg: 'Diffusing latent space...' },
-                { pct: '85%', msg: 'Refining edges...' },
-                { pct: '100%', msg: 'Finalizing render...' }
-            ];
-            for (let step of steps) {
-                await new Promise(r => setTimeout(r, 600 + Math.random() * 800));
-                progressBar.style.width = step.pct;
-                statusText.innerText = step.msg;
-            }
-            // Render Actual Image
-            generateArt();
-            addToArchive();
-            // Cleanup
-            await new Promise(r => setTimeout(r, 500));
-            loader.classList.add('hidden');
-            progressBar.style.width = '0';
-            btn.disabled = false;
-            btn.classList.remove('opacity-50', 'cursor-not-allowed');
-            state.isGenerating = false;
-        }
-        function resetCanvas() {
-            ctx.fillStyle = '#000000';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            document.getElementById('canvasOverlay').style.display = 'flex';
-            document.getElementById('canvasOverlay').style.opacity = '1';
-        }
-        function downloadImage() {
-            const link = document.createElement('a');
-            link.download = `flux-klein-gen-${Date.now()}.png`;
-            link.href = canvas.toDataURL();
-            link.click();
-        }
-        function addToArchive() {
-            const list = document.getElementById('archiveList');
-            const dataUrl = canvas.toDataURL();
-            const promptText = document.getElementById('promptInput').value || "Untitled Generation";
-            const div = document.createElement('div');
-            div.className = "group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all animate-[pulse-glow_0.5s_ease-out]";
-            div.innerHTML = `
-                <img src="${dataUrl}" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
-                <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
-                    <div class="text-[10px] text-white truncate">${promptText.substring(0, 15)}...</div>
-                    <div class="text-[9px] text-gray-500">Just now</div>
-                </div>
-            `;
-            list.insertBefore(div, list.firstChild);
-        }
-        // Initial random prompt
-        randomizePrompt();
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FLUX KLEIN | Next-Gen Generative Interface</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --neon-cyan: #00f3ff;
+      --neon-pink: #ff00aa;
+      --neon-purple: #bc13fe;
+      --glass-bg: rgba(10, 10, 15, 0.7);
+      --glass-border: rgba(255, 255, 255, 0.1);
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      background-color: #050505;
+      color: #e0e0e0;
+      overflow: hidden;
+    }
+    h1,
+    h2,
+    h3,
+    .brand-font {
+      font-family: 'Space Grotesk', sans-serif;
+    }
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #0a0a0a;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #333;
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--neon-cyan);
+    }
+    /* Glassmorphism Utilities */
+    .glass-panel {
+      background: var(--glass-bg);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--glass-border);
+      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+    }
+    .glass-input {
+      background: rgba(0, 0, 0, 0.4);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      transition: all 0.3s ease;
+    }
+    .glass-input:focus {
+      border-color: var(--neon-cyan);
+      box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
+      outline: none;
+    }
+    /* Animations */
+    @keyframes pulse-glow {
+      0%,
+      100% {
+        box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
+      }
+      50% {
+        box-shadow: 0 0 25px rgba(0, 243, 255, 0.6);
+      }
+    }
+    @keyframes scanline {
+      0% {
+        transform: translateY(-100%);
+      }
+      100% {
+        transform: translateY(100%);
+      }
+    }
+    .scanline-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
+      background-size: 100% 4px;
+      pointer-events: none;
+      z-index: 10;
+    }
+    .crt-flicker {
+      animation: flicker 0.15s infinite;
+    }
+    @keyframes flicker {
+      0% {
+        opacity: 0.97;
+      }
+      50% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0.98;
+      }
+    }
+    /* Loader */
+    .loader-ring {
+      display: inline-block;
+      position: relative;
+      width: 24px;
+      height: 24px;
+    }
+    .loader-ring div {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      margin: 2px;
+      border: 2px solid var(--neon-cyan);
+      border-radius: 50%;
+      animation: loader-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+      border-color: var(--neon-cyan) transparent transparent transparent;
+    }
+    .loader-ring div:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+    .loader-ring div:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+    .loader-ring div:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+    @keyframes loader-ring {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    /* Range Slider Styling */
+    input[type=range] {
+      -webkit-appearance: none;
+      width: 100%;
+      background: transparent;
+    }
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      height: 16px;
+      width: 16px;
+      border-radius: 50%;
+      background: var(--neon-cyan);
+      cursor: pointer;
+      margin-top: -6px;
+      box-shadow: 0 0 10px var(--neon-cyan);
+    }
+    input[type=range]::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 4px;
+      cursor: pointer;
+      background: #333;
+      border-radius: 2px;
+    }
+    /* Grid Background */
+    .bg-grid {
+      background-size: 40px 40px;
+      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+      mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
+    }
+    .layer-active {
+      border-color: var(--neon-cyan);
+      background: rgba(0, 243, 255, 0.1);
+    }
+    /* Guide Modal Styles */
+    .guide-modal {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.85);
+      backdrop-filter: blur(8px);
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+    }
+    .guide-modal.active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .guide-content {
+      max-height: 80vh;
+      overflow-y: auto;
+    }
+    /* Scroll indicator */
+    .scroll-indicator {
+      position: absolute;
+      bottom: 80px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: linear-gradient(180deg, transparent 0%, rgba(0, 243, 255, 0.1) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      animation: bounce 2s infinite;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    .scroll-indicator.visible {
+      opacity: 1;
+    }
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateX(-50%) translateY(0);
+      }
+      50% {
+        transform: translateX(-50%) translateY(-8px);
+      }
+    }
+    /* Custom scrollbar for sidebar */
+    .sidebar-scroll::-webkit-scrollbar {
+      width: 4px;
+    }
+    .sidebar-scroll::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .sidebar-scroll::-webkit-scrollbar-thumb {
+      background: rgba(0, 243, 255, 0.3);
+      border-radius: 2px;
+    }
+    .sidebar-scroll::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 243, 255, 0.6);
+    }
+  </style>
+</head>
+<body class="h-screen w-screen flex flex-col text-sm selection:bg-cyan-500 selection:text-black">
+  <!-- Background Canvas for Particles -->
+  <canvas id="bgCanvas" class="fixed top-0 left-0 w-full h-full -z-10"></canvas>
+  <div class="fixed top-0 left-0 w-full h-full bg-grid -z-10 pointer-events-none"></div>
+  <!-- Header -->
+  <header class="h-16 glass-panel border-b border-white/10 flex items-center justify-between px-6 z-20 shrink-0">
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 rounded bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-[0_0_15px_rgba(0,243,255,0.5)]">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+        </svg>
+      </div>
+      <div>
+        <h1 class="text-xl font-bold tracking-wider text-white">FLUX <span class="text-cyan-400">KLEIN</span></h1>
+        <p class="text-[10px] text-gray-400 uppercase tracking-[0.2em]">Generative Synthesis Core v4.2</p>
+      </div>
+    </div>
+    <div class="hidden md:flex items-center gap-6">
+      <button onclick="toggleGuide()" class="flex items-center gap-2 text-xs text-cyan-400 hover:text-cyan-300 transition-colors border border-cyan-500/30 px-3 py-1.5 rounded-full hover:border-cyan-400 hover:bg-cyan-500/10">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        How to Use
+      </button>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-gray-400 hover:text-cyan-400 transition-colors border border-gray-700 px-3 py-1 rounded-full hover:border-cyan-400">
+        Built with anycoder
+      </a>
+      <div class="flex items-center gap-2 text-xs text-gray-400">
+        <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
+        SYSTEM ONLINE
+      </div>
+    </div>
+  </header>
+  <!-- Main Workspace -->
+  <main class="flex-1 flex overflow-hidden relative z-10">
+    <!-- Left Control Panel -->
+    <aside class="w-80 glass-panel border-r border-white/10 flex flex-col shrink-0 transition-all duration-300 relative" id="sidebar">
+      <!-- Scrollable Content Area -->
+      <div class="flex-1 overflow-y-auto sidebar-scroll relative" id="sidebarContent">
+        <!-- Prompt Section -->
+        <div class="p-5 border-b border-white/5">
+          <label class="flex justify-between text-xs font-semibold text-cyan-400 mb-2 uppercase tracking-wider">
+            <span>Input Prompt</span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </label>
+          <textarea id="promptInput" class="w-full h-24 glass-input rounded p-3 text-gray-200 placeholder-gray-600 resize-none focus:ring-1 focus:ring-cyan-500" placeholder="Describe your vision here... (e.g., Cyberpunk city in neon rain)"></textarea>
+          <div class="mt-3 flex gap-2">
+            <button onclick="randomizePrompt()" class="flex-1 py-1.5 text-xs border border-white/10 rounded hover:bg-white/5 text-gray-400 transition-colors">Randomize</button>
+            <button onclick="clearPrompt()" class="flex-1 py-1.5 text-xs border border-white/10 rounded hover:bg-white/5 text-gray-400 transition-colors">Clear</button>
+          </div>
+        </div>
+        <!-- Reference Layers -->
+        <div class="p-5 border-b border-white/5">
+          <label class="text-xs font-semibold text-purple-400 mb-3 uppercase tracking-wider block">Reference Layers</label>
+          <div class="space-y-4">
+            <!-- Layer Main -->
+            <div class="group relative">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-xs text-gray-300">Main Structure</span>
+                <span class="text-[10px] text-gray-500" id="main-val">80%</span>
+              </div>
+              <input type="range" min="0" max="100" value="80" class="w-full" oninput="updateLayer('main', this.value)">
+              <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
+                <div id="bar-main" class="h-full bg-purple-500 transition-all duration-100" style="width: 80%"></div>
+              </div>
+            </div>
+            <!-- Layer Aux A -->
+            <div class="group relative">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-xs text-gray-300">Auxiliary A (Texture)</span>
+                <span class="text-[10px] text-gray-500" id="auxa-val">45%</span>
+              </div>
+              <input type="range" min="0" max="100" value="45" class="w-full" oninput="updateLayer('auxa', this.value)">
+              <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
+                <div id="bar-auxa" class="h-full bg-pink-500 transition-all duration-100" style="width: 45%"></div>
+              </div>
+            </div>
+            <!-- Layer Aux B -->
+            <div class="group relative">
+              <div class="flex items-center justify-between mb-1">
+                <span class="text-xs text-gray-300">Auxiliary B (Lighting)</span>
+                <span class="text-[10px] text-gray-500" id="auxb-val">60%</span>
+              </div>
+              <input type="range" min="0" max="100" value="60" class="w-full" oninput="updateLayer('auxb', this.value)">
+              <div class="h-1 w-full bg-gray-800 rounded mt-1 overflow-hidden">
+                <div id="bar-auxb" class="h-full bg-cyan-500 transition-all duration-100" style="width: 60%"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Advanced Params -->
+        <div class="p-5 pb-24">
+          <label class="text-xs font-semibold text-gray-400 mb-3 uppercase tracking-wider block">Synthesis Parameters</label>
+          <div class="grid grid-cols-2 gap-3">
+            <div>
+              <label class="text-[10px] text-gray-500 block mb-1">Seed</label>
+              <input type="number" id="seedInput" class="w-full glass-input rounded px-2 py-1 text-xs text-gray-300" value="10294">
             </div>
             <div>
+              <label class="text-[10px] text-gray-500 block mb-1">Guidance</label>
+              <select class="w-full glass-input rounded px-2 py-1 text-xs text-gray-300 bg-black">
+                <option>Standard</option>
+                <option>High Fidelity</option>
+                <option>Abstract</option>
+              </select>
             </div>
+          </div>
+          <!-- Quick Tips -->
+          <div class="mt-5 p-3 rounded bg-cyan-500/5 border border-cyan-500/20">
+            <div class="flex items-start gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-400 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+              </svg>
+              <div>
+                <p class="text-[10px] text-cyan-300 font-medium mb-1">Pro Tip</p>
+                <p class="text-[10px] text-gray-400 leading-relaxed">Higher Main Structure values create denser base patterns. Combine with Auxiliary layers for complex results.</p>
+              </div>
             </div>
+          </div>
         </div>
+      </div>
+      <!-- Scroll Indicator -->
+      <div class="scroll-indicator visible" id="scrollIndicator">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+        </svg>
+      </div>
+      <!-- Fixed Generate Button Area -->
+      <div class="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-[#0a0a0f] via-[#0a0a0f] to-transparent pt-8">
+        <button id="generateBtn" onclick="startGeneration()" class="w-full group relative overflow-hidden rounded bg-gradient-to-r from-cyan-600 to-blue-600 p-3 text-white font-bold tracking-widest uppercase transition-all hover:shadow-[0_0_20px_rgba(0,243,255,0.4)] active:scale-95">
+          <span class="relative z-10 flex items-center justify-center gap-2">
+            Execute Synthesis
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+            </svg>
+          </span>
+          <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+        </button>
+      </div>
+    </aside>
+    <!-- Center Canvas Area -->
+    <section class="flex-1 relative bg-black/40 flex flex-col">
+      <!-- Toolbar -->
+      <div class="h-10 border-b border-white/5 flex items-center justify-between px-4 bg-black/20">
+        <div class="flex items-center gap-4">
+          <span class="text-xs text-gray-500">CANVAS: <span class="text-gray-300">1024x1024</span></span>
+          <span class="text-xs text-gray-500">MODE: <span class="text-cyan-400">REALTIME</span></span>
+        </div>
+        <div class="flex items-center gap-2">
+          <button onclick="downloadImage()" class="p-1.5 rounded hover:bg-white/10 text-gray-400 hover:text-white transition-colors" title="Download">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+            </svg>
+          </button>
+          <button onclick="resetCanvas()" class="p-1.5 rounded hover:bg-white/10 text-gray-400 hover:text-white transition-colors" title="Reset">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <!-- The Canvas -->
+      <div class="flex-1 relative flex items-center justify-center p-8 overflow-hidden" id="canvasContainer">
+        <div class="relative w-full max-w-3xl aspect-square shadow-2xl border border-white/10 bg-black group">
+          <!-- Scanlines -->
+          <div class="scanline-overlay opacity-20"></div>
+          <!-- Actual Drawing Canvas -->
+          <canvas id="artCanvas" width="1024" height="1024" class="w-full h-full object-contain crt-flicker"></canvas>
+          <!-- Overlay UI -->
+          <div id="canvasOverlay" class="absolute inset-0 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm transition-opacity duration-500 z-20">
+            <div class="text-cyan-400 font-mono text-xs mb-2 tracking-widest">READY TO INITIALIZE</div>
+            <div class="text-gray-500 text-xs">Awaiting Input Stream...</div>
+          </div>
+          <!-- Loading State -->
+          <div id="loadingState" class="absolute inset-0 flex flex-col items-center justify-center bg-black/90 z-30 hidden">
+            <div class="loader-ring mb-4">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
             </div>
+            <div class="text-cyan-400 font-mono text-xs tracking-widest animate-pulse">SYNTHESIZING NEURAL PATHWAYS...
             </div>
+            <div class="w-64 h-1 bg-gray-800 mt-4 rounded overflow-hidden">
+              <div id="progressBar" class="h-full bg-cyan-500 w-0 transition-all duration-100"></div>
             </div>
+            <div id="statusText" class="text-[10px] text-gray-500 mt-2 font-mono">Initializing tensors...</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- Right Archives Panel -->
+    <aside class="w-64 glass-panel border-l border-white/10 flex flex-col shrink-0 hidden lg:flex">
+      <div class="p-4 border-b border-white/10 flex justify-between items-center">
+        <h3 class="text-xs font-bold text-gray-300 uppercase tracking-wider">Archives</h3>
+        <span class="text-[10px] bg-white/10 px-2 py-0.5 rounded text-gray-400">12 Items</span>
+      </div>
+      <div class="flex-1 overflow-y-auto p-3 space-y-3" id="archiveList">
+        <!-- Archive Item Template -->
+        <div class="group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all">
+          <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
+          <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
+            <div class="text-[10px] text-white truncate">Neon Genesis</div>
+            <div class="text-[9px] text-gray-500">02:14 PM</div>
+          </div>
+        </div>
+        <div class="group relative aspect-square rounded border border-white/5 bg-black/40 overflow-hidden cursor-pointer hover:border-cyan-500/50 transition-all">
+          <img src="https://images.unsplash.com/photo-1633167606207-d840b5070fc2?q=80&w=400&auto=format&fit=crop" class="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity grayscale group-hover:grayscale-0">
+          <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black to-transparent p-2">
+            <div class="text-[10px] text-white truncate">Quantum Flux</div>
+            <div class="text-[9px] text-gray-500">Yesterday</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  </main>
+  <!-- How to Use Guide Modal -->
+  <div class="guide-modal" id="guideModal">
+    <div class="glass-panel rounded-lg w-full max-w-2xl mx-4 guide-content">
+      <div class="p-6 border-b border-white/10 flex items-center justify-between sticky top-0 bg-[#0a0a0f]/95 backdrop-blur-sm z-10">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-lg font-bold text-white brand-font">How to Use FLUX KLEIN</h2>
+            <p class="text-xs text-gray-400">Complete guide to generative synthesis</p>
+          </div>
+        </div>
+        <button onclick="toggleGuide()" class="p-2 rounded-lg hover:bg-white/10 text-gray-400 hover:text-white transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="p-6 space-y-6">
+        <!-- Quick Start -->
+        <div class="p-4 rounded-lg bg-cyan-500/5 border border-cyan-500/20">
+          <h3 class="text-sm font-semibold text-cyan-400 mb-2 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+            Quick Start
+          </h3>
+          <ol class="text-xs text-gray-300 space-y-2 list-decimal list-inside leading-relaxed">
+            <li>Enter a descriptive prompt in the <strong>Input Prompt</strong> field (or click Randomize for inspiration)</li>
+            <li>Adjust the <strong>Reference Layers</strong> sliders to control visual complexity</li>
+            <li>Set your preferred <strong>Seed</strong> for reproducible results, or use random</li>
+            <li>Click <strong>Execute Synthesis</strong> to generate your artwork</li>
+            <li>Download or save to Archives when satisfied</li>
+          </ol>
+        </div>
+        <!-- Layer Controls -->
+        <div>
+          <h3 class="text-sm font-semibold text-purple-400 mb-3 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+            Understanding Reference Layers
+          </h3>
+          <div class="grid gap-3">
+            <div class="p-3 rounded bg-white/5 border border-white/10">
+              <div class="flex items-center gap-2 mb-1">
+                <div class="w-3 h-3 rounded-full bg-purple-500"></div>
+                <span class="text-xs font-medium text-white">Main Structure</span>
+              </div>
+              <p class="text-[11px] text-gray-400">Controls the density and size of base noise patterns. Higher values create more complex, dense foundational imagery with larger organic shapes.</p>
             </div>
+            <div class="p-3 rounded bg-white/5 border border-white/10">
+              <div class="flex items-center gap-2 mb-1">
+                <div class="w-3 h-3 rounded-full bg-pink-500"></div>
+                <span class="text-xs font-medium text-white">Auxiliary A (Texture)</span>
+              </div>
+              <p class="text-[11px] text-gray-400">Adds geometric elements—squares, triangles, and lines. Perfect for creating structured, architectural, or crystalline effects.</p>
             </div>
+            <div class="p-3 rounded bg-white/5 border border-white/10">
+              <div class="flex items-center gap-2 mb-1">
+                <div class="w-3 h-3 rounded-full bg-cyan-500"></div>
+                <span class="text-xs font-medium text-white">Auxiliary B (Lighting)</span>
+              </div>
+              <p class="text-[11px] text-gray-400">Injects light beams and flow-field effects using screen blending. Creates ethereal glows, aurora-like streaks, and atmospheric depth.</p>
+            </div>
+          </div>
+        </div>
+        <!-- Parameters -->
+        <div>
+          <h3 class="text-sm font-semibold text-gray-300 mb-3 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+            </svg>
+            Synthesis Parameters
+          </h3>
+          <div class="space-y-2 text-xs text-gray-400">
+            <p><strong class="text-gray-300">Seed:</strong> A numerical starting point for the random generator. Same seed + same settings = identical output. Use this to refine or reproduce results.</p>
+            <p><strong class="text-gray-300">Guidance:</strong> Affects how strictly the algorithm follows internal rules. Standard is balanced; High Fidelity creates cleaner edges; Abstract embraces chaos.</p>
+          </div>
+        </div>
+        <!-- Tips -->
+        <div class="p-4 rounded-lg bg-gradient-to-r from-purple-500/10 to-pink-500/10 border border-purple-500/20">
+          <h3 class="text-sm font-semibold text-purple-300 mb-2 flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+            Pro Tips
+          </h3>
+          <ul class="text-xs text-gray-300 space-y-1.5 list-disc list-inside">
+            <li>Combine low Main Structure (20-30%) with high Auxiliary B for minimalist light paintings</li>
+            <li>Use similar seed values (e.g., 1000, 1001, 1002) to explore variations of a theme</li>
+            <li>All three layers at maximum create intense, maximalist compositions—great for album art</li>
+            <li>The Archives panel saves your last 20 generations automatically</li>
+          </ul>
+        </div>
+      </div>
+      <div class="p-6 border-t border-white/10 flex justify-end gap-3 sticky bottom-0 bg-[#0a0a0f]/95 backdrop-blur-sm">
+        <button onclick="toggleGuide()" class="px-4 py-2 text-xs text-gray-400 hover:text-white transition-colors">Close</button>
+        <button onclick="startTour(); toggleGuide();" class="px-4 py-2 text-xs bg-cyan-600 hover:bg-cyan-500 text-white rounded transition-colors flex items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          Start Interactive Tour
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Tour Overlay -->
+  <div class="fixed inset-0 z-50 pointer-events-none hidden" id="tourOverlay">
+    <div class="absolute inset-0 bg-black/50"></div>
+    <div class="absolute bg-cyan-500/20 border-2 border-cyan-400 rounded-lg transition-all duration-500" id="tourHighlight"></div>
+    <div class="absolute p-4 glass-panel rounded-lg max-w-xs transition-all duration-500" id="tourTooltip">
+      <p class="text-xs text-white mb-2" id="tourText"></p>
+      <button onclick="nextTourStep()" class="text-xs bg-cyan-600 hover:bg-cyan-500 text-white px-3 py-1 rounded transition-colors">Next</button>
+    </div>
+  </div>
+  <script>
+    // --- Configuration & State ---
+    const canvas = document.getElementById('artCanvas');
+    const ctx = canvas.getContext('2d');
+    const bgCanvas = document.getElementById('bgCanvas');
+    const bgCtx = bgCanvas.getContext('2d');
+    let state = {
+      prompt: '',
+      layers: {
+        main: 80,
+        auxa: 45,
+        auxb: 60
+      },
+      seed: 10294,
+      isGenerating: false
+    };
+    const prompts = [
+      "Cybernetic organism in a rain-soaked metropolis",
+      "Abstract geometric landscape floating in void",
+      "Bioluminescent forest at midnight",
+      "Retro-futuristic car speeding through neon tunnel",
+      "Crystalline structure reflecting aurora borealis"
+    ];
+    // --- Initialization ---
+    function resizeCanvases() {
+      bgCanvas.width = window.innerWidth;
+      bgCanvas.height = window.innerHeight;
+      // Art canvas stays fixed logical size but scales via CSS
+    }
+    window.addEventListener('resize', resizeCanvases);
+    resizeCanvases();
+    // --- Sidebar Scroll Detection ---
+    const sidebarContent = document.getElementById('sidebarContent');
+    const scrollIndicator = document.getElementById('scrollIndicator');
+    function updateScrollIndicator() {
+      const scrollTop = sidebarContent.scrollTop;
+      const scrollHeight = sidebarContent.scrollHeight - sidebarContent.clientHeight;
+      if (scrollTop >= scrollHeight - 10) {
+        scrollIndicator.classList.remove('visible');
+      } else {
+        scrollIndicator.classList.add('visible');
+      }
+    }
+    sidebarContent.addEventListener('scroll', updateScrollIndicator);
+    updateScrollIndicator();
+    // --- Particle System for Background ---
+    const particles = [];
+    class Particle {
+      constructor() {
+        this.x = Math.random() * bgCanvas.width;
+        this.y = Math.random() * bgCanvas.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 ? 'rgba(0, 243, 255, ' : 'rgba(188, 19, 254, ';
+      }
+      update() {
+        this.x += this.vx;
+        this.y += this.vy;
+        if (this.x < 0 || this.x > bgCanvas.width) this.vx *= -1;
+        if (this.y < 0 || this.y > bgCanvas.height) this.vy *= -1;
+      }
+      draw() {
+        bgCtx.beginPath();
+        bgCtx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+        bgCtx.fillStyle = this.color + (Math.random() * 0.5 + 0.1) + ')';
+        bgCtx.fill();
+      }
+    }
+    for (let i = 0; i < 50; i++) particles.push(new Particle());
+    function animateBg() {
+      bgCtx.clearRect(0, 0, bgCanvas.width, bgCanvas.height);
+      particles.forEach(p => {
+        p.update();
+        p.draw();
+      });
+      // Draw connecting lines
+      bgCtx.strokeStyle = 'rgba(255,255,255,0.03)';
+      bgCtx.lineWidth = 1;
+      for (let i = 0; i < particles.length; i++) {
+        for (let j = i; j < particles.length; j++) {
+          const dx = particles[i].x - particles[j].x;
+          const dy = particles[i].y - particles[j].y;
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          if (dist < 150) {
+            bgCtx.beginPath();
+            bgCtx.moveTo(particles[i].x, particles[i].y);
+            bgCtx.lineTo(particles[j].x, particles[j].y);
+            bgCtx.stroke();
+          }
+        }
+      }
+      requestAnimationFrame(animateBg);
+    }
+    animateBg();
+    // --- UI Logic ---
+    function randomizePrompt() {
+      const r = Math.floor(Math.random() * prompts.length);
+      document.getElementById('promptInput').value = prompts[r];
+    }
+    function clearPrompt() {
+      document.getElementById('promptInput').value = '';
+    }
+    function updateLayer(id, val) {
+      state.layers[id] = parseInt(val);
+      document.getElementById(`${id}-val`).innerText = val + '%';
+      document.getElementById(`bar-${id}`).style.width