ui change

static/script.js

@@ -1,6 +1,40 @@
-// Configuration
+// Configuration and state
 let uploadedImages = [];
-let imageDimensions = []; // Store dimensions of uploaded images
+let imageDimensions = [];
+let generationHistory = [];
+let currentGeneration = null;
+let activeTab = 'current';
+
+// Initialize local storage
+const HISTORY_KEY = 'seedream_generation_history';
+
+// Load history from localStorage on startup
+function loadHistory() {
+    try {
+        const saved = localStorage.getItem(HISTORY_KEY);
+        if (saved) {
+            generationHistory = JSON.parse(saved);
+            updateHistoryCount();
+        }
+    } catch (error) {
+        console.error('Error loading history:', error);
+        generationHistory = [];
+    }
+}
+
+// Save history to localStorage
+function saveHistory() {
+    try {
+        // Keep only last 100 generations to avoid storage limits
+        if (generationHistory.length > 100) {
+            generationHistory = generationHistory.slice(-100);
+        }
+        localStorage.setItem(HISTORY_KEY, JSON.stringify(generationHistory));
+        updateHistoryCount();
+    } catch (error) {
+        console.error('Error saving history:', error);
+    }
+}
 
 // DOM Elements
 const fileInput = document.getElementById('fileInput');
@@ -9,15 +43,16 @@ const imageUrls = document.getElementById('imageUrls');
 const generateBtn = document.getElementById('generateBtn');
 const statusMessage = document.getElementById('statusMessage');
 const progressLogs = document.getElementById('progressLogs');
-const results = document.getElementById('results');
-const resultImages = document.getElementById('resultImages');
-const resultInfo = document.getElementById('resultInfo');
+const currentResults = document.getElementById('currentResults');
+const currentInfo = document.getElementById('currentInfo');
+const historyGrid = document.getElementById('historyGrid');
 const imageSizeSelect = document.getElementById('imageSize');
 const customSizeElements = document.querySelectorAll('.custom-size');
 const modelSelect = document.getElementById('modelSelect');
 const promptTitle = document.getElementById('promptTitle');
 const promptLabel = document.getElementById('promptLabel');
 const imageInputCard = document.getElementById('imageInputCard');
+const settingsCard = document.getElementById('settingsCard');
 
 // Event Listeners
 fileInput.addEventListener('change', handleFileUpload);
@@ -25,6 +60,34 @@ generateBtn.addEventListener('click', generateEdit);
 imageSizeSelect.addEventListener('change', handleImageSizeChange);
 modelSelect.addEventListener('change', handleModelChange);
 
+// Tab switching
+function switchTab(tabName) {
+    activeTab = tabName;
+    
+    // Update tab buttons
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    event.target.classList.add('active');
+    
+    // Update tab content
+    document.querySelectorAll('.tab-content').forEach(content => {
+        content.classList.remove('active');
+    });
+    
+    if (tabName === 'current') {
+        document.getElementById('currentTab').classList.add('active');
+    } else {
+        document.getElementById('historyTab').classList.add('active');
+        displayHistory();
+    }
+}
+
+// Toggle settings panel
+function toggleSettings() {
+    settingsCard.classList.toggle('collapsed');
+}
+
 // Handle image size dropdown change
 function handleImageSizeChange() {
     if (imageSizeSelect.value === 'custom') {
@@ -39,17 +102,14 @@ function handleModelChange() {
     const isTextToImage = modelSelect.value === 'fal-ai/bytedance/seedream/v4/text-to-image';
     
     if (isTextToImage) {
-        // Text-to-image mode
         promptTitle.textContent = 'Generation Prompt';
         promptLabel.textContent = 'Generation Prompt';
         document.getElementById('prompt').placeholder = 'e.g., A beautiful landscape with mountains and a lake at sunset';
         imageInputCard.style.display = 'none';
-        // Clear uploaded images when switching to text-to-image
         uploadedImages = [];
         imageDimensions = [];
         renderImagePreviews();
     } else {
-        // Image edit mode
         promptTitle.textContent = 'Edit Instructions';
         promptLabel.textContent = 'Editing Prompt';
         document.getElementById('prompt').placeholder = 'e.g., Dress the model in the clothes and shoes.';
@@ -59,28 +119,28 @@ function handleModelChange() {
 
 // Initialize on page load
 window.addEventListener('DOMContentLoaded', () => {
-    // Load saved API key if available
+    // Load saved API key
     const savedKey = localStorage.getItem('fal_api_key');
     if (savedKey) {
         document.getElementById('apiKey').value = savedKey;
     }
     
-    // Show custom size fields by default since "custom" is the default selection
+    // Initialize UI state
     handleImageSizeChange();
-    
-    // Initialize model selection
     handleModelChange();
+    loadHistory();
+    displayHistory();
+    
+    // Collapse settings by default
+    settingsCard.classList.add('collapsed');
 });
 
-// Handle file upload
+// Handle file upload with immediate preview
 async function handleFileUpload(event) {
     const files = Array.from(event.target.files);
     
-    if (files.length === 0) {
-        return;
-    }
+    if (files.length === 0) return;
     
-    // Show immediate feedback
     showStatus(`Processing ${files.length} image(s)...`, 'info');
     
     let processedCount = 0;
@@ -94,11 +154,10 @@ async function handleFileUpload(event) {
         
         if (file.type.startsWith('image/')) {
             try {
-                // Create a temporary loading placeholder
                 const tempIndex = uploadedImages.length;
                 const loadingId = `loading-${Date.now()}-${tempIndex}`;
                 
-                // Add loading placeholder immediately
+                // Add loading placeholder
                 const loadingPreview = document.createElement('div');
                 loadingPreview.className = 'image-preview-item loading-preview';
                 loadingPreview.id = loadingId;
@@ -115,20 +174,14 @@ async function handleFileUpload(event) {
                 reader.onerror = (error) => {
                     console.error('Error reading file:', file.name, error);
                     errorCount++;
-                    // Remove loading placeholder
-                    const placeholder = document.getElementById(loadingId);
-                    if (placeholder) placeholder.remove();
+                    document.getElementById(loadingId)?.remove();
                     showStatus(`Failed to read file: ${file.name}`, 'error');
                 };
                 
                 reader.onload = (e) => {
                     const dataUrl = e.target.result;
+                    document.getElementById(loadingId)?.remove();
                     
-                    // Remove loading placeholder
-                    const placeholder = document.getElementById(loadingId);
-                    if (placeholder) placeholder.remove();
-                    
-                    // Add to uploaded images
                     uploadedImages.push(dataUrl);
                     processedCount++;
                     
@@ -142,7 +195,6 @@ async function handleFileUpload(event) {
                         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');
@@ -154,11 +206,7 @@ async function handleFileUpload(event) {
                     
                     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
-                        });
+                        imageDimensions.push({ width: 1280, height: 1280 });
                         addImagePreview(dataUrl, uploadedImages.length - 1);
                         updateCustomSizeFromLastImage();
                     };
@@ -179,7 +227,6 @@ async function handleFileUpload(event) {
         }
     }
     
-    // Clear the file input so the same files can be selected again if needed
     event.target.value = '';
 }
 
@@ -202,28 +249,25 @@ function removeImage(index) {
     updateCustomSizeFromLastImage();
 }
 
-// Update custom size fields based on last image
+// Update custom size based on last image
 function updateCustomSizeFromLastImage() {
     if (imageDimensions.length > 0) {
         const lastDims = imageDimensions[imageDimensions.length - 1];
         let width = lastDims.width;
         let height = lastDims.height;
         
-        // If both dimensions are less than 1000, scale up
         if (width < 1000 && height < 1000) {
             const scale = 1000 / Math.max(width, height);
             width = Math.round(width * scale);
             height = Math.round(height * scale);
         }
         
-        // Ensure dimensions are within allowed range (1024-4096)
         width = Math.max(1024, Math.min(4096, width));
         height = Math.max(1024, Math.min(4096, height));
         
         document.getElementById('customWidth').value = width;
         document.getElementById('customHeight').value = height;
         
-        // Auto-switch to custom size if an image is loaded
         if (imageSizeSelect.value !== 'custom') {
             imageSizeSelect.value = 'custom';
             handleImageSizeChange();
@@ -282,19 +326,15 @@ function getImageSize() {
 // Prepare image URLs for API
 async function getImageUrlsForAPI() {
     const urls = [];
-    
-    // Add uploaded images (as data URLs)
     urls.push(...uploadedImages);
     
-    // Add text URLs and get their dimensions
     const textUrls = imageUrls.value.trim().split('\n').filter(url => url.trim());
     for (const url of textUrls) {
         urls.push(url);
-        // Try to get dimensions for URL images
         await getImageDimensionsFromUrl(url);
     }
     
-    return urls.slice(0, 10); // Maximum 10 images
+    return urls.slice(0, 10);
 }
 
 // Get image dimensions from URL
@@ -310,7 +350,6 @@ async function getImageDimensionsFromUrl(url) {
             resolve();
         };
         img.onerror = function() {
-            // If can't load, just resolve without adding dimensions
             resolve();
         };
         img.src = url;
@@ -319,47 +358,40 @@ async function getImageDimensionsFromUrl(url) {
 
 // Generate edit
 async function generateEdit() {
-    // Validate inputs
     const prompt = document.getElementById('prompt').value.trim();
     if (!prompt) {
-        showStatus('Please enter an editing prompt', 'error');
+        showStatus('Please enter a prompt', 'error');
         return;
     }
     
     const selectedModel = modelSelect.value;
     const isTextToImage = selectedModel === 'fal-ai/bytedance/seedream/v4/text-to-image';
     
-    // Only require images for edit mode
     const imageUrlsArray = await getImageUrlsForAPI();
     if (!isTextToImage && imageUrlsArray.length === 0) {
         showStatus('Please upload images or provide image URLs for image editing', 'error');
         return;
     }
     
-    // Disable button and show loading
     generateBtn.disabled = true;
     generateBtn.querySelector('.btn-text').textContent = 'Generating...';
     generateBtn.querySelector('.spinner').style.display = 'block';
     
-    // Clear previous results
-    results.style.display = 'none';
-    resultImages.innerHTML = '';
-    resultInfo.innerHTML = '';
+    // Clear current results
+    currentResults.innerHTML = '<div class="empty-state"><p>Generating...</p></div>';
+    currentInfo.innerHTML = '';
     clearLogs();
     
-    // Show progress
     showStatus('Connecting to FAL API...', 'info');
     progressLogs.classList.add('active');
     
-    // Prepare request data
     const requestData = {
         prompt: prompt,
         image_size: getImageSize(),
         num_images: parseInt(document.getElementById('numImages').value),
-        enable_safety_checker: false  // Always set to false
+        enable_safety_checker: false
     };
     
-    // Add image URLs only for edit mode
     if (!isTextToImage) {
         requestData.image_urls = imageUrlsArray;
         requestData.max_images = parseInt(document.getElementById('maxImages').value);
@@ -370,12 +402,24 @@ async function generateEdit() {
         requestData.seed = parseInt(seed);
     }
     
+    // Store generation metadata
+    currentGeneration = {
+        id: Date.now(),
+        timestamp: new Date().toISOString(),
+        prompt: prompt,
+        model: selectedModel,
+        settings: {
+            image_size: requestData.image_size,
+            num_images: requestData.num_images,
+            seed: requestData.seed
+        }
+    };
+    
     try {
-        // Check if API key is set
         const apiKey = getAPIKey();
         if (!apiKey) {
-            showStatus('Please enter your FAL API key in the API Configuration section', 'error');
-            addLog('API key not found. Please enter your FAL API key above.');
+            showStatus('Please enter your FAL API key', 'error');
+            addLog('API key not found');
             document.getElementById('apiKey').focus();
             return;
         }
@@ -387,17 +431,18 @@ async function generateEdit() {
             addLog(`Number of input images: ${imageUrlsArray.length}`);
         }
         
-        // Log the request data being sent
-        console.log('[DEBUG Frontend] Request Data:', requestData);
-        console.log('[DEBUG Frontend] Selected Model:', selectedModel);
-        
-        // Make API call with selected model
         const response = await callFalAPI(apiKey, requestData, selectedModel);
         
-        console.log('[DEBUG Frontend] Final Response:', response);
+        // Store results in current generation
+        currentGeneration.results = response;
         
         // Display results
-        displayResults(response);
+        displayCurrentResults(response);
+        
+        // Add to history
+        generationHistory.push(currentGeneration);
+        saveHistory();
+        
         showStatus('Generation completed successfully!', 'success');
         
     } catch (error) {
@@ -405,19 +450,17 @@ async function generateEdit() {
         showStatus(`Error: ${error.message}`, 'error');
         addLog(`Error: ${error.message}`);
     } finally {
-        // Re-enable button
         generateBtn.disabled = false;
-        generateBtn.querySelector('.btn-text').textContent = 'Generate Edit';
+        generateBtn.querySelector('.btn-text').textContent = 'Generate';
         generateBtn.querySelector('.spinner').style.display = 'none';
     }
 }
 
-// Get API key from the input field
+// Get API key
 function getAPIKey() {
     const apiKeyInput = document.getElementById('apiKey');
     const apiKey = apiKeyInput.value.trim();
     
-    // Save to localStorage if provided
     if (apiKey) {
         localStorage.setItem('fal_api_key', apiKey);
     }
@@ -425,12 +468,8 @@ function getAPIKey() {
     return apiKey || localStorage.getItem('fal_api_key');
 }
 
-// Call FAL API (proxy through backend) - Non-blocking version
+// Call FAL API (non-blocking)
 async function callFalAPI(apiKey, requestData, model) {
-    console.log('[DEBUG Frontend] Starting API call with model:', model);
-    console.log('[DEBUG Frontend] Request body:', JSON.stringify(requestData).substring(0, 500) + '...');
-    
-    // Submit the request (non-blocking)
     const submitResponse = await fetch('/api/generate', {
         method: 'POST',
         headers: {
@@ -441,40 +480,32 @@ async function callFalAPI(apiKey, requestData, model) {
         body: JSON.stringify(requestData)
     });
     
-    console.log('[DEBUG Frontend] Submit response status:', submitResponse.status);
-    
     if (!submitResponse.ok) {
         const error = await submitResponse.text();
-        console.error('[DEBUG Frontend] Submit error:', error);
         throw new Error(error || 'API request failed');
     }
     
     const submitData = await submitResponse.json();
-    console.log('[DEBUG Frontend] Submit data:', submitData);
-    
     const { request_id } = submitData;
     addLog(`Request submitted with ID: ${request_id}`);
     
     // Poll for results
     let attempts = 0;
-    const maxAttempts = 120; // 2 minutes with 1-second intervals
-    const pollInterval = 1000; // 1 second
+    const maxAttempts = 120;
+    const pollInterval = 1000;
     let previousLogCount = 0;
     
     while (attempts < maxAttempts) {
         await new Promise(resolve => setTimeout(resolve, pollInterval));
         
         const statusUrl = `/api/status/${request_id}`;
-        console.log(`[DEBUG Frontend] Polling status (attempt ${attempts + 1}): ${statusUrl}`);
-        
         const statusResponse = await fetch(statusUrl);
+        
         if (!statusResponse.ok) {
-            console.error('[DEBUG Frontend] Status check failed:', statusResponse.status);
             throw new Error('Failed to check request status');
         }
         
         const statusData = await statusResponse.json();
-        console.log(`[DEBUG Frontend] Status data (attempt ${attempts + 1}):`, statusData);
         
         // Add any new logs
         if (statusData.logs && statusData.logs.length > previousLogCount) {
@@ -482,108 +513,120 @@ async function callFalAPI(apiKey, requestData, model) {
             newLogs.forEach(log => {
                 if (log && !log.includes('Request submitted')) {
                     addLog(log);
-                    console.log('[DEBUG Frontend] New log:', log);
                 }
             });
             previousLogCount = statusData.logs.length;
         }
         
         if (statusData.status === 'completed') {
-            console.log('[DEBUG Frontend] Request completed. Result:', statusData.result);
             return statusData.result;
         } else if (statusData.status === 'error') {
-            console.error('[DEBUG Frontend] Request error:', statusData.error);
             throw new Error(statusData.error || 'Generation failed');
         }
         
         attempts++;
         
-        // Update progress indicator
         if (attempts % 5 === 0) {
             addLog(`Processing... (${attempts}s elapsed)`);
         }
     }
     
-    console.error('[DEBUG Frontend] Request timed out after', attempts, 'attempts');
     throw new Error('Request timed out after 2 minutes');
 }
 
-// Display results
-function displayResults(response) {
-    console.log('[DEBUG Frontend] Displaying results:', response);
-    
-    if (!response) {
-        console.error('[DEBUG Frontend] No response to display');
-        addLog('Error: No response received from API');
+// Display current results
+function displayCurrentResults(response) {
+    if (!response || !response.images || response.images.length === 0) {
+        currentResults.innerHTML = '<div class="empty-state"><p>No images generated</p></div>';
         return;
     }
     
-    results.style.display = 'block';
-    
-    // Display images
-    if (response.images && response.images.length > 0) {
-        console.log('[DEBUG Frontend] Found', response.images.length, 'images');
-        response.images.forEach((image, index) => {
-            console.log(`[DEBUG Frontend] Image ${index + 1}:`, image);
-            const imageItem = document.createElement('div');
-            imageItem.className = 'result-image-item';
-            const imgSrc = image.url || image.file_data || '';
-            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 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);
-        });
+    currentResults.innerHTML = '';
+    
+    response.images.forEach((image, index) => {
+        const imgSrc = image.url || image.file_data || '';
+        const imageId = `current-img-${Date.now()}-${index}`;
         
-        addLog(`Generated ${response.images.length} image(s)`);
-    } else {
-        console.error('[DEBUG Frontend] No images in response');
-        addLog('Warning: No images found in response');
-    }
+        const item = document.createElement('div');
+        item.className = 'generation-item';
+        item.innerHTML = `
+            <img id="${imageId}" src="${imgSrc}" alt="Result ${index + 1}">
+            <button class="use-as-input-btn" onclick="useAsInput('${imageId}', '${imgSrc}')" title="Use as input">
+                ↻ Use as Input
+            </button>
+        `;
+        currentResults.appendChild(item);
+    });
     
-    // Display info
+    // Display generation info
     if (response.seed) {
-        resultInfo.innerHTML = `<strong>Seed:</strong> ${response.seed}`;
+        currentInfo.innerHTML = `<strong>Seed:</strong> ${response.seed}`;
         addLog(`Seed used: ${response.seed}`);
     }
+    
+    addLog(`Generated ${response.images.length} image(s)`);
+}
+
+// Display history
+function displayHistory() {
+    if (generationHistory.length === 0) {
+        historyGrid.innerHTML = `
+            <div class="empty-state">
+                <p>No generation history</p>
+                <small>Your generated images will be saved here</small>
+            </div>
+        `;
+        return;
+    }
+    
+    historyGrid.innerHTML = '';
+    
+    // Display history in reverse order (newest first)
+    [...generationHistory].reverse().forEach((generation) => {
+        if (generation.results && generation.results.images) {
+            generation.results.images.forEach((image, imgIndex) => {
+                const imgSrc = image.url || image.file_data || '';
+                const imageId = `history-img-${generation.id}-${imgIndex}`;
+                
+                const item = document.createElement('div');
+                item.className = 'generation-item';
+                item.innerHTML = `
+                    <img id="${imageId}" src="${imgSrc}" alt="Generation">
+                    <button class="use-as-input-btn" onclick="useAsInput('${imageId}', '${imgSrc}')" title="Use as input">
+                        ↻ Use as Input
+                    </button>
+                    <div class="generation-meta">
+                        <span class="timestamp">${new Date(generation.timestamp).toLocaleString()}</span>
+                        <span class="prompt-preview">${generation.prompt}</span>
+                    </div>
+                `;
+                historyGrid.appendChild(item);
+            });
+        }
+    });
 }
 
-// Use generated result as input for next generation
-async function useResultAsInput(imageId, imageSrc) {
+// Use image as input
+async function useAsInput(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
+        // Switch to edit mode if in text-to-image 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');
+            showStatus('Switched to Image Edit mode', '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
+        // Get dimensions
         const imgElement = document.getElementById(imageId);
         if (imgElement) {
-            // Wait for image to load if needed
             if (!imgElement.complete) {
                 await new Promise((resolve) => {
                     imgElement.onload = resolve;
@@ -591,16 +634,13 @@ async function useResultAsInput(imageId, imageSrc) {
                 });
             }
             
-            // 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({
@@ -610,43 +650,86 @@ async function useResultAsInput(imageId, imageSrc) {
                 updateCustomSizeFromLastImage();
             };
             img.onerror = function() {
-                // If we can't get dimensions, add default ones
-                imageDimensions.push({
-                    width: 1280,
-                    height: 1280
-                });
+                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)`);
+        addLog(`Added image as input (${totalImages}/10 images)`);
         
-        // Flash the image preview area to draw attention
+        // Flash animation
         imagePreview.style.animation = 'flash 0.5s';
         setTimeout(() => {
             imagePreview.style.animation = '';
         }, 500);
         
     } catch (error) {
-        console.error('[DEBUG Frontend] Error using result as input:', error);
+        console.error('Error using image as input:', error);
         showStatus('Failed to add image as input', 'error');
     }
 }
 
-// Add function to clear all input images
+// Clear all input images
 function clearAllInputImages() {
     uploadedImages = [];
     imageDimensions = [];
     renderImagePreviews();
     showStatus('All input images cleared', 'info');
 }
+
+// Clear history
+function clearHistory() {
+    if (confirm('Are you sure you want to clear all generation history? This cannot be undone.')) {
+        generationHistory = [];
+        localStorage.removeItem(HISTORY_KEY);
+        displayHistory();
+        updateHistoryCount();
+        showStatus('History cleared', 'info');
+    }
+}
+
+// Download all history
+function downloadAllHistory() {
+    if (generationHistory.length === 0) {
+        showStatus('No history to download', 'error');
+        return;
+    }
+    
+    // Create a zip file or download each image
+    generationHistory.forEach((generation, genIndex) => {
+        if (generation.results && generation.results.images) {
+            generation.results.images.forEach((image, imgIndex) => {
+                const imgSrc = image.url || image.file_data || '';
+                if (imgSrc) {
+                    const link = document.createElement('a');
+                    link.href = imgSrc;
+                    link.download = `seedream-${generation.id}-${imgIndex}.png`;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                }
+            });
+        }
+    });
+    
+    showStatus('Downloading all images...', 'info');
+}
+
+// Update history count
+function updateHistoryCount() {
+    const countElement = document.getElementById('historyCount');
+    if (countElement) {
+        let totalImages = 0;
+        generationHistory.forEach(gen => {
+            if (gen.results && gen.results.images) {
+                totalImages += gen.results.images.length;
+            }
+        });
+        countElement.textContent = totalImages;
+    }
+}

static/style.css

@@ -6,118 +6,304 @@
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    padding: 20px;
+    background: #1a1a2e;
     color: #333;
+    height: 100vh;
+    overflow: hidden;
 }
 
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
+/* Main App Container - Two Column Layout */
+.app-container {
+    display: flex;
+    height: 100vh;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-header {
-    text-align: center;
-    margin-bottom: 40px;
+/* Left Panel - Controls */
+.left-panel {
+    width: 45%;
+    min-width: 500px;
+    background: #f8f9fa;
+    overflow-y: auto;
+    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.left-panel header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
+    padding: 20px;
+    text-align: center;
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
-header h1 {
-    font-size: 2.5rem;
-    margin-bottom: 10px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+.left-panel header h1 {
+    font-size: 1.8rem;
+    margin-bottom: 5px;
 }
 
 .subtitle {
-    font-size: 1.1rem;
-    opacity: 0.95;
+    font-size: 0.9rem;
+    opacity: 0.9;
 }
 
-.card {
-    background: white;
-    border-radius: 12px;
-    padding: 25px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+.controls-section {
+    padding: 20px;
+    flex: 1;
 }
 
-.card-header {
+/* Right Panel - Results & History */
+.right-panel {
+    flex: 1;
+    background: #2d2d2d;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.history-header {
+    background: #1a1a2e;
+    padding: 15px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    border-bottom: 1px solid #444;
 }
 
-.card-header h2 {
-    color: #764ba2;
-    margin: 0;
-    font-size: 1.4rem;
+.history-header h2 {
+    font-size: 1.3rem;
+    color: white;
 }
 
-.card h2 {
-    color: #764ba2;
-    margin-bottom: 20px;
-    font-size: 1.4rem;
+.history-controls {
+    display: flex;
+    gap: 10px;
 }
 
-.clear-all-btn {
-    padding: 6px 12px;
-    background: #ff4444;
+.history-btn {
+    background: rgba(255, 255, 255, 0.1);
     color: white;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 6px 12px;
     border-radius: 6px;
-    font-size: 0.85rem;
-    font-weight: 600;
     cursor: pointer;
-    transition: all 0.3s ease;
+    font-size: 0.85rem;
+    transition: all 0.3s;
 }
 
-.clear-all-btn:hover {
-    background: #cc0000;
+.history-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
     transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(204, 0, 0, 0.3);
 }
 
-.clear-all-btn:active {
-    transform: translateY(0);
+/* Tabs */
+.history-tabs {
+    display: flex;
+    background: #242438;
+    border-bottom: 1px solid #444;
 }
 
-.form-group {
-    margin-bottom: 20px;
+.tab-btn {
+    flex: 1;
+    padding: 12px;
+    background: transparent;
+    color: #aaa;
+    border: none;
+    cursor: pointer;
+    font-size: 0.95rem;
+    transition: all 0.3s;
+    border-bottom: 2px solid transparent;
 }
 
-.form-group label {
+.tab-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.tab-btn.active {
+    color: white;
+    border-bottom-color: #764ba2;
+    background: rgba(118, 75, 162, 0.1);
+}
+
+.tab-content {
+    display: none;
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+.tab-content.active {
     display: block;
-    margin-bottom: 8px;
-    font-weight: 600;
-    color: #555;
 }
 
-.help-text {
+/* Results Grid */
+.results-grid, .history-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 15px;
+}
+
+.generation-item {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #1a1a2e;
+    cursor: pointer;
+    transition: all 0.3s;
+    border: 2px solid transparent;
+}
+
+.generation-item:hover {
+    transform: scale(1.03);
+    border-color: #764ba2;
+    box-shadow: 0 4px 12px rgba(118, 75, 162, 0.3);
+}
+
+.generation-item img {
+    width: 100%;
+    height: auto;
     display: block;
-    margin-top: 5px;
-    font-size: 0.85rem;
+}
+
+.generation-meta {
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.7);
+    font-size: 0.75rem;
+    color: #ccc;
+}
+
+.generation-meta .timestamp {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.generation-meta .prompt-preview {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0.8;
+}
+
+.use-as-input-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    padding: 6px 10px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.3s;
+}
+
+.generation-item:hover .use-as-input-btn {
+    opacity: 1;
+}
+
+.use-as-input-btn:hover {
+    transform: scale(1.1);
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 40px;
     color: #666;
 }
 
-.help-text a {
+.empty-state p {
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+    color: #999;
+}
+
+.empty-state small {
+    font-size: 0.85rem;
+    opacity: 0.7;
+}
+
+/* Generation Info */
+.generation-info {
+    background: #1a1a2e;
+    padding: 15px;
+    border-radius: 8px;
+    margin-top: 15px;
+    font-size: 0.85rem;
+    color: #ccc;
+}
+
+/* Cards */
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 15px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.card-header.clickable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.card-header h2 {
     color: #764ba2;
-    text-decoration: none;
+    margin: 0;
+    font-size: 1.2rem;
 }
 
-.help-text a:hover {
-    text-decoration: underline;
+.card.collapsed .settings-content {
+    display: none;
+}
+
+.card.collapsed .toggle-icon {
+    transform: rotate(-90deg);
+}
+
+.toggle-icon {
+    color: #764ba2;
+    transition: transform 0.3s;
+    font-size: 0.8rem;
+}
+
+/* Form Elements */
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 600;
+    color: #555;
+    font-size: 0.9rem;
 }
 
 .form-group input[type="text"],
+.form-group input[type="password"],
 .form-group input[type="number"],
 .form-group textarea,
 .form-group select {
     width: 100%;
-    padding: 10px 12px;
+    padding: 8px 10px;
     border: 2px solid #e1e8ed;
-    border-radius: 8px;
+    border-radius: 6px;
     font-size: 14px;
     transition: border-color 0.3s;
 }
@@ -138,44 +324,49 @@ header h1 {
     padding: 8px;
     background: #f7f9fc;
     border: 2px dashed #d1d9e6;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     width: 100%;
 }
 
-.settings-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 15px;
+.help-text {
+    display: block;
+    margin-top: 4px;
+    font-size: 0.75rem;
+    color: #666;
 }
 
-.checkbox-label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
+.help-text a {
+    color: #764ba2;
+    text-decoration: none;
 }
 
-.checkbox-label input[type="checkbox"] {
-    margin-right: 8px;
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
+.help-text a:hover {
+    text-decoration: underline;
+}
+
+/* Settings Grid */
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
 }
 
+/* Image Preview */
 .image-preview {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 15px;
-    margin-top: 15px;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 10px;
+    margin-top: 10px;
 }
 
 .image-preview-item {
     position: relative;
-    border-radius: 8px;
+    border-radius: 6px;
     overflow: hidden;
     background: #f7f9fc;
     aspect-ratio: 1;
+    border: 2px solid #e1e8ed;
 }
 
 .image-preview-item img {
@@ -184,7 +375,30 @@ header h1 {
     object-fit: cover;
 }
 
-/* Loading preview styles */
+.image-preview-item .remove-btn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: rgba(255, 59, 48, 0.9);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    transition: background 0.3s;
+}
+
+.image-preview-item .remove-btn:hover {
+    background: rgba(255, 59, 48, 1);
+    transform: scale(1.1);
+}
+
+/* Loading Preview */
 .loading-preview {
     display: flex;
     align-items: center;
@@ -195,57 +409,36 @@ header h1 {
 
 .loading-placeholder {
     text-align: center;
-    padding: 20px;
+    padding: 10px;
 }
 
 .loading-placeholder .spinner {
-    width: 30px;
-    height: 30px;
-    margin: 0 auto 10px;
-    border: 3px solid rgba(118, 75, 162, 0.2);
+    width: 24px;
+    height: 24px;
+    margin: 0 auto 6px;
+    border: 2px 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;
+    font-size: 0.7rem;
     color: #666;
     margin: 0;
     word-break: break-all;
-    max-width: 120px;
-}
-
-.image-preview-item .remove-btn {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    background: rgba(255, 59, 48, 0.9);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    transition: background 0.3s;
-}
-
-.image-preview-item .remove-btn:hover {
-    background: rgba(255, 59, 48, 1);
+    max-width: 90px;
 }
 
+/* Buttons */
 .generate-btn {
     width: 100%;
-    padding: 16px;
+    padding: 14px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border: none;
     border-radius: 8px;
-    font-size: 1.1rem;
+    font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.2s, box-shadow 0.2s;
@@ -266,24 +459,30 @@ header h1 {
     transform: none;
 }
 
-.spinner {
-    width: 20px;
-    height: 20px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-top-color: white;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
+.clear-all-btn {
+    padding: 5px 10px;
+    background: #ff4444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
 }
 
-@keyframes spin {
-    to { transform: rotate(360deg); }
+.clear-all-btn:hover {
+    background: #cc0000;
+    transform: translateY(-1px);
 }
 
+/* Status Messages */
 .status-message {
-    margin-top: 20px;
-    padding: 15px;
-    border-radius: 8px;
+    margin-top: 15px;
+    padding: 12px;
+    border-radius: 6px;
     display: none;
+    font-size: 0.85rem;
 }
 
 .status-message.info {
@@ -307,14 +506,23 @@ header h1 {
     display: block;
 }
 
+.status-message.warning {
+    background: #fff3e0;
+    color: #e65100;
+    border-left: 4px solid #e65100;
+    display: block;
+}
+
+/* Progress Logs */
 .progress-logs {
-    margin-top: 15px;
-    padding: 15px;
+    margin-top: 10px;
+    padding: 10px;
     background: #f5f7fa;
-    border-radius: 8px;
-    max-height: 200px;
+    border-radius: 6px;
+    max-height: 150px;
     overflow-y: auto;
     display: none;
+    font-size: 0.75rem;
 }
 
 .progress-logs.active {
@@ -322,8 +530,7 @@ header h1 {
 }
 
 .progress-logs .log-entry {
-    padding: 5px 0;
-    font-size: 0.9rem;
+    padding: 3px 0;
     color: #666;
     border-bottom: 1px solid #e1e8ed;
 }
@@ -332,127 +539,104 @@ header h1 {
     border-bottom: none;
 }
 
-.results {
-    margin-top: 30px;
-}
-
-.result-images {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 20px;
-    margin-top: 20px;
-}
-
-.result-image-item {
-    position: relative;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    transition: transform 0.3s;
-}
-
-.result-image-item:hover {
-    transform: scale(1.02);
+/* Spinner Animation */
+.spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
 }
 
-.result-image-item img {
-    width: 100%;
-    height: auto;
-    display: block;
+@keyframes spin {
+    to { transform: rotate(360deg); }
 }
 
-.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);
+/* Flash Animation */
+@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);
+    }
 }
 
-.result-image-item:hover .use-as-input-btn {
-    opacity: 1;
-    transform: translateY(0);
+/* Responsive Design */
+@media (max-width: 1200px) {
+    .left-panel {
+        width: 50%;
+        min-width: 400px;
+    }
 }
 
-.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);
+@media (max-width: 900px) {
+    .app-container {
+        flex-direction: column;
+    }
+    
+    .left-panel {
+        width: 100%;
+        min-width: auto;
+        height: 50vh;
+        border-right: none;
+        border-bottom: 2px solid #ddd;
+    }
+    
+    .right-panel {
+        height: 50vh;
+    }
+    
+    .results-grid, .history-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    }
 }
 
-.use-as-input-btn:active {
-    transform: translateY(0);
+@media (max-width: 600px) {
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .results-grid, .history-grid {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    }
+    
+    .history-controls {
+        flex-direction: column;
+        gap: 5px;
+    }
+    
+    .history-btn {
+        width: 100%;
+        text-align: center;
+    }
 }
 
-.result-info {
-    margin-top: 20px;
-    padding: 15px;
-    background: #f7f9fc;
-    border-radius: 8px;
-    font-size: 0.9rem;
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-.result-info strong {
-    color: #764ba2;
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
 }
 
-footer {
-    margin-top: 50px;
-    text-align: center;
-    color: white;
-    padding: 20px;
+::-webkit-scrollbar-thumb {
+    background: rgba(118, 75, 162, 0.5);
+    border-radius: 4px;
 }
 
-footer a {
-    color: white;
-    font-weight: 600;
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(118, 75, 162, 0.7);
 }
 
+/* Custom size fields visibility */
 .custom-size {
     transition: all 0.3s ease;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    header h1 {
-        font-size: 2rem;
-    }
-    
-    .settings-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .result-images {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* Loading state */
-.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

@@ -3,127 +3,164 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SeedDream v4 Edit - Image Editor</title>
+    <title>SeedDream v4 - AI Image Generator & Editor</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1>🎨 SeedDream v4 Edit</h1>
-            <p class="subtitle">AI-powered image editing using ByteDance's SeedDream model</p>
-        </header>
-
-        <main>
-            <div class="card">
-                <h2>API Configuration</h2>
-                <div class="settings-grid">
-                    <div class="form-group">
-                        <label for="apiKey">FAL API Key</label>
-                        <input type="password" id="apiKey" placeholder="Enter your FAL API key" />
-                        <small class="help-text">Get your API key from <a href="https://fal.ai" target="_blank">fal.ai</a></small>
-                    </div>
-                    <div class="form-group">
-                        <label for="modelSelect">Model</label>
-                        <select id="modelSelect">
-                            <option value="fal-ai/bytedance/seedream/v4/edit">Image Edit</option>
-                            <option value="fal-ai/bytedance/seedream/v4/text-to-image">Text to Image</option>
-                        </select>
-                        <small class="help-text">Select the model for generation</small>
-                    </div>
-                </div>
-            </div>
+    <div class="app-container">
+        <!-- Left Panel: Controls -->
+        <div class="left-panel">
+            <header>
+                <h1>🎨 SeedDream v4</h1>
+                <p class="subtitle">AI-powered image generation & editing</p>
+            </header>
 
-            <div class="card">
-                <h2 id="promptTitle">Edit Instructions</h2>
-                <div class="form-group">
-                    <label for="prompt" id="promptLabel">Editing Prompt</label>
-                    <textarea id="prompt" rows="3" placeholder="e.g., Dress the model in the clothes and shoes.">Dress the model in the clothes and shoes.</textarea>
-                </div>
-            </div>
-
-            <div class="card" id="imageInputCard">
-                <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/*" />
-                    <div id="imagePreview" class="image-preview"></div>
-                </div>
-                
-                <div class="form-group">
-                    <label for="imageUrls">Or Enter Image URLs (one per line)</label>
-                    <textarea id="imageUrls" rows="4" placeholder="https://example.com/image1.jpg&#10;https://example.com/image2.jpg"></textarea>
+            <div class="controls-section">
+                <div class="card">
+                    <h2>API Configuration</h2>
+                    <div class="settings-grid">
+                        <div class="form-group">
+                            <label for="apiKey">FAL API Key</label>
+                            <input type="password" id="apiKey" placeholder="Enter your FAL API key" />
+                            <small class="help-text">Get your API key from <a href="https://fal.ai" target="_blank">fal.ai</a></small>
+                        </div>
+                        <div class="form-group">
+                            <label for="modelSelect">Model</label>
+                            <select id="modelSelect">
+                                <option value="fal-ai/bytedance/seedream/v4/edit">Image Edit</option>
+                                <option value="fal-ai/bytedance/seedream/v4/text-to-image">Text to Image</option>
+                            </select>
+                            <small class="help-text">Select the model for generation</small>
+                        </div>
+                    </div>
                 </div>
-            </div>
 
-            <div class="card">
-                <h2>Settings</h2>
-                <div class="settings-grid">
+                <div class="card">
+                    <h2 id="promptTitle">Edit Instructions</h2>
                     <div class="form-group">
-                        <label for="imageSize">Image Size</label>
-                        <select id="imageSize">
-                            <option value="custom" selected>Custom Size</option>
-                            <option value="square_hd">Square HD (1024x1024)</option>
-                            <option value="square">Square</option>
-                            <option value="portrait_4_3">Portrait 4:3</option>
-                            <option value="portrait_16_9">Portrait 16:9</option>
-                            <option value="landscape_4_3">Landscape 4:3</option>
-                            <option value="landscape_16_9">Landscape 16:9</option>
-                        </select>
-                    </div>
-
-                    <div class="form-group custom-size">
-                        <label>Custom Width</label>
-                        <input type="number" id="customWidth" min="1024" max="4096" value="1280" />
+                        <label for="prompt" id="promptLabel">Editing Prompt</label>
+                        <textarea id="prompt" rows="3" placeholder="e.g., Dress the model in the clothes and shoes.">Dress the model in the clothes and shoes.</textarea>
                     </div>
+                </div>
 
-                    <div class="form-group custom-size">
-                        <label>Custom Height</label>
-                        <input type="number" id="customHeight" min="1024" max="4096" value="1280" />
+                <div class="card" id="imageInputCard">
+                    <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 for="numImages">Number of Generations</label>
-                        <input type="number" id="numImages" min="1" max="10" value="1" />
+                        <label>Upload Images (Max 10)</label>
+                        <input type="file" id="fileInput" multiple accept="image/*" />
+                        <div id="imagePreview" class="image-preview"></div>
                     </div>
-
+                    
                     <div class="form-group">
-                        <label for="maxImages">Max Images per Generation</label>
-                        <input type="number" id="maxImages" min="1" max="10" value="1" />
+                        <label for="imageUrls">Or Enter Image URLs (one per line)</label>
+                        <textarea id="imageUrls" rows="3" placeholder="https://example.com/image1.jpg&#10;https://example.com/image2.jpg"></textarea>
                     </div>
+                </div>
 
-                    <div class="form-group">
-                        <label for="seed">Seed (optional)</label>
-                        <input type="number" id="seed" placeholder="Random" />
+                <div class="card collapsed" id="settingsCard">
+                    <div class="card-header clickable" onclick="toggleSettings()">
+                        <h2>Settings</h2>
+                        <span class="toggle-icon">▼</span>
                     </div>
+                    <div class="settings-content">
+                        <div class="settings-grid">
+                            <div class="form-group">
+                                <label for="imageSize">Image Size</label>
+                                <select id="imageSize">
+                                    <option value="custom" selected>Custom Size</option>
+                                    <option value="square_hd">Square HD (1024x1024)</option>
+                                    <option value="square">Square</option>
+                                    <option value="portrait_4_3">Portrait 4:3</option>
+                                    <option value="portrait_16_9">Portrait 16:9</option>
+                                    <option value="landscape_4_3">Landscape 4:3</option>
+                                    <option value="landscape_16_9">Landscape 16:9</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group custom-size">
+                                <label>Custom Width</label>
+                                <input type="number" id="customWidth" min="1024" max="4096" value="1280" />
+                            </div>
+
+                            <div class="form-group custom-size">
+                                <label>Custom Height</label>
+                                <input type="number" id="customHeight" min="1024" max="4096" value="1280" />
+                            </div>
+
+                            <div class="form-group">
+                                <label for="numImages">Number of Generations</label>
+                                <input type="number" id="numImages" min="1" max="10" value="1" />
+                            </div>
+
+                            <div class="form-group">
+                                <label for="maxImages">Max Images per Generation</label>
+                                <input type="number" id="maxImages" min="1" max="10" value="1" />
+                            </div>
 
-                    <!-- Safety checker is disabled by default and hidden from UI -->
-                    <input type="hidden" id="safetyChecker" value="false" />
+                            <div class="form-group">
+                                <label for="seed">Seed (optional)</label>
+                                <input type="number" id="seed" placeholder="Random" />
+                            </div>
+
+                            <!-- Safety checker is disabled by default and hidden from UI -->
+                            <input type="hidden" id="safetyChecker" value="false" />
+                        </div>
+                    </div>
                 </div>
+
+                <button id="generateBtn" class="generate-btn">
+                    <span class="btn-text">Generate</span>
+                    <div class="spinner" style="display: none;"></div>
+                </button>
+
+                <div id="statusMessage" class="status-message"></div>
+                <div id="progressLogs" class="progress-logs"></div>
             </div>
+        </div>
 
-            <button id="generateBtn" class="generate-btn">
-                <span class="btn-text">Generate Edit</span>
-                <div class="spinner" style="display: none;"></div>
-            </button>
+        <!-- Right Panel: Results & History -->
+        <div class="right-panel">
+            <div class="history-header">
+                <h2>Generation History</h2>
+                <div class="history-controls">
+                    <button class="history-btn" onclick="clearHistory()" title="Clear all history">
+                        🗑️ Clear History
+                    </button>
+                    <button class="history-btn" onclick="downloadAllHistory()" title="Download all images">
+                        ⬇️ Download All
+                    </button>
+                </div>
+            </div>
 
-            <div id="statusMessage" class="status-message"></div>
-            <div id="progressLogs" class="progress-logs"></div>
+            <div class="history-tabs">
+                <button class="tab-btn active" onclick="switchTab('current')">Current Generation</button>
+                <button class="tab-btn" onclick="switchTab('history')">History (<span id="historyCount">0</span>)</button>
+            </div>
 
-            <div id="results" class="results" style="display: none;">
-                <h2>Results</h2>
-                <div id="resultImages" class="result-images"></div>
-                <div id="resultInfo" class="result-info"></div>
+            <div id="currentTab" class="tab-content active">
+                <div id="currentResults" class="results-grid">
+                    <div class="empty-state">
+                        <p>No current generation</p>
+                        <small>Generate an image to see results here</small>
+                    </div>
+                </div>
+                <div id="currentInfo" class="generation-info"></div>
             </div>
-        </main>
 
-        <footer>
-            <p>Powered by <a href="https://fal.ai" target="_blank">fal.ai</a> and ByteDance SeedDream v4</p>
-        </footer>
+            <div id="historyTab" class="tab-content">
+                <div id="historyGrid" class="history-grid">
+                    <div class="empty-state">
+                        <p>No generation history</p>
+                        <small>Your generated images will be saved here</small>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <script src="/static/script.js"></script>