frontend gif debug

index.html

@@ -443,83 +443,100 @@
                     return;
                 }
                 
-                console.log('GIF library available, creating GIF instance');
-                const gif = new GIF({
-                    workers: 2,
-                    quality: 10,
-                    width: 512,
-                    height: 512,
-                    workerScript: './gif.worker.js'
-                });
-                
-                let loadedImages = 0;
-                const totalImages = imageDataArray.length;
-                
-                // Show loading message for GIF creation
-                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('GIF library available, loading first image to get dimensions');
                 
-                console.log('Processing', totalImages, 'images for GIF');
-                
-                imageDataArray.forEach((imageData, index) => {
-                    console.log('Loading image', index + 1, 'of', totalImages);
-                    const img = new Image();
+                // Load first image to get dimensions
+                const firstImg = new Image();
+                firstImg.onload = function() {
+                    const gifWidth = firstImg.naturalWidth;
+                    const gifHeight = firstImg.naturalHeight;
                     
-                    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) {
-                            clearTimeout(timeout);
-                            console.log('All images processed (some failed), starting GIF render');
-                            startGifRender();
-                        }
-                    };
+                    console.log('Using dimensions from first image:', gifWidth + 'x' + gifHeight);
                     
-                    img.onload = function() {
-                        console.log('Image', index + 1, 'loaded successfully, size:', img.width, 'x', img.height);
+                    const gif = new GIF({
+                        workers: 2,
+                        quality: 10,
+                        width: gifWidth,
+                        height: gifHeight,
+                        workerScript: './gif.worker.js'
+                    });
+                    
+                    let loadedImages = 0;
+                    const totalImages = imageDataArray.length;
+                    
+                    // Show loading message for GIF creation
+                    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();
                         
-                        try {
-                            // 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);
-                            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');
-                            
+                        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) {
                                 clearTimeout(timeout);
-                                console.log('All images loaded, starting GIF render');
+                                console.log('All images processed (some failed), starting GIF render');
                                 startGifRender();
                             }
-                        } catch (canvasError) {
-                            console.error('Error processing image', index + 1, ':', canvasError);
-                            loadedImages++;
-                            if (loadedImages === totalImages) {
-                                clearTimeout(timeout);
-                                startGifRender();
+                        };
+                        
+                        img.onload = function() {
+                            console.log('Image', index + 1, 'loaded successfully, size:', img.width, 'x', img.height);
+                            
+                            try {
+                                // Create a canvas with the actual dimensions
+                                const canvas = document.createElement('canvas');
+                                const ctx = canvas.getContext('2d');
+                                canvas.width = gifWidth;
+                                canvas.height = gifHeight;
+                                
+                                // Draw image scaled to match first image dimensions
+                                ctx.drawImage(img, 0, 0, gifWidth, gifHeight);
+                                console.log('Image', index + 1, 'drawn to canvas at', gifWidth + 'x' + gifHeight);
+                                
+                                // 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}`;
-                });
+                        };
+                        
+                        img.src = `data:image/png;base64,${imageData}`;
+                    });
+                };
+                
+                firstImg.onerror = function() {
+                    console.error('Failed to load first image to determine dimensions, using fallback');
+                    showMultipleImages(imageDataArray, container);
+                };
+                
+                firstImg.src = `data:image/png;base64,${imageDataArray[0]}`;
                 
                 function startGifRender() {
                     console.log('Starting GIF render process');