initial test

.gitignore

@@ -0,0 +1,63 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# Virtual environments
+venv/
+ENV/
+env/
+.venv
+
+# Environment variables
+.env
+.env.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+.DS_Store
+
+# Docker
+*.log
+.dockerignore
+
+# Temporary files
+*.tmp
+*.temp
+tmp/
+temp/
+
+# API keys and secrets
+secrets.txt
+*.key
+api_keys.json
+
+# Test files
+test_*.py
+*_test.py
+
+# Documentation source
+faldoc.txt

Dockerfile

@@ -0,0 +1,40 @@
+# Use Python 3.10 slim image as base
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    PORT=7860
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements file
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY templates/ ./templates/
+COPY static/ ./static/
+
+# Create a non-root user
+RUN useradd -m -u 1000 user && chown -R user:user /app
+USER user
+
+# Expose the port (Hugging Face default)
+EXPOSE 7860
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD python -c "import requests; requests.get('http://localhost:7860/health')" || exit 1
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,184 @@
+---
+title: SeedDream v4 Edit
+emoji: 🎨
+colorFrom: purple
+colorTo: pink
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+---
+
+# SeedDream v4 - AI Image Generator & Editor
+
+A web-based interface for AI-powered image generation and editing using ByteDance's SeedDream v4 models via the FAL API. This application is containerized and ready for deployment on Hugging Face Spaces.
+
+## Features
+
+- 🎨 **Dual Mode**: Switch between Image Editing and Text-to-Image generation
+- 📤 Support for multiple image uploads (up to 10 images for editing)
+- 🔗 URL-based image input support
+- ⚙️ Customizable generation settings with smart dimension detection
+- 🔒 Safety checker disabled for unrestricted creativity
+- 🐳 Docker containerized for easy deployment
+- 🚀 Hugging Face Spaces compatible
+
+## Quick Start
+
+### Local Development
+
+1. **Clone the repository**
+   ```bash
+   git clone <your-repo-url>
+   cd fal_ui
+   ```
+
+2. **Install dependencies**
+   ```bash
+   # Install Python dependencies
+   pip install -r requirements.txt
+   ```
+
+3. **Run the application**
+   ```bash
+   python app.py
+   ```
+   The app will be available at `http://localhost:7860`
+
+### Docker Deployment
+
+1. **Build the Docker image**
+   ```bash
+   docker build -t seedream-editor .
+   ```
+
+2. **Run the container**
+   ```bash
+   docker run -p 7860:7860 seedream-editor
+   ```
+
+## Deployment on Hugging Face Spaces
+
+### Method 1: Direct Deployment
+
+1. Go to [Hugging Face Spaces](https://huggingface.co/spaces)
+2. Click "Create new Space"
+3. Choose "Docker" as the SDK
+4. Upload all project files
+5. The application is ready to deploy - users will enter their API key directly in the interface
+
+### Method 2: Using Git
+
+1. Create a new Space on Hugging Face
+2. Clone your space locally:
+   ```bash
+   git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+   cd YOUR_SPACE_NAME
+   ```
+
+3. Copy all project files to the space directory
+4. Create a `.gitignore` file:
+   ```
+   __pycache__/
+   *.pyc
+   .env
+   ```
+
+5. Push to Hugging Face:
+   ```bash
+   git add .
+   git commit -m "Initial commit"
+   git push
+   ```
+
+## Configuration
+
+### API Key
+
+The FAL API key is entered directly in the web interface:
+- Enter your API key in the "API Configuration" section at the top of the page
+- The key is stored locally in your browser (localStorage)
+- Get your API key from [fal.ai](https://fal.ai)
+
+### Model Selection
+
+Choose between two powerful models:
+- **Image Edit Mode**: `fal-ai/bytedance/seedream/v4/edit` - Edit existing images with prompts
+- **Text-to-Image Mode**: `fal-ai/bytedance/seedream/v4/text-to-image` - Generate new images from text
+
+### Environment Variables
+
+- `PORT`: Port number (default: 7860)
+- `SPACE_ID`: Automatically set by Hugging Face Spaces
+
+## Project Structure
+
+```
+fal_ui/
+├── app.py                 # Flask application
+├── requirements.txt       # Python dependencies
+├── Dockerfile            # Docker configuration
+├── templates/
+│   └── index.html        # Frontend interface
+├── static/
+│   ├── style.css         # Styling
+│   └── script.js         # Frontend logic
+└── README.md             # Documentation
+```
+
+## Features Overview
+
+### Image Input
+- **File Upload**: Select multiple images from your device
+- **URL Input**: Paste image URLs directly
+- **Preview**: Visual preview of uploaded images
+
+### Generation Settings
+- **Image Size**: Preset sizes or custom dimensions (1024-4096px)
+- **Number of Generations**: Control output quantity
+- **Seed**: Optional seed for reproducible results
+- **Safety Checker**: Toggle content filtering
+
+### API Integration
+- Automatic API key management
+- Real-time progress logging
+- Error handling and status updates
+
+## Security Notes
+
+- Never expose your FAL API key in client-side code
+- The application uses server-side proxy for API calls
+- API keys can be stored in environment variables or Hugging Face secrets
+
+## Troubleshooting
+
+### Common Issues
+
+1. **API Key Error**
+   - Ensure you've entered your FAL API key in the interface
+   - Check if the key has proper permissions
+   - Get a new key from [fal.ai](https://fal.ai) if needed
+
+2. **Docker Build Fails**
+   - Verify all files are in the correct directories
+   - Check Docker daemon is running
+
+3. **Hugging Face Deployment Issues**
+   - Ensure Dockerfile is present
+   - Check logs in the Space settings
+
+## Support
+
+For issues related to:
+- FAL API: Visit [fal.ai documentation](https://fal.ai/docs)
+- Hugging Face Spaces: Check [Hugging Face documentation](https://huggingface.co/docs/hub/spaces)
+
+## License
+
+This project is provided as-is for educational and development purposes.
+
+## Acknowledgments
+
+- Powered by [FAL.ai](https://fal.ai)
+- ByteDance SeedDream v4 model
+- Deployed on [Hugging Face Spaces](https://huggingface.co/spaces)

app.py

@@ -0,0 +1,157 @@
+"""
+FAL API SeedDream v4 Edit - Web Application
+A Flask-based web interface for image editing using ByteDance's SeedDream model
+"""
+
+import os
+import json
+import requests
+from flask import Flask, render_template, request, jsonify, send_from_directory
+from flask_cors import CORS
+import fal_client
+from werkzeug.utils import secure_filename
+import base64
+import tempfile
+from pathlib import Path
+
+app = Flask(__name__)
+CORS(app)
+
+# Configuration
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max file size
+app.config['UPLOAD_FOLDER'] = tempfile.gettempdir()
+
+# Ensure static and template directories exist
+Path("static").mkdir(exist_ok=True)
+Path("templates").mkdir(exist_ok=True)
+
+@app.route('/')
+def index():
+    """Serve the main HTML interface"""
+    return render_template('index.html')
+
+@app.route('/static/<path:filename>')
+def serve_static(filename):
+    """Serve static files (CSS, JS)"""
+    return send_from_directory('static', filename)
+
+@app.route('/api/generate', methods=['POST'])
+def generate():
+    """Handle image generation requests"""
+    try:
+        # Get request data
+        data = request.json
+        
+        # Get model endpoint from header or default to edit
+        model_endpoint = request.headers.get('X-Model-Endpoint', 'fal-ai/bytedance/seedream/v4/edit')
+        
+        # Get API key from header or environment
+        auth_header = request.headers.get('Authorization', '')
+        if auth_header.startswith('Bearer '):
+            api_key = auth_header.replace('Bearer ', '')
+            # Temporarily set the API key for this request
+            os.environ['FAL_KEY'] = api_key
+        elif not os.environ.get('FAL_KEY'):
+            return jsonify({'error': 'API key not provided'}), 401
+        
+        # Prepare arguments for FAL API
+        fal_arguments = {
+            'prompt': data.get('prompt')
+        }
+        
+        # Handle model-specific parameters
+        is_text_to_image = 'text-to-image' in model_endpoint
+        
+        if not is_text_to_image:
+            # Image edit mode - process image URLs
+            processed_image_urls = []
+            for url in data.get('image_urls', []):
+                if url.startswith('data:'):
+                    # Handle base64 data URLs
+                    processed_image_urls.append(url)
+                else:
+                    # Regular URL
+                    processed_image_urls.append(url)
+            fal_arguments['image_urls'] = processed_image_urls[:10]  # Max 10 images
+            
+            # Add max_images for edit mode
+            if 'max_images' in data:
+                fal_arguments['max_images'] = data['max_images']
+        
+        # Add common optional parameters
+        if 'image_size' in data:
+            fal_arguments['image_size'] = data['image_size']
+        if 'num_images' in data:
+            fal_arguments['num_images'] = data['num_images']
+        if 'seed' in data:
+            fal_arguments['seed'] = data['seed']
+        if 'enable_safety_checker' in data:
+            fal_arguments['enable_safety_checker'] = data['enable_safety_checker']
+        
+        # Create a logs collector
+        logs = []
+        
+        def on_queue_update(update):
+            """Handle queue updates and collect logs"""
+            if isinstance(update, fal_client.InProgress):
+                for log in update.logs:
+                    logs.append(log.get("message", ""))
+        
+        # Call FAL API with subscribe (blocking call)
+        result = fal_client.subscribe(
+            model_endpoint,
+            arguments=fal_arguments,
+            with_logs=True,
+            on_queue_update=on_queue_update
+        )
+        
+        # Add logs to the response
+        if logs:
+            result['logs'] = logs
+        
+        return jsonify(result), 200
+        
+    except Exception as e:
+        print(f"Error in generate endpoint: {str(e)}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    """Handle file uploads and return data URL"""
+    try:
+        if 'file' not in request.files:
+            return jsonify({'error': 'No file provided'}), 400
+        
+        file = request.files['file']
+        if file.filename == '':
+            return jsonify({'error': 'No file selected'}), 400
+        
+        # Read file and convert to base64 data URL
+        file_content = file.read()
+        file_type = file.content_type or 'application/octet-stream'
+        base64_content = base64.b64encode(file_content).decode('utf-8')
+        data_url = f"data:{file_type};base64,{base64_content}"
+        
+        return jsonify({'url': data_url}), 200
+        
+    except Exception as e:
+        print(f"Error in upload endpoint: {str(e)}")
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/health', methods=['GET'])
+def health_check():
+    """Health check endpoint for container monitoring"""
+    return jsonify({'status': 'healthy'}), 200
+
+if __name__ == '__main__':
+    # Get port from environment or default to 7860 (Hugging Face Spaces default)
+    port = int(os.environ.get('PORT', 7860))
+    
+    # Check if running in production (Hugging Face Spaces)
+    is_production = os.environ.get('SPACE_ID') is not None
+    
+    # Run the application
+    if is_production:
+        app.run(host='0.0.0.0', port=port, debug=False)
+    else:
+        app.run(host='0.0.0.0', port=port, debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==2.3.3
+flask-cors==4.0.0
+fal-client==0.4.0
+requests==2.31.0
+Werkzeug==2.3.7

static/script.js

@@ -0,0 +1,387 @@
+// Configuration
+let uploadedImages = [];
+let imageDimensions = []; // Store dimensions of uploaded images
+
+// DOM Elements
+const fileInput = document.getElementById('fileInput');
+const imagePreview = document.getElementById('imagePreview');
+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 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');
+
+// Event Listeners
+fileInput.addEventListener('change', handleFileUpload);
+generateBtn.addEventListener('click', generateEdit);
+imageSizeSelect.addEventListener('change', handleImageSizeChange);
+modelSelect.addEventListener('change', handleModelChange);
+
+// Handle image size dropdown change
+function handleImageSizeChange() {
+    if (imageSizeSelect.value === 'custom') {
+        customSizeElements.forEach(el => el.style.display = 'block');
+    } else {
+        customSizeElements.forEach(el => el.style.display = 'none');
+    }
+}
+
+// Handle model dropdown change
+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.';
+        imageInputCard.style.display = 'block';
+    }
+}
+
+// Initialize on page load
+window.addEventListener('DOMContentLoaded', () => {
+    // Load saved API key if available
+    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
+    handleImageSizeChange();
+    
+    // Initialize model selection
+    handleModelChange();
+});
+
+// Handle file upload
+async function handleFileUpload(event) {
+    const files = Array.from(event.target.files);
+    
+    for (const file of files) {
+        if (uploadedImages.length >= 10) {
+            showStatus('Maximum 10 images allowed', 'error');
+            break;
+        }
+        
+        if (file.type.startsWith('image/')) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const dataUrl = e.target.result;
+                uploadedImages.push(dataUrl);
+                
+                // Get image dimensions
+                const img = new Image();
+                img.onload = function() {
+                    imageDimensions.push({
+                        width: this.width,
+                        height: this.height
+                    });
+                    addImagePreview(dataUrl, uploadedImages.length - 1);
+                    updateCustomSizeFromLastImage();
+                };
+                img.src = dataUrl;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+}
+
+// Add image preview
+function addImagePreview(src, index) {
+    const previewItem = document.createElement('div');
+    previewItem.className = 'image-preview-item';
+    previewItem.innerHTML = `
+        <img src="${src}" alt="Upload ${index + 1}">
+        <button class="remove-btn" onclick="removeImage(${index})">×</button>
+    `;
+    imagePreview.appendChild(previewItem);
+}
+
+// Remove image
+function removeImage(index) {
+    uploadedImages.splice(index, 1);
+    imageDimensions.splice(index, 1);
+    renderImagePreviews();
+    updateCustomSizeFromLastImage();
+}
+
+// Update custom size fields 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();
+        }
+    }
+}
+
+// Re-render all image previews
+function renderImagePreviews() {
+    imagePreview.innerHTML = '';
+    uploadedImages.forEach((src, index) => {
+        addImagePreview(src, index);
+    });
+}
+
+// Show status message
+function showStatus(message, type = 'info') {
+    statusMessage.className = `status-message ${type}`;
+    statusMessage.textContent = message;
+    statusMessage.style.display = 'block';
+    
+    if (type === 'success' || type === 'error') {
+        setTimeout(() => {
+            statusMessage.style.display = 'none';
+        }, 5000);
+    }
+}
+
+// Add log entry
+function addLog(message) {
+    const logEntry = document.createElement('div');
+    logEntry.className = 'log-entry';
+    logEntry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
+    progressLogs.appendChild(logEntry);
+    progressLogs.scrollTop = progressLogs.scrollHeight;
+}
+
+// Clear logs
+function clearLogs() {
+    progressLogs.innerHTML = '';
+    progressLogs.classList.remove('active');
+}
+
+// Get image size configuration
+function getImageSize() {
+    const size = imageSizeSelect.value;
+    if (size === 'custom') {
+        return {
+            width: parseInt(document.getElementById('customWidth').value),
+            height: parseInt(document.getElementById('customHeight').value)
+        };
+    }
+    return size;
+}
+
+// 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
+}
+
+// Get image dimensions from URL
+async function getImageDimensionsFromUrl(url) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.onload = function() {
+            imageDimensions.push({
+                width: this.width,
+                height: this.height
+            });
+            updateCustomSizeFromLastImage();
+            resolve();
+        };
+        img.onerror = function() {
+            // If can't load, just resolve without adding dimensions
+            resolve();
+        };
+        img.src = url;
+    });
+}
+
+// Generate edit
+async function generateEdit() {
+    // Validate inputs
+    const prompt = document.getElementById('prompt').value.trim();
+    if (!prompt) {
+        showStatus('Please enter an editing 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 = '';
+    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
+    };
+    
+    // Add image URLs only for edit mode
+    if (!isTextToImage) {
+        requestData.image_urls = imageUrlsArray;
+        requestData.max_images = parseInt(document.getElementById('maxImages').value);
+    }
+    
+    const seed = document.getElementById('seed').value;
+    if (seed) {
+        requestData.seed = parseInt(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.');
+            document.getElementById('apiKey').focus();
+            return;
+        }
+        
+        addLog('Submitting request to FAL API...');
+        addLog(`Model: ${selectedModel}`);
+        addLog(`Prompt: ${prompt}`);
+        if (!isTextToImage) {
+            addLog(`Number of input images: ${imageUrlsArray.length}`);
+        }
+        
+        // Make API call with selected model
+        const response = await callFalAPI(apiKey, requestData, selectedModel);
+        
+        // Display results
+        displayResults(response);
+        showStatus('Generation completed successfully!', 'success');
+        
+    } catch (error) {
+        console.error('Error:', error);
+        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('.spinner').style.display = 'none';
+    }
+}
+
+// Get API key from the input field
+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);
+    }
+    
+    return apiKey || localStorage.getItem('fal_api_key');
+}
+
+// Call FAL API (proxy through backend)
+async function callFalAPI(apiKey, requestData, model) {
+    const response = await fetch('/api/generate', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${apiKey}`,
+            'X-Model-Endpoint': model
+        },
+        body: JSON.stringify(requestData)
+    });
+    
+    if (!response.ok) {
+        const error = await response.text();
+        throw new Error(error || 'API request failed');
+    }
+    
+    return await response.json();
+}
+
+// Display results
+function displayResults(response) {
+    results.style.display = 'block';
+    
+    // Display images
+    if (response.images && response.images.length > 0) {
+        response.images.forEach((image, index) => {
+            const imageItem = document.createElement('div');
+            imageItem.className = 'result-image-item';
+            imageItem.innerHTML = `
+                <img src="${image.url || image.file_data}" alt="Result ${index + 1}">
+            `;
+            resultImages.appendChild(imageItem);
+        });
+        
+        addLog(`Generated ${response.images.length} image(s)`);
+    }
+    
+    // Display info
+    if (response.seed) {
+        resultInfo.innerHTML = `<strong>Seed:</strong> ${response.seed}`;
+        addLog(`Seed used: ${response.seed}`);
+    }
+}

static/style.css

@@ -0,0 +1,343 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+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;
+    color: #333;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 40px;
+    color: white;
+}
+
+header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+}
+
+.subtitle {
+    font-size: 1.1rem;
+    opacity: 0.95;
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 25px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.card h2 {
+    color: #764ba2;
+    margin-bottom: 20px;
+    font-size: 1.4rem;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 600;
+    color: #555;
+}
+
+.help-text {
+    display: block;
+    margin-top: 5px;
+    font-size: 0.85rem;
+    color: #666;
+}
+
+.help-text a {
+    color: #764ba2;
+    text-decoration: none;
+}
+
+.help-text a:hover {
+    text-decoration: underline;
+}
+
+.form-group input[type="text"],
+.form-group input[type="number"],
+.form-group textarea,
+.form-group select {
+    width: 100%;
+    padding: 10px 12px;
+    border: 2px solid #e1e8ed;
+    border-radius: 8px;
+    font-size: 14px;
+    transition: border-color 0.3s;
+}
+
+.form-group input:focus,
+.form-group textarea:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: #764ba2;
+}
+
+.form-group textarea {
+    resize: vertical;
+    font-family: inherit;
+}
+
+.form-group input[type="file"] {
+    padding: 8px;
+    background: #f7f9fc;
+    border: 2px dashed #d1d9e6;
+    border-radius: 8px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+.checkbox-label input[type="checkbox"] {
+    margin-right: 8px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+.image-preview {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 15px;
+    margin-top: 15px;
+}
+
+.image-preview-item {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #f7f9fc;
+    aspect-ratio: 1;
+}
+
+.image-preview-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.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);
+}
+
+.generate-btn {
+    width: 100%;
+    padding: 16px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(118, 75, 162, 0.3);
+}
+
+.generate-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    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;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.status-message {
+    margin-top: 20px;
+    padding: 15px;
+    border-radius: 8px;
+    display: none;
+}
+
+.status-message.info {
+    background: #e3f2fd;
+    color: #1565c0;
+    border-left: 4px solid #1565c0;
+    display: block;
+}
+
+.status-message.success {
+    background: #e8f5e9;
+    color: #2e7d32;
+    border-left: 4px solid #2e7d32;
+    display: block;
+}
+
+.status-message.error {
+    background: #ffebee;
+    color: #c62828;
+    border-left: 4px solid #c62828;
+    display: block;
+}
+
+.progress-logs {
+    margin-top: 15px;
+    padding: 15px;
+    background: #f5f7fa;
+    border-radius: 8px;
+    max-height: 200px;
+    overflow-y: auto;
+    display: none;
+}
+
+.progress-logs.active {
+    display: block;
+}
+
+.progress-logs .log-entry {
+    padding: 5px 0;
+    font-size: 0.9rem;
+    color: #666;
+    border-bottom: 1px solid #e1e8ed;
+}
+
+.progress-logs .log-entry:last-child {
+    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 {
+    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);
+}
+
+.result-image-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.result-info {
+    margin-top: 20px;
+    padding: 15px;
+    background: #f7f9fc;
+    border-radius: 8px;
+    font-size: 0.9rem;
+}
+
+.result-info strong {
+    color: #764ba2;
+}
+
+footer {
+    margin-top: 50px;
+    text-align: center;
+    color: white;
+    padding: 20px;
+}
+
+footer a {
+    color: white;
+    font-weight: 600;
+}
+
+.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;
+}

templates/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SeedDream v4 Edit - Image 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="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">
+                <h2>Input Images</h2>
+                <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>
+            </div>
+
+            <div class="card">
+                <h2>Settings</h2>
+                <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>
+
+                    <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>
+
+            <button id="generateBtn" class="generate-btn">
+                <span class="btn-text">Generate Edit</span>
+                <div class="spinner" style="display: none;"></div>
+            </button>
+
+            <div id="statusMessage" class="status-message"></div>
+            <div id="progressLogs" class="progress-logs"></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>
+        </main>
+
+        <footer>
+            <p>Powered by <a href="https://fal.ai" target="_blank">fal.ai</a> and ByteDance SeedDream v4</p>
+        </footer>
+    </div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>