debugging

static/script.js

@@ -76,33 +76,111 @@ window.addEventListener('DOMContentLoaded', () => {
 async function handleFileUpload(event) {
     const files = Array.from(event.target.files);
     
+    if (files.length === 0) {
+        return;
+    }
+    
+    // Show immediate feedback
+    showStatus(`Processing ${files.length} image(s)...`, 'info');
+    
+    let processedCount = 0;
+    let errorCount = 0;
+    
     for (const file of files) {
         if (uploadedImages.length >= 10) {
-            showStatus('Maximum 10 images allowed', 'error');
+            showStatus('Maximum 10 images allowed. Some images were not added.', 'error');
             break;
         }
         
         if (file.type.startsWith('image/')) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                const dataUrl = e.target.result;
-                uploadedImages.push(dataUrl);
+            try {
+                // Create a temporary loading placeholder
+                const tempIndex = uploadedImages.length;
+                const loadingId = `loading-${Date.now()}-${tempIndex}`;
+                
+                // Add loading placeholder immediately
+                const loadingPreview = document.createElement('div');
+                loadingPreview.className = 'image-preview-item loading-preview';
+                loadingPreview.id = loadingId;
+                loadingPreview.innerHTML = `
+                    <div class="loading-placeholder">
+                        <div class="spinner"></div>
+                        <p>${file.name}</p>
+                    </div>
+                `;
+                imagePreview.appendChild(loadingPreview);
                 
-                // Get image dimensions
-                const img = new Image();
-                img.onload = function() {
-                    imageDimensions.push({
-                        width: this.width,
-                        height: this.height
-                    });
-                    addImagePreview(dataUrl, uploadedImages.length - 1);
-                    updateCustomSizeFromLastImage();
+                const reader = new FileReader();
+                
+                reader.onerror = (error) => {
+                    console.error('Error reading file:', file.name, error);
+                    errorCount++;
+                    // Remove loading placeholder
+                    const placeholder = document.getElementById(loadingId);
+                    if (placeholder) placeholder.remove();
+                    showStatus(`Failed to read file: ${file.name}`, 'error');
                 };
-                img.src = dataUrl;
-            };
-            reader.readAsDataURL(file);
+                
+                reader.onload = (e) => {
+                    const dataUrl = e.target.result;
+                    
+                    // Remove loading placeholder
+                    const placeholder = document.getElementById(loadingId);
+                    if (placeholder) placeholder.remove();
+                    
+                    // Add to uploaded images
+                    uploadedImages.push(dataUrl);
+                    processedCount++;
+                    
+                    // Get image dimensions
+                    const img = new Image();
+                    img.onload = function() {
+                        imageDimensions.push({
+                            width: this.width,
+                            height: this.height
+                        });
+                        addImagePreview(dataUrl, uploadedImages.length - 1);
+                        updateCustomSizeFromLastImage();
+                        
+                        // Show success message when all files are processed
+                        if (processedCount + errorCount === files.length) {
+                            if (errorCount === 0) {
+                                showStatus(`Successfully added ${processedCount} image(s) (${uploadedImages.length}/10 slots used)`, 'success');
+                            } else {
+                                showStatus(`Added ${processedCount} image(s), ${errorCount} failed (${uploadedImages.length}/10 slots used)`, 'warning');
+                            }
+                        }
+                    };
+                    
+                    img.onerror = () => {
+                        console.error('Error loading image dimensions for:', file.name);
+                        // Still add the image even if we can't get dimensions
+                        imageDimensions.push({
+                            width: 1280,
+                            height: 1280
+                        });
+                        addImagePreview(dataUrl, uploadedImages.length - 1);
+                        updateCustomSizeFromLastImage();
+                    };
+                    
+                    img.src = dataUrl;
+                };
+                
+                reader.readAsDataURL(file);
+                
+            } catch (error) {
+                console.error('Error processing file:', file.name, error);
+                errorCount++;
+                showStatus(`Error processing ${file.name}`, 'error');
+            }
+        } else {
+            errorCount++;
+            showStatus(`${file.name} is not an image file`, 'error');
         }
     }
+    
+    // Clear the file input so the same files can be selected again if needed
+    event.target.value = '';
 }
 
 // Add image preview
@@ -453,8 +531,15 @@ function displayResults(response) {
             if (!imgSrc) {
                 console.error(`[DEBUG Frontend] No source for image ${index + 1}`);
             }
+            
+            // Create unique ID for this result image
+            const imageId = `result-img-${Date.now()}-${index}`;
+            
             imageItem.innerHTML = `
-                <img src="${imgSrc}" alt="Result ${index + 1}" onerror="console.error('Failed to load image:', this.src)">
+                <img id="${imageId}" src="${imgSrc}" alt="Result ${index + 1}" onerror="console.error('Failed to load image:', this.src)">
+                <button class="use-as-input-btn" onclick="useResultAsInput('${imageId}', '${imgSrc}')" title="Use this image as input for next generation">
+                    ↻ Use as Input
+                </button>
             `;
             resultImages.appendChild(imageItem);
         });
@@ -471,3 +556,97 @@ function displayResults(response) {
         addLog(`Seed used: ${response.seed}`);
     }
 }
+
+// Use generated result as input for next generation
+async function useResultAsInput(imageId, imageSrc) {
+    try {
+        console.log('[DEBUG Frontend] Using result as input:', imageSrc);
+        
+        // Check if we're in text-to-image mode and switch to edit mode
+        const currentModel = modelSelect.value;
+        if (currentModel === 'fal-ai/bytedance/seedream/v4/text-to-image') {
+            // Switch to edit mode
+            modelSelect.value = 'fal-ai/bytedance/seedream/v4/edit';
+            handleModelChange();
+            showStatus('Switched to Image Edit mode to use generated image as input', 'info');
+        }
+        
+        // Check if we've reached the maximum number of images
+        if (uploadedImages.length >= 10) {
+            showStatus('Maximum 10 images allowed. Please remove some images first.', 'error');
+            return;
+        }
+        
+        // Add the image URL to uploaded images
+        uploadedImages.push(imageSrc);
+        
+        // Get dimensions of the result image
+        const imgElement = document.getElementById(imageId);
+        if (imgElement) {
+            // Wait for image to load if needed
+            if (!imgElement.complete) {
+                await new Promise((resolve) => {
+                    imgElement.onload = resolve;
+                    imgElement.onerror = resolve;
+                });
+            }
+            
+            // Store dimensions
+            imageDimensions.push({
+                width: imgElement.naturalWidth || imgElement.width,
+                height: imgElement.naturalHeight || imgElement.height
+            });
+            
+            // Update custom size based on this image
+            updateCustomSizeFromLastImage();
+        } else {
+            // Fallback: try to get dimensions from a new Image object
+            const img = new Image();
+            img.onload = function() {
+                imageDimensions.push({
+                    width: this.width,
+                    height: this.height
+                });
+                updateCustomSizeFromLastImage();
+            };
+            img.onerror = function() {
+                // If we can't get dimensions, add default ones
+                imageDimensions.push({
+                    width: 1280,
+                    height: 1280
+                });
+                updateCustomSizeFromLastImage();
+            };
+            img.src = imageSrc;
+        }
+        
+        // Re-render image previews
+        renderImagePreviews();
+        
+        // Scroll to the image input section
+        imageInputCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        
+        // Show success message with count
+        const totalImages = uploadedImages.length;
+        showStatus(`Image added as input (${totalImages}/10 slots used)`, 'success');
+        addLog(`Added generated image as input for next round (${totalImages}/10 images)`);
+        
+        // Flash the image preview area to draw attention
+        imagePreview.style.animation = 'flash 0.5s';
+        setTimeout(() => {
+            imagePreview.style.animation = '';
+        }, 500);
+        
+    } catch (error) {
+        console.error('[DEBUG Frontend] Error using result as input:', error);
+        showStatus('Failed to add image as input', 'error');
+    }
+}
+
+// Add function to clear all input images
+function clearAllInputImages() {
+    uploadedImages = [];
+    imageDimensions = [];
+    renderImagePreviews();
+    showStatus('All input images cleared', 'info');
+}

static/style.css

@@ -42,12 +42,47 @@ header h1 {
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.card-header h2 {
+    color: #764ba2;
+    margin: 0;
+    font-size: 1.4rem;
+}
+
 .card h2 {
     color: #764ba2;
     margin-bottom: 20px;
     font-size: 1.4rem;
 }
 
+.clear-all-btn {
+    padding: 6px 12px;
+    background: #ff4444;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.clear-all-btn:hover {
+    background: #cc0000;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(204, 0, 0, 0.3);
+}
+
+.clear-all-btn:active {
+    transform: translateY(0);
+}
+
 .form-group {
     margin-bottom: 20px;
 }
@@ -149,6 +184,38 @@ header h1 {
     object-fit: cover;
 }
 
+/* Loading preview styles */
+.loading-preview {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f0f2f5;
+    border: 2px dashed #d1d9e6;
+}
+
+.loading-placeholder {
+    text-align: center;
+    padding: 20px;
+}
+
+.loading-placeholder .spinner {
+    width: 30px;
+    height: 30px;
+    margin: 0 auto 10px;
+    border: 3px solid rgba(118, 75, 162, 0.2);
+    border-top-color: #764ba2;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+.loading-placeholder p {
+    font-size: 0.8rem;
+    color: #666;
+    margin: 0;
+    word-break: break-all;
+    max-width: 120px;
+}
+
 .image-preview-item .remove-btn {
     position: absolute;
     top: 5px;
@@ -277,6 +344,7 @@ header h1 {
 }
 
 .result-image-item {
+    position: relative;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
@@ -293,6 +361,39 @@ header h1 {
     display: block;
 }
 
+.use-as-input-btn {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    opacity: 0;
+    transform: translateY(10px);
+    box-shadow: 0 2px 8px rgba(118, 75, 162, 0.3);
+}
+
+.result-image-item:hover .use-as-input-btn {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.use-as-input-btn:hover {
+    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.5);
+    transform: translateY(-2px);
+}
+
+.use-as-input-btn:active {
+    transform: translateY(0);
+}
+
 .result-info {
     margin-top: 20px;
     padding: 15px;
@@ -340,4 +441,18 @@ footer a {
 .loading {
     pointer-events: none;
     opacity: 0.6;
+}
+
+/* Flash animation for visual feedback */
+@keyframes flash {
+    0% {
+        background-color: rgba(118, 75, 162, 0.1);
+    }
+    50% {
+        background-color: rgba(118, 75, 162, 0.2);
+        border-color: #764ba2;
+    }
+    100% {
+        background-color: rgba(118, 75, 162, 0.1);
+    }
 }

templates/index.html

@@ -42,7 +42,12 @@
             </div>
 
             <div class="card" id="imageInputCard">
-                <h2>Input Images</h2>
+                <div class="card-header">
+                    <h2>Input Images</h2>
+                    <button id="clearAllBtn" class="clear-all-btn" onclick="clearAllInputImages()" title="Clear all input images">
+                        Clear All
+                    </button>
+                </div>
                 <div class="form-group">
                     <label>Upload Images (Max 10)</label>
                     <input type="file" id="fileInput" multiple accept="image/*" />