change from base64 to file upload

static/script.js

@@ -230,16 +230,23 @@ async function handleFileUpload(event) {
     event.target.value = '';
 }
 
-// Add image preview
+// Add image preview with upload status indicator
 function addImagePreview(src, index) {
     const previewItem = document.createElement('div');
     previewItem.className = 'image-preview-item';
+    previewItem.dataset.imageIndex = index;
     const imageId = `upload-img-${Date.now()}-${index}`;
     previewItem.innerHTML = `
         <img id="${imageId}" src="${src}" alt="Upload ${index + 1}"
              onclick="openImageModal('${imageId}', '${src}', 'Uploaded Image ${index + 1}', 'Input Image')"
              style="cursor: pointer;">
         <button class="remove-btn" onclick="removeImage(${index})">×</button>
+        <div class="image-upload-status" style="display: none;">
+            <div class="upload-progress-mini">
+                <div class="upload-progress-mini-bar"></div>
+            </div>
+            <span class="upload-status-text"></span>
+        </div>
     `;
     imagePreview.appendChild(previewItem);
 }
@@ -368,9 +375,34 @@ function getImageSize() {
     return size;
 }
 
-// Upload image to FAL storage
-async function uploadImageToFal(imageData, apiKey) {
+// Upload image to FAL storage with progress tracking
+async function uploadImageToFal(imageData, apiKey, imageIndex, totalImages, actualIndex) {
     try {
+        // Show individual image upload status if preview exists
+        const previewItem = document.querySelector(`.image-preview-item[data-image-index="${actualIndex}"]`);
+        if (previewItem) {
+            const statusDiv = previewItem.querySelector('.image-upload-status');
+            const statusText = previewItem.querySelector('.upload-status-text');
+            const progressBar = previewItem.querySelector('.upload-progress-mini-bar');
+            
+            if (statusDiv) {
+                statusDiv.style.display = 'block';
+                statusText.textContent = 'Uploading...';
+                progressBar.style.width = '30%';
+                previewItem.classList.add('uploading');
+            }
+        }
+        
+        // Update main progress bar
+        updateUploadProgress(imageIndex - 1, totalImages, `Uploading image ${imageIndex}/${totalImages}...`);
+        
+        // Show upload start message
+        addLog(`Uploading image ${imageIndex}/${totalImages} to FAL storage...`);
+        
+        // Calculate approximate size for logging
+        const sizeInMB = (imageData.length * 0.75 / 1024 / 1024).toFixed(2);
+        addLog(`Image ${imageIndex} size: ~${sizeInMB} MB`);
+        
         const response = await fetch('/api/upload-to-fal', {
             method: 'POST',
             headers: {
@@ -386,46 +418,146 @@ async function uploadImageToFal(imageData, apiKey) {
         }
         
         const data = await response.json();
+        addLog(`✓ Image ${imageIndex}/${totalImages} uploaded successfully`);
+        
+        // Update progress after successful upload
+        updateUploadProgress(imageIndex, totalImages, `Completed ${imageIndex}/${totalImages}`);
+        
+        // Update individual image status for success
+        if (previewItem) {
+            const statusText = previewItem.querySelector('.upload-status-text');
+            const progressBar = previewItem.querySelector('.upload-progress-mini-bar');
+            
+            if (progressBar && statusText) {
+                progressBar.style.width = '100%';
+                statusText.textContent = 'Uploaded ✓';
+                previewItem.classList.remove('uploading');
+                previewItem.classList.add('uploaded');
+                
+                // Fade out status after 3 seconds
+                setTimeout(() => {
+                    const statusDiv = previewItem.querySelector('.image-upload-status');
+                    if (statusDiv) {
+                        statusDiv.style.opacity = '0';
+                        setTimeout(() => {
+                            statusDiv.style.display = 'none';
+                            statusDiv.style.opacity = '1';
+                            previewItem.classList.remove('uploaded');
+                        }, 300);
+                    }
+                }, 3000);
+            }
+        }
+        
         return data.url;
     } catch (error) {
         console.error('Error uploading to FAL:', error);
+        addLog(`✗ Failed to upload image ${imageIndex}: ${error.message}`);
+        
+        // Update individual image status for error
+        if (previewItem) {
+            const statusText = previewItem.querySelector('.upload-status-text');
+            const progressBar = previewItem.querySelector('.upload-progress-mini-bar');
+            
+            if (progressBar && statusText) {
+                progressBar.style.width = '100%';
+                progressBar.style.backgroundColor = '#dc3545';
+                statusText.textContent = 'Upload failed ✗';
+                previewItem.classList.remove('uploading');
+                previewItem.classList.add('upload-failed');
+            }
+        }
+        
         throw error;
     }
 }
 
-// Prepare image URLs for API
+// Update upload progress bar
+function updateUploadProgress(completed, total, message) {
+    const progressFill = document.getElementById('uploadProgressFill');
+    const progressText = document.getElementById('uploadProgressText');
+    
+    if (progressFill && progressText) {
+        const percentage = Math.round((completed / total) * 100);
+        progressFill.style.width = `${percentage}%`;
+        progressText.textContent = `${message} (${percentage}%)`;
+        
+        // Add animation class
+        if (percentage === 100) {
+            progressFill.classList.add('complete');
+            setTimeout(() => {
+                const container = document.getElementById('uploadProgressContainer');
+                if (container) {
+                    container.style.opacity = '0';
+                    setTimeout(() => container.remove(), 500);
+                }
+            }, 1500);
+        }
+    }
+}
+
+// Prepare image URLs for API with detailed progress tracking
 async function getImageUrlsForAPI() {
     const urls = [];
     const apiKey = getAPIKey();
     
+    // Count total images to upload
+    const base64Images = uploadedImages.filter(img => img.startsWith('data:'));
+    const urlImages = uploadedImages.filter(img => !img.startsWith('data:'));
+    const textUrls = imageUrls.value.trim().split('\n').filter(url => url.trim());
+    
+    const totalUploads = base64Images.length;
+    const totalImages = uploadedImages.length + textUrls.length;
+    
+    if (totalUploads > 0) {
+        addLog(`Preparing to upload ${totalUploads} image(s) to FAL storage...`);
+        showStatus(`Uploading ${totalUploads} image(s) to FAL storage...`, 'info');
+    }
+    
     // Process uploaded base64 images - upload to FAL first
+    let uploadCount = 0;
     for (let i = 0; i < uploadedImages.length; i++) {
         const imageData = uploadedImages[i];
         
         // If it's a base64 data URL, upload to FAL
         if (imageData.startsWith('data:')) {
+            uploadCount++;
             try {
-                addLog(`Uploading image ${i + 1} to FAL storage...`);
-                const falUrl = await uploadImageToFal(imageData, apiKey);
+                const falUrl = await uploadImageToFal(imageData, apiKey, uploadCount, totalUploads, i);
                 urls.push(falUrl);
-                addLog(`Image ${i + 1} uploaded successfully`);
+                
+                // Update progress status
+                if (uploadCount < totalUploads) {
+                    const percentage = Math.round((uploadCount / totalUploads) * 100);
+                    showStatus(`Upload progress: ${uploadCount}/${totalUploads} (${percentage}%)`, 'info');
+                }
             } catch (error) {
-                addLog(`Failed to upload image ${i + 1}: ${error.message}`);
+                showStatus(`Upload failed for image ${uploadCount}: ${error.message}`, 'error');
                 throw error;
             }
         } else {
             // Already a URL, use as-is
             urls.push(imageData);
+            addLog(`Using existing URL for image ${i + 1}`);
         }
     }
     
     // Add text URLs directly
-    const textUrls = imageUrls.value.trim().split('\n').filter(url => url.trim());
+    if (textUrls.length > 0) {
+        addLog(`Processing ${textUrls.length} URL(s) from text input...`);
+    }
+    
     for (const url of textUrls) {
         urls.push(url);
+        addLog(`Added URL: ${url.substring(0, 50)}...`);
         await getImageDimensionsFromUrl(url);
     }
     
+    if (totalUploads > 0) {
+        showStatus(`All ${totalUploads} image(s) uploaded successfully!`, 'success');
+        addLog(`Upload complete: ${totalImages} total image(s) ready for generation`);
+    }
+    
     return urls.slice(0, 10);
 }
 
@@ -470,13 +602,34 @@ async function generateEdit() {
     generateBtn.querySelector('.spinner').style.display = 'block';
     
     // Clear current results
-    currentResults.innerHTML = '<div class="empty-state"><p>Generating...</p></div>';
+    currentResults.innerHTML = '<div class="empty-state"><p>Preparing generation...</p></div>';
     currentInfo.innerHTML = '';
     clearLogs();
     
-    showStatus('Preparing images and connecting to FAL API...', 'info');
+    // Create and show progress bar container
+    const progressContainer = document.createElement('div');
+    progressContainer.id = 'uploadProgressContainer';
+    progressContainer.className = 'upload-progress-container';
+    progressContainer.innerHTML = `
+        <div class="upload-progress-bar">
+            <div class="upload-progress-fill" id="uploadProgressFill"></div>
+        </div>
+        <div class="upload-progress-text" id="uploadProgressText">Initializing...</div>
+    `;
+    
+    // Insert progress container after status message
+    if (statusMessage.parentNode) {
+        statusMessage.parentNode.insertBefore(progressContainer, statusMessage.nextSibling);
+    }
+    
+    showStatus('Starting generation process...', 'info');
     progressLogs.classList.add('active');
     
+    // Show initial status
+    if (!isTextToImage && imageUrlsArray.length > 0) {
+        addLog(`Processing ${imageUrlsArray.length} input image(s)...`);
+    }
+    
     const requestData = {
         prompt: prompt,
         image_size: getImageSize(),

static/style.css

@@ -400,6 +400,21 @@ body {
     transition: all 0.3s ease;
 }
 
+.image-preview-item.uploading {
+    border-color: #007bff;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+}
+
+.image-preview-item.uploaded {
+    border-color: #28a745;
+    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.1);
+}
+
+.image-preview-item.upload-failed {
+    border-color: #dc3545;
+    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
+}
+
 .image-preview-item:hover {
     border-color: #764ba2;
     transform: scale(1.05);
@@ -441,6 +456,58 @@ body {
     transform: scale(1.1);
 }
 
+/* Individual image upload status */
+.image-upload-status {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 4px;
+    font-size: 10px;
+    text-align: center;
+    transition: opacity 0.3s ease;
+    z-index: 3;
+}
+
+.upload-progress-mini {
+    height: 3px;
+    background: #e9ecef;
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 2px;
+}
+
+.upload-progress-mini-bar {
+    height: 100%;
+    background: linear-gradient(90deg, #007bff, #0056b3);
+    border-radius: 2px;
+    transition: width 0.3s ease;
+    width: 0;
+}
+
+.uploaded .upload-progress-mini-bar {
+    background: linear-gradient(90deg, #28a745, #218838);
+}
+
+.upload-failed .upload-progress-mini-bar {
+    background: linear-gradient(90deg, #dc3545, #c82333);
+}
+
+.upload-status-text {
+    display: block;
+    color: #495057;
+    font-weight: 500;
+}
+
+.uploaded .upload-status-text {
+    color: #28a745;
+}
+
+.upload-failed .upload-status-text {
+    color: #dc3545;
+}
+
 /* Loading Preview */
 .loading-preview {
     display: flex;