Update index.js

index.js

@@ -177,68 +177,82 @@ async function processVideo() {
             
             // Generate output
             let generatedText = '';
-            const outputs = await model.generate({
-                ...inputs,
-                max_new_tokens: 256,
+            try {
+                const outputs = await model.generate({
+                    ...inputs,
+                    max_new_tokens: 256,
+                    do_sample: false,
+                    streamer: new TextStreamer(processor.tokenizer, {
+                        skip_prompt: true,
+                        skip_special_tokens: false,
+                        callback_function: (text) => {
+                            generatedText += text;
+                            frameCard.querySelector('.frame-description').innerHTML = `<p>${generatedText}</p>`;
+                        },
+                    }),
+                });
+                
+                // Decode output
+                const decoded = processor.batch_decode(
+                    outputs.slice(null, [inputs.input_ids.dims.at(-1), null]),
+                    { skip_special_tokens: true },
+                );
+                
+                frameDescriptions.push({
+                    frame: i + 1,
+                    time: frames[i].time,
+                    description: decoded[0] || generatedText
+                });
+            } catch (frameError) {
+                console.error(`Error processing frame ${i + 1}:`, frameError);
+                frameDescriptions.push({
+                    frame: i + 1,
+                    time: frames[i].time,
+                    description: 'Failed to analyze this frame'
+                });
+                frameCard.querySelector('.frame-description').innerHTML = `<p style="color: #ef4444;">Failed to analyze this frame</p>`;
+            }
+        }
+        
+        // Generate overall summary
+        updateProgress(80, 'Generating video summary...');
+        const summaryCard = document.getElementById('summaryCard');
+        const summaryContent = document.getElementById('summaryContent');
+        
+        // Create a summary based on the frame descriptions
+        if (frameDescriptions.length > 0) {
+            const summaryMessages = [
+                {
+                    role: "user",
+                    content: `<image>Based on what you see in this video frame and knowing that the video contains the following sequence: ${frameDescriptions.map(f => `Frame ${f.frame}: ${f.description}`).join('; ')}. Provide a comprehensive summary of what the entire video is about.`,
+                },
+            ];
+            const summaryPrompt = processor.apply_chat_template(summaryMessages, {
+                add_generation_prompt: true,
+            });
+            
+            // Use the last frame's image for context
+            const summaryInputs = await processor(frames[frames.length - 1].image, summaryPrompt, {
+                add_special_tokens: false,
+            });
+            
+            let summaryText = '';
+            const summaryOutputs = await model.generate({
+                ...summaryInputs,
+                max_new_tokens: 512,
                 do_sample: false,
                 streamer: new TextStreamer(processor.tokenizer, {
                     skip_prompt: true,
                     skip_special_tokens: false,
                     callback_function: (text) => {
-                        generatedText += text;
-                        frameCard.querySelector('.frame-description').innerHTML = `<p>${generatedText}</p>`;
+                        summaryText += text;
+                        summaryContent.innerHTML = `<p>${summaryText}</p>`;
+                        summaryCard.classList.remove('hidden');
                     },
                 }),
             });
-            
-            // Decode output
-            const decoded = processor.batch_decode(
-                outputs.slice(null, [inputs.input_ids.dims.at(-1), null]),
-                { skip_special_tokens: true },
-            );
-            
-            frameDescriptions.push({
-                frame: i + 1,
-                time: frames[i].time,
-                description: decoded[0]
-            });
         }
         
-        // Generate overall summary
-        updateProgress(80, 'Generating video summary...');
-        const summaryCard = document.getElementById('summaryCard');
-        const summaryContent = document.getElementById('summaryContent');
-        
-        const summaryMessages = [
-            {
-                role: "user",
-                content: `Based on these video frame descriptions: ${frameDescriptions.map(f => f.description).join('. ')}. Provide a comprehensive summary of the entire video content.`,
-            },
-        ];
-        const summaryPrompt = processor.apply_chat_template(summaryMessages, {
-            add_generation_prompt: true,
-        });
-        
-        const summaryInputs = await processor(frames[0].image, summaryPrompt, {
-            add_special_tokens: false,
-        });
-        
-        let summaryText = '';
-        const summaryOutputs = await model.generate({
-            ...summaryInputs,
-            max_new_tokens: 512,
-            do_sample: false,
-            streamer: new TextStreamer(processor.tokenizer, {
-                skip_prompt: true,
-                skip_special_tokens: false,
-                callback_function: (text) => {
-                    summaryText += text;
-                    summaryContent.innerHTML = `<p>${summaryText}</p>`;
-                    summaryCard.classList.remove('hidden');
-                },
-            }),
-        });
-        
         updateProgress(100, 'Analysis complete!');
         
         // Show results