Update index.html

index.html

@@ -709,19 +709,17 @@
         const app = {
             mode: 'text',
             isGenerating: false,
-            isConnected: false,
             frameCount: 0,
             maxFrames: 234,
             ws: null,
             frameBuffer: [],
             playbackInterval: null,
             frameExtractionInterval: null,
-            mediaRecorder: null,
-            recordedChunks: [],
-            sessionStarted: false,
             webcamStream: null,
-            videoMetadata: null,
             currentVideoFile: null,
+            videoMetadata: null,
+            mediaRecorder: null,
+            recordedChunks: [],
             promptUpdateTimer: null,
             pendingPromptUpdate: null,
 
@@ -735,6 +733,9 @@
                 document.getElementById('videoModeBtn').addEventListener('click', () => this.setMode('video'));
                 document.getElementById('webcamModeBtn').addEventListener('click', () => this.setMode('webcam'));
                 
+                // Video file upload
+                document.getElementById('videoFile').addEventListener('change', (e) => this.handleVideoUpload(e));
+                
                 document.getElementById('playbackFps').addEventListener('input', (e) => {
                     document.getElementById('playbackFpsValue').textContent = e.target.value + ' fps';
                     if (this.playbackInterval) {
@@ -761,16 +762,13 @@
                         this.queuePromptUpdate();
                     }
                 });
-
-                // Prompt changes - queue updates every 2 seconds
+                
+                // Prompt changes for live updates
                 document.getElementById('prompt').addEventListener('input', () => {
                     if (this.isGenerating && (this.mode === 'text' || this.mode === 'webcam')) {
                         this.queuePromptUpdate();
                     }
                 });
-
-                // Video file upload
-                document.getElementById('videoFile').addEventListener('change', (e) => this.handleVideoUpload(e));
             },
 
             setMode(mode) {
@@ -829,29 +827,216 @@
                 document.getElementById('maxFrames').textContent = estimatedFrames;
             },
 
-            queuePromptUpdate() {
-                // Store the pending update
-                this.pendingPromptUpdate = {
+            randomizeSeed() {
+                document.getElementById('seed').value = Math.floor(Math.random() * (1 << 24));
+            },
+
+            async toggleGeneration() {
+                if (this.isGenerating) {
+                    this.disconnect();
+                } else {
+                    // ✅ Record session EVERY time user clicks "Start Generation"
+                    try {
+                        const response = await fetch('/api/start-session', {method: 'POST'});
+                        if (!response.ok) {
+                            const data = await response.json();
+                            this.showError(data.detail || 'Failed to start session');
+                            return;
+                        }
+                        // Update session count in UI
+                        const sessionData = await response.json();
+                        const usedSpan = document.querySelector('.usage-info');
+                        if (usedSpan) {
+                            usedSpan.textContent = `Sessions: ${sessionData.sessions_used}/${sessionData.sessions_limit} today`;
+                        }
+                    } catch (error) {
+                        this.showError('Failed to start session');
+                        return;
+                    }
+                    
+                    const prompt = document.getElementById('prompt').value.trim();
+                    if (!prompt) {
+                        this.showError('Please enter a prompt');
+                        return;
+                    }
+                    
+                    if (this.mode === 'video' && !this.currentVideoFile) {
+                        this.showError('Please upload a video file');
+                        return;
+                    }
+                    
+                    if (this.mode === 'webcam' && !this.webcamStream) {
+                        this.showError('Webcam not started');
+                        return;
+                    }
+                    
+                    this.isGenerating = true;
+                    this.frameCount = 0;
+                    document.getElementById('frameCount').textContent = '0';
+                    this.frameBuffer = [];
+                    this.updateUI();
+                    
+                    // Start recording
+                    this.startRecording();
+                    
+                    // Connect to backend WebSocket proxy
+                    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+                    const wsUrl = `${protocol}//${window.location.host}/ws/video-gen`;
+                    
+                    try {
+                        this.ws = new WebSocket(wsUrl);
+                        this.ws.binaryType = 'arraybuffer';
+                        
+                        this.ws.onopen = () => {
+                            this.showInfo('Connected! Waiting for ready signal...');
+                        };
+                        
+                        this.ws.onmessage = async (event) => {
+                            if (typeof event.data === 'string') {
+                                try {
+                                    const data = JSON.parse(event.data);
+                                    if (data.status === 'ready') {
+                                        this.showInfo('Ready - sending parameters...');
+                                        await this.sendInitialParams();
+                                    } else if (data.error) {
+                                        this.showError(`Server error: ${JSON.stringify(data.error)}`);
+                                        this.disconnect();
+                                    }
+                                } catch (e) {
+                                    console.log('Text message:', event.data);
+                                }
+                            } else if (event.data instanceof ArrayBuffer) {
+                                await this.displayFrame(event.data);
+                            }
+                        };
+                        
+                        this.ws.onerror = (error) => {
+                            this.showError('WebSocket connection error');
+                            console.error('WebSocket error:', error);
+                        };
+                        
+                        this.ws.onclose = (event) => {
+                            this.showInfo(`Disconnected: ${event.reason || 'Connection closed'}`);
+                            this.isGenerating = false;
+                            this.stopFrameExtraction();
+                            this.stopRecording();
+                            this.updateUI();
+                        };
+                        
+                    } catch (error) {
+                        this.showError('Failed to connect: ' + error.message);
+                        this.isGenerating = false;
+                        this.updateUI();
+                    }
+                }
+            },
+
+            async sendInitialParams() {
+                const payload = {
                     prompt: document.getElementById('prompt').value,
-                    num_blocks: parseInt(document.getElementById('numBlocks').value)
+                    num_blocks: parseInt(document.getElementById('numBlocks').value),
+                    num_denoising_steps: 4,
+                    strength: parseFloat(document.getElementById('strength').value) || 0.45,
+                    width: 832,
+                    height: 480
                 };
+                
+                // Add start_frame for video and webcam modes
+                if (this.mode === 'video' && this.currentVideoFile) {
+                    try {
+                        const video = document.getElementById('hiddenVideo');
+                        video.currentTime = 0;
+                        await new Promise((resolve, reject) => {
+                            const timeout = setTimeout(() => reject(new Error('Video seek timeout')), 5000);
+                            video.onseeked = () => {
+                                clearTimeout(timeout);
+                                resolve();
+                            };
+                        });
+                        const startFrame = await this.extractVideoFrameBytes();
+                        if (!startFrame) throw new Error('Failed to extract start frame');
+                        payload.start_frame = startFrame;
+                    } catch (error) {
+                        this.showError(`Failed to extract start frame: ${error.message}`);
+                        this.disconnect();
+                        return;
+                    }
+                } else if (this.mode === 'webcam') {
+                    try {
+                        const startFrame = await this.extractWebcamBytes();
+                        if (!startFrame) throw new Error('Failed to extract webcam frame');
+                        payload.start_frame = startFrame;
+                    } catch (error) {
+                        this.showError(`Failed to extract webcam frame: ${error.message}`);
+                        this.disconnect();
+                        return;
+                    }
+                }
+                
+                const seedValue = document.getElementById('seed').value;
+                if (seedValue && seedValue.trim() !== '') {
+                    payload.seed = parseInt(seedValue);
+                } else {
+                    payload.seed = Math.floor(Math.random() * (1 << 24));
+                }
+                
+                try {
+                    const encoded = createMsgpackEncoder(payload);
+                    this.ws.send(encoded);
+                    this.showInfo('Generation started!');
+                    
+                    // Start frame extraction for v2v and webcam modes
+                    if (this.mode === 'video' || this.mode === 'webcam') {
+                        setTimeout(() => this.startFrameExtraction(), 500);
+                    }
+                } catch (error) {
+                    this.showError('Failed to send parameters: ' + error.message);
+                }
+            },
 
-                // Clear existing timer
-                if (this.promptUpdateTimer) {
-                    clearTimeout(this.promptUpdateTimer);
+            async displayFrame(imageData) {
+                const blob = new Blob([imageData], { type: 'image/jpeg' });
+                const bitmap = await createImageBitmap(blob);
+                
+                this.frameBuffer.push(bitmap);
+                this.frameCount++;
+                document.getElementById('frameCount').textContent = this.frameCount;
+                
+                if (this.frameCount === 1) {
+                    document.getElementById('placeholder').style.display = 'none';
+                    this.startPlaybackLoop();
                 }
+                
+                // Update progress
+                const progress = Math.min(100, (this.frameCount / this.maxFrames) * 100);
+                document.getElementById('progressFill').style.width = progress + '%';
+            },
 
-                // Set new timer to send update after 2 seconds
-                this.promptUpdateTimer = setTimeout(() => {
-                    if (this.pendingPromptUpdate && this.ws && this.ws.readyState === WebSocket.OPEN) {
-                        const encoded = createMsgpackEncoder(this.pendingPromptUpdate);
-                        this.ws.send(encoded);
-                        this.maxFrames = (12 * this.pendingPromptUpdate.num_blocks) - 6;
-                        document.getElementById('maxFrames').textContent = this.maxFrames;
-                        console.log('Sent prompt update:', this.pendingPromptUpdate);
-                        this.pendingPromptUpdate = null;
-                    }
-                }, 2000);
+            drawNextFrame() {
+                if (this.frameBuffer.length === 0) return;
+                
+                const canvas = document.getElementById('outputCanvas');
+                const bitmap = this.frameBuffer.shift();
+                
+                canvas.width = bitmap.width;
+                canvas.height = bitmap.height;
+                
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(bitmap, 0, 0);
+                
+                if (typeof bitmap.close === 'function') {
+                    bitmap.close();
+                }
+            },
+
+            startPlaybackLoop() {
+                if (this.playbackInterval) {
+                    clearInterval(this.playbackInterval);
+                }
+                
+                const fps = parseInt(document.getElementById('playbackFps').value);
+                const intervalMs = Math.max(10, Math.floor(1000 / fps));
+                this.playbackInterval = setInterval(() => this.drawNextFrame(), intervalMs);
             },
 
             async handleVideoUpload(event) {
@@ -893,10 +1078,7 @@
                 const video = document.getElementById('hiddenVideo');
                 const canvas = document.getElementById('extractionCanvas');
                 
-                if (!video || !canvas) {
-                    console.error('Video or canvas element not found');
-                    return null;
-                }
+                if (!video || !canvas) return null;
                 
                 const ctx = canvas.getContext('2d');
                 canvas.width = 832;
@@ -915,7 +1097,6 @@
                 return new Promise((resolve) => {
                     canvas.toBlob(async (blob) => {
                         if (!blob) {
-                            console.error('Failed to create blob from canvas');
                             resolve(null);
                             return;
                         }
@@ -924,7 +1105,7 @@
                             const uint8Array = new Uint8Array(arrayBuffer);
                             resolve(uint8Array);
                         } catch (error) {
-                            console.error('Failed to convert blob to Uint8Array:', error);
+                            console.error('Failed to convert blob:', error);
                             resolve(null);
                         }
                     }, 'image/jpeg', 0.9);
@@ -935,50 +1116,38 @@
                 const video = document.getElementById('webcamVideo');
                 const canvas = document.getElementById('extractionCanvas');
                 
-                if (!video || !canvas || !video.videoWidth) {
-                    console.error('Webcam not ready');
-                    return null;
-                }
+                if (!video || !canvas || !video.videoWidth) return null;
                 
                 const ctx = canvas.getContext('2d');
-                
-                // Set fixed dimensions
                 const targetWidth = 832;
                 const targetHeight = 480;
                 canvas.width = targetWidth;
                 canvas.height = targetHeight;
                 
-                // Calculate source rectangle to crop center 832x480 from webcam
                 const videoWidth = video.videoWidth;
                 const videoHeight = video.videoHeight;
-                
-                // Calculate crop dimensions maintaining aspect ratio
                 const sourceAspect = videoWidth / videoHeight;
                 const targetAspect = targetWidth / targetHeight;
                 
                 let sx, sy, sWidth, sHeight;
                 
                 if (sourceAspect > targetAspect) {
-                    // Video is wider, crop sides
                     sHeight = videoHeight;
                     sWidth = videoHeight * targetAspect;
                     sx = (videoWidth - sWidth) / 2;
                     sy = 0;
                 } else {
-                    // Video is taller, crop top/bottom
                     sWidth = videoWidth;
                     sHeight = videoWidth / targetAspect;
                     sx = 0;
                     sy = (videoHeight - sHeight) / 2;
                 }
                 
-                // Draw cropped and scaled image
                 ctx.drawImage(video, sx, sy, sWidth, sHeight, 0, 0, targetWidth, targetHeight);
 
                 return new Promise((resolve) => {
                     canvas.toBlob(async (blob) => {
                         if (!blob) {
-                            console.error('Failed to create blob from canvas');
                             resolve(null);
                             return;
                         }
@@ -987,7 +1156,7 @@
                             const uint8Array = new Uint8Array(arrayBuffer);
                             resolve(uint8Array);
                         } catch (error) {
-                            console.error('Failed to convert blob to Uint8Array:', error);
+                            console.error('Failed to convert blob:', error);
                             resolve(null);
                         }
                     }, 'image/jpeg', 0.9);
@@ -1026,28 +1195,18 @@
                     }
                     
                     const strengthValue = parseFloat(document.getElementById('strength').value);
-                    if (isNaN(strengthValue)) {
-                        console.error('Invalid strength value');
-                        return;
-                    }
-                    
                     const message = {
                         image: frameBytes,
                         strength: strengthValue,
                         timestamp: Date.now()
                     };
                     
-                    // For webcam mode, include prompt and num_blocks continually
+                    // For webcam mode, include prompt and num_blocks
                     if (this.mode === 'webcam') {
                         message.prompt = document.getElementById('prompt').value;
                         message.num_blocks = parseInt(document.getElementById('numBlocks').value);
                     }
                     
-                    if (!(message.image instanceof Uint8Array)) {
-                        console.error('Frame bytes is not a Uint8Array');
-                        return;
-                    }
-                    
                     const encoded = createMsgpackEncoder(message);
                     this.ws.send(encoded);
                 }, intervalMs);
@@ -1064,189 +1223,25 @@
                 video.currentTime = 0;
             },
 
-            randomizeSeed() {
-                document.getElementById('seed').value = Math.floor(Math.random() * (1 << 24));
-            },
-
-            async toggleGeneration() {
-                if (this.isGenerating) {
-                    this.disconnect();
-                } else {
-                    // Record session start
-                    if (!this.sessionStarted) {
-                        try {
-                            const response = await fetch('/api/start-session', {method: 'POST'});
-                            if (!response.ok) {
-                                const data = await response.json();
-                                this.showError(data.detail || 'Failed to start session');
-                                return;
-                            }
-                            this.sessionStarted = true;
-                        } catch (error) {
-                            this.showError('Failed to start session');
-                            return;
-                        }
-                    }
-                    
-                    const prompt = document.getElementById('prompt').value.trim();
-                    if (!prompt) {
-                        this.showError('Please enter a prompt');
-                        return;
-                    }
-                    
-                    this.isGenerating = true;
-                    this.updateUI();
-                    
-                    // Connect to backend WebSocket proxy (keeps API key secure)
-                    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-                    const wsUrl = `${protocol}//${window.location.host}/ws/video-gen`;
-                    
-                    try {
-                        this.ws = new WebSocket(wsUrl);
-                        this.ws.binaryType = 'arraybuffer';
-                        
-                        this.ws.onopen = () => {
-                            this.showInfo('Connected! Waiting for ready signal...');
-                        };
-                        
-                        this.ws.onmessage = async (event) => {
-                            if (typeof event.data === 'string') {
-                                try {
-                                    const data = JSON.parse(event.data);
-                                    if (data.status === 'ready') {
-                                        this.showInfo('Ready - sending parameters...');
-                                        await this.sendInitialParams();
-                                    } else if (data.error) {
-                                        this.showError(`Server error: ${JSON.stringify(data.error)}`);
-                                        this.disconnect();
-                                    }
-                                } catch (e) {
-                                    console.log('Text message:', event.data);
-                                }
-                            } else if (event.data instanceof ArrayBuffer) {
-                                await this.displayFrame(event.data);
-                            }
-                        };
-                        
-                        this.ws.onerror = (error) => {
-                            this.showError('WebSocket connection error');
-                            console.error('WebSocket error:', error);
-                        };
-                        
-                        this.ws.onclose = (event) => {
-                            this.showInfo(`Disconnected: ${event.reason || 'Connection closed'}`);
-                            this.isGenerating = false;
-                            this.updateUI();
-                        };
-                        
-                    } catch (error) {
-                        this.showError('Failed to connect: ' + error.message);
-                        this.isGenerating = false;
-                        this.updateUI();
-                    }
-                }
-            },
-
-            async sendInitialParams() {
-                const payload = {
+            queuePromptUpdate() {
+                this.pendingPromptUpdate = {
                     prompt: document.getElementById('prompt').value,
-                    num_blocks: parseInt(document.getElementById('numBlocks').value),
-                    num_denoising_steps: 4,
-                    strength: parseFloat(document.getElementById('strength').value) || 0.45,
-                    width: 832,
-                    height: 480
+                    num_blocks: parseInt(document.getElementById('numBlocks').value)
                 };
 
-                // Handle start frame for video and webcam modes
-                if (this.mode === 'video' && this.currentVideoFile) {
-                    try {
-                        const video = document.getElementById('hiddenVideo');
-                        if (!video) {
-                            throw new Error('Video element not found');
-                        }
-                        
-                        video.currentTime = 0;
-                        
-                        await new Promise((resolve, reject) => {
-                            const timeout = setTimeout(() => {
-                                reject(new Error('Video seek timeout'));
-                            }, 5000);
-                            
-                            video.onseeked = () => {
-                                clearTimeout(timeout);
-                                resolve();
-                            };
-                        });
-                        
-                        const startFrame = await this.extractVideoFrameBytes();
-                        if (!startFrame || !(startFrame instanceof Uint8Array)) {
-                            throw new Error('Failed to extract valid start frame');
-                        }
-                        
-                        payload.start_frame = new Uint8Array(startFrame);
-                        console.log('Start frame extracted:', payload.start_frame.length, 'bytes');
-                    } catch (error) {
-                        this.showError(`Failed to extract start frame: ${error.message}`);
-                        return false;
-                    }
-                } else if (this.mode === 'webcam') {
-                    try {
-                        const startFrame = await this.extractWebcamBytes();
-                        if (!startFrame || !(startFrame instanceof Uint8Array)) {
-                            throw new Error('Failed to extract valid start frame from webcam');
-                        }
-                        payload.start_frame = new Uint8Array(startFrame);
-                        console.log('Start frame extracted from webcam:', payload.start_frame.length, 'bytes');
-                    } catch (error) {
-                        this.showError(`Failed to extract start frame from webcam: ${error.message}`);
-                        return false;
-                    }
-                }
-                
-                const seedValue = document.getElementById('seed').value;
-                if (seedValue && seedValue.trim() !== '') {
-                    payload.seed = parseInt(seedValue);
-                } else {
-                    payload.seed = Math.floor(Math.random() * (1 << 24));
+                if (this.promptUpdateTimer) {
+                    clearTimeout(this.promptUpdateTimer);
                 }
 
-                // Clear canvas
-                const canvas = document.getElementById('outputCanvas');
-                if (canvas) {
-                    const ctx = canvas.getContext('2d');
-                    ctx.clearRect(0, 0, canvas.width, canvas.height);
-                }
-                
-                this.frameBuffer = [];
-                this.frameCount = 0;
-                document.getElementById('frameCount').textContent = '0';
-                this.updateProgress();
-                
-                this.startRecording();
-                
-                try {
-                    console.log('Sending payload:', {
-                        ...payload,
-                        start_frame: payload.start_frame ? `[${payload.start_frame.length} bytes]` : undefined
-                    });
-                    
-                    const encoded = createMsgpackEncoder(payload);
-                    this.ws.send(encoded);
-                    this.showInfo('Generation started!');
-                    this.isConnected = true;
-                    document.getElementById('statusPill').className = 'status-pill status-connected';
-                    document.getElementById('statusPill').textContent = 'Connected';
-                    
-                    // Start frame extraction for video/webcam modes
-                    if (this.mode === 'video' || this.mode === 'webcam') {
-                        setTimeout(() => this.startFrameExtraction(), 500);
+                this.promptUpdateTimer = setTimeout(() => {
+                    if (this.pendingPromptUpdate && this.ws?.readyState === WebSocket.OPEN) {
+                        const encoded = createMsgpackEncoder(this.pendingPromptUpdate);
+                        this.ws.send(encoded);
+                        this.maxFrames = (12 * this.pendingPromptUpdate.num_blocks) - 6;
+                        document.getElementById('maxFrames').textContent = this.maxFrames;
+                        this.pendingPromptUpdate = null;
                     }
-                    
-                    return true;
-                } catch (error) {
-                    this.showError('Failed to send parameters: ' + error.message);
-                    return false;
-                }
+                }, 2000);
             },
 
             startRecording() {
@@ -1276,62 +1271,6 @@
                 }
             },
 
-            updateProgress() {
-                const progress = Math.min(100, (this.frameCount / this.maxFrames) * 100);
-                document.getElementById('progressFill').style.width = progress + '%';
-                
-                // Auto-disconnect when reaching max frames
-                if (this.frameCount >= this.maxFrames && this.isGenerating) {
-                    this.showInfo(`Reached maximum frames (${this.maxFrames}). Disconnecting...`);
-                    setTimeout(() => this.disconnect(), 1000);
-                }
-            },
-
-            async displayFrame(imageData) {
-                const blob = new Blob([imageData], { type: 'image/jpeg' });
-                const bitmap = await createImageBitmap(blob);
-                
-                this.frameBuffer.push(bitmap);
-                this.frameCount++;
-                document.getElementById('frameCount').textContent = this.frameCount;
-                
-                if (this.frameCount === 1) {
-                    document.getElementById('placeholder').style.display = 'none';
-                    this.startPlaybackLoop();
-                }
-                
-                // Update progress
-                const progress = Math.min(100, (this.frameCount / this.maxFrames) * 100);
-                document.getElementById('progressFill').style.width = progress + '%';
-            },
-
-            drawNextFrame() {
-                if (this.frameBuffer.length === 0) return;
-                
-                const canvas = document.getElementById('outputCanvas');
-                const bitmap = this.frameBuffer.shift();
-                
-                canvas.width = bitmap.width;
-                canvas.height = bitmap.height;
-                
-                const ctx = canvas.getContext('2d');
-                ctx.drawImage(bitmap, 0, 0);
-                
-                if (typeof bitmap.close === 'function') {
-                    bitmap.close();
-                }
-            },
-
-            startPlaybackLoop() {
-                if (this.playbackInterval) {
-                    clearInterval(this.playbackInterval);
-                }
-                
-                const fps = parseInt(document.getElementById('playbackFps').value);
-                const intervalMs = Math.max(10, Math.floor(1000 / fps));
-                this.playbackInterval = setInterval(() => this.drawNextFrame(), intervalMs);
-            },
-
             disconnect() {
                 if (this.ws) {
                     this.ws.close();
@@ -1341,13 +1280,32 @@
                     clearInterval(this.playbackInterval);
                     this.playbackInterval = null;
                 }
+                if (this.promptUpdateTimer) {
+                    clearTimeout(this.promptUpdateTimer);
+                    this.promptUpdateTimer = null;
+                }
+                this.pendingPromptUpdate = null;
+                this.stopFrameExtraction();
                 this.stopWebcam();
+                this.stopRecording();
                 this.isGenerating = false;
                 this.updateUI();
             },
 
             downloadVideo() {
-                this.showInfo('Download functionality coming soon');
+                if (this.recordedChunks.length === 0) {
+                    this.showError('No video data to download');
+                    return;
+                }
+                
+                const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `generated-video-${Date.now()}.webm`;
+                a.click();
+                URL.revokeObjectURL(url);
+                this.showInfo('Video downloaded successfully');
             },
 
             updateUI() {