frontend gif debug

index.html

@@ -475,6 +475,61 @@
                     
                     console.log('Processing', totalImages, 'images for GIF');
                     
+                    // Define startGifRender function with access to gif variable
+                    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();
+                    }
+                    
                     imageDataArray.forEach((imageData, index) => {
                         console.log('Loading image', index + 1, 'of', totalImages);
                         const img = new Image();
@@ -538,59 +593,6 @@
                 
                 firstImg.src = `data:image/png;base64,${imageDataArray[0]}`;
                 
-                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);