Upload 12 files

README (1).md

@@ -0,0 +1,12 @@
+---
+license: artistic-2.0
+title: Quantum-Enhanced WAN 2.1 Video Generation System
+sdk: static
+emoji: 🚀
+colorFrom: indigo
+colorTo: indigo
+pinned: true
+thumbnail: >-
+  https://cdn-uploads.huggingface.co/production/uploads/63a41856de134926a2b51191/qebqqRHAFmhFg8AspSmp_.jpeg
+short_description: '## Features - **Hybrid Quantum-Classical Architecture:**'
+---

api.py

@@ -0,0 +1,239 @@
+from flask import Blueprint, request, jsonify
+import base64
+from PIL import Image
+import io
+import torch
+from transformers import CLIPProcessor, CLIPModel
+from mlc_llm import ChatModule
+import threading
+import os
+
+# Create a Blueprint for API routes
+app.register_blueprint(api_bp, url_prefix='/api')
+
+# Global instances for models (will be initialized in app.py)
+clip_processor = None
+clip_model = None
+mlc_chat_module = None
+mlc_lock = threading.Lock()
+
+@api_bp.route('/health')
+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
+    })
+
+@api_bp.route('/embed_image', methods=['POST'])
+def embed_image():
+    """Handle image embedding requests"""
+    if clip_processor is None or clip_model is None:
+        return jsonify({"error": "CLIP model not loaded. Check server logs for details."}), 500
+
+    try:
+        data = request.get_json()
+        if not data:
+            return jsonify({"error": "Invalid JSON data"}), 400
+            
+        image_data_url = data.get('image') or data.get('image_url') or data.get('image_data')
+        
+        if not image_data_url:
+            return jsonify({"error": "No image data provided. Expected 'image', 'image_url', or 'image_data' field."}), 400
+
+        # Handle data URL format
+        if ',' in image_data_url:
+            header, encoded = image_data_url.split(",", 1)
+        else:
+            # Assume it's raw base64
+            encoded = image_data_url
+        
+        # Decode and process image
+        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)
+        embeddings_list = image_embeddings.squeeze().cpu().tolist()
+        
+        return jsonify({
+            "embeddings": embeddings_list,
+            "shape": image_embeddings.shape,
+            "success": True
+        }), 200
+
+    except ValueError as ve:
+        print(f"Value error embedding image: {ve}")
+        return jsonify({"error": f"Invalid image data format: {str(ve)}"}), 400
+    except Exception as e:
+        print(f"Error embedding image: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({"error": f"Failed to embed image: {str(e)}"}), 500
+
+@api_bp.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}), 200
+    except Exception as e:
+        print(f"Error getting chat completion: {e}")
+        return jsonify({"error": f"Failed to get chat completion: {str(e)}"}), 500
+
+@api_bp.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
+        import math
+        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 +{round(influence/5)}', 'hue rotate {round(influence*1.5)}deg'), "
+            f"blur (e.g., 'apply gaussian blur radius {max(1, round(influence/10))}'), "
+            f"glitch/distortion (e.g., 'pixel displacement x-axis random {max(5, round(influence/5))}px', 'chromatic aberration offset {max(1, round(influence/20))}'), "
+            f"zoom/pan (e.g., 'zoom in {1.00 + influence/2000}x, pan right {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 {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 +{round(influence/5)}, apply motion blur strength {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]}...'.")
+        }), 200
+    except Exception as e:
+        print(f"Error generating frame guidance: {e}")
+        return jsonify({"error": f"Failed to generate frame guidance: {str(e)}"}), 500
+
+@api_bp.route('/upload', methods=['POST'])
+def upload_file():
+    try:
+        # Check if it's a multipart form upload (FormData)
+        if 'file' in request.files:
+            file = request.files['file']
+            if file.filename == '':
+                return jsonify({"error": "No selected file"}), 400
+            
+            # Read the image file
+            img_bytes = file.read()
+            # Convert to base64 for frontend use
+            img_base64 = base64.b64encode(img_bytes).decode('utf-8')
+            
+            # Determine mime type
+            content_type = file.content_type or 'image/jpeg'
+            img_data_url = f"data:{content_type};base64,{img_base64}"
+            
+            return jsonify({
+                "message": "File uploaded successfully",
+                "image_url": img_data_url
+            }), 200
+        
+        # Check if it's JSON with base64 data
+        elif request.is_json:
+            data = request.get_json()
+            image_data = data.get('image') or data.get('image_url') or data.get('image_data')
+            
+            if not image_data:
+                return jsonify({"error": "No image data provided"}), 400
+            
+            # If already a data URL, return as-is
+            if image_data.startswith('data:image'):
+                return jsonify({
+                    "message": "Image data received",
+                    "image_url": image_data
+                }), 200
+            
+            # If base64 without header, add it
+            img_data_url = f"data:image/jpeg;base64,{image_data}"
+            return jsonify({
+                "message": "Image data processed",
+                "image_url": img_data_url
+            }), 200
+        
+        else:
+            return jsonify({"error": "Invalid request format. Send either FormData with 'file' or JSON with 'image' field"}), 400
+            
+    except Exception as e:
+        print(f"Error uploading file: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({"error": f"Failed to upload file: {str(e)}"}), 500

app.js

@@ -0,0 +1,1057 @@
+// Advanced Simulation Controller
+
+// Dynamically set backend URL for HuggingFace Spaces compatibility
+
+class MainSystemSimulator {
+    constructor() {
+        console.log('SystemSimulator initialized');
+        this.logs = document.getElementById('system-logs');
+        this.outputCanvas = document.getElementById('output-canvas');
+        this.outputCtx = this.outputCanvas ? this.outputCanvas.getContext('2d') : null;
+        
+        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;
+        
+        // Flag to prevent multiple simultaneous API calls
+        this.isProcessingImage = false;
+
+        this.init();
+    }
+
+    async callBackendApi(endpoint, data) {
+        try {
+            // Ensure endpoint starts with /
+            //const normalizedEndpoint = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
+            var BACKEND_URL = window.location.origin + '/api/'
+            // Construct full URL (backendUrl should NOT have trailing slash)
+            const backendUrl = BACKEND_URL;
+            const url = `${backendUrl}` + `${endpoint}`;
+            
+            console.log(`Calling API: ${url}`);
+            
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+    
+            const contentType = response.headers.get('content-type') || '';
+            
+            // Read the response body only once
+            const responseText = await response.text();
+            
+            
+            // Handle non-JSON responses that aren't HTML
+            if (!contentType.includes('application/json')) {
+                // Use the already read responseText instead of trying to read it again
+                const textResponse = responseText; // Fix: use the already read value
+                console.error(`Expected JSON, got ${contentType}:`, textResponse);
+                
+                // Try to extract error information from HTML
+                let errorMessage = `Expected JSON response, got ${contentType}`;
+                try {
+                    // Check if it's an error page
+                    if (textResponse.includes('<title>')) {
+                        const titleMatch = textResponse.match(/<title>(.*?)<\/title>/s);
+                        if (titleMatch && titleMatch[1]) {
+                            errorMessage = `Server returned error: ${titleMatch[1]}`;
+                        }
+                    }
+                    
+                    // Check for Flask error details
+                    if (textResponse.includes('<pre>')) {
+                        const preMatch = textResponse.match(/<pre>(.*?)<\/pre>/s);
+                        if (preMatch && preMatch[1]) {
+                            errorMessage += ` - ${preMatch[1].substring(0, 100)}`;
+                        }
+                    }
+                } catch (e) {
+                    console.error('Error parsing HTML response:', e);
+                }
+                
+                throw new Error(errorMessage);
+            }
+    
+            // Parse JSON response
+            let jsonResponse;
+            try {
+                jsonResponse = JSON.parse(responseText);
+            } catch (parseError) {
+                console.error('JSON parse error:', parseError);
+                throw new Error(`Failed to parse JSON response: ${parseError.message}`);
+            }
+            
+            // Check for HTTP error status
+            if (!response.ok) {
+                const errorMsg = jsonResponse.error || jsonResponse.message || `HTTP ${response.status}: ${response.statusText}`;
+                throw new Error(errorMsg);
+            }
+            
+            return jsonResponse;
+            
+        } catch (error) {
+            // Re-throw with enhanced error message
+          //  console.error(`Backend API Error (${endpoint}):`, error.message);
+            
+            // Provide helpful debugging info for connection errors
+          //  if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
+           //     const backendUrl = this.backendUrl || BACKEND_URL || window.location.origin;
+          //      throw new Error(`Cannot connect to backend at ${backendUrl}. Is the server running?`);
+          //  }
+            
+            throw error;
+        }
+    }
+
+    init() {
+        console.log('Initializing SystemSimulator...');
+        this.setupListeners();
+        this.setupNavigation();
+        this.resizeCanvas();
+        window.addEventListener('resize', () => this.resizeCanvas());
+        
+        // Initial visual state
+        this.drawStaticNoise();
+    }
+
+    setupNavigation() {
+        // Setup navigation links
+        const navLinks = document.querySelectorAll('.nav-link');
+        navLinks.forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const targetSection = link.dataset.section;
+                
+                // Update active nav link
+                navLinks.forEach(l => l.classList.remove('active'));
+                link.classList.add('active');
+                
+                // Show target section
+                document.querySelectorAll('.section').forEach(section => {
+                    section.classList.remove('active');
+                });
+                document.getElementById(targetSection).classList.add('active');
+                
+                // Special handling for architecture section
+                if (targetSection === 'architecture' && window.drawArchitectureDiagram) {
+                    window.drawArchitectureDiagram();
+                }
+            });
+        });
+    }
+
+    setupListeners() {
+        console.log('Setting up event listeners...');
+        
+        // Image Upload Handling
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('image-input');
+
+        if (!dropZone || !fileInput) {
+            console.error('Required DOM elements not found');
+            return;
+        }
+
+        // Click to browse - fixed to prevent double clicks
+        dropZone.addEventListener('click', (e) => {
+            e.preventDefault(); // Prevent default behavior
+            e.stopPropagation(); // Stop event bubbling
+            
+            // Check if already processing to prevent multiple calls
+            if (this.isProcessingImage) {
+                console.log('Already processing image, ignoring click');
+                return;
+            }
+            
+            console.log('Drop zone clicked');
+            fileInput.click();
+        });
+        
+        // Drag and drop
+        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();
+            e.stopPropagation();
+            
+            // Check if already processing to prevent multiple calls
+            if (this.isProcessingImage) {
+                console.log('Already processing image, ignoring drop');
+                return;
+            }
+            
+            console.log('File dropped');
+            dropZone.classList.remove('drag-over');
+            if(e.dataTransfer.files.length) {
+                this.handleImage(e.dataTransfer.files[0]);
+            }
+        });
+
+        // File input change - using 'change' event instead of 'input' to avoid conflicts
+        fileInput.addEventListener('change', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            
+            // Check if already processing to prevent multiple calls
+            if (this.isProcessingImage) {
+                console.log('Already processing image, ignoring file input change');
+                return;
+            }
+            
+            console.log('File input changed');
+            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) => {
+                console.log('Director mode toggle changed');
+                this.directorMode = e.target.checked;
+                this.log(`Director Mode: ${this.directorMode ? 'ENABLED' : 'DISABLED'}`, 'info');
+            });
+        }
+
+        const downloadBtn = document.getElementById('download-btn');
+        const resetBtn = document.getElementById('reset-movie-btn');
+        
+        if (downloadBtn) {
+            downloadBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('Download button clicked');
+                this.downloadMovie();
+            });
+        }
+        
+        if (resetBtn) {
+            resetBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('Reset button clicked');
+                this.resetMovie();
+            });
+        }
+
+        // Inputs
+        const quantumInfluence = document.getElementById('quantum-influence');
+        const entanglementDepth = document.getElementById('entanglement-depth');
+        const influenceVal = document.getElementById('influence-val');
+        const depthVal = document.getElementById('depth-val');
+
+        if (quantumInfluence && influenceVal) {
+            quantumInfluence.addEventListener('input', (e) => {
+                console.log('Quantum influence changed');
+                influenceVal.textContent = `${e.target.value}%`;
+                this.config.influence = parseInt(e.target.value);
+            });
+        }
+
+        if (entanglementDepth && depthVal) {
+            entanglementDepth.addEventListener('input', (e) => {
+                console.log('Entanglement depth changed');
+                depthVal.textContent = e.target.value;
+                this.config.depth = parseInt(e.target.value);
+            });
+        }
+
+        // Tabs
+        document.querySelectorAll('.viz-tab').forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('Tab clicked:', tab.dataset.view);
+                document.querySelectorAll('.viz-tab').forEach(t => t.classList.remove('active'));
+                document.querySelectorAll('.viz-view').forEach(v => v.classList.remove('active'));
+                
+                tab.classList.add('active');
+                const viewId = `view-${tab.dataset.view}`;
+                const viewElement = document.getElementById(viewId);
+                if (viewElement) viewElement.classList.add('active');
+                
+                // Initialize visualizations if needed
+                if (tab.dataset.view === 'circuit' && window.circuitViz) {
+                    window.circuitViz.resize();
+                } else if (tab.dataset.view === 'state' && window.stateViz) {
+                    window.stateViz.resize();
+                }
+            });
+        });
+
+        // Start Button
+        const startBtn = document.getElementById('start-btn');
+        if (startBtn) {
+            startBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                console.log('Start button clicked');
+                this.startGeneration();
+            });
+        }
+        
+        console.log('All event listeners set up');
+    }
+
+    handleImage(file) {
+        console.log('Handling image:', file.name);
+        if (!file || !file.type.startsWith('image/')) {
+            this.log('Invalid file type. Please upload an image.', 'error');
+            return;
+        }
+        
+        // Set processing flag to prevent multiple calls
+        this.isProcessingImage = true;
+        
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+            console.log('File reader loaded');
+            
+            // Validate data URL format
+            const imageDataURL = e.target.result;
+            if (!imageDataURL || !imageDataURL.startsWith('data:image')) {
+                this.log('Invalid image data format', 'error');
+                this.isProcessingImage = false;
+                return;
+            }
+            
+            this.sourceImage = new Image();
+            this.sourceImage.onload = async () => {
+                console.log('Source image loaded');
+                
+                // Show preview
+                const preview = document.getElementById('preview-img');
+                if (preview) {
+                    preview.src = this.sourceImage.src;
+                    preview.classList.remove('hidden');
+                }
+                
+                const dropContent = document.querySelector('.drop-content');
+                if (dropContent) dropContent.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(imageDataURL);
+                } catch (error) {
+                    this.log(`Failed CLIP analysis for ${file.name}: ${error.message}`, 'error');
+                    console.error('Full error:', error);
+                } finally {
+                    // Reset processing flag after all operations are complete
+                    this.isProcessingImage = false;
+                }
+            };
+            
+            this.sourceImage.onerror = () => {
+                this.log(`Failed to load image: ${file.name}`, 'error');
+                this.isProcessingImage = false;
+            };
+            
+            this.sourceImage.src = imageDataURL;
+        };
+        
+        reader.onerror = () => {
+            this.log(`Failed to read file: ${file.name}`, 'error');
+            this.isProcessingImage = false;
+        };
+        
+        reader.readAsDataURL(file);
+    }
+    
+    async analyzeImageContext(imageDataURL) {
+        console.log('Analyzing image context');
+        this.log('CLIP-Encoder: Sending image for feature extraction...', 'info');
+        
+        try {
+            // Validate input
+            if (!imageDataURL || !imageDataURL.startsWith('data:image')) {
+                throw new Error('Invalid image data URL format');
+            }
+            
+            // Try different possible endpoint paths
+            let response;
+            const endpoints = [
+                'embed_image'
+            ];
+
+            
+            
+            let lastError;
+            let successfulEndpoint = null;
+            
+            //for (const endpointz of endpoints) {
+            const endpoint = "embed_image";
+               // try {
+            console.log(`Trying endpoint: ${endpoint}`);
+            response = await this.callBackendApi(endpoint, { image: imageDataURL });
+            successfulEndpoint = endpoint;
+            this.log(`Successfully connected to endpoint: ${endpoint}`, 'success');
+                // Exit loop if successful
+               // }// catch (error) {
+                 //   console.log(`Failed with endpoint ${endpoint}: ${error.message}`);
+                 //   lastError = error;
+                    // Continue to next endpoint
+               // }
+            //}
+            
+            if (!response || !successfulEndpoint) {
+                // Provide helpful error message
+                const errorMsg = lastError ? lastError.message : 'Could not connect to any CLIP endpoint';
+                this.log(`CLIP-Encoder: All endpoints failed. ${errorMsg}`, 'error');
+                
+                // Give user troubleshooting tips
+                console.error(`
+    🔍 Troubleshooting CLIP Endpoint Connection:
+    1. Check backend is running: ${this.backendUrl || 'http://localhost:5000'}
+    2. Verify Flask blueprint is registered: app.register_blueprint(api_bp, url_prefix='/api')
+    3. Check Flask console for errors
+    4. Verify /api/embed_image route exists in api.py
+    5. Test manually: curl -X POST ${this.backendUrl}/api/embed_image -H "Content-Type: application/json" -d '{"image":"data:image/png;base64,..."}'
+                `);
+                
+                throw new Error(`All CLIP endpoints failed. Last error: ${errorMsg}`);
+            }
+            
+            // Validate response
+            if (!response.embeddings || !Array.isArray(response.embeddings)) {
+                throw new Error('Invalid response: missing or malformed embeddings array');
+            }
+            
+            const embeddings = response.embeddings;
+            
+            if (embeddings.length === 0) {
+                throw new Error('Received empty embeddings array');
+            }
+            
+            // Log success with sample of embeddings
+            const embeddingPreview = embeddings.slice(0, 3)
+                .map(val => val.toFixed(4))
+                .join(', ');
+            
+            this.log(`CLIP-Encoder: Extracted feature vector [${embeddingPreview}, ...] (${embeddings.length} dimensions)`, 'success');
+            
+            // Store embeddings for later use
+            this.currentEmbeddings = embeddings;
+            
+            return embeddings;
+            
+        } catch (error) {
+            this.log(`CLIP-Encoder: Failed to get embeddings. ${error.message}`, 'error');
+            console.error('Full error details:', error);
+            throw error;
+        }
+    }
+    
+    
+
+    updateDirectorUI() {
+        console.log('Updating director UI');
+        const totalFramesElement = document.getElementById('total-frames');
+        const downloadBtn = document.getElementById('download-btn');
+        const resetBtn = document.getElementById('reset-movie-btn');
+        
+        if (totalFramesElement) totalFramesElement.textContent = `${this.movieFrames.length} FRAMES`;
+        if (downloadBtn) downloadBtn.disabled = this.movieFrames.length === 0;
+        if (resetBtn) resetBtn.disabled = this.movieFrames.length === 0;
+    }
+
+    resetMovie() {
+        console.log('Resetting movie');
+        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') {
+        if (!this.logs) return;
+        
+        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() {
+        console.log('Starting generation');
+        if (this.isGenerating) {
+            console.log('Generation already in progress');
+            return;
+        }
+        
+        // Disable UI elements during generation
+        this.isGenerating = true;
+        const startBtn = document.getElementById('start-btn');
+        if (startBtn) startBtn.disabled = true;
+        
+        const promptInput = document.getElementById('prompt-input');
+        const imageInput = document.getElementById('image-input');
+        const quantumInfluence = document.getElementById('quantum-influence');
+        const entanglementDepth = document.getElementById('entanglement-depth');
+        const samplingMethod = document.getElementById('sampling-method');
+        
+        if (promptInput) promptInput.disabled = true;
+        if (imageInput) imageInput.disabled = true;
+        if (quantumInfluence) quantumInfluence.disabled = true;
+        if (entanglementDepth) entanglementDepth.disabled = true;
+        if (samplingMethod) samplingMethod.disabled = true;
+
+        const generationStatsElement = document.getElementById('generation-stats');
+        if (generationStatsElement) generationStatsElement.style.display = 'block';
+        
+        try {
+            if (!this.sourceImage) {
+                this.log('Error: Source image required for I2V generation.');
+                alert("Please upload a source image first.");
+                return;
+            }
+
+            const prompt = promptInput ? promptInput.value.trim() || "Quantum interpolation" : "Quantum interpolation";
+
+            // --- Backend Health Check ---
+            this.log('Checking backend availability...', 'info');
+            try {
+                // Try different possible health endpoints
+                let health;
+                const healthEndpoints = [
+                    '/api/health',
+                    '/health',
+                    '/api/status',
+                    '/status',
+                    '/api/v1/health',
+                    '/v1/health',
+                    '/health',
+                    '/api/healthz'
+                ];
+                
+                let lastError;
+                for (const endpoint of healthEndpoints) {
+                    try {
+                        health = await this.callBackendApi(endpoint, {});
+                        this.log(`Successfully connected to health endpoint: ${endpoint}`, 'success');
+                        break; // Exit loop if successful
+                    } catch (error) {
+                        console.log(`Failed with health endpoint ${endpoint}: ${error.message}`);
+                        lastError = error;
+                        // Continue to next endpoint
+                    }
+                }
+                
+                if (!health) {
+                    throw lastError || new Error('Could not connect to any health endpoint');
+                }
+                
+                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;
+            }
+            // --- 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)
+            await this.phaseRealDiffusion(prompt);
+            
+            this.log('Generation Sequence Complete.', 'success');
+            if (generationStatsElement) generationStatsElement.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');
+            if (generationStatsElement) generationStatsElement.innerHTML = `ERROR: ${error.message}`;
+            console.error(error);
+        } finally {
+            // Re-enable UI elements
+            this.isGenerating = false;
+            if (startBtn) startBtn.disabled = false;
+            if (promptInput) promptInput.disabled = false;
+            if (imageInput) imageInput.disabled = false;
+            if (quantumInfluence) quantumInfluence.disabled = false;
+            if (entanglementDepth) entanglementDepth.disabled = false;
+            if (samplingMethod) samplingMethod.disabled = false;
+        }
+    }
+
+    prepareNextContext() {
+        if (!this.movieFrames.length) return;
+        
+        // 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 = () => {
+            console.log('Next context prepared');
+            this.sourceImage = nextImg;
+            // Update Preview UI
+            const preview = document.getElementById('preview-img');
+            if (preview) 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('Phase 1: Initialization');
+        await this.sleep(600);
+        this.log('Quantizing source image to 512-dim latent space...');
+        await this.sleep(800);
+    }
+
+    async phaseQuantumCircuit() {
+        this.log('Phase 2: Quantum Circuit');
+        this.log(`Constructing ${this.config.depth}-layer quantum circuit...`);
+        
+        // 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...');
+        await this.sleep(400);
+        this.log(`Entangling qubits 0-511 with depth ${this.config.depth}...`);
+        await this.sleep(800);
+    }
+
+    async phaseWebGPU() {
+        this.log('Phase 3: WebGPU Compute');
+        this.log('Compiling circuit to WGSL shaders...');
+        await this.sleep(600);
+        this.log('Injecting quantum noise into CLIP embeddings...');
+        
+        // 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);
+        const entropyElement = document.getElementById('entropy-value');
+        if (entropyElement) entropyElement.textContent = entropy;
+        this.log(`Latent perturbation complete. Entropy: ${entropy}`, 'success');
+    }
+
+    async phaseRealDiffusion(prompt) {
+        this.log('Phase 4: Bridge & Diffusion');
+        this.log('Starting Frame-by-Frame Quantum Diffusion...');
+        
+        // Switch tab to output to show the magic
+        const outputTab = document.querySelector('[data-view="output"]');
+        if (outputTab) outputTab.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}...`);
+            
+            const generationStatsElement = document.getElementById('generation-stats');
+            if (generationStatsElement) generationStatsElement.innerHTML = `GETTING GUIDANCE FOR FRAME ${frame + 1}/${totalFrames}<br>Quantum-Diffusing...`;
+            
+            // Call backend for LLM guidance on how to transform the current frame
+            let guidanceResponse;
+            const guidanceEndpoints = [
+                '/api/generate_frame_guidance',
+                '/generate_frame_guidance',
+                '/api/llm/guidance',
+                '/llm/guidance',
+                '/api/v1/generate_frame_guidance',
+                '/v1/generate_frame_guidance',
+                '/generate_frame_guidance',
+                '/api/generate_frame',
+                '/generate_frame',
+                '/api/llm',
+                '/llm'
+            ];
+            
+            let lastError;
+            for (const endpoint of guidanceEndpoints) {
+                try {
+                    guidanceResponse = await this.callBackendApi(endpoint, {
+                        image: currentFrameDataURL,
+                        prompt: prompt,
+                        influence: this.config.influence,
+                        depth: this.config.depth,
+                        frame_number: frame
+                    });
+                    this.log(`Successfully connected to guidance endpoint: ${endpoint}`, 'success');
+                    break; // Exit loop if successful
+                } catch (error) {
+                    console.log(`Failed with guidance endpoint ${endpoint}: ${error.message}`);
+                    lastError = error;
+                    // Continue to next endpoint
+                }
+            }
+            
+            if (!guidanceResponse) {
+                throw lastError || new Error('Could not connect to any guidance endpoint');
+            }
+            
+            const llmGuidance = guidanceResponse.guidance;
+            this.log(`LLM Guidance (Frame ${frame + 1}): ${llmGuidance.substring(0, 80)}...`);
+            
+            if (generationStatsElement) generationStatsElement.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.loadImageFromDataURL(newFrameDataURL);
+            currentFrameDataURL = newFrameDataURL; // Update dataURL as well
+            
+            // Director Mode: Record Frame
+            if (this.directorMode && this.outputCanvas) {
+                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) {
+        if (!this.outputCanvas || !this.outputCtx) {
+            console.error('Canvas not available for rendering');
+            return currentImage.src;
+        }
+
+        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 current image 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 idx = (ny * w + nx) * 4;
+                                rSum += data[idx];
+                                gSum += data[idx + 1];
+                                bSum += data[idx + 2];
+                                aSum += data[idx + 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() {
+        if (!this.outputCtx) return;
+        
+        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() {
+        if (!this.outputCanvas || !this.outputCtx) return;
+        
+        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);
+    }
+
+    async downloadMovie() {
+        if (!this.movieFrames.length) return;
+        
+        const btn = document.getElementById('download-btn');
+        const originalText = btn.innerHTML;
+        if (btn) {
+            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');
+                if (btn) {
+                    btn.innerHTML = originalText;
+                    btn.disabled = false;
+                }
+            };
+            
+            recorder.start();
+            
+            // Play frames into recorder
+            const frameDuration = 1000 / 30; // 30fps
+            
+            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.
+                // But for simplicity, we'll use a short timeout
+                await new Promise(r => setTimeout(r, frameDuration));
+            }
+            
+            recorder.stop();
+            
+        } catch (e) {
+            this.log(`Export failed: ${e.message}`, 'error');
+            if (btn) {
+                btn.innerHTML = originalText;
+                btn.disabled = false;
+            }
+        }
+    }
+}
+
+// Make the class available globally
+window.MainSystemSimulator = MainSystemSimulator;

app.py

@@ -0,0 +1,249 @@
+# main.py or app.py for Hugging Face Spaces
+from fastapi import FastAPI, Request, File, UploadFile, Form, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse, HTMLResponse
+from pydantic import BaseModel, Field
+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 logging
+
+# Configure logging
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
+
+# --- FastAPI App Initialization ---
+app = FastAPI(
+    title="Q-WAN-2 Backend API",
+    description="API for the Quantum-Enhanced WAN 2.1 system.",
+    version="2.1"
+)
+
+# --- CORS Middleware ---
+# Allow requests from your frontend's origin
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # For development. In production, specify your frontend's URL.
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# --- Configuration ---
+MLC_MODEL_ARTIFACTS_DIR = os.getenv("MLC_MODEL_ARTIFACTS_DIR", "./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)
+CLIP_MODEL_NAME = "openai/clip-vit-base-patch32"
+
+# --- Global Model Instances ---
+clip_processor = None
+clip_model = None
+mlc_chat_module = None
+mlc_lock = threading.Lock()
+
+# --- Pydantic Models for Request Bodies ---
+class ImageEmbedRequest(BaseModel):
+    image: str = Field(..., description="Base64 encoded image data URL (e.g., 'data:image/png;base64,...')")
+
+class CompletionRequest(BaseModel):
+    prompt: str
+    system_message: str = "You are a creative AI assistant for video generation."
+
+class FrameGuidanceRequest(BaseModel):
+    image: str = Field(..., description="Base64 encoded image data URL of the current frame.")
+    prompt: str = "Quantum interpolation"
+    influence: int = Field(5, ge=0, le=100, description="Quantum influence percentage (0-100).")
+    depth: int = Field(16, ge=1, description="Entanglement depth (number of layers).")
+    frame_number: int = 0
+
+# --- Model Loading Functions ---
+def load_mlc_llm_model():
+    global mlc_chat_module
+    if mlc_chat_module is None:
+        logging.info(f"Attempting to load LLM model: {MLC_MODEL_NAME} from {MLC_MODEL_PATH}...")
+        try:
+            if not os.path.exists(MLC_MODEL_PATH):
+                logging.error(f"Error: MLC LLM model path not found: {MLC_MODEL_PATH}")
+                return None
+            mlc_chat_module = ChatModule(model=MLC_MODEL_NAME, model_path=MLC_MODEL_PATH)
+            logging.info("MLC LLM model loaded successfully.")
+        except Exception as e:
+            logging.error(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:
+        logging.info(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)
+            if torch.cuda.is_available():
+                clip_model.to("cuda")
+                logging.info("CLIP model moved to CUDA.")
+            logging.info("CLIP model loaded successfully.")
+        except Exception as e:
+            logging.error(f"Error loading CLIP model: {e}")
+            clip_processor, clip_model = None, None
+    return clip_processor, clip_model
+
+# Load models on startup
+@app.on_event("startup")
+def startup_event():
+    load_mlc_llm_model()
+    load_clip_model()
+
+# --- API Endpoints ---
+
+@app.get("/api/health", tags=["General"])
+async def health_check():
+    """Checks the health and status of the backend services."""
+    return {
+        "status": "Quantum-Enhanced WAN 2.1 Backend is running!",
+        "llm_status": "loaded" if mlc_chat_module else "not loaded (check logs)",
+        "clip_status": "loaded" if clip_model else "not loaded (check logs)"
+    }
+
+@app.post("/api/embed_image", tags=["CLIP"])
+async def embed_image(request: ImageEmbedRequest):
+    """Generates a CLIP embedding vector for a given image."""
+    if clip_processor is None or clip_model is None:
+        raise HTTPException(status_code=500, detail="CLIP model not loaded. Check server logs for details.")
+
+    try:
+        # Split the data URL from the base64 part
+        header, encoded = request.image.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 and convert to list
+        image_embeddings = image_features / image_features.norm(p=2, dim=-1, keepdim=True)
+        
+        return {"embeddings": image_embeddings.squeeze().tolist()}
+    except Exception as e:
+        logging.error(f"Error embedding image: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=f"Failed to embed image: {str(e)}")
+
+@app.post("/api/completions", tags=["LLM"])
+async def chat_completions(request: CompletionRequest):
+    """Generates a text completion from the LLM."""
+    if mlc_chat_module is None:
+        raise HTTPException(status_code=500, detail="LLM model not loaded. Check server logs for details.")
+    
+    try:
+        full_prompt = f"{request.system_message}\nUser: {request.prompt}"
+        with mlc_lock:
+            mlc_chat_module.reset_chat()
+            response = mlc_chat_module.generate(full_prompt)
+        return {"completion": response}
+    except Exception as e:
+        logging.error(f"Error getting chat completion: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to get chat completion: {str(e)}")
+
+@app.post("/api/generate_frame_guidance", tags=["LLM", "CLIP"])
+async def generate_frame_guidance(request: FrameGuidanceRequest):
+    """Generates LLM guidance for transforming a video frame."""
+    if mlc_chat_module is None or clip_model is None:
+        raise HTTPException(status_code=500, detail="One or more AI models not loaded. Check server logs for details.")
+
+    try:
+        # 1. Get CLIP embeddings for the current frame
+        header, encoded = request.image.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
+        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: '{request.prompt}', "
+            f"and the quantum settings (Quantum Influence: {request.influence}%, Entanglement Depth: {request.depth} layers), "
+            f"describe *precisely* how the quantum diffusion effect should transform the current frame into frame {request.frame_number + 1}. "
+            f"Focus on quantifiable visual parameters like color shifts, blur, pixel displacement, zoom, and noise. "
+            f"Be concise and output only transformation instructions. "
+            f"Example: 'shift blue by +10, apply motion blur strength 8, zoom 1.05x, add subtle scanlines opacity 0.1'.\n"
+            f"Transformation Instructions for frame {request.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:
+            logging.error(f"LLM guidance generation failed: {llm_e}. Using fallback guidance.")
+            llm_guidance = f"apply subtle glitch effect, shift colors slightly based on quantum influence {request.influence}%."
+
+        return {
+            "guidance": llm_guidance,
+            "log": (f"Backend provided guidance for frame {request.frame_number + 1} based on prompt: '{request.prompt[:50]}...', "
+                   f"influence: {request.influence}, depth: {request.depth}. LLM guidance: '{llm_guidance[:50]}...'")
+        }
+    except Exception as e:
+        logging.error(f"Error generating frame guidance: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to generate frame guidance: {str(e)}")
+
+
+@app.post("/api/upload", tags=["File Handling"])
+async def upload_file(file: UploadFile = File(...)):
+    """Uploads an image file and returns it as a base64 data URL."""
+    try:
+        # Read the image file
+        img_bytes = await file.read()
+        # Convert to base64 for frontend use
+        img_base64 = base64.b64encode(img_bytes).decode('utf-8')
+        # Determine MIME type
+        content_type = file.content_type or 'image/jpeg'
+        img_data_url = f"data:{content_type};base64,{img_base64}"
+        
+        return {
+            "message": "File uploaded successfully",
+            "image_url": img_data_url
+        }
+    except Exception as e:
+        logging.error(f"Error uploading file: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to upload file: {str(e)}")
+
+
+# --- UI Routes (for serving frontend files) ---
+# NOTE: For production, it's better to serve static files with a proper web server.
+# This is fine for Hugging Face Spaces.
+
+@app.get("/", response_class=HTMLResponse, include_in_schema=False)
+async def read_index():
+    try:
+        with open('index.html', 'r') as f:
+            return HTMLResponse(content=f.read(), status_code=200)
+    except FileNotFoundError:
+        raise HTTPException(status_code=404, detail="index.html not found")
+
+# You can add other static file routes here if needed, e.g., for CSS/JS
+# @app.get("/styles.css", include_in_schema=False)
+# async def read_css():
+#     ...
+
+# To run this locally:
+# 1. pip install "fastapi[all]"
+# 2. uvicorn main:app --reload

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();

gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

index (1).html

@@ -0,0 +1,459 @@
+<!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">
+</head>
+<body><script>
+    // Configure backend URL based on environment
+    window.BACKEND_URL = window.location.origin; // Use same origin on HF Space
+    console.log('Backend configured for:', window.BACKEND_URL);
+</script>
+    <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/*">
+                            <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 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 visualization dashboard and interactivity.</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Load scripts with proper error handling -->
+    <script>
+        // Basic error handling for script loading
+        window.addEventListener('error', function(e) {
+            console.error('Script error:', e.error);
+        });
+
+        // Function to load scripts with proper error handling
+        function loadScript(src, id) {
+            return new Promise((resolve, reject) => {
+                const script = document.createElement('script');
+                script.src = src;
+                script.onload = () => {
+                    console.log(`${id} script loaded`);
+                    resolve();
+                };
+                script.onerror = (error) => {
+                    console.error(`Failed to load ${id}:`, error);
+                    reject(error);
+                };
+                document.head.appendChild(script);
+            });
+        }
+
+        // Initialize the application when DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM loaded, initializing application...');
+            
+            // Initialize architecture diagram function if it doesn't exist
+            if (!window.drawArchitectureDiagram) {
+                window.drawArchitectureDiagram = function() {
+                    console.log('Drawing architecture diagram');
+                    const canvas = document.getElementById('architecture-canvas');
+                    if (canvas) {
+                        const ctx = canvas.getContext('2d');
+                        canvas.width = canvas.parentElement.clientWidth;
+                        canvas.height = 400;
+                        
+                        // Draw a simple placeholder architecture diagram
+                        ctx.fillStyle = '#00f0ff';
+                        ctx.font = '16px Arial';
+                        ctx.textAlign = 'center';
+                        
+                        const layers = [
+                            'Browser Client Layer',
+                            'Quantum Compute Backend',
+                            'Web Backend Server',
+                            'Storage & Cache'
+                        ];
+                        
+                        const boxWidth = canvas.width * 0.7;
+                        const boxHeight = 60;
+                        const startX = (canvas.width - boxWidth) / 2;
+                        
+                        layers.forEach((layer, i) => {
+                            const y = 50 + i * 90;
+                            
+                            // Draw box
+                            ctx.strokeStyle = '#00f0ff';
+                            ctx.lineWidth = 2;
+                            ctx.strokeRect(startX, y, boxWidth, boxHeight);
+                            
+                            // Draw text
+                            ctx.fillStyle = '#00f0ff';
+                            ctx.fillText(layer, canvas.width / 2, y + boxHeight / 2 + 5);
+                            
+                            // Draw arrow
+                            if (i < layers.length - 1) {
+                                ctx.beginPath();
+                                ctx.moveTo(canvas.width / 2, y + boxHeight);
+                                ctx.lineTo(canvas.width / 2, y + boxHeight + 30);
+                                ctx.stroke();
+                                
+                                // Arrowhead
+                                ctx.beginPath();
+                                ctx.moveTo(canvas.width / 2 - 10, y + boxHeight + 20);
+                                ctx.lineTo(canvas.width / 2, y + boxHeight + 30);
+                                ctx.lineTo(canvas.width / 2 + 10, y + boxHeight + 20);
+                                ctx.stroke();
+                            }
+                        });
+                    }
+                };
+            }
+            
+            // Load all required scripts
+            Promise.all([
+                loadScript('quantum-viz.js', 'quantum-viz'),
+                loadScript('app.js', 'app')
+            ]).then(() => {
+                console.log('All scripts loaded successfully');
+                
+                // Initialize the MainSystemSimulator
+                if (window.MainSystemSimulator) {
+                    window.simulator = new window.MainSystemSimulator();
+                    console.log('MainSystemSimulator initialized successfully');
+                } else {
+                    console.error('MainSystemSimulator class not found');
+                }
+            })
+            .catch(error => {
+                console.error('Failed to load scripts:', error);
+            });
+        });
+    </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,11 @@
+fastapi
+uvicorn[standard]
+python-multipart
+transformers
+torch
+Pillow
+Flask
+flask-cors
+mlc-llm
+sentencepiece
+outlines

simulator.js

@@ -0,0 +1,726 @@
+// Advanced Simulation Controller
+
+var 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 ? this.outputCanvas.getContext('2d') : null;
+        
+        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 {
+            // Make sure we're using the correct endpoint format
+            const apiEndpoint = endpoint.startsWith('/') ? endpoint : `/${endpoint}`;
+            console.log(`Calling API: ${BACKEND_URL}${apiEndpoint}`);
+            
+            const response = await fetch(`${BACKEND_URL}${apiEndpoint}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data),
+            });
+            
+            // Check if the response is actually JSON
+            const contentType = response.headers.get('content-type');
+            if (!contentType || !contentType.includes('application/json')) {
+                // If it's not JSON, get the text to see what we received
+                const textResponse = await response.text();
+                console.error(`Expected JSON response, got ${contentType || 'unknown'}:`, textResponse);
+                throw new Error(`Expected JSON response, got ${contentType || 'unknown'}`);
+            }
+            
+            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');
+
+        if (!dropZone || !fileInput) {
+            console.error('Required DOM elements not found');
+            return;
+        }
+
+        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');
+            });
+        }
+
+        const downloadBtn = document.getElementById('download-btn');
+        const resetBtn = document.getElementById('reset-movie-btn');
+        
+        if (downloadBtn) downloadBtn.addEventListener('click', () => this.downloadMovie());
+        if (resetBtn) resetBtn.addEventListener('click', () => this.resetMovie());
+
+        // Inputs
+        const quantumInfluence = document.getElementById('quantum-influence');
+        const entanglementDepth = document.getElementById('entanglement-depth');
+        const influenceVal = document.getElementById('influence-val');
+        const depthVal = document.getElementById('depth-val');
+
+        if (quantumInfluence && influenceVal) {
+            quantumInfluence.addEventListener('input', (e) => {
+                influenceVal.textContent = `${e.target.value}%`;
+                this.config.influence = parseInt(e.target.value);
+            });
+        }
+
+        if (entanglementDepth && depthVal) {
+            entanglementDepth.addEventListener('input', (e) => {
+                depthVal.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');
+                const viewId = `view-${tab.dataset.view}`;
+                const viewElement = document.getElementById(viewId);
+                if (viewElement) viewElement.classList.add('active');
+            });
+        });
+
+        // Start Button
+        const startBtn = document.getElementById('start-btn');
+        if (startBtn) {
+            startBtn.addEventListener('click', () => this.startGeneration());
+        }
+    }
+
+    handleImage(file) {
+        if (!file || !file.type.startsWith('image/')) return;
+        
+        const reader = new FileReader();
+        reader.onload = async (e) => {
+            this.sourceImage = new Image();
+            this.sourceImage.onload = async () => {
+                // Show preview
+                const preview = document.getElementById('preview-img');
+                if (preview) {
+                    preview.src = this.sourceImage.src;
+                    preview.classList.remove('hidden');
+                }
+                
+                const dropContent = document.querySelector('.drop-content');
+                if (dropContent) dropContent.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);
+                } 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('api/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() {
+        const totalFramesElement = document.getElementById('total-frames');
+        const downloadBtn = document.getElementById('download-btn');
+        const resetBtn = document.getElementById('reset-movie-btn');
+        
+        if (totalFramesElement) totalFramesElement.textContent = `${this.movieFrames.length} FRAMES`;
+        if (downloadBtn) downloadBtn.disabled = this.movieFrames.length === 0;
+        if (resetBtn) resetBtn.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') {
+        if (!this.logs) return;
+        
+        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;
+        const startBtn = document.getElementById('start-btn');
+        if (startBtn) startBtn.disabled = true;
+        
+        const promptInput = document.getElementById('prompt-input');
+        const imageInput = document.getElementById('image-input');
+        const quantumInfluence = document.getElementById('quantum-influence');
+        const entanglementDepth = document.getElementById('entanglement-depth');
+        const samplingMethod = document.getElementById('sampling-method');
+        
+        if (promptInput) promptInput.disabled = true;
+        if (imageInput) imageInput.disabled = true;
+        if (quantumInfluence) quantumInfluence.disabled = true;
+        if (entanglementDepth) entanglementDepth.disabled = true;
+        if (samplingMethod) samplingMethod.disabled = true;
+
+        const generationStatsElement = document.getElementById('generation-stats');
+        if (generationStatsElement) generationStatsElement.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;
+            }
+
+            const prompt = promptInput ? promptInput.value.trim() || "Quantum interpolation" : "Quantum interpolation";
+
+            // --- Backend Health Check ---
+            this.log('Checking backend availability...', 'info');
+            try {
+                const health = await this.callBackendApi('api/health');
+                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;
+            }
+            // --- 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)
+            await this.phaseRealDiffusion(prompt);
+            
+            this.log('Generation Sequence Complete.', 'success');
+            if (generationStatsElement) generationStatsElement.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');
+            if (generationStatsElement) generationStatsElement.innerHTML = `ERROR: ${error.message}`;
+            console.error(error);
+        } finally {
+            // Re-enable UI elements
+            this.isGenerating = false;
+            if (startBtn) startBtn.disabled = false;
+            if (promptInput) promptInput.disabled = false;
+            if (imageInput) imageInput.disabled = false;
+            if (quantumInfluence) quantumInfluence.disabled = false;
+            if (entanglementDepth) entanglementDepth.disabled = false;
+            if (samplingMethod) samplingMethod.disabled = false;
+        }
+    }
+
+    prepareNextContext() {
+        if (!this.movieFrames.length) return;
+        
+        // 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');
+            if (preview) 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);
+        const entropyElement = document.getElementById('entropy-value');
+        if (entropyElement) entropyElement.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
+        const outputTab = document.querySelector('[data-view="output"]');
+        if (outputTab) outputTab.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');
+            
+            const generationStatsElement = document.getElementById('generation-stats');
+            if (generationStatsElement) generationStatsElement.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('api/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');
+
+            if (generationStatsElement) generationStatsElement.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.loadImageFromDataURL(newFrameDataURL);
+            currentFrameDataURL = newFrameDataURL; // Update dataURL as well
+            
+            // Director Mode: Record Frame
+            if (this.directorMode && this.outputCanvas) {
+                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) {
+        if (!this.outputCanvas || !this.outputCtx) {
+            console.error('Canvas not available for rendering');
+            return currentImage.src;
+        }
+
+        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 idx = (ny * w + nx) * 4;
+                                rSum += data[idx];
+                                gSum += data[idx + 1];
+                                bSum += data[idx + 2];
+                                aSum += data[idx + 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() {
+        if (!this.outputCtx) return;
+        
+        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() {
+        if (!this.outputCanvas || !this.outputCtx) return;
+        
+        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);
+    }
+
+    async downloadMovie() {
+        if (!this.movieFrames.length) return;
+        
+        const btn = document.getElementById('download-btn');
+        const originalText = btn.innerHTML;
+        if (btn) {
+            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');
+                if (btn) {
+                    btn.innerHTML = originalText;
+                    btn.disabled = false;
+                }
+            };
+            
+            recorder.start();
+            
+            // Play frames into recorder
+            const frameDuration = 1000 / 30; // 30fps
+            
+            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.
+                // But for simplicity, we'll use a short timeout
+                await new Promise(r => setTimeout(r, frameDuration));
+            }
+            
+            recorder.stop();
+            
+        } catch (e) {
+            this.log(`Export failed: ${e.message}`, 'error');
+            if (btn) {
+                btn.innerHTML = originalText;
+                btn.disabled = false;
+            }
+        }
+    }
+}
+
+// Initialize the simulator when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.simulator = new SystemSimulator();
+});

style.css

@@ -0,0 +1,28 @@
+body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+}
+
+h1 {
+	font-size: 16px;
+	margin-top: 0;
+}
+
+p {
+	color: rgb(107, 114, 128);
+	font-size: 15px;
+	margin-bottom: 10px;
+	margin-top: 5px;
+}
+
+.card {
+	max-width: 620px;
+	margin: 0 auto;
+	padding: 16px;
+	border: 1px solid lightgray;
+	border-radius: 16px;
+}
+
+.card p:last-child {
+	margin-bottom: 0;
+}

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;
+    }
+}