Upload folder using huggingface_hub

index.html

@@ -6,7 +6,9 @@
   <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">
+  <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;
@@ -264,22 +266,58 @@
       }
     }
 
-    /* Custom scrollbar for sidebar */
+    /* 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: 4px;
+      width: 5px;
     }
 
     .sidebar-scroll::-webkit-scrollbar-track {
-      background: transparent;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 3px;
     }
 
     .sidebar-scroll::-webkit-scrollbar-thumb {
-      background: rgba(0, 243, 255, 0.3);
-      border-radius: 2px;
+      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: rgba(0, 243, 255, 0.6);
+      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>
@@ -293,9 +331,12 @@
   <!-- 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" />
+      <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>
@@ -311,7 +352,8 @@
         </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">
+      <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">
@@ -324,10 +366,12 @@
   <!-- 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">
+    <!-- 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">
@@ -388,7 +432,7 @@
         </div>
 
         <!-- Advanced Params -->
-        <div class="p-5 pb-24">
+        <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>
@@ -405,30 +449,71 @@
             </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 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>
+                <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>
+          <!-- 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="absolute bottom-0 left-0 right-0 p-5 bg-gradient-to-t from-[#0a0a0f] via-[#0a0a0f] to-transparent pt-8">
+      <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
@@ -473,13 +558,15 @@
           <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 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 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>
@@ -506,14 +593,16 @@
 
       <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">
+        <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">
+        <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>
@@ -528,11 +617,15 @@
   <!-- 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="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" />
+          <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>
@@ -551,13 +644,15 @@
         <!-- 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">
+            <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>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>
@@ -568,8 +663,10 @@
         <!-- 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 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>
@@ -579,21 +676,24 @@
                 <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>
+              <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>
+              <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>
+              <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>
@@ -601,22 +701,28 @@
         <!-- 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 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>
+            <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 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>
@@ -645,7 +751,8 @@
   <!-- 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 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>
@@ -670,96 +777,4 @@
     };
     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
+      "Abstract