Spaces:

XXXMARK
/

anycoder-e1e4a867

Running

App Files Files Community

XXXMARK commited on Feb 4

Commit

1f2e47b

verified ·

1 Parent(s): 1e520af

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1 -778

index.html CHANGED Viewed

@@ -1,780 +1,3 @@
-<!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 - FULL HEIGHT */
-    .sidebar-scroll {
-      overflow-y: auto;
-      overflow-x: hidden;
-      scrollbar-width: thin;
-      scrollbar-color: rgba(0, 243, 255, 0.3) transparent;
-    }
-    .sidebar-scroll::-webkit-scrollbar {
-      width: 5px;
-    }
-    .sidebar-scroll::-webkit-scrollbar-track {
-      background: rgba(0, 0, 0, 0.3);
-      border-radius: 3px;
-    }
-    .sidebar-scroll::-webkit-scrollbar-thumb {
-      background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
-      border-radius: 3px;
-      box-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
-    }
-    .sidebar-scroll::-webkit-scrollbar-thumb:hover {
-      background: linear-gradient(180deg, var(--neon-purple), var(--neon-cyan));
-      box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
-    }
-    /* Sidebar container with full height scrollbar */
-    .sidebar-container {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    .sidebar-scroll-area {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding-bottom: 100px;
-    }
-    /* Fixed generate button at bottom */
-    .generate-button-container {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 20px;
-      background: linear-gradient(to top, rgba(10, 10, 15, 0.95) 0%, rgba(10, 10, 15, 0.8) 60%, transparent 100%);
-      backdrop-filter: blur(10px);
-      z-index: 10;
-    }
-  </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 with Full Height Scrollbar -->
-    <aside class="w-80 glass-panel border-r border-white/10 flex flex-col shrink-0 transition-all duration-300 relative sidebar-container" id="sidebar">
-      <!-- Scrollable Content Area - Full Height -->
-      <div class="sidebar-scroll sidebar-scroll-area" 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">
-          <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>
-          <!-- Additional params for more scroll content -->
-          <div class="mt-4 space-y-3">
-            <div>
-              <label class="text-[10px] text-gray-500 block mb-1">Steps</label>
-              <input type="range" min="10" max="100" value="50" class="w-full">
-              <div class="flex justify-between text-[10px] text-gray-500 mt-1">
-                <span>Fast</span>
-                <span>Quality</span>
-              </div>
-            </div>
-            <div>
-              <label class="text-[10px] text-gray-500 block mb-1">CFG Scale</label>
-              <input type="range" min="1" max="20" value="7.5" step="0.5" class="w-full">
-            </div>
-            <div>
-              <label class="text-[10px] text-gray-500 block mb-1">Sampler</label>
-              <select class="w-full glass-input rounded px-2 py-1 text-xs text-gray-300 bg-black">
-                <option>Euler a</option>
-                <option>DPM++ 2M Karras</option>
-                <option>DDIM</option>
-                <option>UniPC</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>
-          <!-- More content to demonstrate scroll -->
-          <div class="mt-5 space-y-3">
-            <div class="p-3 rounded bg-white/5 border border-white/10">
-              <label class="text-xs font-semibold text-gray-300 mb-2 block">Style Presets</label>
-              <div class="grid grid-cols-3 gap-2">
-                <button class="p-2 text-[10px] border border-white/10 rounded hover:bg-cyan-500/20 hover:border-cyan-500/50 transition-colors">Cyberpunk</button>
-                <button class="p-2 text-[10px] border border-white/10 rounded hover:bg-purple-500/20 hover:border-purple-500/50 transition-colors">Fantasy</button>
-                <button class="p-2 text-[10px] border border-white/10 rounded hover:bg-pink-500/20 hover:border-pink-500/50 transition-colors">Abstract</button>
-              </div>
-            </div>
-            <div class="p-3 rounded bg-white/5 border border-white/10">
-              <label class="text-xs font-semibold text-gray-300 mb-2 block">Aspect Ratio</label>
-              <div class="flex gap-2">
-                <button class="flex-1 p-2 text-[10px] border border-cyan-500/50 bg-cyan-500/10 rounded">1:1</button>
-                <button class="flex-1 p-2 text-[10px] border border-white/10 rounded hover:bg-white/5">16:9</button>
-                <button class="flex-1 p-2 text-[10px] border border-white/10 rounded hover:bg-white/5">9:16</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- Fixed Generate Button Area -->
-      <div class="generate-button-container">
-        <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

+const prompts = [
       "Cybernetic organism in a rain-soaked metropolis",
       "Abstract