Upload folder using huggingface_hub

index.html

@@ -118,6 +118,20 @@
       background: #333;
       border-radius: 2px;
     }
+    
+    /* Custom Progress Bar for Render */
+    .progress-container {
+        width: 100%;
+        background-color: #1a1a1a;
+        border-radius: 0.25rem;
+        overflow: hidden;
+    }
+    .progress-bar {
+        height: 100%;
+        width: 0%;
+        background-color: #ff0055;
+        transition: width 0.2s ease;
+    }
   </style>
 </head>
 
@@ -126,15 +140,18 @@
   <!-- Loading Screen -->
   <div id="loader">
     <div class="text-center">
-      <div class="text-2xl font-bold mb-2">INITIALIZING HYPER CORE</div>
+      <div class="text-2xl font-bold mb-2 text-cyber-accent">INITIALIZING HYPER CORE</div>
       <div class="text-xs text-gray-500">Loading WebGL & Canvas Modules...</div>
+      <div class="mt-4 w-64 h-1 bg-gray-800 rounded overflow-hidden mx-auto">
+        <div id="loader-bar" class="h-full bg-cyber-accent animate-pulse" style="width: 0%"></div>
+      </div>
     </div>
   </div>
 
   <!-- Header -->
-  <header class="h-14 bg-cyber-panel border-b border-cyber-border flex items-center justify-between px-4 z-20 shrink-0">
+  <header class="h-14 bg-cyber-panel border-b border-cyber-border flex items-center justify-between px-4 z-20 shrink-0 shadow-lg shadow-black">
     <div class="flex items-center gap-3">
-      <i data-lucide="cpu" class="text-cyber-accent"></i>
+      <i data-lucide="cpu" class="text-cyber-accent w-6 h-6"></i>
       <div>
         <h1 class="font-bold text-sm tracking-widest uppercase">Hyper-FX
           <span class="text-cyber-secondary">Studio</span>
@@ -144,8 +161,8 @@
 
     <div class="flex items-center gap-4">
       <!-- Mode Switcher -->
-      <div class="flex bg-black rounded p-1 border border-cyber-border">
-        <button id="modeVideo" class="px-3 py-1 text-xs rounded bg-cyber-accent text-black font-bold transition">VIDEO MODE</button>
+      <div class="flex bg-black rounded p-1 border border-cyber-border shadow-inner">
+        <button id="modeVideo" class="px-3 py-1 text-xs rounded bg-cyber-accent text-black font-bold transition shadow-[0_0_10px_rgba(0,255,157,0.3)]">VIDEO MODE</button>
         <button id="modeImage" class="px-3 py-1 text-xs rounded text-gray-400 hover:text-white transition">GIF MODE</button>
       </div>
 
@@ -163,178 +180,258 @@
   <div class="flex flex-1 overflow-hidden">
 
     <!-- LEFT: Resource Library -->
-    <aside class="w-72 bg-cyber-panel border-r border-cyber-border flex flex-col z-10 shrink-0">
+    <aside class="w-72 bg-cyber-panel border-r border-cyber-border flex flex-col z-10 shrink-0 shadow-xl">
       <!-- Tabs -->
       <div class="flex border-b border-cyber-border">
-        <button id="tabShaders" class="flex-1 py-2 text-xs font-bold text-cyber-accent border-b-2 border-cyber-accent bg-cyber-border/30">SHADERS</button>
-        <button id="tabImages" class="flex-1 py-2 text-xs font-bold text-gray-500 hover:text-white">IMAGES</button>
+        <button id="tabShaders" class="flex-1 py-2 text-xs font-bold text-cyber-accent border-b-2 border-cyber-accent bg-cyber-border/30 transition-colors">SHADERS</button>
+        <button id="tabImages" class="flex-1 py-2 text-xs font-bold text-gray-500 hover:text-white transition-colors">IMAGES</button>
       </div>
 
       <!-- Content: Shader Library (Video Mode) -->
       <div id="panelShaders" class="flex-1 overflow-y-auto flex flex-col">
-        <div class="p-3 border-b border-cyber-border">
-          <input type="text" id="searchFx" placeholder="Search Shaders..." class="w-full bg-black border border-cyber-border rounded px-3 py-2 text-xs text-white focus:border-cyber-accent outline-none">
+        <div class="p-3 border-b border-cyber-border bg-black/20">
+          <div class="flex items-center gap-2 mb-2">
+            <i data-lucide="search" class="text-gray-500 w-3 h-3"></i>
+            <input type="text" id="searchFx" placeholder="Search Shaders..." class="w-full bg-black border border-cyber-border rounded px-3 py-2 text-xs text-white focus:border-cyber-accent outline-none transition-colors">
+          </div>
+          <div class="flex justify-between items-center text-[10px] text-gray-500 uppercase font-bold px-1">
+             <span>Library</span>
+             <span id="shaderCount">11 Effects</span>
+          </div>
         </div>
-        <div id="libraryList" class="flex-1 overflow-y-auto p-2 space-y-1">
+        <div id="libraryList" class="flex-1 overflow-y-auto p-2 space-y-1 custom-scrollbar">
           <!-- Injected via JS -->
         </div>
 
         <!-- Media Input (Video) -->
         <div class="p-3 border-t border-cyber-border bg-black/40">
           <div class="grid grid-cols-2 gap-2">
-            <label class="cursor-pointer bg-cyber-border hover:bg-cyber-accent hover:text-black text-center py-2 rounded text-xs transition font-bold">
-                            LOAD VIDEO
+            <label class="cursor-pointer bg-cyber-border hover:bg-cyber-accent hover:text-black text-center py-2 rounded text-xs transition font-bold flex items-center justify-center gap-2">
+                            <i data-lucide="video" class="w-3 h-3"></i> LOAD VIDEO
                             <input type="file" id="inpVideo" accept="video/*" class="hidden">
                         </label>
-            <label class="cursor-pointer bg-cyber-border hover:bg-cyber-secondary hover:text-white text-center py-2 rounded text-xs transition font-bold">
-                            LOAD AUDIO
+            <label class="cursor-pointer bg-cyber-border hover:bg-cyber-secondary hover:text-white text-center py-2 rounded text-xs transition font-bold flex items-center justify-center gap-2">
+                            <i data-lucide="music" class="w-3 h-3"></i> LOAD AUDIO
                             <input type="file" id="inpAudio" accept="audio/*" class="hidden">
                         </label>
           </div>
+          <div class="mt-3 text-[10px] text-gray-600 text-center font-mono">
+             Video State: <span id="videoStatus" class="text-gray-400">Idle</span>
+          </div>
         </div>
       </div>
 
       <!-- Content: Image Sequence (GIF Mode) -->
       <div id="panelImages" class="flex-1 overflow-y-auto flex flex-col hidden">
         <div class="p-3 border-b border-cyber-border">
-          <label class="text-[10px] text-gray-500 uppercase font-bold mb-1 block">Source URLs (Comma separated)</label>
-          <textarea id="imageSource" rows="3" class="w-full bg-black border border-cyber-border rounded px-2 py-1 text-xs text-white focus:border-cyber-accent outline-none mb-2">https://picsum.photos/id/237/400/400,https://picsum.photos/id/238/400/400,https://picsum.photos/id/239/400/400,https://picsum.photos/id/240/400/400</textarea>
-          <button id="loadImagesBtn" class="w-full bg-cyber-secondary/20 border border-cyber-secondary text-cyber-secondary text-xs rounded py-2 hover:bg-cyber-secondary hover:text-white transition font-bold">LOAD & ANALYZE</button>
+          <label class="text-[10px] text-gray-500 uppercase font-bold mb-1 block flex items-center gap-2">
+            <i data-lucide="layers" class="w-3 h-3"></i> Source URLs (Comma separated)
+          </label>
+          <textarea id="imageSource" rows="3" class="w-full bg-black border border-cyber-border rounded px-2 py-1 text-xs text-white focus:border-cyber-accent outline-none mb-2 font-mono resize-none">https://picsum.photos/id/237/400/400,https://picsum.photos/id/238/400/400,https://picsum.photos/id/239/400/400,https://picsum.photos/id/240/400/400</textarea>
+          <button id="loadImagesBtn" class="w-full bg-cyber-secondary/20 border border-cyber-secondary text-cyber-secondary text-xs rounded py-2 hover:bg-cyber-secondary hover:text-white transition font-bold flex items-center justify-center gap-2">
+            <i data-lucide="upload" class="w-3 h-3"></i> LOAD & ANALYZE
+          </button>
         </div>
         <div id="mediaList" class="flex-1 overflow-y-auto p-2 grid grid-cols-3 gap-2 content-start">
-          <div class="col-span-3 text-center text-xs text-gray-600 mt-4">No images loaded.</div>
+          <div class="col-span-3 text-center text-xs text-gray-600 mt-4 flex flex-col items-center">
+            <i data-lucide="image-off" class="w-8 h-8 mb-2 opacity-50"></i>
+            <p>No images loaded.</p>
+            <p class="text-[10px]">Use URLs above to generate a sequence.</p>
+          </div>
         </div>
       </div>
     </aside>
 
     <!-- CENTER: Viewport -->
     <main class="flex-1 bg-black relative flex items-center justify-center overflow-hidden">
-
+      
       <!-- Video Container (Three.js) -->
-      <div id="video-container" class="absolute inset-0 w-full h-full z-10">
-        <div id="canvas-wrapper" class="w-full h-full"></div>
-
+      <div id="video-container" class="absolute inset-0 w-full h-full z-10 bg-black">
+        <div id="canvas-wrapper" class="w-full h-full relative"></div>
+        
         <!-- Video Overlay Controls -->
-        <div
-          class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-cyber-panel/90 backdrop-blur border border-cyber-border rounded-full px-6 py-2 flex items-center gap-4 shadow-2xl">
-          <button id="btnPlay" class="text-white hover:text-cyber-accent"><i data-lucide="play"></i></button>
-          <div class="text-xs font-mono text-cyber-accent" id="timeDisplay">00:00</div>
+        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-cyber-panel/90 backdrop-blur-md border border-cyber-border rounded-full px-6 py-3 flex items-center gap-6 shadow-2xl shadow-black">
+          <button id="btnPlay" class="w-10 h-10 rounded-full bg-white text-black flex items-center justify-center hover:bg-cyber-accent hover:text-black transition-all transform hover:scale-105 shadow-lg">
+            <i data-lucide="play" class="w-5 h-5 ml-0.5"></i>
+          </button>
+          <div class="flex flex-col">
+            <div class="text-xs font-mono text-cyber-accent flex items-center gap-2">
+              <i data-lucide="clock" class="w-3 h-3"></i>
+              <span id="timeDisplay">00:00</span>
+            </div>
+            <div class="w-32 h-1 bg-gray-800 rounded-full mt-1 overflow-hidden">
+              <div id="videoProgress" class="h-full bg-cyber-accent w-0 transition-all duration-100"></div>
+            </div>
+          </div>
+          <div class="flex flex-col items-end">
+             <span class="text-[10px] text-gray-500 uppercase">Active Effects</span>
+             <span id="activeEffectCount" class="text-cyber-secondary font-bold text-lg">0</span>
+          </div>
+        </div>
+        
+        <!-- Overlay Status Message -->
+        <div id="viewportMessage" class="absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 transition-opacity duration-500">
+            <div class="bg-black/80 px-6 py-3 rounded border border-cyber-accent text-cyber-accent font-mono text-sm backdrop-blur-sm">
+                Waiting for video source...
+            </div>
         </div>
       </div>
 
       <!-- Image Container (2D Canvas) -->
       <div id="image-container" class="absolute inset-0 flex items-center justify-center bg-gray-900 z-0 hidden">
-        <canvas id="artCanvas" width="600" height="600"
-          class="max-w-full max-h-full shadow-2xl border border-cyber-border"></canvas>
+        <div class="relative shadow-2xl border border-cyber-border rounded overflow-hidden max-w-full max-h-full">
+          <canvas id="artCanvas" width="600" height="600" class="bg-black block max-h-[80vh] max-w-[90vw]"></canvas>
+          <div class="absolute bottom-2 right-2 bg-black/60 text-[10px] text-white px-2 py-1 rounded font-mono pointer-events-none">
+            Canvas Active
+          </div>
+        </div>
       </div>
 
     </main>
 
     <!-- RIGHT: Stack & Settings -->
-    <aside class="w-80 bg-cyber-panel border-l border-cyber-border flex flex-col z-10 shrink-0">
-
+    <aside class="w-80 bg-cyber-panel border-l border-cyber-border flex flex-col z-10 shrink-0 shadow-2xl">
+      
       <!-- Video Mode Stack -->
       <div id="rightStack" class="flex flex-col h-full">
-        <div class="p-3 border-b border-cyber-border flex justify-between items-center">
-          <span class="text-xs font-bold text-gray-400">ACTIVE SHADERS</span>
-          <span id="stackCount" class="text-[10px] bg-cyber-border px-1 rounded">0/8</span>
+        <div class="p-3 border-b border-cyber-border flex justify-between items-center bg-black/20">
+          <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">ACTIVE SHADER STACK</span>
+          <span id="stackCount" class="text-[10px] bg-cyber-border px-2 py-0.5 rounded text-white">0/8</span>
         </div>
-        <div id="stackList" class="flex-1 overflow-y-auto p-2 space-y-2">
-          <div class="text-center mt-10 text-gray-600 text-xs">Stack is empty.</div>
+        <div id="stackList" class="flex-1 overflow-y-auto p-2 space-y-2 custom-scrollbar bg-black/10">
+          <div class="flex flex-col items-center justify-center h-full text-center text-gray-600 text-xs pb-10">
+            <i data-lucide="layers" class="w-10 h-10 mb-3 opacity-20"></i>
+            <p>Stack is empty.</p>
+            <p class="text-[10px]">Add effects from the left panel.</p>
+          </div>
         </div>
 
         <!-- Snippet Info -->
         <div class="p-3 border-t border-cyber-border bg-black/40 text-[10px] text-gray-500 font-mono">
           <div class="flex justify-between mb-1">
-            <span>WebGL Renderer</span>
+            <span class="flex items-center gap-1"><i data-lucide="cpu" class="w-3 h-3"></i> WebGL Renderer</span>
             <span class="text-cyber-accent">Active</span>
           </div>
           <div class="flex justify-between">
-            <span>Audio Sync</span>
+            <span class="flex items-center gap-1"><i data-lucide="activity" class="w-3 h-3"></i> Audio Sync</span>
             <span class="text-cyber-secondary" id="audioStatus">Waiting...</span>
           </div>
+          <div class="flex justify-between mt-1">
+            <span class="flex items-center gap-1"><i data-lucide="zap" class="w-3 h-3"></i> FPS</span>
+            <span id="fpsDisplay" class="text-cyber-accent">60</span>
+          </div>
         </div>
       </div>
 
       <!-- GIF Mode Settings -->
-      <div id="rightSettings" class="flex flex-col h-full hidden overflow-y-auto">
-        <div class="p-3 border-b border-cyber-border flex justify-between items-center">
-          <span class="text-xs font-bold text-cyber-alert">GIF SETTINGS</span>
+      <div id="rightSettings" class="flex flex-col h-full hidden overflow-y-auto bg-black/20">
+        <div class="p-3 border-b border-cyber-border flex justify-between items-center bg-black/40">
+          <span class="text-xs font-bold text-cyber-alert uppercase tracking-wider">GIF CONFIGURATION</span>
+          <i data-lucide="settings" class="w-4 h-4 text-cyber-alert"></i>
         </div>
 
-        <div class="p-4 space-y-4">
+        <div class="p-4 space-y-6">
           <!-- Animation -->
           <div>
-            <label class="text-[10px] uppercase text-gray-500 font-bold">Transition Speed</label>
-            <input type="range" id="transitionSpeed" min="50" max="2000" value="300" class="w-full mt-1">
-            <div class="flex justify-between text-[10px] text-gray-600">
-              <span>Fast</span><span id="speedVal">300ms</span><span>Slow</span>
+            <label class="text-[10px] uppercase text-gray-500 font-bold flex items-center gap-2 mb-2">
+              <i data-lucide="zap" class="w-3 h-3"></i> Transition Speed
+            </label>
+            <input type="range" id="transitionSpeed" min="50" max="2000" value="300" class="w-full mt-1 accent-cyber-accent">
+            <div class="flex justify-between text-[10px] text-gray-600 mt-1">
+              <span class="font-mono">Fast</span><span id="speedVal" class="font-mono text-cyber-accent">300ms</span><span class="font-mono">Slow</span>
             </div>
           </div>
 
           <div>
-            <label class="text-[10px] uppercase text-gray-500 font-bold">Hold Duration</label>
-            <input type="range" id="holdDuration" min="0" max="2000" value="100" class="w-full mt-1">
-            <div class="flex justify-between text-[10px] text-gray-600">
-              <span>Instant</span><span id="holdVal">100ms</span><span>Stare</span>
+            <label class="text-[10px] uppercase text-gray-500 font-bold flex items-center gap-2 mb-2">
+              <i data-lucide="clock" class="w-3 h-3"></i> Hold Duration
+            </label>
+            <input type="range" id="holdDuration" min="0" max="2000" value="100" class="w-full mt-1 accent-cyber-accent">
+            <div class="flex justify-between text-[10px] text-gray-600 mt-1">
+              <span class="font-mono">Instant</span><span id="holdVal" class="font-mono text-cyber-accent">100ms</span><span class="font-mono">Stare</span>
             </div>
           </div>
 
           <div>
-            <label class="text-[10px] uppercase text-gray-500 font-bold">Loops</label>
-            <input type="number" id="loopCount" value="5" min="1" max="50" class="w-full bg-black border border-cyber-border rounded px-2 py-1 text-xs text-white mt-1">
+            <label class="text-[10px] uppercase text-gray-500 font-bold flex items-center gap-2 mb-2">
+              <i data-lucide="repeat" class="w-3 h-3"></i> Loops
+            </label>
+            <input type="number" id="loopCount" value="5" min="1" max="50" class="w-full bg-black border border-cyber-border rounded px-2 py-1 text-xs text-white mt-1 focus:border-cyber-accent outline-none">
           </div>
 
           <div class="border-t border-cyber-border my-2"></div>
 
           <!-- Filters -->
           <div>
-            <label class="text-[10px] uppercase text-gray-500 font-bold">Contrast</label>
-            <input type="range" id="contrast" min="0" max="300" value="100" class="w-full mt-1">
-          </div>
-
-          <div>
-            <label class="text-[10px] uppercase text-gray-500 font-bold">Brightness</label>
-            <input type="range" id="brightness" min="0" max="200" value="100" class="w-full mt-1">
+            <label class="text-[10px] uppercase text-gray-500 font-bold flex items-center gap-2 mb-2">
+              <i data-lucide="sliders-vertical" class="w-3 h-3"></i> Image Processing
+            </label>
+            
+            <div class="space-y-3">
+                <div>
+                    <label class="text-[10px] text-gray-600">Contrast</label>
+                    <input type="range" id="contrast" min="0" max="300" value="100" class="w-full mt-1 accent-cyber-secondary">
+                </div>
+                <div>
+                    <label class="text-[10px] text-gray-600">Brightness</label>
+                    <input type="range" id="brightness" min="0" max="200" value="100" class="w-full mt-1 accent-cyber-secondary">
+                </div>
+            </div>
           </div>
 
           <div>
-            <label class="text-[10px] uppercase text-gray-500 font-bold block mb-2">Spot Color</label>
+            <label class="text-[10px] uppercase text-gray-500 font-bold block mb-2 flex items-center gap-2">
+                <i data-lucide="palette" class="w-3 h-3"></i> Spot Color Overlay
+            </label>
             <div class="flex gap-2 flex-wrap" id="spotColorPreview">
               <!-- Swatches injected via JS -->
             </div>
           </div>
 
-          <div class="space-y-2 pt-2">
-            <label class="flex items-center gap-2 cursor-pointer">
-                            <input type="checkbox" id="grayscaleToggle" class="accent-cyber-accent">
-                            <span class="text-xs">Grayscale</span>
-                        </label>
-            <label class="flex items-center gap-2 cursor-pointer">
-                            <input type="checkbox" id="glitchToggle" class="accent-cyber-alert">
-                            <span class="text-xs">Glitch Noise</span>
-                        </label>
-            <label class="flex items-center gap-2 cursor-pointer">
-                            <input type="checkbox" id="rotateToggle" class="accent-cyber-secondary">
-                            <span class="text-xs">Film Jitter</span>
-                        </label>
+          <div class="border-t border-cyber-border my-2"></div>
+
+          <div class="space-y-3">
+            <label class="flex items-center gap-3 cursor-pointer group">
+                <div class="relative">
+                    <input type="checkbox" id="grayscaleToggle" class="sr-only peer">
+                    <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-cyber-accent"></div>
+                </div>
+                <span class="text-xs text-gray-400 group-hover:text-white transition-colors">Grayscale</span>
+            </label>
+            
+            <label class="flex items-center gap-3 cursor-pointer group">
+                <div class="relative">
+                    <input type="checkbox" id="glitchToggle" class="sr-only peer">
+                    <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-cyber-alert"></div>
+                </div>
+                <span class="text-xs text-gray-400 group-hover:text-white transition-colors">Glitch Noise</span>
+            </label>
+            
+            <label class="flex items-center gap-3 cursor-pointer group">
+                <div class="relative">
+                    <input type="checkbox" id="rotateToggle" class="sr-only peer">
+                    <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-cyber-secondary"></div>
+                </div>
+                <span class="text-xs text-gray-400 group-hover:text-white transition-colors">Film Jitter</span>
+            </label>
           </div>
 
           <div class="border-t border-cyber-border my-4"></div>
 
           <!-- Status & Download -->
-          <div class="bg-black p-2 rounded border border-cyber-border">
-            <div class="flex justify-between text-[10px] mb-1">
-              <span id="renderStatus">Ready</span>
-              <span id="frameCount">0/0</span>
+          <div class="bg-black p-3 rounded border border-cyber-border shadow-inner">
+            <div class="flex justify-between text-[10px] mb-2 font-mono">
+              <span id="renderStatus">Ready to Render</span>
+              <span id="frameCount" class="text-gray-500">0/0</span>
             </div>
-            <div class="w-full bg-gray-800 h-1 rounded overflow-hidden mb-2">
-              <div id="renderProgress" class="h-full bg-cyber-alert w-0"></div>
+            <div class="w-full bg-gray-800 h-2 rounded overflow-hidden mb-2 border border-gray-700">
+              <div id="renderProgress" class="h-full bg-gradient-to-r from-cyber-alert to-cyber-secondary w-0 transition-all duration-300"></div>
             </div>
+            <a id="downloadLink" href="#"
+              class="hidden block text-center text-xs text-cyber-accent underline hover:text-white py-2 border border-cyber-accent/50 rounded transition-all hover:bg-cyber-accent/10">
+              Download GIF
+            </a>
           </div>
-
-          <a id="downloadLink" href="#"
-            class="hidden block text-center text-xs text-cyber-accent underline py-2">Download GIF</a>
         </div>
       </div>
 
@@ -348,556 +445,323 @@
   <!-- MODULE LOGIC -->
   <script type="module">
     import * as THREE from 'three';
-        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-
-        // --- GLOBAL STATE ---
-        const State = {
-            mode: 'VIDEO', // 'VIDEO' or 'IMAGE'
-        };
-
-        // --- 1. SHADER LIBRARY (GLSL SNIPPETS) ---
-        const SHADER_LIB = [
-            { id: 'bw', name: 'Grayscale', cat: 'Color', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)); gl_FragColor = vec4(mix(color.rgb, vec3(gray), amount), color.a); }` },
-            { id: 'sepia', name: 'Sepia Tone', cat: 'Color', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); vec3 sepia = vec3(dot(color.rgb, vec3(0.393, 0.769, 0.189)), dot(color.rgb, vec3(0.349, 0.686, 0.168)), dot(color.rgb, vec3(0.272, 0.534, 0.131))); gl_FragColor = vec4(mix(color.rgb, sepia, amount), color.a); }` },
-            { id: 'invert', name: 'Invert Color', cat: 'Color', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); gl_FragColor = vec4(mix(color.rgb, 1.0 - color.rgb, amount), color.a); }` },
-            { id: 'rgb', name: 'RGB Shift', cat: 'Glitch', glsl: `uniform float amount; uniform float uAudio; void main() { float offset = amount * 0.05 * (1.0 + uAudio); vec2 rUv = vUv + vec2(offset, 0.0); vec2 gUv = vUv; vec2 bUv = vUv - vec2(offset, 0.0); vec4 r = texture2D(tDiffuse, rUv); vec4 g = texture2D(tDiffuse, gUv); vec4 b = texture2D(tDiffuse, bUv); gl_FragColor = vec4(r.r, g.g, b.b, 1.0); }` },
-            { id: 'pixel', name: 'Pixelate', cat: 'Glitch', glsl: `uniform float amount; uniform vec2 resolution; void main() { float d = 1.0 / (amount * 100.0 + 10.0); vec2 coord = d * floor(vUv / d); gl_FragColor = texture2D(tDiffuse, coord); }` },
-            { id: 'noise', name: 'Static Noise', cat: 'Glitch', glsl: `uniform float amount; uniform float time; float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { vec4 color = texture2D(tDiffuse, vUv); float diff = (rand(vUv + time) - 0.5) * amount; gl_FragColor = vec4(color.rgb + diff, color.a); }` },
-            { id: 'scanline', name: 'CRT Scanlines', cat: 'Glitch', glsl: `uniform float amount; uniform vec2 resolution; void main() { vec4 color = texture2D(tDiffuse, vUv); float scanline = sin(vUv.y * resolution.y * 0.5) * 0.1 * amount; gl_FragColor = vec4(color.rgb - scanline, color.a); }` },
-            { id: 'vignette', name: 'Dark Vignette', cat: 'Art', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); float dist = distance(vUv, vec2(0.5)); color.rgb *= smoothstep(0.8, 0.8 - amount, dist); gl_FragColor = color; }` },
-            { id: 'kaleido', name: 'Kaleidoscope', cat: 'Art', glsl: `uniform float amount; void main() { vec2 uv = vUv - 0.5; float angle = atan(uv.y, uv.x); float radius = length(uv); float segments = 6.0 + floor(amount * 10.0); angle = mod(angle, 6.28318 / segments); angle = abs(angle - 3.14159 / segments); vec2 newUv = vec2(cos(angle), sin(angle)) * radius + 0.5; gl_FragColor = texture2D(tDiffuse, newUv); }` },
-            { id: 'contrast', name: 'High Contrast', cat: 'Color', glsl: `uniform float amount; void main() { vec4 c = texture2D(tDiffuse, vUv); gl_FragColor = vec4((c.rgb - 0.5) * (1.0 + amount) + 0.5, c.a); }` },
-            { id: 'shake', name: 'Bass Shake', cat: 'Motion', glsl: `uniform float amount; uniform float uAudio; uniform float time; void main() { vec2 uv = vUv; uv.x += sin(time * 50.0) * amount * 0.1 * uAudio; gl_FragColor = texture2D(tDiffuse, uv); }` }
-        ];
-
-        // --- 2. VIDEO ENGINE (Three.js) ---
-        const VideoEngine = {
-            scene: null,
-            camera: null,
-            renderer: null,
-            composer: null,
-            video: null,
-            videoTex: null,
-            audioCtx: null,
-            analyser: null,
-            dataArray: null,
-            stack: [],
-            maxEffects: 8,
-            isPlaying: false,
-
-            init: () => {
-                const container = document.getElementById('canvas-wrapper');
-                const width = container.clientWidth;
-                const height = container.clientHeight;
-
-                VideoEngine.scene = new THREE.Scene();
-                VideoEngine.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-                
-                VideoEngine.renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: true });
-                VideoEngine.renderer.setSize(width, height);
-                container.appendChild(VideoEngine.renderer.domElement);
+    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+    import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+
+    // --- 1. IMAGE PROCESSOR MODULE (Simulating Python Logic) ---
+    const ImageProcessor = {
+        source: null,
+        processed: false,
+        
+        analyze: function(sourceUrl) {
+            console.log(`Analysing image source: ${sourceUrl}...`);
+            // Simulation of image analysis
+            return {
+                status: "success", 
+                confidence: 0.98,
+                dimensions: "600x600",
+                format: "JPEG"
+            };
+        },
+
+        processImage: function(imgElement, filters) {
+            // This function applies the logic defined in the GIF Engine settings
+            // to a standard Image object context if needed for pre-processing.
+            return imgElement; 
+        }
+    };
+
+    // --- GLOBAL STATE ---
+    const State = {
+        mode: 'VIDEO', // 'VIDEO' or 'IMAGE'
+        fps: 0,
+        lastTime: 0
+    };
+
+    // --- 2. SHADER LIBRARY (GLSL SNIPPETS) ---
+    const SHADER_LIB = [
+        { id: 'bw', name: 'Grayscale', cat: 'Color', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114)); gl_FragColor = vec4(mix(color.rgb, vec3(gray), amount), color.a); }` },
+        { id: 'sepia', name: 'Sepia Tone', cat: 'Color', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); vec3 sepia = vec3(dot(color.rgb, vec3(0.393, 0.769, 0.189)), dot(color.rgb, vec3(0.349, 0.686, 0.168)), dot(color.rgb, vec3(0.272, 0.534, 0.131))); gl_FragColor = vec4(mix(color.rgb, sepia, amount), color.a); }` },
+        { id: 'invert', name: 'Invert Color', cat: 'Color', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); gl_FragColor = vec4(mix(color.rgb, 1.0 - color.rgb, amount), color.a); }` },
+        { id: 'rgb', name: 'RGB Shift', cat: 'Glitch', glsl: `uniform float amount; uniform float uAudio; void main() { float offset = amount * 0.05 * (1.0 + uAudio); vec2 rUv = vUv + vec2(offset, 0.0); vec2 gUv = vUv; vec2 bUv = vUv - vec2(offset, 0.0); vec4 r = texture2D(tDiffuse, rUv); vec4 g = texture2D(tDiffuse, gUv); vec4 b = texture2D(tDiffuse, bUv); gl_FragColor = vec4(r.r, g.g, b.b, 1.0); }` },
+        { id: 'pixel', name: 'Pixelate', cat: 'Glitch', glsl: `uniform float amount; uniform vec2 resolution; void main() { float d = 1.0 / (amount * 100.0 + 10.0); vec2 coord = d * floor(vUv / d); gl_FragColor = texture2D(tDiffuse, coord); }` },
+        { id: 'noise', name: 'Static Noise', cat: 'Glitch', glsl: `uniform float amount; uniform float time; float rand(vec2 co) { return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); } void main() { vec4 color = texture2D(tDiffuse, vUv); float diff = (rand(vUv + time) - 0.5) * amount; gl_FragColor = vec4(color.rgb + diff, color.a); }` },
+        { id: 'scanline', name: 'CRT Scanlines', cat: 'Glitch', glsl: `uniform float amount; uniform vec2 resolution; void main() { vec4 color = texture2D(tDiffuse, vUv); float scanline = sin(vUv.y * resolution.y * 0.5) * 0.1 * amount; gl_FragColor = vec4(color.rgb - scanline, color.a); }` },
+        { id: 'vignette', name: 'Dark Vignette', cat: 'Art', glsl: `uniform float amount; void main() { vec4 color = texture2D(tDiffuse, vUv); float dist = distance(vUv, vec2(0.5)); color.rgb *= smoothstep(0.8, 0.8 - amount, dist); gl_FragColor = color; }` },
+        { id: 'kaleido', name: 'Kaleidoscope', cat: 'Art', glsl: `uniform float amount; void main() { vec2 uv = vUv - 0.5; float angle = atan(uv.y, uv.x); float radius = length(uv); float segments = 6.0 + floor(amount * 10.0); angle = mod(angle, 6.28318 / segments); angle = abs(angle - 3.14159 / segments); vec2 newUv = vec2(cos(angle), sin(angle)) * radius + 0.5; gl_FragColor = texture2D(tDiffuse, newUv); }` },
+        { id: 'contrast', name: 'High Contrast', cat: 'Color', glsl: `uniform float amount; void main() { vec4 c = texture2D(tDiffuse, vUv); gl_FragColor = vec4((c.rgb - 0.5) * (1.0 + amount) + 0.5, c.a); }` },
+        { id: 'shake', name: 'Bass Shake', cat: 'Motion', glsl: `uniform float amount; uniform float uAudio; uniform float time; void main() { vec2 uv = vUv; uv.x += sin(time * 50.0) * amount * 0.1 * uAudio; gl_FragColor = texture2D(tDiffuse, uv); }` }
+    ];
+
+    // --- 3. VIDEO ENGINE (Three.js) ---
+    const VideoEngine = {
+        scene: null,
+        camera: null,
+        renderer: null,
+        composer: null,
+        video: null,
+        videoTex: null,
+        audioCtx: null,
+        analyser: null,
+        dataArray: null,
+        stack: [],
+        maxEffects: 8,
+        isPlaying: false,
+        lastFrameTime: 0,
+        frameCount: 0,
+
+        init: () => {
+            const container = document.getElementById('canvas-wrapper');
+            const width = container.clientWidth;
+            const height = container.clientHeight;
+
+            VideoEngine.scene = new THREE.Scene();
+            VideoEngine.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+            
+            VideoEngine.renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: true });
+            VideoEngine.renderer.setSize(width, height);
+            container.appendChild(VideoEngine.renderer.domElement);
 
-                VideoEngine.video = document.getElementById('videoSrc');
-                VideoEngine.videoTex = new THREE.VideoTexture(VideoEngine.video);
-                VideoEngine.videoTex.minFilter = THREE.LinearFilter;
-                VideoEngine.videoTex.magFilter = THREE.LinearFilter;
+            VideoEngine.video = document.getElementById('videoSrc');
+            VideoEngine.videoTex = new THREE.VideoTexture(VideoEngine.video);
+            VideoEngine.videoTex.minFilter = THREE.LinearFilter;
+            VideoEngine.videoTex.magFilter = THREE.LinearFilter;
 
-                VideoEngine.composer = new EffectComposer(VideoEngine.renderer);
-                const renderPass = new RenderPass(VideoEngine.scene, VideoEngine.camera);
-                
-                const geometry = new THREE.PlaneGeometry(2, 2);
-                const material = new THREE.MeshBasicMaterial({ map: VideoEngine.videoTex });
-                const quad = new THREE.Mesh(geometry, material);
-                VideoEngine.scene.add(quad);
+            VideoEngine.composer = new EffectComposer(VideoEngine.renderer);
+            const renderPass = new RenderPass(VideoEngine.scene, VideoEngine.camera);
+            
+            const geometry = new THREE.PlaneGeometry(2, 2);
+            const material = new THREE.MeshBasicMaterial({ map: VideoEngine.videoTex });
+            const quad = new THREE.Mesh(geometry, material);
+            VideoEngine.scene.add(quad);
+            
+            VideoEngine.composer.addPass(renderPass);
+            
+            // Setup Audio Context
+            VideoEngine.setupAudio();
+            VideoEngine.buildLibrary();
+            VideoEngine.animate();
+        },
+
+        setupAudio: () => {
+            try {
+                VideoEngine.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                VideoEngine.analyser = VideoEngine.audioCtx.createAnalyser();
+                VideoEngine.analyser.fftSize = 256;
+                VideoEngine.dataArray = new Uint8Array(VideoEngine.analyser.frequencyBinCount);
                 
-                VideoEngine.composer.addPass(renderPass);
-                VideoEngine.buildLibrary();
-                VideoEngine.animate();
-            },
-
-            buildLibrary: () => {
-                const list = document.getElementById('libraryList');
-                list.innerHTML = '';
-                const categories = [...new Set(SHADER_LIB.map(s => s.cat))];
+                const audioEl = document.getElementById('audioSrc');
+                const source = VideoEngine.audioCtx.createMediaElementSource(audioEl);
+                source.connect(VideoEngine.analyser);
+                VideoEngine.analyser.connect(VideoEngine.audioCtx.destination);
+            } catch (e) {
+                console.warn("Audio initialization failed", e);
+            }
+        },
+
+        buildLibrary: () => {
+            const list = document.getElementById('libraryList');
+            list.innerHTML = '';
+            const categories = [...new Set(SHADER_LIB.map(s => s.cat))];
+            
+            categories.forEach(cat => {
+                const header = document.createElement('div');
+                header.className = "px-2 py-1 bg-cyber-border/30 text-[10px] font-bold text-cyber-accent uppercase mt-2 mb-1 sticky top-0 backdrop-blur-sm flex items-center gap-2";
+                header.innerHTML = `<i data-lucide="layers" class="w-3 h-3"></i> ${cat}`;
+                list.appendChild(header);
                 
-                categories.forEach(cat => {
-                    const header = document.createElement('div');
-                    header.className = "px-2 py-1 bg-cyber-border/30 text-[10px] font-bold text-cyber-accent uppercase mt-2 mb-1 sticky top-0 backdrop-blur-sm";
-                    header.innerText = cat;
-                    list.appendChild(header);
-                    
-                    SHADER_LIB.filter(s => s.cat === cat).forEach(shader => {
-                        const el = document.createElement('div');
-                        el.className = "shader-card p-2 text-xs text-gray-300 cursor-pointer flex justify-between items-center rounded";
-                        el.innerHTML = `<span>${shader.name}</span> <i data-lucide="plus" class="w-3 h-3 opacity-50"></i>`;
-                        el.onclick = () => VideoEngine.addEffect(shader.id);
-                        list.appendChild(el);
-                    });
+                SHADER_LIB.filter(s => s.cat === cat).forEach(shader => {
+                    const el = document.createElement('div');
+                    el.className = "shader-card p-2 text-xs text-gray-300 cursor-pointer flex justify-between items-center rounded border border-transparent hover:border-cyber-accent/50 transition-all";
+                    el.innerHTML = `<div class="flex items-center gap-2"><span class="font-bold">${shader.name}</span> <i data-lucide="sliders-vertical" class="w-2 h-2 opacity-50"></i></div> <i data-lucide="plus" class="w-3 h-3 opacity-50 group-hover:text-cyber-accent"></i>`;
+                    el.onclick = () => VideoEngine.addEffect(shader.id);
+                    list.appendChild(el);
                 });
-                lucide.createIcons();
-            },
-
-            addEffect: (id) => {
-                if (VideoEngine.stack.length >= VideoEngine.maxEffects) return;
-                const def = SHADER_LIB.find(s => s.id === id);
-                if (!def) return;
-
-                const myUniforms = {
-                    "tDiffuse": { value: null },
-                    "amount": { value: 0.5 },
-                    "time": { value: 0.0 },
-                    "resolution": { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
-                    "uAudio": { value: 0.0 }
-                };
-
-                const myShader = {
-                    uniforms: myUniforms,
-                    vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`,
-                    fragmentShader: def.glsl
-                };
-
-                const pass = new ShaderPass(myShader);
-                pass.uid = Date.now() + Math.random();
-                pass.def = def;
-                
-                VideoEngine.composer.addPass(pass);
-                VideoEngine.stack.push(pass);
+            });
+            lucide.createIcons();
+        },
+
+        addEffect: (id) => {
+            if (VideoEngine.stack.length >= VideoEngine.maxEffects) {
+                alert("Stack Full! Remove an effect to add more.");
+                return;
+            }
+            const def = SHADER_LIB.find(s => s.id === id);
+            if (!def) return;
+
+            const myUniforms = {
+                "tDiffuse": { value: null },
+                "amount": { value: 0.5 },
+                "time": { value: 0.0 },
+                "resolution": { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
+                "uAudio": { value: 0.0 }
+            };
+
+            const myShader = {
+                uniforms: myUniforms,
+                vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`,
+                fragmentShader: def.glsl
+            };
+
+            const pass = new ShaderPass(myShader);
+            pass.uid = Date.now() + Math.random();
+            pass.def = def;
+            
+            VideoEngine.composer.addPass(pass);
+            VideoEngine.stack.push(pass);
+            VideoEngine.renderStackUI();
+        },
+
+        removeEffect: (uid) => {
+            const idx = VideoEngine.stack.findIndex(p => p.uid === uid);
+            if (idx > -1) {
+                VideoEngine.composer.removePass(VideoEngine.stack[idx]);
+                VideoEngine.stack.splice(idx, 1);
                 VideoEngine.renderStackUI();
-            },
-
-            removeEffect: (uid) => {
-                const idx = VideoEngine.stack.findIndex(p => p.uid === uid);
-                if (idx > -1) {
-                    VideoEngine.composer.removePass(VideoEngine.stack[idx]);
-                    VideoEngine.stack.splice(idx, 1);
-                    VideoEngine.renderStackUI();
-                }
-            },
+            }
+        },
 
-            renderStackUI: () => {
-                const container = document.getElementById('stackList');
-                document.getElementById('stackCount').innerText = `${VideoEngine.stack.length}/${VideoEngine.maxEffects}`;
-                
-                if (VideoEngine.stack.length === 0) {
-                    container.innerHTML = '<div class="text-center mt-10 text-gray-600 text-xs">Stack is empty.</div>';
-                    return;
-                }
+        updateEffectAmount: (uid, val) => {
+            const pass = VideoEngine.stack.find(p => p.uid === uid);
+            if (pass) {
+                pass.uniforms.amount.value = parseFloat(val);
+            }
+        },
 
-                container.innerHTML = '';
-                VideoEngine.stack.forEach((pass, i) => {
-                    const el = document.createElement('div');
-                    el.className = "bg-black border border-cyber-border rounded p-2 mb-2";
-                    el.innerHTML = `
-                        <div class="flex justify-between items-center mb-1">
-                            <span class="font-bold text-cyber-secondary text-xs">${i+1}. ${pass.def.name}</span>
-                            <button class="text-red-500 hover:text-white" onclick="window.removeVideoFx(${pass.uid})"><i data-lucide="x" class="w-3 h-3"></i></button>
+        renderStackUI: () => {
+            const container = document.getElementById('stackList');
+            document.getElementById('stackCount').innerText = `${VideoEngine.stack.length}/${VideoEngine.maxEffects}`;
+            document.getElementById('activeEffectCount').innerText = VideoEngine.stack.length;
+            
+            if (VideoEngine.stack.length === 0) {
+                container.innerHTML = `<div class="flex flex-col items-center justify-center h-full text-center text-gray-600 text-xs pb-10">
+                    <i data-lucide="layers" class="w-10 h-10 mb-3 opacity-20"></i>
+                    <p>Stack is empty.</p>
+                    <p class="text-[10px]">Add effects from the left panel.</p>
+                </div>`;
+                return;
+            }
+
+            container.innerHTML = '';
+            VideoEngine.stack.forEach((pass, i) => {
+                const el = document.createElement('div');
+                el.className = "bg-black border border-cyber-border rounded p-3 mb-2 shadow-lg relative group";
+                el.innerHTML = `
+                    <div class="flex justify-between items-center mb-2">
+                        <div class="flex items-center gap-2">
+                            <span class="font-bold text-cyber-secondary text-xs">${i+1}.</span>
+                            <span class="text-xs font-medium text-gray-200">${pass.def.name}</span>
                         </div>
-                        <input type="range" class="w-full h-1 bg-gray-800 rounded appearance-none cursor-pointer" 
+                        <button class="text-red-500 hover:text-white hover:bg-red-500/20 p-1 rounded transition" onclick="window.removeVideoFx(${pass.uid})"><i data-lucide="x" class="w-3 h-3"></i></button>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <i data-lucide="sliders-vertical" class="w-3 h-3 text-gray-600"></i>
+                        <input type="range" class="w-full h-1 bg-gray-800 rounded appearance-none cursor-pointer accent-cyber-secondary" 
                             min="0" max="1" step="0.01" value="${pass.uniforms.amount.value}"
                             oninput="window.updateVideoFx(${pass.uid}, this.value)">
-                    `;
-                    container.appendChild(el);
-                });
-                lucide.createIcons();
-            },
-
-            animate: () => {
-                if (State.mode !== 'VIDEO') return;
-                requestAnimationFrame(VideoEngine.animate);
+                    </div>
+                    <div class="flex justify-between text-[9px] text-gray-500 mt-1 font-mono">
+                        <span>INTENSITY</span>
+                        <span id="val-${pass.uid}">${(pass.uniforms.amount.value * 100).toFixed(0)}%</span>
+                    </div>
+                `;
+                container.appendChild(el);
+            });
+            lucide.createIcons();
+        },
+
+        animate: () => {
+            if (State.mode !== 'VIDEO') return;
+            requestAnimationFrame(VideoEngine.animate);
+
+            // FPS Calculation
+            const now = performance.now();
+            const delta = now - State.lastTime;
+            if (delta >= 1000) {
+                State.lastTime = now;
+                State.fps = VideoEngine.frameCount;
+                VideoEngine.frameCount = 0;
+                document.getElementById('fpsDisplay').innerText = State.fps;
+            }
+            VideoEngine.frameCount++;
 
-                let audioLevel = 0;
-                if (VideoEngine.analyser) {
+            let audioLevel = 0;
+            if (VideoEngine.analyser) {
+                try {
                     VideoEngine.analyser.getByteFrequencyData(VideoEngine.dataArray);
+                    // Calculate average bass
                     let sum = 0;
                     for(let i=0; i<10; i++) sum += VideoEngine.dataArray[i];
                     audioLevel = sum / 10 / 255;
-                }
-
-                const time = performance.now() * 0.001;
-                VideoEngine.stack.forEach(pass => {
-                    if (pass.uniforms.time) pass.uniforms.time.value = time;
-                    if (pass.uniforms.uAudio) pass.uniforms.uAudio.value = audioLevel;
-                });
-
-                const audioEl = document.getElementById('audioSrc');
-                if (Math.abs(VideoEngine.video.currentTime - audioEl.currentTime) > 0.5 && !VideoEngine.video.paused) {
-                    audioEl.currentTime = VideoEngine.video.currentTime;
-                }
-
-                const m = Math.floor(VideoEngine.video.currentTime / 60);
-                const s = Math.floor(VideoEngine.video.currentTime % 60);
-                document.getElementById('timeDisplay').innerText = `${m}:${s.toString().padStart(2, '0')}`;
-
-                VideoEngine.composer.render();
+                } catch(e) { audioLevel = 0; }
             }
-        };
-
-        // --- 3. GIF ENGINE (Canvas 2D) ---
-        const GifEngine = {
-            canvas: null,
-            ctx: null,
-            images: [],
-            currentIndex: 0,
-            isRendering: false,
-            animationId: null,
-            
-            filters: {
-                contrast: 100,
-                brightness: 100,
-                grayscale: true,
-                spotColor: { r: 255, g: 0, b: 85, active: true },
-                glitch: false,
-                rotation: false
-            },
-            animation: {
-                speed: 300,
-                hold: 100,
-                loops: 5
-            },
-
-            init: () => {
-                GifEngine.canvas = document.getElementById('artCanvas');
-                GifEngine.ctx = GifEngine.canvas.getContext('2d');
-                GifEngine.initSpotColors();
-                
-                // Load default images
-                document.getElementById('loadImagesBtn').click();
-            },
-
-            initSpotColors: () => {
-                const colors = [
-                    { c: '255,255,255', bg: '#ffffff', name: 'None' },
-                    { c: '255,0,85', bg: '#ff0055', name: 'Red' },
-                    { c: '0,204,255', bg: '#00ccff', name: 'Blue' },
-                    { c: '255,204,0', bg: '#ffcc00', name: 'Gold' },
-                    { c: '51,255,51', bg: '#33ff33', name: 'Green' },
-                    { c: '170,0,255', bg: '#aa00ff', name: 'Purple' }
-                ];
-                
-                const container = document.getElementById('spotColorPreview');
-                container.innerHTML = '';
-                colors.forEach((col, idx) => {
-                    const div = document.createElement('div');
-                    div.className = `w-6 h-6 rounded-full cursor-pointer border border-gray-600 hover:scale-110 transition ${idx===1?'ring-2 ring-cyber-alert':''}`;
-                    div.style.backgroundColor = col.bg;
-                    div.onclick = () => {
-                        GifEngine.filters.spotColor = { 
-                            r: parseInt(col.c.split(',')[0]), 
-                            g: parseInt(col.c.split(',')[1]), 
-                            b: parseInt(col.c.split(',')[2]), 
-                            active: true 
-                        };
-                        // Visual update
-                        Array.from(container.children).forEach(c => c.classList.remove('ring-2', 'ring-cyber-alert'));
-                        div.classList.add('ring-2', 'ring-cyber-alert');
-                        if (!GifEngine.isRendering) GifEngine.drawFrame();
-                    };
-                    container.appendChild(div);
-                });
-            },
-
-            getLuminance: (img) => {
-                const tempC = document.createElement('canvas');
-                tempC.width = 50; tempC.height = 50;
-                const tCtx = tempC.getContext('2d');
-                tCtx.drawImage(img, 0, 0, 50, 50);
-                const data = tCtx.getImageData(0,0,50,50).data;
-                let sum = 0;
-                for(let i=0; i<data.length; i+=4) sum += (0.2126*data[i] + 0.7152*data[i+1] + 0.0722*data[i+2]);
-                return sum / 2500;
-            },
-
-            sortImages: () => {
-                GifEngine.images.sort((a, b) => GifEngine.getLuminance(a) - GifEngine.getLuminance(b));
-            },
-
-            drawFrame: () => {
-                if (GifEngine.images.length === 0) return;
-                const ctx = GifEngine.ctx;
-                const canvas = GifEngine.canvas;
-
-                ctx.fillStyle = '#000';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-                const img = GifEngine.images[GifEngine.currentIndex];
-                
-                ctx.save();
-                
-                // CSS Filters string
-                let f = `contrast(${GifEngine.filters.contrast}%) brightness(${GifEngine.filters.brightness}%)`;
-                if (GifEngine.filters.grayscale) f += ' grayscale(100%)';
-                ctx.filter = f;
-
-                // Transforms
-                if (GifEngine.filters.rotation) {
-                    const ang = (Math.random() - 0.5) * 0.05;
-                    ctx.translate(canvas.width/2, canvas.height/2);
-                    ctx.rotate(ang);
-                    ctx.translate(-canvas.width/2, -canvas.height/2);
-                }
 
-                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            const time = performance.now() * 0.001;
+            VideoEngine.stack.forEach(pass => {
+                if (pass.uniforms.time) pass.uniforms.time.value = time;
+                if (pass.uniforms.uAudio) pass.uniforms.uAudio.value = audioLevel;
+            });
 
-                // Spot Color
-                if (GifEngine.filters.spotColor.active) {
-                    ctx.globalCompositeOperation = 'overlay';
-                    ctx.fillStyle = `rgba(${GifEngine.filters.spotColor.r},${GifEngine.filters.spotColor.g},${GifEngine.filters.spotColor.b}, 0.4)`;
-                    ctx.fillRect(0, 0, canvas.width, canvas.height);
-                }
-
-                // Glitch
-                if (GifEngine.filters.glitch) {
-                    const h = Math.random() * 30;
-                    const y = Math.random() * canvas.height;
-                    const off = (Math.random() - 0.5) * 60;
-                    try {
-                        const d = ctx.getImageData(0, y, canvas.width, h);
-                        ctx.putImageData(d, off, y);
-                    } catch(e){}
+            // Sync Audio
+            const audioEl = document.getElementById('audioSrc');
+            if (audioEl && !VideoEngine.video.paused) {
+                if (Math.abs(VideoEngine.video.currentTime - audioEl.currentTime) > 0.5) {
+                    audioEl.currentTime = VideoEngine.video.currentTime;
                 }
-
-                ctx.restore();
-            },
-
-            loop: () => {
-                if (State.mode !== 'IMAGE' || GifEngine.isRendering) return;
-                
-                GifEngine.drawFrame();
-                
-                setTimeout(() => {
-                    GifEngine.currentIndex = (GifEngine.currentIndex + 1) % GifEngine.images.length;
-                    GifEngine.animationId = requestAnimationFrame(GifEngine.loop);
-                }, GifEngine.animation.speed + GifEngine.animation.hold);
-            },
-
-            loadImages: () => {
-                const urls = document.getElementById('imageSource').value.split(',').map(s=>s.trim()).filter(s=>s);
-                const list = document.getElementById('mediaList');
-                list.innerHTML = '<div class="col-span-3 text-center text-xs animate-pulse">Analyzing...</div>';
-                
-                let loaded = 0;
-                GifEngine.images = [];
-                
-                urls.forEach(url => {
-                    const img = new Image();
-                    img.crossOrigin = "Anonymous";
-                    img.onload = () => {
-                        GifEngine.images.push(img);
-                        loaded++;
-                        if (loaded === urls.length) {
-                            GifEngine.sortImages();
-                            list.innerHTML = '';
-                            GifEngine.images.forEach((im, idx) => {
-                                const div = document.createElement('div');
-                                div.className = "relative rounded overflow-hidden group";
-                                div.innerHTML = `<img src="${im.src}" class="w-full h-auto opacity-70 group-hover:opacity-100 transition">`;
-                                list.appendChild(div);
-                            });
-                            GifEngine.drawFrame();
-                            lucide.createIcons();
-                        }
-                    };
-                    img.onerror = () => {};
-                    img.src = url;
-                });
             }
-        };
-
-        // --- 4. GIF RENDERING ENGINE (gif.js + Canvas) ---
-        const RenderEngine = {
-            gif: null,
-            canvas: null,
-            ctx: null,
-            frames: [],
-            progress: 0,
-
-            init: () => {
-                RenderEngine.canvas = document.getElementById('artCanvas');
-                RenderEngine.ctx = RenderEngine.canvas.getContext('2d');
-            },
-
-            startRender: () => {
-                if (GifEngine.images.length === 0) {
-                    alert("Please load images first.");
-                    return;
-                }
-
-                RenderEngine.progress = 0;
-                document.getElementById('renderStatus').innerText = "Rendering Frames...";
-                document.getElementById('renderStatus').className = "text-cyber-secondary";
-                document.getElementById('renderProgress').style.width = "0%";
-                document.getElementById('downloadLink').classList.add('hidden');
-
-                const totalFrames = GifEngine.images.length * parseInt(document.getElementById('loopCount').value);
-                document.getElementById('frameCount').innerText = `0/${totalFrames}`;
-
-                RenderEngine.gif = new GIF({
-                    workers: 2,
-                    quality: 10,
-                    width: RenderEngine.canvas.width,
-                    height: RenderEngine.canvas.height,
-                    workerScript: 'https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js'
-                });
-
-                RenderEngine.gif.on('finished', function(blob) {
-                    const url = URL.createObjectURL(blob);
-                    const link = document.getElementById('downloadLink');
-                    link.href = url;
-                    link.download = 'hyper-fx-masterpiece.gif';
-                    link.classList.remove('hidden');
-                    document.getElementById('renderStatus').innerText = "Render Complete!";
-                    document.getElementById('renderStatus').className = "text-cyber-accent";
-                    document.getElementById('renderProgress').style.width = "100%";
-                });
-
-                RenderEngine.renderLoop(0, totalFrames);
-            },
-
-            renderLoop: (currentFrame, totalFrames) => {
-                if (currentFrame >= totalFrames) {
-                    RenderEngine.gif.render();
-                    return;
-                }
 
-                // Set GIF Engine state for this frame
-                GifEngine.currentIndex = currentFrame % GifEngine.images.length;
-                GifEngine.drawFrame();
-
-                RenderEngine.gif.addFrame(RenderEngine.ctx, {delay: parseInt(document.getElementById('transitionSpeed').value)});
-
-                RenderEngine.progress = ((currentFrame + 1) / totalFrames) * 100;
-                document.getElementById('renderProgress').style.width = `${RenderEngine.progress}%`;
-                document.getElementById('frameCount').innerText = `${currentFrame + 1}/${totalFrames}`;
-                document.getElementById('renderStatus').innerText = `Rendering Frame ${currentFrame + 1}...`;
-
-                requestAnimationFrame(() => {
-                    // Small timeout to prevent UI freeze
-                    setTimeout(() => RenderEngine.renderLoop(currentFrame + 1, totalFrames), 0);
-                });
+            // Update Time Display
+            const m = Math.floor(VideoEngine.video.currentTime / 60);
+            const s = Math.floor(VideoEngine.video.currentTime % 60);
+            document.getElementById('timeDisplay').innerText = `${m}:${s.toString().padStart(2, '0')}`;
+            
+            // Update Progress Bar
+            if (VideoEngine.video.duration > 0) {
+                const pct = (VideoEngine.video.currentTime / VideoEngine.video.duration) * 100;
+                document.getElementById('videoProgress').style.width = `${pct}%`;
             }
-        };
-
-        // --- 5. UI CONTROLLERS ---
-        const UI = {
-            init: () => {
-                // Mode Switching
-                document.getElementById('modeVideo').addEventListener('click', () => UI.setMode('VIDEO'));
-                document.getElementById('modeImage').addEventListener('click', () => UI.setMode('IMAGE'));
-
-                // Tabs
-                document.getElementById('tabShaders').addEventListener('click', () => UI.setTab('SHADERS'));
-                document.getElementById('tabImages').addEventListener('click', () => UI.setTab('IMAGES'));
-
-                // Video Controls
-                document.getElementById('btnPlay').addEventListener('click', () => {
-                    const v = document.getElementById('videoSrc');
-                    if (v.paused) v.play();
-                    else v.pause();
-                });
-                document.getElementById('videoSrc').addEventListener('timeupdate', () => {
-                    if (State.mode === 'VIDEO') {
-                        const m = Math.floor(document.getElementById('videoSrc').currentTime / 60);
-                        const s = Math.floor(document.getElementById('videoSrc').currentTime % 60);
-                        document.getElementById('timeDisplay').innerText = `${m}:${s.toString().padStart(2, '0')}`;
-                    }
-                });
 
-                // File Inputs
-                document.getElementById('inpVideo').addEventListener('change', (e) => {
-                    const file = e.target.files[0];
-                    if (file) {
-                        const url = URL.createObjectURL(file);
-                        document.getElementById('videoSrc').src = url;
-                        document.getElementById('videoSrc').load();
-                        if (State.mode === 'VIDEO') document.getElementById('videoSrc').play();
-                    }
-                });
-
-                document.getElementById('inpAudio').addEventListener('change', (e) => {
-                    const file = e.target.files[0];
-                    if (file) {
-                        const url = URL.createObjectURL(file);
-                        document.getElementById('audioSrc').src = url;
-                        document.getElementById('audioSrc').load();
-                        // Sync audio to video
-                        document.getElementById('audioSrc').play();
-                        document.getElementById('videoSrc').play();
-                    }
-                });
-
-                // GIF Settings Listeners
-                document.getElementById('transitionSpeed').addEventListener('input', (e) => {
-                    document.getElementById('speedVal').innerText = `${e.target.value}ms`;
-                    GifEngine.animation.speed = parseInt(e.target.value);
-                });
-                document.getElementById('holdDuration').addEventListener('input', (e) => {
-                    document.getElementById('holdVal').innerText = `${e.target.value}ms`;
-                    GifEngine.animation.hold = parseInt(e.target.value);
-                });
-                document.getElementById('loopCount').addEventListener('change', (e) => {
-                    GifEngine.animation.loops = parseInt(e.target.value);
-                });
-                
-                document.getElementById('contrast').addEventListener('input', (e) => GifEngine.filters.contrast = parseInt(e.target.value));
-                document.getElementById('brightness').addEventListener('input', (e) => GifEngine.filters.brightness = parseInt(e.target.value));
-                document.getElementById('grayscaleToggle').addEventListener('change', (e) => GifEngine.filters.grayscale = e.target.checked);
-                document.getElementById('glitchToggle').addEventListener('change', (e) => GifEngine.filters.glitch = e.target.checked);
-                document.getElementById('rotateToggle').addEventListener('change', (e) => GifEngine.filters.rotation = e.target.checked);
-
-                // Actions
-                document.getElementById('loadImagesBtn').addEventListener('click', GifEngine.loadImages);
-                document.getElementById('btnRenderGif').addEventListener('click', RenderEngine.startRender);
-                document.getElementById('btnRandom').addEventListener('click', VideoEngine.randomizeStack);
-
-                // Global Window Functions for HTML Event Handlers
-                window.removeVideoFx = (uid) => VideoEngine.removeEffect(uid);
-                window.updateVideoFx = (uid, val) => {
-                    const pass = VideoEngine.stack.find(p => p.uid === uid);
-                    if (pass) {
-                        pass.uniforms.amount.value = parseFloat(val);
-                    }
-                };
-
-                // Resize Handler
-                window.addEventListener('resize', () => {
-                    if (VideoEngine.renderer) {
-                        const w = document.getElementById('canvas-wrapper').clientWidth;
-                        const h = document.getElementById('canvas-wrapper').clientHeight;
-                        VideoEngine.renderer.setSize(w, h);
-                        VideoEngine.stack.forEach(pass => {
-                            if (pass.uniforms.resolution) pass.uniforms.resolution.value.set(w, h);
-                        });
-                    }
-                });
-
-                // Init Engines
-                VideoEngine.init();
-                GifEngine.init();
-                RenderEngine.init();
-                
-                // Hide Loader
-                setTimeout(() => {
-                    document.getElementById('loader').style.display = 'none';
-                }, 1500);
-            },
-
-            setMode: (mode) => {
-                State.mode = mode;
-                
-                // UI Updates
-                if (mode === 'VIDEO') {
-                    document.getElementById('modeVideo').classList.add('bg-cyber-accent', 'text-black');
-                    document.getElementById('modeVideo').classList.remove('text-gray-400');
-                    document.getElementById('modeImage').classList.remove('bg-cyber-accent', 'text-black');
-                    document.getElementById('modeImage').classList.add('text-gray-400');
-
-                    document.getElementById('panelShaders').classList.remove('hidden');
-                    document.getElementById('panelImages').classList.add('hidden');
-                    
-                    document.getElementById('rightStack').classList.remove('hidden');
-                    document.getElementById('rightSettings').classList.add('hidden');
-
-                    document.getElementById('video-container').classList.remove('hidden');
-                    document.getElementById('image-container').classList.add('hidden');
+            VideoEngine.composer.render();
+        }
+    };
+
+    // --- 4. GIF ENGINE (Canvas 2D) ---
+    const GifEngine = {
+        canvas: null,
+        ctx: null,
+        images: [],
+        currentIndex: 0,
+        isRendering: false,
+        animationId: null,
+        
+        filters: {
+            contrast: 100,
+            brightness: 100,
+            grayscale: false,
+            spotColor: { r: 255, g: 0, b: 85, active: true },
+            glitch: false,
+            rotation: false
+        },
+        animation: {
+            speed: 300,
+            hold: 100,
+            loops: 5
+        },
+
+        init: () => {
+            GifEngine.canvas = document.getElementById('artCanvas');
+            GifEngine.ctx = GifEngine.canvas.getContext('2d');
+            GifEngine.initSpotColors();
+            
+            // Load default images
+            document.getElementById('loadImagesBtn').click();
+        },
+
+        initSpotColors: () => {
+            const colors = [
+                { c: '255,255,255', bg: '#ffffff', name: 'None' },
+                { c: '255,0,85', bg: '#ff0055', name: 'Red' },
+                { c: '0,204,255', bg: '#00ccff', name: 'Blue' },
+                { c: '255,204,0', bg: '#ffcc00', name: 'Gold' },
+                { c: '51,255,