frontend gif debug

index.html

@@ -433,7 +433,17 @@
         }
         
         function createAnimatedGif(imageDataArray, container) {
+            console.log('Starting GIF creation with', imageDataArray.length, 'images');
+            
             try {
+                // Check if GIF library is available
+                if (typeof GIF === 'undefined') {
+                    console.error('GIF library not available');
+                    showMultipleImages(imageDataArray, container);
+                    return;
+                }
+                
+                console.log('GIF library available, creating GIF instance');
                 const gif = new GIF({
                     workers: 2,
                     quality: 10,
@@ -445,42 +455,125 @@
                 const totalImages = imageDataArray.length;
                 
                 // Show loading message for GIF creation
-                container.innerHTML = '<p>Creating animated GIF...</p>';
+                container.innerHTML = '<p>Creating animated GIF... (0/' + totalImages + ' images loaded)</p>';
+                
+                // Set a timeout to prevent infinite waiting
+                const timeout = setTimeout(() => {
+                    console.error('GIF creation timeout after 30 seconds');
+                    showMultipleImages(imageDataArray, container);
+                }, 30000);
+                
+                console.log('Processing', totalImages, 'images for GIF');
                 
                 imageDataArray.forEach((imageData, index) => {
+                    console.log('Loading image', index + 1, 'of', totalImages);
                     const img = new Image();
-                    img.onload = function() {
-                        // Create a canvas to resize the image
-                        const canvas = document.createElement('canvas');
-                        const ctx = canvas.getContext('2d');
-                        canvas.width = 512;
-                        canvas.height = 512;
-                        
-                        // Draw and resize image
-                        ctx.drawImage(img, 0, 0, 512, 512);
-                        
-                        // Add frame to GIF with 500ms delay
-                        gif.addFrame(canvas, {delay: 500});
-                        
+                    
+                    img.onerror = function() {
+                        console.error('Failed to load image', index + 1);
                         loadedImages++;
+                        container.innerHTML = '<p>Creating animated GIF... (' + loadedImages + '/' + totalImages + ' images loaded)</p>';
+                        
                         if (loadedImages === totalImages) {
-                            // All images loaded, render GIF
-                            gif.on('finished', function(blob) {
-                                const url = URL.createObjectURL(blob);
-                                const gifImg = document.createElement('img');
-                                gifImg.src = url;
-                                gifImg.className = 'generated-image';
-                                gifImg.alt = 'Generated animated GIF';
-                                
-                                container.innerHTML = '';
-                                container.appendChild(gifImg);
-                            });
+                            clearTimeout(timeout);
+                            console.log('All images processed (some failed), starting GIF render');
+                            startGifRender();
+                        }
+                    };
+                    
+                    img.onload = function() {
+                        console.log('Image', index + 1, 'loaded successfully, size:', img.width, 'x', img.height);
+                        
+                        try {
+                            // Create a canvas to resize the image
+                            const canvas = document.createElement('canvas');
+                            const ctx = canvas.getContext('2d');
+                            canvas.width = 512;
+                            canvas.height = 512;
                             
-                            gif.render();
+                            // Draw and resize image
+                            ctx.drawImage(img, 0, 0, 512, 512);
+                            console.log('Image', index + 1, 'drawn to canvas');
+                            
+                            // Add frame to GIF with 500ms delay
+                            gif.addFrame(canvas, {delay: 500});
+                            console.log('Frame', index + 1, 'added to GIF');
+                            
+                            loadedImages++;
+                            container.innerHTML = '<p>Creating animated GIF... (' + loadedImages + '/' + totalImages + ' images loaded)</p>';
+                            
+                            if (loadedImages === totalImages) {
+                                clearTimeout(timeout);
+                                console.log('All images loaded, starting GIF render');
+                                startGifRender();
+                            }
+                        } catch (canvasError) {
+                            console.error('Error processing image', index + 1, ':', canvasError);
+                            loadedImages++;
+                            if (loadedImages === totalImages) {
+                                clearTimeout(timeout);
+                                startGifRender();
+                            }
                         }
                     };
+                    
                     img.src = `data:image/png;base64,${imageData}`;
                 });
+                
+                function startGifRender() {
+                    console.log('Starting GIF render process');
+                    container.innerHTML = '<p>Rendering animated GIF...</p>';
+                    
+                    gif.on('start', function() {
+                        console.log('GIF rendering started');
+                    });
+                    
+                    gif.on('progress', function(p) {
+                        console.log('GIF rendering progress:', Math.round(p * 100) + '%');
+                        container.innerHTML = '<p>Rendering animated GIF... ' + Math.round(p * 100) + '%</p>';
+                    });
+                    
+                    gif.on('finished', function(blob) {
+                        console.log('GIF rendering finished, blob size:', blob.size, 'bytes');
+                        try {
+                            const url = URL.createObjectURL(blob);
+                            const gifImg = document.createElement('img');
+                            gifImg.src = url;
+                            gifImg.className = 'generated-image';
+                            gifImg.alt = 'Generated animated GIF';
+                            
+                            container.innerHTML = '';
+                            container.appendChild(gifImg);
+                            console.log('GIF successfully displayed');
+                        } catch (displayError) {
+                            console.error('Error displaying GIF:', displayError);
+                            showMultipleImages(imageDataArray, container);
+                        }
+                    });
+                    
+                    gif.on('abort', function() {
+                        console.error('GIF rendering was aborted');
+                        showMultipleImages(imageDataArray, container);
+                    });
+                    
+                    // Set another timeout for the rendering process
+                    const renderTimeout = setTimeout(() => {
+                        console.error('GIF rendering timeout after 60 seconds');
+                        gif.abort();
+                        showMultipleImages(imageDataArray, container);
+                    }, 60000);
+                    
+                    gif.on('finished', function() {
+                        clearTimeout(renderTimeout);
+                    });
+                    
+                    gif.on('abort', function() {
+                        clearTimeout(renderTimeout);
+                    });
+                    
+                    gif.render();
+                }
+                
             } catch (error) {
                 console.error('Error creating GIF:', error);
                 // Fallback to showing individual images