Upload 9 files

README.md

@@ -1,12 +1,131 @@
----
-title: Q WAN 2
-emoji: 😻
-colorFrom: gray
-colorTo: gray
-sdk: static
-pinned: false
-license: cc-by-nc-sa-4.0
-short_description: Q-WAN-2
----
+# Quantum-Enhanced WAN 2.1 Video Generation System
+
+This project is a web-based, quantum-enhanced video generation interface. It leverages a hybrid approach: a JavaScript frontend for UI and quantum effect visualization, and a Python Flask backend for LLM-guided creative direction and CLIP-based image understanding. The "quantum effect" is the core diffusion model, interpreted and rendered visually on the frontend based on instructions from the AI Director (LLM).
+
+## Features
+
+- **Hybrid Quantum-Classical Architecture:** Frontend simulates quantum effects as the primary video generation (diffusion) mechanism.
+- **AI Director (LLM-Powered):** Utilizes `chat.completions`-based models (MLC LLM for GGUF) to generate frame-by-frame visual transformation guidance based on user prompts and current frame context.
+- **CLIP-Based Context:** Employs HuggingFace CLIP to understand the visual content of input and intermediate frames.
+- **Dynamic Quantum Visualizations:** `quantum-viz.js` dynamically reacts to "Quantum Influence" and "Entanglement Depth" parameters.
+- **Real-time Effect Rendering:** Frontend `simulator.js` interprets LLM instructions into various visual effects (color shifts, blur, pixelation, glitches, zoom, rotation, bloom, noise, chromatic aberration, ripple, scanlines, vignette).
+- **Movie Recording:** Records generated frame sequences into a WebM video.
+- **Local-First AI:** Prioritizes local GGUF models via MLC LLM for privacy and performance.
+- **HuggingFace Spaces Compatible:** Designed for deployment on HuggingFace Spaces.
+
+## Setup Instructions
+
+### 1. Clone the Repository
+
+```bash
+git clone https://github.com/yourusername/quantum_enhanced_wan_2_1.git
+cd quantum_enhanced_wan_2_1
+```
+
+### 2. Frontend Setup (JavaScript)
+
+The frontend is a static web application. No special installation steps are required beyond having a modern web browser.
+
+### 3. Backend Setup (Python)
+
+The backend is a Flask application responsible for LLM and CLIP inference.
+
+#### 3.1. Create and Activate Virtual Environment
+
+It's highly recommended to use a Python virtual environment:
+
+```bash
+python -m venv venv
+# On Windows:
+.\venv\Scripts\activate
+# On macOS/Linux:
+source venv/bin/activate
+```
+
+#### 3.2. Install Python Dependencies
+
+Navigate to the `backend` directory and install the required packages:
+
+```bash
+cd backend
+pip install -r requirements.txt
+cd .. # Go back to the root directory
+```
+
+#### 3.3. Download and Compile MLC LLM Model
+
+The backend uses MLC LLM for local inference with GGUF models. You need to download and compile a compatible model.
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+1.  **Choose a Model:** Browse Hugging Face Hub for GGUF models. Popular choices include `Llama-2`, `Mistral`, `Gemma`, etc. Ensure it's a chat-tuned model for better instruction following.
+    *   Example Model: `Llama-2-7b-chat-hf-q4f16_1` (from MLC LLM's own examples)
+
+2.  **Download and Compile:** Use the `mlc_llm` command-line tool. You need to specify a `--model-path` where the compiled model artifacts will be stored. We've configured the Flask app to look in `./backend/model_artifacts`.
+
+    ```bash
+    # Ensure mlc-llm is installed: pip install mlc-llm-nightly -f https://mlc.ai/wheels
+    
+    # Create the directory for model artifacts if it doesn't exist
+    mkdir -p backend/model_artifacts
+    
+    # Download and compile your chosen model
+    # Replace 'Llama-2-7b-chat-hf-q4f16_1' with your chosen model name if different
+    mlc_llm chat Llama-2-7b-chat-hf-q4f16_1 --model-path backend/model_artifacts
+    ```
+    This command will download the model weights and compile them for your system. This process can take a significant amount of time and disk space (several GBs depending on the model). The compiled model will be placed in a subdirectory (e.g., `backend/model_artifacts/Llama-2-7b-chat-hf-q4f16_1`).
+
+3.  **Verify Configuration in `backend/app.py`:**
+    Ensure that `MLC_MODEL_NAME` and `MLC_MODEL_ARTIFACTS_DIR` (or directly `MLC_MODEL_PATH`) in `backend/app.py` match your downloaded model's name and path. By default, they are set to:
+    ```python
+    MLC_MODEL_ARTIFACTS_DIR = os.getenv("MLC_MODEL_ARTIFACTS_DIR", "./backend/model_artifacts")
+    MLC_MODEL_NAME = os.getenv("MLC_MODEL_NAME", "Llama-2-7b-chat-hf-q4f16_1")
+    ```
+
+### 4. Running the Application Locally
+
+#### 4.1. Start the Backend Server
+
+Open a terminal, activate your virtual environment, navigate to the root directory of the project, and run the Flask app:
+
+```bash
+# On Windows:
+.\venv\Scripts\activate
+python backend/app.py
+# On macOS/Linux:
+source venv/bin/activate
+python backend/app.py
+```
+The backend should start on `http://localhost:5000`. You will see messages in the terminal indicating if the LLM and CLIP models loaded successfully. *Note: Model loading can take some time.*
+
+#### 4.2. Open the Frontend
+
+Open the `index.html` file in your web browser. You can typically do this by dragging the file into your browser, or by using a simple local web server (e.g., Python's `http.server` module):
+
+```bash
+# In a new terminal, from the root directory:
+python -m http.server 8000
+# Then open your browser to http://localhost:8000
+```
+
+## Usage
+
+1.  **Upload a Source Image:** Use the "UPLOAD SOURCE IMAGE" drop zone to provide an initial image.
+2.  **Enter a Prompt:** Describe the desired visual transformation or movie concept in the "Prompt Context" textarea.
+3.  **Adjust Quantum Parameters:** Use the "Quantum Influence" and "Entanglement Depth" sliders to control the intensity and complexity of the quantum diffusion effects.
+4.  **Toggle Director Mode:** Enable "DIRECTOR MODE" to record the generated frames into a movie.
+5.  **Initialize Generation:** Click "INITIALIZE GENERATION" to start the process. The frontend will communicate with the backend for LLM guidance, and then render frames locally using the simulated quantum effects.
+6.  **Download Movie:** If in Director Mode, a "SAVE MOVIE" button will appear once frames are generated, allowing you to download the WebM video.
+
+## Deployment to Hugging Face Spaces
+
+To deploy this application to Hugging Face Spaces, you will need a `Dockerfile` for the backend and potentially some configuration for the frontend.
+
+### 1. Backend Dockerfile (coming soon)
+
+A `Dockerfile` will be provided in the `backend` directory to containerize the Flask application and its dependencies, including the MLC LLM and CLIP models.
+
+### 2. Hugging Face Spaces `app.json` (or similar)
+
+Configuration files will guide Hugging Face Spaces on how to build and run your application.
+
+---
+**Disclaimer:** This project simulates quantum-enhanced video generation. While it integrates real AI models (LLM, CLIP) for creative guidance, the "quantum effects" and "diffusion" are visual approximations implemented in JavaScript for demonstration purposes, as true real-time quantum image generation is an active research area and not currently feasible in a browser environment.

app.js

@@ -0,0 +1,63 @@
+// Main application controller
+
+class App {
+    constructor() {
+        this.currentSection = 'overview';
+        this.init();
+    }
+
+    init() {
+        this.setupNavigation();
+        this.updateSliderValues();
+    }
+
+    setupNavigation() {
+        const navLinks = document.querySelectorAll('.nav-link');
+        
+        navLinks.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const section = link.dataset.section;
+                this.navigateTo(section);
+            });
+        });
+    }
+
+    navigateTo(section) {
+        // Update nav links
+        document.querySelectorAll('.nav-link').forEach(link => {
+            link.classList.remove('active');
+            if (link.dataset.section === section) {
+                link.classList.add('active');
+            }
+        });
+
+        // Update sections
+        document.querySelectorAll('.section').forEach(sec => {
+            sec.classList.remove('active');
+        });
+        document.getElementById(section).classList.add('active');
+
+        this.currentSection = section;
+    }
+
+    updateSliderValues() {
+        const quantumInfluence = document.getElementById('quantum-influence');
+        const entanglementDepth = document.getElementById('entanglement-depth');
+
+        if (quantumInfluence) {
+            quantumInfluence.addEventListener('input', (e) => {
+                document.getElementById('quantum-influence-val').textContent = e.target.value;
+            });
+        }
+
+        if (entanglementDepth) {
+            entanglementDepth.addEventListener('input', (e) => {
+                document.getElementById('entanglement-val').textContent = e.target.value;
+            });
+        }
+    }
+}
+
+// Initialize app
+const app = new App();

app.py

@@ -0,0 +1,234 @@
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+import os
+import base64
+from PIL import Image
+import io
+import torch
+from transformers import CLIPProcessor, CLIPModel
+from mlc_llm import ChatModule
+import threading
+import numpy as np
+import hashlib
+import time
+
+app = Flask(__name__)
+CORS(app) # Enable CORS for all routes
+
+# --- Configuration for MLC LLM ---
+# IMPORTANT: Before running, ensure you have downloaded and compiled an MLC LLM model.
+# Example:
+# 1. Install MLC LLM: pip install mlc-llm-nightly -f https://mlc.ai/wheels
+# 2. Download a model: mlc_llm chat Llama-2-7b-chat-hf-q4f16_1 --model-path ./model_artifacts
+#    (This will create a `dist` folder inside `model_artifacts` with the model.)
+# 3. Update MLC_MODEL_PATH and MLC_MODEL_NAME below to match your downloaded model.
+#    E.g., if you run `mlc_llm chat Llama-2-7b-chat-hf-q4f16_1`, it will create a folder
+#    like `Llama-2-7b-chat-hf-q4f16_1` within your specified --model-path.
+MLC_MODEL_ARTIFACTS_DIR = os.getenv("MLC_MODEL_ARTIFACTS_DIR", "./backend/model_artifacts")
+MLC_MODEL_NAME = os.getenv("MLC_MODEL_NAME", "Llama-2-7b-chat-hf-q4f16_1")
+MLC_MODEL_PATH = os.path.join(MLC_MODEL_ARTIFACTS_DIR, MLC_MODEL_NAME)
+
+# --- Configuration for HuggingFace CLIP ---
+CLIP_MODEL_NAME = "openai/clip-vit-base-patch32"
+
+# Global instances for models
+clip_processor = None
+clip_model = None
+mlc_chat_module = None
+mlc_lock = threading.Lock() # To ensure thread-safe access to the LLM
+
+def load_mlc_llm_model():
+    global mlc_chat_module
+    if mlc_chat_module is None:
+        print(f"Attempting to load LLM model: {MLC_MODEL_NAME} from {MLC_MODEL_PATH}...")
+        try:
+            if not os.path.exists(MLC_MODEL_PATH):
+                print(f"Error: MLC LLM model path not found: {MLC_MODEL_PATH}")
+                print("Please ensure the MLC LLM model is downloaded and compiled in the specified path.")
+                print("Refer to installation instructions for mlc-llm and model download commands.")
+                return None
+            
+            mlc_chat_module = ChatModule(model=MLC_MODEL_NAME, model_path=MLC_MODEL_PATH)
+            print("MLC LLM model loaded successfully.")
+        except Exception as e:
+            print(f"Error loading MLC LLM model: {e}")
+            mlc_chat_module = None
+    return mlc_chat_module
+
+def load_clip_model():
+    global clip_processor, clip_model
+    if clip_model is None:
+        print(f"Attempting to load CLIP model: {CLIP_MODEL_NAME}...")
+        try:
+            clip_processor = CLIPProcessor.from_pretrained(CLIP_MODEL_NAME)
+            clip_model = CLIPModel.from_pretrained(CLIP_MODEL_NAME)
+            # Move model to GPU if available for faster inference
+            if torch.cuda.is_available():
+                clip_model.to("cuda")
+                print("CLIP model moved to CUDA.")
+            print("CLIP model loaded successfully.")
+        except Exception as e:
+            print(f"Error loading CLIP model: {e}")
+            clip_processor, clip_model = None, None
+    return clip_processor, clip_model
+
+# Load models on app startup
+with app.app_context():
+    if mlc_chat_module is None:
+        load_mlc_llm_model()
+    if clip_model is None:
+        load_clip_model()
+
+@app.route('/')
+def health_check():
+    llm_status = "loaded" if mlc_chat_module else "not loaded (check logs)"
+    clip_status = "loaded" if clip_model else "not loaded (check logs)"
+    return jsonify({
+        "status": "Quantum-Enhanced WAN 2.1 Backend is running!",
+        "llm_status": llm_status,
+        "clip_status": clip_status
+    })
+
+@app.route('/embed_image', methods=['POST'])
+def embed_image():
+    if clip_processor is None or clip_model is None:
+        return jsonify({"error": "CLIP model not loaded. Check server logs for details."}),
+    500
+
+    data = request.get_json()
+    image_data_url = data.get('image')
+    
+    if not image_data_url:
+        return jsonify({"error": "No image data provided"}), 400
+
+    try:
+        header, encoded = image_data_url.split(",", 1)
+        image_bytes = base64.b64decode(encoded)
+        image = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+
+        inputs = clip_processor(images=image, return_tensors="pt")
+        if torch.cuda.is_available():
+            inputs = {k: v.to("cuda") for k, v in inputs.items()}
+
+        with torch.no_grad():
+            image_features = clip_model.get_image_features(**inputs)
+        
+        # Normalize embeddings and convert to list for JSON serialization
+        image_embeddings = image_features / image_features.norm(p=2, dim=-1, keepdim=True)
+        return jsonify({"embeddings": image_embeddings.squeeze().tolist()})
+
+    except Exception as e:
+        print(f"Error embedding image: {e}")
+        return jsonify({"error": f"Failed to embed image: {str(e)}"}), 500
+
+@app.route('/chat/completions', methods=['POST'])
+def chat_completions_endpoint():
+    if mlc_chat_module is None:
+        return jsonify({"error": "LLM model not loaded. Check server logs for details."}),
+    500
+
+    data = request.get_json()
+    prompt = data.get("prompt")
+    system_message = data.get("system_message", "You are a creative AI assistant for video generation.")
+    
+    if not prompt:
+        return jsonify({"error": "Prompt is required"}), 400
+
+    try:
+        full_prompt = f"{system_message}\nUser: {prompt}"
+
+        with mlc_lock:
+            mlc_chat_module.reset_chat() 
+            response = mlc_chat_module.generate(full_prompt)
+        
+        return jsonify({"completion": response})
+    except Exception as e:
+        print(f"Error getting chat completion: {e}")
+        return jsonify({"error": f"Failed to get chat completion: {str(e)}"}), 500
+
+@app.route('/generate_frame_guidance', methods=['POST'])
+def generate_frame_guidance():
+    # This endpoint provides LLM guidance for the frontend's quantum diffusion.
+    # It does NOT generate the image itself.
+    if mlc_chat_module is None or clip_processor is None or clip_model is None:
+        return jsonify({"error": "One or more AI models not loaded. Check server logs for details."}),
+    500
+
+    data = request.get_json()
+    image_data_url = data.get('image') # The current frame from the frontend
+    prompt = data.get('prompt', 'Quantum interpolation')
+    influence = data.get('influence', 5) # 0-100
+    entanglement_depth = data.get('depth', 16) # For LLM to consider
+    frame_number = data.get('frame_number', 0)
+    
+    if not image_data_url:
+        return jsonify({"error": "No image data provided"}), 400
+
+    try:
+        # 1. Get CLIP embeddings for the current frame
+        header, encoded = image_data_url.split(",", 1)
+        image_bytes = base64.b64decode(encoded)
+        input_image = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+
+        clip_inputs = clip_processor(images=input_image, return_tensors="pt")
+        if torch.cuda.is_available():
+            clip_inputs = {k: v.to("cuda") for k, v in clip_inputs.items()}
+
+        with torch.no_grad():
+            image_features = clip_model.get_image_features(**clip_inputs)
+        image_embeddings_np = image_features.squeeze().cpu().numpy()
+        embedding_snippet = ", ".join([f"{x:.4f}" for x in image_embeddings_np[:10]])
+
+        # 2. Use LLM to generate guidance for the next quantum diffusion step
+        llm_prompt = (
+            f"You are an AI video director for a quantum diffusion system. Your task is to guide the transformation "
+            f"of a video frame based on quantum principles and user input. "
+            f"Given the current frame's visual context (CLIP features: [{embedding_snippet}...]), "
+            f"the user's creative prompt: '{prompt}', "
+            f"and the quantum settings (Quantum Influence: {influence}%, Entanglement Depth: {entanglement_depth} layers), "
+            f"describe *precisely* how the quantum diffusion effect should transform the current frame into frame {frame_number + 1}. "
+            f"Think of these transformations as manipulating a quantum state that manifests visually. "
+            f"Higher influence and depth should lead to more pronounced, chaotic, or surreal quantum effects. "
+            f"Focus on quantifiable visual parameters, including: "
+            f"color shifts (e.g., 'shift red by +{Math.round(influence/5)}', 'hue rotate {Math.round(influence*1.5)}deg'), "
+            f"blur (e.g., 'apply gaussian blur radius {Math.max(1, Math.round(influence/10))}'), "
+            f"glitch/distortion (e.g., 'pixel displacement x-axis random {Math.max(5, Math.round(influence/5))}px', 'chromatic aberration offset {Math.max(1, Math.round(influence/20))}'), "
+            f"zoom/pan (e.g., 'zoom in {1.00 + influence/2000}x, pan right {Math.round(influence/10)}px'), "
+            f"pattern overlay (e.g., 'overlay subtle static pattern opacity {influence/200}'), "
+            f"motion blur (e.g., 'apply motion blur strength {Math.round(entanglement_depth/2)}'), "
+            f"bloom (e.g., 'add bloom strength {influence/100}'), "
+            f"noise (e.g., 'add noise amount {influence/50}'), "
+            f"vignette (e.g., 'add vignette strength {influence/200}'), "
+            f"or specific quantum-themed visual cues (e.g., 'ripple effect', 'add subtle scanlines opacity {influence/200}', 'invert colors'). "
+            f"Combine these to create a dynamic, quantum-like visual evolution. Ensure the intensity of effects scales with Influence and Depth. "
+            f"Be concise and output only the transformation instructions. "
+            f"Example: 'shift blue by +{Math.round(influence/5)}, apply motion blur strength {Math.round(entanglement_depth/2)}, zoom {1.00 + influence/2000}x, add subtle scanlines opacity {influence/200}'.\n"
+            f"Transformation Instructions for frame {frame_number + 1}:"
+        )
+        
+        llm_guidance = ""
+        try:
+            with mlc_lock:
+                mlc_chat_module.reset_chat()
+                llm_guidance = mlc_chat_module.generate(llm_prompt)
+        except Exception as llm_e:
+            print(f"LLM guidance generation failed: {llm_e}. Using fallback guidance.")
+            llm_guidance = f"apply subtle glitch effect, shift colors slightly based on quantum influence {influence}%."
+
+        print(f"LLM Guidance: {llm_guidance}")
+
+        return jsonify({
+            "guidance": llm_guidance,
+            "log": (f"Backend provided guidance for frame {frame_number + 1} based on prompt: '{prompt[:50]}...', "
+                    f"influence: {influence}, depth: {entanglement_depth}. LLM guidance: '{llm_guidance[:50]}...'.")
+        })
+    except Exception as e:
+        print(f"Error generating frame guidance: {e}")
+        return jsonify({"error": f"Failed to generate frame guidance: {str(e)}"}), 500
+
+if __name__ == '__main__':
+    if not os.path.exists(MLC_MODEL_ARTIFACTS_DIR):
+        os.makedirs(MLC_MODEL_ARTIFACTS_DIR)
+        print(f"Created model artifacts directory: {MLC_MODEL_ARTIFACTS_DIR}")
+    
+    app.run(debug=True, host='0.0.0.0', port=5000)

architecture-diagram.js

@@ -0,0 +1,96 @@
+// Architecture visualization
+
+class ArchitectureDiagram {
+    constructor() {
+        this.canvas = document.getElementById('architecture-canvas');
+        if (!this.canvas) return;
+
+        this.ctx = this.canvas.getContext('2d');
+        this.resize();
+        window.addEventListener('resize', () => this.resize());
+        
+        this.layers = [
+            { name: "CLIENT", y: 0.15, color: "#00f0ff" },
+            { name: "BACKEND (NODE)", y: 0.4, color: "#ffffff" },
+            { name: "QUANTUM (GPU)", y: 0.65, color: "#7000ff" },
+            { name: "STORAGE", y: 0.9, color: "#444444" }
+        ];
+        
+        this.packets = [];
+        this.animate();
+    }
+
+    resize() {
+        const rect = this.canvas.getBoundingClientRect();
+        this.canvas.width = rect.width;
+        this.canvas.height = rect.height;
+    }
+
+    draw() {
+        const w = this.canvas.width;
+        const h = this.canvas.height;
+        this.ctx.clearRect(0,0,w,h);
+
+        // Draw Layers
+        this.layers.forEach(layer => {
+            const y = h * layer.y;
+            
+            // Line
+            this.ctx.beginPath();
+            this.ctx.strokeStyle = layer.color;
+            this.ctx.globalAlpha = 0.3;
+            this.ctx.lineWidth = 2;
+            this.ctx.moveTo(50, y);
+            this.ctx.lineTo(w-50, y);
+            this.ctx.stroke();
+            
+            // Label
+            this.ctx.globalAlpha = 1;
+            this.ctx.fillStyle = layer.color;
+            this.ctx.font = "12px Space Mono";
+            this.ctx.fillText(layer.name, 50, y - 10);
+            
+            // Nodes
+            for(let i=1; i<=3; i++) {
+                const nx = 50 + (w-100) * (i/4);
+                this.ctx.beginPath();
+                this.ctx.fillStyle = '#0f111a';
+                this.ctx.strokeStyle = layer.color;
+                this.ctx.lineWidth = 2;
+                this.ctx.rect(nx-15, y-15, 30, 30);
+                this.ctx.fill();
+                this.ctx.stroke();
+            }
+        });
+
+        // Spawn packets
+        if (Math.random() > 0.95) {
+            this.packets.push({
+                x: 50 + (w-100) * (Math.random() * 0.5 + 0.25),
+                y: h * this.layers[0].y,
+                targetY: h * this.layers[3].y,
+                speed: 2 + Math.random() * 2
+            });
+        }
+
+        // Draw packets
+        this.ctx.fillStyle = '#fff';
+        for(let i = this.packets.length - 1; i >= 0; i--) {
+            let p = this.packets[i];
+            p.y += p.speed;
+            
+            this.ctx.beginPath();
+            this.ctx.arc(p.x, p.y, 3, 0, Math.PI*2);
+            this.ctx.fill();
+            
+            if(p.y > p.targetY) this.packets.splice(i, 1);
+        }
+    }
+
+    animate() {
+        this.draw();
+        requestAnimationFrame(() => this.animate());
+    }
+}
+
+new ArchitectureDiagram();

index.html

@@ -1,19 +1,355 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quantum-Enhanced WAN 2.1 | System Simulation</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+</head>
+<body>
+    <div class="app-container">
+        <nav class="side-nav">
+            <div class="nav-brand">
+                <div class="brand-icon">Q</div>
+                <span>WAN 2.1</span>
+            </div>
+            <div class="nav-links">
+                <a href="#simulator" class="nav-link active" data-section="simulator">
+                    <span class="icon">⚡</span> Simulation
+                </a>
+                <a href="#overview" class="nav-link" data-section="overview">
+                    <span class="icon">⦿</span> Executive Summary
+                </a>
+                <a href="#architecture" class="nav-link" data-section="architecture">
+                    <span class="icon">☊</span> Architecture
+                </a>
+                <a href="#backend" class="nav-link" data-section="backend">
+                    <span class="icon">◈</span> Quantum Backend
+                </a>
+                <a href="#specs" class="nav-link" data-section="specs">
+                    <span class="icon">⚙</span> Specifications
+                </a>
+            </div>
+            <div class="nav-status">
+                <div class="status-row">
+                    <span>WebGPU</span>
+                    <span class="status-dot active"></span>
+                </div>
+                <div class="status-row">
+                    <span>Qiskit.js</span>
+                    <span class="status-dot active"></span>
+                </div>
+                <div class="status-row">
+                    <span>Qubits</span>
+                    <span class="mono">512</span>
+                </div>
+            </div>
+        </nav>
+
+        <main class="content-area">
+            <!-- Simulation Section (Default) -->
+            <section id="simulator" class="section active">
+                <header class="section-header">
+                    <h1>Live System Simulation</h1>
+                    <p class="subtitle">Hybrid Quantum-Classical Video Generation Interface</p>
+                </header>
+                
+                <div class="simulation-grid">
+                    <div class="control-panel glass-panel">
+                        <h3>I2V Input Parameters</h3>
+                        
+                        <div class="input-group file-drop-zone" id="drop-zone">
+                            <input type="file" id="image-input" accept="image/*" hidden>
+                            <div class="drop-content">
+                                <span class="icon">📁</span>
+                                <span class="drop-text">UPLOAD SOURCE IMAGE</span>
+                                <span class="drop-sub">Drag & Drop or Click to Browse</span>
+                            </div>
+                            <img id="preview-img" class="hidden" alt="Preview">
+                        </div>
+
+                        <div class="input-group">
+                            <label>Prompt Context (CLIP Guidance)</label>
+                            <textarea id="prompt-input" placeholder="Describe the motion to generate... (e.g., 'Camera zoom with quantum distortion')"></textarea>
+                        </div>
+                        
+                        <div class="controls-row">
+                            <div class="input-group">
+                                <label>Quantum Influence <span class="value-badge" id="influence-val">5%</span></label>
+                                <input type="range" id="quantum-influence" min="0" max="100" value="5">
+                                <div class="slider-meta">Low (Deterministic) — High (Chaotic)</div>
+                            </div>
+                            
+                            <div class="input-group">
+                                <label>Entanglement Depth <span class="value-badge" id="depth-val">16</span></label>
+                                <input type="range" id="entanglement-depth" min="1" max="16" value="16">
+                                <div class="slider-meta">Circuit Layers (4-16)</div>
+                            </div>
+                        </div>
+
+                        <div class="controls-row">
+                            <div class="input-group">
+                                <label>Sampling Method</label>
+                                <select id="sampling-method">
+                                    <option value="adaptive">Adaptive Quantum Injection</option>
+                                    <option value="direct">Direct Latent Modulation</option>
+                                    <option value="feedback">Continuous Feedback Loop</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="director-controls glass-panel-inner">
+                            <div class="director-header">
+                                <label class="switch-container">
+                                    <span class="label-text">DIRECTOR MODE</span>
+                                    <input type="checkbox" id="director-mode-toggle" checked>
+                                    <span class="toggle-slider"></span>
+                                </label>
+                                <span class="frame-count" id="total-frames">0 FRAMES</span>
+                            </div>
+                            <div class="director-actions">
+                                <button id="download-btn" class="btn-secondary" disabled>
+                                    <span class="icon">💾</span> SAVE MOVIE
+                                </button>
+                                <button id="reset-movie-btn" class="btn-danger" disabled>
+                                    <span class="icon">✖</span> CLEAR
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="controls-row">
+                            <button id="start-btn" class="btn-primary">
+                                <span class="btn-text">INITIALIZE GENERATION</span>
+                                <span class="btn-glitch"></span>
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="visualization-panel glass-panel">
+                        <div class="viz-tabs">
+                            <button class="viz-tab active" data-view="output">Video Output</button>
+                            <button class="viz-tab" data-view="circuit">Quantum Circuit</button>
+                            <button class="viz-tab" data-view="state">State Vector</button>
+                        </div>
+                        
+                        <div class="viz-content">
+                            <div id="view-output" class="viz-view active">
+                                <canvas id="output-canvas"></canvas>
+                                <div class="overlay-stats" id="generation-stats">WAITING FOR INPUT...</div>
+                                <div class="scanline"></div>
+                            </div>
+                            <div id="view-circuit" class="viz-view">
+                                <canvas id="quantum-circuit-canvas"></canvas>
+                            </div>
+                            <div id="view-state" class="viz-view">
+                                <canvas id="state-vector-canvas"></canvas>
+                                <div class="entropy-readout">Entanglement Entropy: <span id="entropy-value">0.00</span></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="terminal-panel glass-panel">
+                        <div class="terminal-header">
+                            <span>SYSTEM_LOGS</span>
+                            <span class="terminal-status">CONNECTED</span>
+                        </div>
+                        <div class="terminal-body" id="system-logs">
+                            <div class="log-line"><span class="ts">[00:00:00]</span> System ready. Waiting for user input...</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Executive Summary -->
+            <section id="overview" class="section">
+                <div class="document-wrapper glass-panel">
+                    <h1>Executive Summary</h1>
+                    <p class="lead">This document defines a complete rebuild of Alibaba's WAN 2.1 video generation system with a revolutionary web-based quantum compute backend.</p>
+                    
+                    <p>The system replaces traditional GPU inference with a <strong>hybrid quantum-classical architecture</strong> running entirely in the browser using WebGPU and Qiskit-powered WebWorkers. The core innovation is a novel interface where real quantum circuit evaluations directly influence the diffusion model's latent space, creating a unique AI system where quantum superposition can directly affect generative outputs.</p>
+                    
+                    <div class="metric-cards">
+                        <div class="card">
+                            <div class="metric-val">512</div>
+                            <div class="metric-label">Qubits (State Matrix)</div>
+                        </div>
+                        <div class="card">
+                            <div class="metric-val">WebGPU</div>
+                            <div class="metric-label">Compute Engine</div>
+                        </div>
+                        <div class="card">
+                            <div class="metric-val">Local</div>
+                            <div class="metric-label">Privacy-First Inference</div>
+                        </div>
+                    </div>
+
+                    <h3>Core Objectives</h3>
+                    <ul class="feature-list">
+                        <li>Reproduce WAN 2.1's video generation capabilities in a web browser.</li>
+                        <li>Leverage quantum computing for unique generative variability.</li>
+                        <li>Implement a privacy-first, high-performance video generator on consumer hardware.</li>
+                    </ul>
+                </div>
+            </section>
+
+            <!-- Architecture -->
+            <section id="architecture" class="section">
+                <div class="document-wrapper glass-panel">
+                    <h1>System Architecture Overview</h1>
+                    <p>The quantum-enhanced WAN 2.1 system is composed of four main layers orchestrated to deliver the final video output.</p>
+                    
+                    <div class="diagram-container">
+                        <canvas id="architecture-canvas"></canvas>
+                    </div>
+
+                    <div class="architecture-grid">
+                        <div class="arch-card">
+                            <h3>1. Browser Client Layer</h3>
+                            <p>User-facing front-end running in the browser.</p>
+                            <ul>
+                                <li><strong>UI Canvas:</strong> Control center for prompt input and parameter adjustment.</li>
+                                <li><strong>Quantum Visualizer:</strong> Real-time display of quantum circuits and state vectors.</li>
+                                <li><strong>Video Player:</strong> Embedded player for generated results.</li>
+                                <li><strong>Main Thread Orchestrator:</strong> Manages state and coordinates visualization.</li>
+                            </ul>
+                        </div>
+                        <div class="arch-card">
+                            <h3>2. Quantum Compute Backend</h3>
+                            <p>Core system leveraging quantum computing for generative influence.</p>
+                            <ul>
+                                <li><strong>WebWorker Pool:</strong> 4-8 parallel workers for circuit simulation.</li>
+                                <li><strong>Qiskit.js:</strong> Circuit builder for custom gate sequences.</li>
+                                <li><strong>WebGPU Engine:</strong> Accelerates 512D state vector evolution using WGSL shaders.</li>
+                                <li><strong>State Analyzer:</strong> Computes entanglement entropy and fidelity.</li>
+                            </ul>
+                        </div>
+                        <div class="arch-card">
+                            <h3>3. Web Backend Server</h3>
+                            <p>Orchestration and classical deep learning inference (Node.js/Python).</p>
+                            <ul>
+                                <li><strong>REST API Gateway:</strong> Handles requests and authentication.</li>
+                                <li><strong>Quantum-Classical Bridge:</strong> Translates quantum features into diffusion parameters.</li>
+                                <li><strong>WAN 2.1 Engine:</strong> Distributed inference layer for T5 encoder and VAE/Diffusion models.</li>
+                            </ul>
+                        </div>
+                        <div class="arch-card">
+                            <h3>4. Storage & Cache</h3>
+                            <p>Persistence layer for models and results.</p>
+                            <ul>
+                                <li><strong>Redis Cache:</strong> In-memory storage for model weights.</li>
+                                <li><strong>S3/Minio:</strong> Durable storage for generated videos.</li>
+                                <li><strong>Circuit Library:</strong> Repository of pre-defined quantum circuits.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Backend Specs -->
+            <section id="backend" class="section">
+                <div class="document-wrapper glass-panel">
+                    <h1>Quantum Compute Backend Specification</h1>
+                    
+                    <h3>512-Dimensional Quantum State Architecture</h3>
+                    <p>Operating on a 512-qubit system requires sophisticated memory management. The system uses a sparse representation strategy:</p>
+                    
+                    <div class="specs-table">
+                        <div class="spec-row header">
+                            <span>Layer</span>
+                            <span>Qubits</span>
+                            <span>Storage Strategy</span>
+                            <span>Approx. Size</span>
+                        </div>
+                        <div class="spec-row">
+                            <span>Layer 1</span>
+                            <span>0-12</span>
+                            <span>Dense Vector</span>
+                            <span>~16MB</span>
+                        </div>
+                        <div class="spec-row">
+                            <span>Layer 2</span>
+                            <span>13-24</span>
+                            <span>Compressed Tensor</span>
+                            <span>~256MB</span>
+                        </div>
+                        <div class="spec-row">
+                            <span>Layer 3</span>
+                            <span>25-512</span>
+                            <span>Sparse + MPS (Adaptive)</span>
+                            <span>Variable</span>
+                        </div>
+                    </div>
+
+                    <h3>Qiskit.js Integration</h3>
+                    <p>The <strong>QuantumComputeEngine</strong> class orchestrates the backend:</p>
+                    <ul class="process-list">
+                        <li><strong>Initialization:</strong> Sets up WebGPU device and 16-bit floating point support.</li>
+                        <li><strong>Circuit Building:</strong> Constructs circuits via Qiskit.js API (Gates: H, CNOT, RY, etc.).</li>
+                        <li><strong>Compilation:</strong> Generates optimized WGSL shaders for the specific gate sequence.</li>
+                        <li><strong>Execution:</strong> Dispatches compute shaders to GPU for parallel state evolution.</li>
+                        <li><strong>Analysis:</strong> Extracts metrics (Entropy, Fidelity) for the Bridge.</li>
+                    </ul>
+                </div>
+            </section>
+
+             <!-- Detailed Specs / Development -->
+             <section id="specs" class="section">
+                <div class="document-wrapper glass-panel">
+                    <h1>Development & Optimization</h1>
+                    
+                    <div class="two-col">
+                        <div>
+                            <h3>Quantum-Classical Bridge</h3>
+                            <p>The critical link between quantum randomness and creative output.</p>
+                            <ul>
+                                <li><strong>Feature Extraction:</strong> Pulls entropy and phase data from the quantum state.</li>
+                                <li><strong>Adaptive Sampling:</strong> Dynamically adjusts quantum influence based on generation complexity.</li>
+                                <li><strong>Injection Pipeline:</strong> Modifies Text Encoder Latents, modulates Diffusion Noise, or alters VAE Decoding.</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3>Optimization Strategies</h3>
+                            <ul>
+                                <li><strong>WebGPU Acceleration:</strong> Parallel matrix operations on consumer GPUs.</li>
+                                <li><strong>Circuit Decomposition:</strong> simplifying gates before compilation.</li>
+                                <li><strong>Hybrid Inference:</strong> Interleaving CPU classical tasks with GPU quantum tasks.</li>
+                                <li><strong>ONNX Runtime:</strong> Optimized execution for the classical diffusion model.</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <h3>Phases of Development</h3>
+                    <div class="timeline">
+                        <div class="timeline-item">
+                            <div class="phase">Phase 1</div>
+                            <div class="desc"><strong>Environment & PoC:</strong> Setup Qiskit.js, WebGPU, and basic pipeline.</div>
+                        </div>
+                        <div class="timeline-item">
+                            <div class="phase">Phase 2</div>
+                            <div class="desc"><strong>Circuit Integration:</strong> Implement circuit templates and WGSL shader generation.</div>
+                        </div>
+                        <div class="timeline-item">
+                            <div class="phase">Phase 3</div>
+                            <div class="desc"><strong>Classical Backend:</strong> Integrate WAN 2.1 model via ONNX Runtime/Node.js.</div>
+                        </div>
+                        <div class="timeline-item">
+                            <div class="phase">Phase 4</div>
+                            <div class="desc"><strong>The Bridge:</strong> Implement parameter injection logic and adaptive sampling.</div>
+                        </div>
+                        <div class="timeline-item">
+                            <div class="phase">Phase 5</div>
+                            <div class="desc"><strong>UI/UX:</strong> Build the visualization dashboard and interactivity.</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script type="module" src="app.js"></script>
+    <script type="module" src="architecture-diagram.js"></script>
+    <script type="module" src="quantum-viz.js"></script>
+    <script type="module" src="simulator.js"></script>
+</body>
+</html>

quantum-viz.js

@@ -0,0 +1,327 @@
+// Enhanced Quantum Visualizations with Vivid Effects
+
+class QuantumCircuitViz {
+    constructor() {
+        this.container = document.getElementById('view-circuit');
+        this.canvas = document.getElementById('quantum-circuit-canvas');
+        this.ctx = this.canvas?.getContext('2d');
+        
+        this.qubits = 8; // Fixed for visualization
+        this.gates = [];
+        this.photons = [];
+        this.currentInfluence = 0;
+        this.currentDepth = 0;
+        
+        this.generateRandomGates(0); // Initial generation
+        
+        // Observe visibility changes for proper initialization
+        if (this.container) {
+            const observer = new ResizeObserver(() => this.resize());
+            observer.observe(this.container);
+        }
+        
+        this.resize();
+        this.animate(0);
+    }
+
+    resize() {
+        if (!this.container || !this.canvas) return;
+        const rect = this.container.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            this.canvas.width = rect.width;
+            this.canvas.height = rect.height;
+        }
+    }
+
+    generateRandomGates(depthModifier = 0) {
+        this.gates = [];
+        const types = ['H', 'X', 'Y', 'Z', 'CNOT', 'P', 'T', 'S']; 
+        const baseSteps = 10;
+        // Increase complexity based on depth
+        const steps = Math.min(20, baseSteps + Math.floor(depthModifier / 2)); 
+        
+        for(let i=0; i<steps; i++) {
+            let col = [];
+            let usedQubits = new Set();
+            
+            for(let q=0; q<this.qubits; q++) {
+                if (usedQubits.has(q)) continue;
+                
+                // Influence can increase the chance of gates appearing
+                if (Math.random() > (0.6 - (this.currentInfluence / 200))) { // More gates with higher influence
+                    const type = types[Math.floor(Math.random() * types.length)];
+                    
+                    if (type === 'CNOT' && q < this.qubits - 1) {
+                        // Control bit
+                        col.push({ type: '•', qubit: q, target: q+1 });
+                        // Target bit (virtual gate for viz)
+                        col.push({ type: '⊕', qubit: q+1 }); 
+                        usedQubits.add(q);
+                        usedQubits.add(q+1);
+                    } else {
+                        col.push({ type: type, qubit: q });
+                        usedQubits.add(q);
+                    }
+                }
+            }
+            this.gates.push(col);
+        }
+    }
+
+    // New method to update influence and depth
+    updateVizParameters(influence, depth) {
+        this.currentInfluence = influence;
+        this.currentDepth = depth;
+        // Regenerate gates with new depth influence
+        this.generateRandomGates(depth);
+        // Trigger a burst of activity based on influence
+        const photonBurst = Math.floor(influence / 10);
+        for(let i=0; i<photonBurst; i++) {
+            this.spawnPhoton();
+        }
+    }
+
+    randomize() { // Keep for backward compatibility if simulator still calls it, but use updateVizParameters
+        this.generateRandomGates(this.currentDepth);
+        for(let i=0; i<8; i++) {
+            this.spawnPhoton();
+        }
+    }
+
+    spawnPhoton() {
+        this.photons.push({
+            x: 0,
+            y: Math.floor(Math.random() * this.qubits),
+            speed: (0.02 + Math.random() * 0.04) * (1 + this.currentInfluence / 100), // Faster with more influence
+            color: Math.random() > 0.5 ? '#00f0ff' : '#7000ff',
+            size: 2 + Math.random() * 3 * (1 + this.currentInfluence / 200) // Larger with more influence
+        });
+    }
+
+    draw(time) {
+        if(!this.ctx) return;
+        const w = this.canvas.width;
+        const h = this.canvas.height;
+        
+        this.ctx.fillStyle = '#050510';
+        this.ctx.fillRect(0, 0, w, h);
+        
+        const rowH = h / (this.qubits + 1);
+        const colW = w / (this.gates.length + 1);
+        
+        // Draw Qubit Wires
+        this.ctx.shadowBlur = 0;
+        for(let i=0; i<this.qubits; i++) {
+            const y = rowH * (i + 1);
+            
+            this.ctx.beginPath();
+            this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+            this.ctx.lineWidth = 1;
+            this.ctx.moveTo(40, y);
+            this.ctx.lineTo(w - 20, y);
+            this.ctx.stroke();
+            
+            // Label
+            this.ctx.fillStyle = 'rgba(0, 240, 255, 0.8)';
+            this.ctx.font = '11px "Space Mono"';
+            this.ctx.fillText(`|0⟩`, 10, y + 4);
+        }
+        
+        // Update and Draw Photons (Data flow)
+        // Spawn rate influenced by 'influence'
+        if (Math.random() > (0.92 - this.currentInfluence / 500)) this.spawnPhoton(); 
+        
+        this.photons.forEach((p, idx) => {
+            p.x += p.speed;
+            const px = 40 + p.x * (w - 60);
+            const py = rowH * (p.y + 1);
+            
+            this.ctx.shadowBlur = 10 * (1 + this.currentInfluence / 100); // Larger glow with more influence
+            this.ctx.shadowColor = p.color;
+            this.ctx.fillStyle = p.color;
+            
+            this.ctx.beginPath();
+            this.ctx.arc(px, py, p.size, 0, Math.PI*2);
+            this.ctx.fill();
+            
+            if (p.x > 1) this.photons.splice(idx, 1);
+        });
+        
+        // Draw Gates
+        this.gates.forEach((col, xIndex) => {
+            const x = 60 + xIndex * colW;
+            
+            col.forEach(gate => {
+                const y = rowH * (gate.qubit + 1);
+                
+                this.ctx.shadowBlur = 12 * (1 + this.currentInfluence / 100); // Larger glow with more influence
+                this.ctx.shadowColor = 'rgba(112, 0, 255, 0.4)';
+                
+                if (gate.type === '•') {
+                    // Control Dot
+                    this.ctx.fillStyle = '#fff';
+                    this.ctx.beginPath();
+                    this.ctx.arc(x, y, 4, 0, Math.PI*2);
+                    this.ctx.fill();
+                    
+                    // Line to target
+                    this.ctx.strokeStyle = '#fff';
+                    this.ctx.lineWidth = 2;
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(x, y);
+                    this.ctx.lineTo(x, rowH * (gate.target + 1));
+                    this.ctx.stroke();
+                } 
+                else if (gate.type === '⊕') {
+                    // Target CNOT
+                    this.ctx.fillStyle = '#000';
+                    this.ctx.strokeStyle = '#fff';
+                    this.ctx.lineWidth = 2;
+                    this.ctx.beginPath();
+                    this.ctx.arc(x, y, 8, 0, Math.PI*2);
+                    this.ctx.fill();
+                    this.ctx.stroke();
+                    // Plus
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(x-5, y);
+                    this.ctx.lineTo(x+5, y);
+                    this.ctx.moveTo(x, y-5);
+                    this.ctx.lineTo(x, y+5);
+                    this.ctx.stroke();
+                } 
+                else {
+                    // Standard Gate
+                    const isH = gate.type === 'H';
+                    this.ctx.fillStyle = isH ? '#7000ff' : '#050510';
+                    this.ctx.strokeStyle = '#00f0ff';
+                    this.ctx.shadowColor = isH ? '#7000ff' : '#00f0ff';
+                    
+                    this.ctx.fillRect(x-12, y-12, 24, 24);
+                    this.ctx.strokeRect(x-12, y-12, 24, 24);
+                    
+                    this.ctx.fillStyle = '#fff';
+                    this.ctx.textAlign = 'center';
+                    this.ctx.font = 'bold 12px "Space Mono"';
+                    this.ctx.shadowBlur = 0;
+                    this.ctx.fillText(gate.type, x, y+4);
+                }
+            });
+        });
+    }
+
+    animate(time) {
+        this.draw(time);
+        // Auto-correction for size if container changed while hidden
+        if (this.container && this.canvas && this.container.clientWidth !== this.canvas.width && this.container.clientWidth > 0) {
+            this.resize();
+        }
+        requestAnimationFrame((t) => this.animate(t));
+    }
+}
+
+class StateVectorViz {
+    constructor() {
+        this.container = document.getElementById('view-state');
+        this.canvas = document.getElementById('state-vector-canvas');
+        this.ctx = this.canvas?.getContext('2d');
+        
+        // Complex amplitudes simulation (Magnitude + Phase)
+        this.bins = 64;
+        this.magnitudes = new Array(this.bins).fill(0).map(() => Math.random() * 0.4);
+        this.phases = new Array(this.bins).fill(0).map(() => Math.random() * Math.PI * 2);
+        this.currentInfluence = 0;
+        this.currentDepth = 0;
+        
+        if (this.container) {
+            new ResizeObserver(() => this.resize()).observe(this.container);
+        }
+        
+        this.resize();
+        this.animate(0);
+    }
+
+    resize() {
+        if (!this.container || !this.canvas) return;
+        const rect = this.container.getBoundingClientRect();
+        if (rect.width > 0 && rect.height > 0) {
+            this.canvas.width = rect.width;
+            this.canvas.height = rect.height;
+        }
+    }
+
+    updateVizParameters(influence, depth) {
+        this.currentInfluence = influence;
+        this.currentDepth = depth;
+        // Trigger a burst of energy based on influence
+        const spikeBurst = Math.floor(influence / 20);
+        for(let i=0; i<spikeBurst; i++) {
+            this.spike();
+        }
+    }
+
+    spike() {
+        // Add energy to system, more intense with higher influence
+        const spikeAmount = 0.5 * (1 + this.currentInfluence / 50);
+        for(let i=0; i<10; i++) {
+            const idx = Math.floor(Math.random() * this.bins);
+            this.magnitudes[idx] = Math.min(1.0, this.magnitudes[idx] + spikeAmount);
+        }
+    }
+
+    draw(time) {
+        if(!this.ctx) return;
+        const w = this.canvas.width;
+        const h = this.canvas.height;
+        
+        this.ctx.clearRect(0, 0, w, h);
+        
+        // Grid
+        this.ctx.strokeStyle = 'rgba(255,255,255,0.05)';
+        this.ctx.lineWidth = 1;
+        this.ctx.beginPath();
+        for(let x=0; x<w; x+=40) { this.ctx.moveTo(x,0); this.ctx.lineTo(x,h); }
+        this.ctx.stroke();
+
+        const barW = w / this.bins;
+        
+        for(let i=0; i<this.bins; i++) {
+            // Physics update
+            // Decay faster with higher influence
+            const decayRate = 0.98 - (this.currentInfluence / 2000); 
+            this.magnitudes[i] = Math.max(0.05, this.magnitudes[i] * decayRate); 
+            // Random fluctuation (Quantum foam) more pronounced with higher influence
+            if (Math.random() > (0.9 - this.currentInfluence / 1000)) this.magnitudes[i] += 0.05 * (1 + this.currentInfluence / 100);
+            
+            // Phase fluctuation more chaotic with higher depth and influence
+            this.phases[i] += (Math.random() - 0.5) * (0.2 + this.currentInfluence / 500 + this.currentDepth / 100);
+            
+            const mag = this.magnitudes[i];
+            const barH = mag * h * 0.9;
+            const x = i * barW;
+            const y = h - barH;
+            
+            // Color based on index (frequency) + magnitude intensity
+            // Map index to Hue: 200 (Blue) -> 300 (Purple)
+            const hue = 200 + (i / this.bins) * 10;
+            const color = `hsl(${hue}, 100%, 50%)`;
+            
+            this.ctx.fillStyle = color;
+            this.ctx.fillRect(x, y, barW-1, barH);
+        }
+        
+        // Occasional random update, more frequent with influence/depth
+        if (Math.random() > (0.95 - this.currentInfluence / 1000 - this.currentDepth / 500)) {
+            const idx = Math.floor(Math.random() * this.bins);
+            this.magnitudes[idx] = Math.random();
+        }
+    }
+
+    animate(time) {
+        this.draw(time);
+        requestAnimationFrame(() => this.animate());
+    }
+}
+
+// Expose globally for simulator to trigger
+window.circuitViz = new QuantumCircuitViz();
+window.stateViz = new StateVectorViz();

requirements.txt

@@ -0,0 +1,8 @@
+transformers
+torch
+Pillow
+Flask
+flask-cors
+mlc-llm-nightly
+sentencepiece
+outlines

simulator.js

@@ -0,0 +1,644 @@
+// Advanced Simulation Controller
+
+const BACKEND_URL = window.location.origin; // Dynamically set backend URL for HuggingFace Spaces compatibility
+
+class SystemSimulator {
+    constructor() {
+        this.logs = document.getElementById('system-logs');
+        this.outputCanvas = document.getElementById('output-canvas');
+        this.outputCtx = this.outputCanvas?.getContext('2d');
+        
+        this.isGenerating = false;
+        this.sourceImage = null;
+        this.config = {
+            prompt: '',
+            influence: 5, // Default 5%
+            depth: 16,    // Default 16 layers
+            method: 'adaptive'
+        };
+
+        // Director Mode State
+        this.directorMode = true;
+        this.movieFrames = []; // Stores ImageBitmaps or DataURLs
+        this.accumulatedFrames = 0;
+
+        this.init();
+    }
+
+    async callBackendApi(endpoint, data) {
+        try {
+            const response = await fetch(`${BACKEND_URL}${endpoint}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+            const jsonResponse = await response.json();
+            if (!response.ok) {
+                throw new Error(jsonResponse.error || `Backend error: ${response.statusText}`);
+            }
+            return jsonResponse;
+        } catch (error) {
+            this.log(`Backend API Error (${endpoint}): ${error.message}`, 'error');
+            console.error(`Backend API Error (${endpoint}):`, error);
+            throw error; // Re-throw to be caught by the calling function
+        }
+    }
+
+    init() {
+        this.setupListeners();
+        this.resizeCanvas();
+        window.addEventListener('resize', () => this.resizeCanvas());
+        
+        // Initial visual state
+        this.drawStaticNoise();
+    }
+
+    setupListeners() {
+        // Image Upload Handling
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('image-input');
+
+        dropZone.addEventListener('click', () => fileInput.click());
+        
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('drag-over');
+        });
+
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('drag-over');
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+            if(e.dataTransfer.files.length) {
+                this.handleImage(e.dataTransfer.files[0]);
+            }
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if(e.target.files.length) {
+                this.handleImage(e.target.files[0]);
+            }
+        });
+
+        // Director Mode Listeners
+        const directorToggle = document.getElementById('director-mode-toggle');
+        if (directorToggle) {
+            directorToggle.addEventListener('change', (e) => {
+                this.directorMode = e.target.checked;
+                this.log(`Director Mode: ${this.directorMode ? 'ENABLED' : 'DISABLED'}`, 'info');
+            });
+        }
+
+        document.getElementById('download-btn').addEventListener('click', () => this.downloadMovie());
+        document.getElementById('reset-movie-btn').addEventListener('click', () => this.resetMovie());
+
+        // Inputs
+        document.getElementById('quantum-influence').addEventListener('input', (e) => {
+            document.getElementById('influence-val').textContent = `${e.target.value}%`;
+            this.config.influence = parseInt(e.target.value);
+        });
+
+        document.getElementById('entanglement-depth').addEventListener('input', (e) => {
+            document.getElementById('depth-val').textContent = e.target.value;
+            this.config.depth = parseInt(e.target.value);
+        });
+
+        // Tabs
+        document.querySelectorAll('.viz-tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                document.querySelectorAll('.viz-tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.viz-view').forEach(v => v.classList.remove('active'));
+                
+                tab.classList.add('active');
+                document.getElementById(`view-${tab.dataset.view}`).classList.add('active');
+            });
+        });
+
+        // Start Button
+        document.getElementById('start-btn').addEventListener('click', () => this.startGeneration());
+    }
+
+    handleImage(file) {
+        const reader = new FileReader();
+        reader.onload = async (e) => { // Made onload async
+            this.sourceImage = new Image();
+            this.sourceImage.onload = async () => { // Made onload async
+                // Show preview
+                const preview = document.getElementById('preview-img');
+                preview.src = this.sourceImage.src;
+                preview.classList.remove('hidden');
+                document.querySelector('.drop-content').style.opacity = '0';
+                this.log(`Image loaded: ${file.name} (${this.sourceImage.width}x${this.sourceImage.height})`, 'success');
+                
+                // Call backend for CLIP analysis
+                try {
+                    await this.analyzeImageContext(e.target.result); // Pass dataURL directly
+                } catch (error) {
+                    this.log(`Failed CLIP analysis for ${file.name}: ${error.message}`, 'error');
+                }
+            };
+            this.sourceImage.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    async analyzeImageContext(imageDataURL) {
+        this.log('CLIP-Encoder: Sending image for feature extraction...', 'info');
+        try {
+            const response = await this.callBackendApi('/embed_image', { image: imageDataURL });
+            const embeddings = response.embeddings;
+            this.log(`CLIP-Encoder: Extracted feature vector [${embeddings[0].toFixed(4)}, ${embeddings[1].toFixed(4)}, ${embeddings[2].toFixed(4)}, ...]`, 'success');
+        } catch (error) {
+            this.log(`CLIP-Encoder: Failed to get embeddings. Is backend running? ${error.message}`, 'error');
+            throw error;
+        }
+    }
+
+    updateDirectorUI() {
+        document.getElementById('total-frames').textContent = `${this.movieFrames.length} FRAMES`;
+        document.getElementById('download-btn').disabled = this.movieFrames.length === 0;
+        document.getElementById('reset-movie-btn').disabled = this.movieFrames.length === 0;
+    }
+
+    resetMovie() {
+        this.movieFrames = [];
+        this.updateDirectorUI();
+        this.log('Director Mode: Timeline cleared.', 'warn');
+    }
+
+    resizeCanvas() {
+        if (!this.outputCanvas) return;
+        const rect = this.outputCanvas.parentElement.getBoundingClientRect();
+        this.outputCanvas.width = rect.width;
+        this.outputCanvas.height = rect.height;
+        if (!this.isGenerating) this.drawStaticNoise();
+    }
+
+    log(message, type = 'info') {
+        const div = document.createElement('div');
+        div.className = `log-line ${type}`;
+        const time = new Date().toLocaleTimeString('en-US', { hour12: false });
+        div.innerHTML = `<span class="ts">[${time}]</span> ${message}`;
+        this.logs.appendChild(div);
+        this.logs.scrollTop = this.logs.scrollHeight;
+    }
+
+    async startGeneration() {
+        if (this.isGenerating) return;
+        
+        // Disable UI elements during generation
+        this.isGenerating = true;
+        document.getElementById('start-btn').disabled = true;
+        document.getElementById('prompt-input').disabled = true;
+        document.getElementById('image-input').disabled = true;
+        document.getElementById('quantum-influence').disabled = true;
+        document.getElementById('entanglement-depth').disabled = true;
+        document.getElementById('sampling-method').disabled = true;
+
+        document.getElementById('generation-stats').style.display = 'block';
+        
+        try {
+            if (!this.sourceImage) {
+                this.log('Error: Source image required for I2V generation.', 'error');
+                alert("Please upload a source image first.");
+                return; // Exit if no source image
+            }
+
+            const prompt = document.getElementById('prompt-input').value.trim() || "Quantum interpolation";
+
+            // --- Backend Health Check ---
+            this.log('Checking backend availability...', 'info');
+            try {
+                const health = await this.callBackendApi('/');
+                this.log(`Backend Status: ${health.status} (LLM: ${health.llm_status}, CLIP: ${health.clip_status})`, 'success');
+                if (health.llm_status.includes("not loaded") || health.clip_status.includes("not loaded")) {
+                    throw new Error("One or more AI models not loaded on backend. Check backend console.");
+                }
+            } catch (error) {
+                this.log(`Backend not available or unhealthy: ${error.message}. Please ensure your Python Flask backend is running.`, 'error');
+                alert(`Backend Error: ${error.message}. Please start the backend.`);
+                return; // Exit if backend is not healthy
+            }
+            // --- End Backend Health Check ---
+
+            this.log(`Initializing I2V pipeline for: "${prompt.substring(0, 30)}..."`, 'info');
+            
+            // Phase 1: Initialization
+            await this.phaseInitialization();
+            
+            // Phase 2: Quantum Circuit
+            await this.phaseQuantumCircuit();
+            
+            // Phase 3: WebGPU Compute
+            await this.phaseWebGPU();
+            
+            // Phase 4: Bridge & Diffusion (Real Emulation)
+            // This will now also handle recording if in Director Mode
+            await this.phaseRealDiffusion(prompt);
+            
+            this.log('Generation Sequence Complete.', 'success');
+            document.getElementById('generation-stats').innerHTML = 'GENERATION COMPLETE';
+            
+            // DIRECTOR MODE: PREP NEXT FRAME
+            if (this.directorMode && this.movieFrames.length > 0) {
+                this.prepareNextContext();
+            }
+
+        } catch (error) {
+            this.log(`System Error during generation: ${error.message}`, 'error');
+            document.getElementById('generation-stats').innerHTML = `ERROR: ${error.message}`;
+            console.error(error);
+        } finally {
+            // Re-enable UI elements
+            this.isGenerating = false;
+            document.getElementById('start-btn').disabled = false;
+            document.getElementById('prompt-input').disabled = false;
+            document.getElementById('image-input').disabled = false;
+            document.getElementById('quantum-influence').disabled = false;
+            document.getElementById('entanglement-depth').disabled = false;
+            document.getElementById('sampling-method').disabled = false;
+        }
+    }
+
+    prepareNextContext() {
+        // Get the last frame from the movie array
+        const lastFrameBitmap = this.movieFrames[this.movieFrames.length - 1];
+        
+        // Create a temp canvas to extract the image
+        const canvas = document.createElement('canvas');
+        canvas.width = this.outputCanvas.width;
+        canvas.height = this.outputCanvas.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(lastFrameBitmap, 0, 0);
+        
+        // Convert to Image object for sourceImage
+        const newUrl = canvas.toDataURL();
+        const nextImg = new Image();
+        nextImg.onload = () => {
+            this.sourceImage = nextImg;
+            // Update Preview UI
+            const preview = document.getElementById('preview-img');
+            preview.src = newUrl;
+            this.log('Director Mode: Context refreshed. Last frame set as input for next sequence.', 'secondary');
+        };
+        nextImg.src = newUrl;
+    }
+
+    async sleep(ms) {
+        return new Promise(r => setTimeout(r, ms));
+    }
+
+    async phaseInitialization() {
+        this.log('Allocating WebGPU buffers for I2V tensor...', 'info');
+        await this.sleep(600);
+        this.log('Quantizing source image to 512-dim latent space...', 'info');
+        await this.sleep(800);
+    }
+
+    async phaseQuantumCircuit() {
+        this.log(`Constructing ${this.config.depth}-layer quantum circuit...`, 'info');
+        // Trigger Viz animation if available globally
+        if (window.circuitViz) window.circuitViz.updateVizParameters(this.config.influence, this.config.depth);
+        
+        await this.sleep(1000);
+        this.log('Applying Hadamard gates to initialization layer...', 'info');
+        await this.sleep(400);
+        this.log(`Entangling qubits 0-511 with depth ${this.config.depth}...`, 'info');
+        await this.sleep(800);
+    }
+
+    async phaseWebGPU() {
+        this.log('Compiling circuit to WGSL shaders...', 'info');
+        await this.sleep(600);
+        this.log('Injecting quantum noise into CLIP embeddings...', 'info');
+        
+        // Simulate intense calculation, trigger stateViz with parameters
+        if (window.stateViz) window.stateViz.updateVizParameters(this.config.influence, this.config.depth);
+        // Keep sleep for visual pacing
+        for (let i = 0; i < 5; i++) {
+            await this.sleep(200);
+        }
+        
+        const entropy = (Math.random() * 3 + 0.5).toFixed(4);
+        document.getElementById('entropy-value').textContent = entropy;
+        this.log(`Latent perturbation complete. Entropy: ${entropy}`, 'success');
+    }
+
+    async phaseRealDiffusion(prompt) {
+        this.log('Starting Frame-by-Frame Quantum Diffusion...', 'warn');
+        
+        // Switch tab to output to show the magic
+        document.querySelector('[data-view="output"]').click();
+
+        // Get initial image data from the source image
+        let currentImage = this.sourceImage;
+        const totalFrames = 48; // Total frames for the movie
+        let currentFrameDataURL = currentImage.src; // Data URL of the current frame
+
+        for (let frame = 0; frame < totalFrames; frame++) {
+            this.log(`Requesting guidance for Frame ${frame + 1}/${totalFrames}...`, 'info');
+            document.getElementById('generation-stats').innerHTML = `GETTING GUIDANCE FOR FRAME ${frame + 1}/${totalFrames}<br>Quantum-Diffusing...`;
+            
+            // Call backend for LLM guidance on how to transform the current frame
+            const guidanceResponse = await this.callBackendApi('/generate_frame_guidance', {
+                image: currentFrameDataURL,
+                prompt: prompt,
+                influence: this.config.influence,
+                depth: this.config.depth,
+                frame_number: frame
+            });
+            
+            const llmGuidance = guidanceResponse.guidance;
+            this.log(`LLM Guidance (Frame ${frame + 1}): ${llmGuidance.substring(0, 80)}...`, 'secondary');
+
+            document.getElementById('generation-stats').innerHTML = `RENDERING FRAME ${frame + 1}/${totalFrames}<br>Applying Quantum Effects...`;
+            
+            // Render the next frame based on LLM guidance and current image
+            const newFrameDataURL = await this.renderFrameTransition(currentImage, this.config.influence, llmGuidance, frame);
+            
+            // Update currentImage for the next iteration
+            currentImage = await this this.loadImageFromDataURL(newFrameDataURL);
+            currentFrameDataURL = newFrameDataURL; // Update dataURL as well
+            
+            // Director Mode: Record Frame
+            if (this.directorMode) {
+                const bitmap = await createImageBitmap(this.outputCanvas);
+                this.movieFrames.push(bitmap);
+                this.updateDirectorUI();
+            }
+            
+            await this.sleep(50); // Render speed
+        }
+    }
+
+    async loadImageFromDataURL(dataURL) {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = dataURL;
+        });
+    }
+
+    async renderFrameTransition(currentImage, influence, llmGuidance, frameNumber) {
+        const w = this.outputCanvas.width;
+        const h = this.outputCanvas.height;
+        this.outputCtx.clearRect(0, 0, w, h); // Clear canvas for new frame
+
+        // Create a temporary canvas to draw the currentImage and apply effects
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = w;
+        tempCanvas.height = h;
+        const tempCtx = tempCanvas.getContext('2d');
+
+        // Draw the current image, scaled to fit
+        const aspectRatio = currentImage.width / currentImage.height;
+        let drawWidth = w;
+        let drawHeight = h;
+        if (w / h > aspectRatio) { // Canvas is wider than image
+            drawWidth = h * aspectRatio;
+        } else { // Canvas is taller than image
+            drawHeight = w / aspectRatio;
+        }
+        const offsetX = (w - drawWidth) / 2;
+        const offsetY = (h - drawHeight) / 2;
+        tempCtx.drawImage(currentImage, offsetX, offsetY, drawWidth, drawHeight);
+        
+        // Get ImageData for pixel manipulation
+        let imageData = tempCtx.getImageData(0, 0, w, h);
+        let data = imageData.data;
+
+        // --- Parse LLM Guidance and apply effects ---
+        const instructions = llmGuidance.toLowerCase().split(',').map(s => s.trim());
+        let pixelShiftX = 0;
+        let pixelShiftY = 0;
+        let colorShiftR = 0;
+        let colorShiftG = 0;
+        let colorShiftB = 0;
+        let blurRadius = 0;
+        let zoomFactor = 1;
+        let staticOverlayOpacity = 0;
+
+        for (const instruction of instructions) {
+            if (instruction.includes("shift red by")) {
+                colorShiftR += parseInt(instruction.match(/by (-?\d+)/)?.[1] || "0");
+            } else if (instruction.includes("shift green by")) {
+                colorShiftG += parseInt(instruction.match(/by (-?\d+)/)?.[1] || "0");
+            } else if (instruction.includes("shift blue by")) {
+                colorShiftB += parseInt(instruction.match(/by (-?\d+)/)?.[1] || "0");
+            } else if (instruction.includes("pixel displacement x-axis")) {
+                pixelShiftX += parseInt(instruction.match(/random (-?\d+)px/)?.[1] || "0");
+            } else if (instruction.includes("pixel displacement y-axis")) {
+                pixelShiftY += parseInt(instruction.match(/random (-?\d+)px/)?.[1] || "0");
+            } else if (instruction.includes("apply gaussian blur radius")) {
+                blurRadius = Math.max(blurRadius, parseInt(instruction.match(/radius (\d+)/)?.[1] || "0"));
+            } else if (instruction.includes("zoom in")) {
+                zoomFactor *= (1 + parseFloat(instruction.match(/zoom in (\d+(\.\d+)?)/)?.[1] || "0"));
+            } else if (instruction.includes("zoom out")) {
+                zoomFactor /= (1 + parseFloat(instruction.match(/zoom out (\d+(\.\d+)?)/)?.[1] || "0"));
+            } else if (instruction.includes("static pattern opacity")) {
+                staticOverlayOpacity = Math.max(staticOverlayOpacity, parseFloat(instruction.match(/opacity (\d+(\.\d+)?)/)?.[1] || "0"));
+            }
+            // Add more parsing for other instructions...
+        }
+        
+        // Apply pixel shifts and color changes
+        const tempImageData = tempCtx.createImageData(w, h);
+        const tempData = tempImageData.data;
+
+        for (let y = 0; y < h; y++) {
+            for (let x = 0; x < w; x++) {
+                const originalIndex = (y * w + x) * 4;
+
+                const shiftedX = (x - pixelShiftX + w) % w;
+                const shiftedY = (y - pixelShiftY + h) % h;
+                const shiftedIndex = (shiftedY * w + shiftedX) * 4;
+
+                if (shiftedIndex >= 0 && shiftedIndex < data.length) {
+                    tempData[originalIndex] = Math.min(255, Math.max(0, data[shiftedIndex] + colorShiftR));     // Red
+                    tempData[originalIndex + 1] = Math.min(255, Math.max(0, data[shiftedIndex + 1] + colorShiftG)); // Green
+                    tempData[originalIndex + 2] = Math.min(255, Math.max(0, data[shiftedIndex + 2] + colorShiftB)); // Blue
+                    tempData[originalIndex + 3] = data[shiftedIndex + 3];                                      // Alpha
+                } else {
+                    // Handle out-of-bounds pixels (e.g., fill with black or transparent)
+                    tempData[originalIndex] = 0;
+                    tempData[originalIndex + 1] = 0;
+                    tempData[originalIndex + 2] = 0;
+                    tempData[originalIndex + 3] = 255;
+                }
+            }
+        }
+        imageData = tempImageData; // Update imageData with shifted pixels
+
+        // Apply blur (very basic box blur for performance, Gaussian is complex with pixel data)
+        if (blurRadius > 0) {
+            const blurredImageData = tempCtx.createImageData(w, h);
+            const blurredData = blurredImageData.data;
+            for (let y = 0; y < h; y++) {
+                for (let x = 0; x < w; x++) {
+                    let rSum = 0, gSum = 0, bSum = 0, aSum = 0;
+                    let count = 0;
+                    for (let ky = -blurRadius; ky <= blurRadius; ky++) {
+                        for (let kx = -blurRadius; kx <= blurRadius; kx++) {
+                            const nx = x + kx;
+                            const ny = y + ky;
+                            if (nx >= 0 && nx < w && ny >= 0 && ny < h) {
+                                const index = (ny * w + nx) * 4;
+                                rSum += data[index];
+                                gSum += data[index + 1];
+                                bSum += data[index + 2];
+                                aSum += data[index + 3];
+                                count++;
+                            }
+                        }
+                    }
+                    const outputIndex = (y * w + x) * 4;
+                    blurredData[outputIndex] = rSum / count;
+                    blurredData[outputIndex + 1] = gSum / count;
+                    blurredData[outputIndex + 2] = bSum / count;
+                    blurredData[outputIndex + 3] = aSum / count;
+                }
+            }
+            imageData = blurredImageData;
+        }
+
+        // Apply static overlay
+        if (staticOverlayOpacity > 0) {
+            for (let i = 0; i < imageData.data.length; i += 4) {
+                const staticValue = Math.random() * 255;
+                imageData.data[i] = (imageData.data[i] * (1 - staticOverlayOpacity)) + (staticValue * staticOverlayOpacity);
+                imageData.data[i+1] = (imageData.data[i+1] * (1 - staticOverlayOpacity)) + (staticValue * staticOverlayOpacity);
+                imageData.data[i+2] = (imageData.data[i+2] * (1 - staticOverlayOpacity)) + (staticValue * staticOverlayOpacity);
+            }
+        }
+        
+        // Draw the processed ImageData back to the temporary canvas
+        tempCtx.putImageData(imageData, 0, 0);
+
+        // Apply zoom (done by redrawing tempCanvas onto outputCanvas)
+        const zoomedWidth = w * zoomFactor;
+        const zoomedHeight = h * zoomFactor;
+        const zoomOffsetX = (w - zoomedWidth) / 2;
+        const zoomOffsetY = (h - zoomedHeight) / 2;
+        
+        this.outputCtx.drawImage(tempCanvas, zoomOffsetX, zoomOffsetY, zoomedWidth, zoomedHeight);
+
+        // Periodically draw circuit overlay if influence is high
+        if (influence > 50 && frameNumber % 5 === 0) {
+            this.drawCircuitOverlay();
+        }
+
+        // Convert the final rendered canvas state to a DataURL for the next iteration
+        return this.outputCanvas.toDataURL();
+    }
+    
+    drawCircuitOverlay() {
+        const ctx = this.outputCtx;
+        const w = this.outputCanvas.width;
+        const h = this.outputCanvas.height;
+        
+        ctx.strokeStyle = 'rgba(0, 240, 255, 0.3)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        const y = Math.random() * h;
+        ctx.moveTo(0, y);
+        ctx.lineTo(w, y);
+        ctx.stroke();
+        
+        ctx.fillStyle = 'rgba(0, 240, 255, 0.5)';
+        // Attempt to get a more dynamic font size
+        const fontSize = Math.max(10, Math.min(w, h) / 30);
+        ctx.font = `${fontSize}px Arial`; 
+        ctx.fillText(`Q-GATE-${Math.floor(Math.random()*100)}`, 10, y - 5);
+    }
+
+    drawStaticNoise() {
+        const w = this.outputCanvas.width;
+        const h = this.outputCanvas.height;
+        const id = this.outputCtx.createImageData(w, h);
+        const d = id.data;
+        
+        for (let i = 0; i < d.length; i += 4) {
+            const v = Math.random() * 20; // Dark noise
+            d[i] = v; d[i+1] = v; d[i+2] = v + 10; d[i+3] = 255;
+        }
+        this.outputCtx.putImageData(id, 0, 0);
+    }
+
+    // renderDiffusionStep is no longer needed as phaseRealDiffusion and renderFrameTransition handle it.
+    // Keeping it as a placeholder/commented out for now if previous functionality needs reference.
+    // async renderDiffusionStep(step, totalSteps) { }
+
+    async downloadMovie() {
+        if (this.movieFrames.length === 0) return;
+        
+        const btn = document.getElementById('download-btn');
+        const originalText = btn.innerHTML;
+        btn.disabled = true;
+        btn.innerHTML = 'RENDER...';
+        
+        this.log('Starting Movie Rendering...', 'info');
+        
+        try {
+            // Create a hidden canvas for playback
+            const canvas = document.createElement('canvas');
+            canvas.width = this.outputCanvas.width;
+            canvas.height = this.outputCanvas.height;
+            const ctx = canvas.getContext('2d');
+            
+            // Setup MediaRecorder
+            const stream = canvas.captureStream(30); // 30 FPS
+            const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9') 
+                ? 'video/webm;codecs=vp9' 
+                : 'video/webm';
+                
+            const recorder = new MediaRecorder(stream, {
+                mimeType: mimeType,
+                videoBitsPerSecond: 5000000 // 5Mbps
+            });
+            
+            const chunks = [];
+            recorder.ondataavailable = (e) => {
+                if (e.data.size > 0) chunks.push(e.data);
+            };
+            
+            recorder.onstop = () => {
+                const blob = new Blob(chunks, { type: 'video/webm' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `wan-quantum-director-cut-${Date.now()}.webm`;
+                a.click();
+                URL.revokeObjectURL(url);
+                this.log('Movie Downloaded Successfully.', 'success');
+                btn.innerHTML = originalText;
+                btn.disabled = false;
+            };
+            
+            recorder.start();
+            
+            // Play frames into recorder
+            // We need to pace this to match the stream FPS roughly
+            const frameDuration = 1000 / 30;
+            
+            for (const bitmap of this.movieFrames) {
+                ctx.drawImage(bitmap, 0, 0);
+                // Request dummy frame to keep stream active if needed, 
+                // but loop should be enough if async enough.
+                // Actually, for captureStream to pick it up, we should wait a tick.
+                await new Promise(r => setTimeout(r, frameDuration));
+            }
+            
+            recorder.stop();
+            
+        } catch (e) {
+            this.log(`Export failed: ${e.message}`, 'error');
+            btn.innerHTML = originalText;
+            btn.disabled = false;
+        }
+    }

styles.css

@@ -0,0 +1,803 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap');
+
+:root {
+    --bg-dark: #050510;
+    --bg-panel: rgba(20, 25, 40, 0.7);
+    --accent: #00f0ff;
+    --accent-glow: rgba(0, 240, 255, 0.3);
+    --secondary: #7000ff;
+    --text-main: #e0e6ed;
+    --text-dim: #94a3b8;
+    --border: rgba(255, 255, 255, 0.1);
+    --glass: blur(12px);
+    --font-mono: 'Space Mono', monospace;
+    --font-sans: 'Inter', sans-serif;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    font-family: var(--font-sans);
+    overflow: hidden; /* App-like feel */
+    height: 100vh;
+    background-image: 
+        radial-gradient(circle at 10% 20%, rgba(112, 0, 255, 0.1) 0%, transparent 20%),
+        radial-gradient(circle at 90% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 20%);
+}
+
+/* Layout */
+.app-container {
+    display: grid;
+    grid-template-columns: 260px 1fr;
+    height: 100vh;
+}
+
+/* Side Navigation */
+.side-nav {
+    background: rgba(10, 12, 20, 0.9);
+    border-right: 1px solid var(--border);
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-weight: 800;
+    font-size: 1.2rem;
+    letter-spacing: 1px;
+    color: var(--accent);
+}
+
+.brand-icon {
+    width: 32px;
+    height: 32px;
+    background: var(--accent);
+    color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    box-shadow: 0 0 15px var(--accent-glow);
+}
+
+.nav-links {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    text-decoration: none;
+    color: var(--text-dim);
+    border-radius: 8px;
+    transition: all 0.2s;
+    font-size: 0.9rem;
+}
+
+.nav-link:hover, .nav-link.active {
+    background: rgba(255, 255, 255, 0.05);
+    color: var(--text-main);
+}
+
+.nav-link.active {
+    border-left: 3px solid var(--accent);
+    background: linear-gradient(90deg, rgba(0, 240, 255, 0.1), transparent);
+}
+
+.nav-status {
+    margin-top: auto;
+    border-top: 1px solid var(--border);
+    padding-top: 24px;
+}
+
+.status-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8rem;
+    color: var(--text-dim);
+    margin-bottom: 12px;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #333;
+}
+
+.status-dot.active {
+    background: #00ff88;
+    box-shadow: 0 0 8px #00ff88;
+}
+
+.mono {
+    font-family: var(--font-mono);
+    color: var(--accent);
+}
+
+/* Main Content */
+.content-area {
+    overflow-y: auto;
+    padding: 32px;
+    position: relative;
+}
+
+.section {
+    display: none;
+    max-width: 1200px;
+    margin: 0 auto;
+    animation: fadeIn 0.4s ease-out;
+}
+
+.section.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Simulation Grid */
+.simulation-grid {
+    display: grid;
+    grid-template-columns: 350px 1fr;
+    grid-template-rows: auto 250px;
+    gap: 24px;
+    height: calc(100vh - 120px);
+}
+
+.glass-panel {
+    background: var(--bg-panel);
+    backdrop-filter: var(--glass);
+    -webkit-backdrop-filter: var(--glass);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+}
+
+/* Inputs */
+.control-panel {
+    grid-row: 1 / -1;
+}
+
+.input-group {
+    margin-bottom: 24px;
+}
+
+/* File Upload Styles */
+.file-drop-zone {
+    border: 2px dashed var(--border);
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+    background: rgba(0,0,0,0.2);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    min-height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-drop-zone:hover, .file-drop-zone.drag-over {
+    border-color: var(--accent);
+    background: rgba(0, 240, 255, 0.05);
+}
+
+.drop-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.drop-content .icon {
+    font-size: 2rem;
+    margin-bottom: 4px;
+}
+
+.drop-text {
+    font-weight: 700;
+    color: var(--text-main);
+    font-size: 0.9rem;
+}
+
+.drop-sub {
+    color: var(--text-dim);
+    font-size: 0.7rem;
+}
+
+#preview-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.6;
+    z-index: 1;
+}
+
+#preview-img.hidden {
+    display: none;
+}
+
+label {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    color: var(--text-dim);
+    font-weight: 600;
+}
+
+textarea {
+    width: 100%;
+    height: 100px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 12px;
+    color: var(--text-main);
+    font-family: var(--font-sans);
+    resize: none;
+    transition: border-color 0.2s;
+}
+
+textarea:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+input[type="range"] {
+    width: 100%;
+    background: transparent;
+    -webkit-appearance: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: var(--accent);
+    margin-top: -6px;
+    cursor: pointer;
+    box-shadow: 0 0 10px var(--accent-glow);
+}
+
+.slider-meta {
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    margin-top: 4px;
+}
+
+.value-badge {
+    color: var(--accent);
+    font-family: var(--font-mono);
+}
+
+select {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--border);
+    color: var(--text-main);
+    padding: 10px;
+    border-radius: 6px;
+}
+
+.btn-primary {
+    width: 100%;
+    padding: 16px;
+    background: var(--accent);
+    color: #000;
+    border: none;
+    border-radius: 6px;
+    font-weight: 800;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.2s;
+}
+
+.btn-primary:hover {
+    background: #fff;
+    box-shadow: 0 0 20px var(--accent-glow);
+}
+
+.btn-primary:disabled {
+    background: #333;
+    color: #666;
+    cursor: not-allowed;
+}
+
+/* Director Mode Styles */
+.director-controls {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--secondary);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 24px;
+}
+
+.director-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.switch-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+}
+
+.switch-container input {
+    display: none;
+}
+
+.toggle-slider {
+    width: 40px;
+    height: 20px;
+    background: #333;
+    border-radius: 20px;
+    position: relative;
+    transition: all 0.3s;
+}
+
+.toggle-slider::before {
+    content: '';
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background: #fff;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: all 0.3s;
+}
+
+input:checked + .toggle-slider {
+    background: var(--secondary);
+}
+
+input:checked + .toggle-slider::before {
+    transform: translateX(20px);
+}
+
+.frame-count {
+    font-family: var(--font-mono);
+    color: var(--secondary);
+    font-size: 0.8rem;
+}
+
+.director-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.btn-secondary, .btn-danger {
+    flex: 1;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: all 0.2s;
+}
+
+.btn-secondary {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-main);
+    border: 1px solid var(--border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: var(--text-main);
+    color: #000;
+}
+
+.btn-danger {
+    background: rgba(255, 0, 85, 0.1);
+    color: #ff0055;
+    border: 1px solid rgba(255, 0, 85, 0.3);
+}
+
+.btn-danger:hover:not(:disabled) {
+    background: #ff0055;
+    color: #fff;
+}
+
+.btn-secondary:disabled, .btn-danger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+
+/* Visualization Panel */
+.visualization-panel {
+    grid-column: 2;
+    grid-row: 1;
+    padding: 0; /* Custom padding for tabs */
+    overflow: hidden;
+}
+
+.viz-tabs {
+    display: flex;
+    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid var(--border);
+}
+
+.viz-tab {
+    padding: 12px 24px;
+    background: transparent;
+    border: none;
+    color: var(--text-dim);
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    border-right: 1px solid var(--border);
+}
+
+.viz-tab.active {
+    color: var(--accent);
+    background: rgba(0, 240, 255, 0.05);
+}
+
+.viz-content {
+    flex: 1;
+    position: relative;
+    background: #000;
+}
+
+.viz-view {
+    display: none;
+    width: 100%;
+    height: 100%;
+}
+
+.viz-view.active {
+    display: block;
+}
+
+canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.overlay-stats {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-family: var(--font-mono);
+    color: var(--accent);
+    background: rgba(0, 0, 0, 0.8);
+    padding: 8px 16px;
+    border: 1px solid var(--accent);
+    pointer-events: none;
+}
+
+.scanline {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: rgba(0, 240, 255, 0.3);
+    opacity: 0.3;
+    animation: scan 3s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes scan {
+    0% { top: 0%; }
+    100% { top: 100%; }
+}
+
+.entropy-readout {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    font-family: var(--font-mono);
+    background: rgba(0,0,0,0.6);
+    padding: 4px 8px;
+    border-radius: 4px;
+    color: var(--secondary);
+}
+
+/* Terminal */
+.terminal-panel {
+    grid-column: 2;
+    grid-row: 2;
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    padding: 0;
+    background: #0a0a12;
+}
+
+.terminal-header {
+    padding: 8px 16px;
+    background: rgba(255, 255, 255, 0.05);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    color: var(--text-dim);
+    font-size: 0.7rem;
+    text-transform: uppercase;
+}
+
+.terminal-status {
+    color: #00ff88;
+}
+
+.terminal-body {
+    padding: 16px;
+    overflow-y: auto;
+    color: #d0d0d0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.log-line {
+    opacity: 0.8;
+    border-left: 2px solid transparent;
+    padding-left: 8px;
+}
+
+.log-line.info { border-color: var(--accent); }
+.log-line.warn { border-color: #ffcc00; color: #ffcc00; }
+.log-line.error { border-color: #ff0055; color: #ff0055; }
+.log-line.success { border-color: #00ff88; color: #00ff88; }
+
+.ts {
+    color: #666;
+    margin-right: 8px;
+}
+
+/* Document Styles */
+.document-wrapper {
+    max-width: 900px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+.document-wrapper h1 {
+    font-size: 2.5rem;
+    margin-bottom: 16px;
+    background: linear-gradient(90deg, #fff, var(--text-dim));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.lead {
+    font-size: 1.1rem;
+    color: var(--text-dim);
+    margin-bottom: 32px;
+    border-left: 4px solid var(--accent);
+    padding-left: 16px;
+}
+
+h3 {
+    margin: 32px 0 16px;
+    color: var(--accent);
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    font-size: 1rem;
+    letter-spacing: 1px;
+}
+
+p {
+    margin-bottom: 16px;
+    color: #c0c0c0;
+}
+
+.metric-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    margin: 32px 0;
+}
+
+.card {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 24px;
+    border-radius: 8px;
+    text-align: center;
+    border: 1px solid var(--border);
+}
+
+.metric-val {
+    font-size: 2rem;
+    font-weight: 800;
+    color: #fff;
+    margin-bottom: 4px;
+}
+
+.metric-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    color: var(--text-dim);
+}
+
+.specs-table {
+    width: 100%;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 24px 0;
+}
+
+.spec-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr 1fr;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+}
+
+.spec-row:last-child {
+    border-bottom: none;
+}
+
+.spec-row.header {
+    background: rgba(255, 255, 255, 0.05);
+    font-weight: bold;
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+}
+
+.spec-row span {
+    font-size: 0.9rem;
+}
+
+/* Timeline */
+.timeline {
+    position: relative;
+    margin: 32px 0;
+    padding-left: 32px;
+}
+
+.timeline::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--border);
+}
+
+.timeline-item {
+    position: relative;
+    margin-bottom: 24px;
+}
+
+.timeline-item::before {
+    content: '';
+    position: absolute;
+    left: -37px;
+    top: 6px;
+    width: 12px;
+    height: 12px;
+    background: var(--bg-dark);
+    border: 2px solid var(--accent);
+    border-radius: 50%;
+}
+
+.phase {
+    font-family: var(--font-mono);
+    color: var(--accent);
+    font-size: 0.8rem;
+    margin-bottom: 4px;
+}
+
+/* Architecture specific */
+.architecture-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    margin-top: 32px;
+}
+
+.arch-card {
+    background: rgba(255,255,255,0.03);
+    padding: 24px;
+    border-radius: 8px;
+    border: 1px solid var(--border);
+}
+
+.arch-card h3 {
+    margin-top: 0;
+    font-size: 0.9rem;
+}
+
+.arch-card ul {
+    list-style: none;
+    padding: 0;
+}
+
+.arch-card li {
+    margin-bottom: 8px;
+    font-size: 0.85rem;
+    padding-left: 16px;
+    position: relative;
+}
+
+.arch-card li::before {
+    content: '›';
+    position: absolute;
+    left: 0;
+    color: var(--accent);
+}
+
+#architecture-canvas {
+    height: 300px;
+    width: 100%;
+    background: #0f111a;
+    border-radius: 8px;
+    margin: 24px 0;
+}
+
+@media (max-width: 1024px) {
+    .app-container {
+        grid-template-columns: 1fr;
+    }
+    .side-nav {
+        display: none;
+    }
+    .simulation-grid {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto auto auto;
+    }
+    .visualization-panel {
+        grid-column: 1;
+        grid-row: 2;
+        height: 400px;
+    }
+    .terminal-panel {
+        grid-column: 1;
+        grid-row: 3;
+    }
+}