Spaces:

triflix
/

fluxxydev

Sleeping

App Files Files Community

triflix commited on Apr 29, 2025

Commit

6fdab27

verified ·

1 Parent(s): c4f3cf3

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +353 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,353 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Image Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .animate-pulse {
+            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        .image-preview {
+            transition: all 0.3s ease;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-indigo-700">AI Image Generator</h1>
+            <p class="text-gray-600 mt-2">Generate stunning images with AI</p>
+        </header>
+        <div class="grid md:grid-cols-2 gap-8">
+            <!-- Form Section -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <form id="imageForm" class="space-y-6">
+                    <div>
+                        <label for="prompt" class="block text-sm font-medium text-gray-700 mb-1">Image Prompt</label>
+                        <textarea id="prompt" name="prompt" rows="4" required
+                                  class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border"></textarea>
+                    </div>
+                    <div>
+                        <label for="negative_prompt" class="block text-sm font-medium text-gray-700 mb-1">Negative Prompt (Optional)</label>
+                        <textarea id="negative_prompt" name="negative_prompt" rows="2"
+                                  class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border"></textarea>
+                    </div>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="resolution" class="block text-sm font-medium text-gray-700 mb-1">Resolution</label>
+                            <select id="resolution" class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border">
+                                <option value="1024,1024">Square (1024×1024)</option>
+                                <option value="1024,768">Landscape (1024×768)</option>
+                                <option value="768,1024">Portrait (768×1024)</option>
+                                <option value="1152,896">Widescreen (1152×896)</option>
+                                <option value="896,1152">Tall (896×1152)</option>
+                                <option value="1216,832">Cinematic (1216×832)</option>
+                                <option value="custom">Custom...</option>
+                            </select>
+                        </div>
+                        <div id="customResolution" class="hidden grid grid-cols-2 gap-2">
+                            <div>
+                                <label for="width" class="block text-sm font-medium text-gray-700 mb-1">Width</label>
+                                <input type="number" id="width" name="width" value="1024" min="256" max="2048" step="64"
+                                    class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border">
+                            </div>
+                            <div>
+                                <label for="height" class="block text-sm font-medium text-gray-700 mb-1">Height</label>
+                                <input type="number" id="height" name="height" value="1024" min="256" max="2048" step="64"
+                                    class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <label for="steps" class="block text-sm font-medium text-gray-700 mb-1">Steps</label>
+                            <input type="number" id="steps" name="steps" value="4" min="1" max="50"
+                                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border">
+                            <p class="text-xs text-gray-500 mt-1">Higher values give more detail but take longer</p>
+                        </div>
+                        <div>
+                            <label for="guidance_scale" class="block text-sm font-medium text-gray-700 mb-1">Guidance Scale</label>
+                            <input type="number" id="guidance_scale" name="guidance_scale" value="60" min="0" max="100"
+                                class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border">
+                            <p class="text-xs text-gray-500 mt-1">How closely to follow your prompt</p>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="inline-flex items-center">
+                            <input type="checkbox" id="use_random_seed" name="use_random_seed" checked
+                                class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                            <span class="ml-2 text-sm text-gray-700">Use random seed</span>
+                        </label>
+                    </div>
+                    <div id="seedContainer" class="hidden">
+                        <label for="seed" class="block text-sm font-medium text-gray-700 mb-1">Seed</label>
+                        <input type="number" id="seed" name="seed" value="0" min="0" max="2147483647"
+                            class="w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 p-2 border">
+                    </div>
+                    <div class="flex space-x-4">
+                        <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 flex-grow">
+                            Generate Image
+                        </button>
+                        <button type="button" id="clearCacheBtn" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+                            Clear Cache
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <!-- Output Section -->
+            <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
+                <h2 class="text-xl font-semibold mb-4">Generated Image</h2>
+                <!-- Loading State -->
+                <div id="loadingContainer" class="hidden flex-grow flex flex-col items-center justify-center space-y-4">
+                    <div class="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+                    <p class="text-gray-700">Generating your image...</p>
+                    <div id="progressContainer" class="hidden w-full">
+                        <div class="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+                            <div id="progressBar" class="h-full bg-indigo-500 rounded-full transition-all duration-300" style="width: 0%"></div>
+                        </div>
+                        <p id="progressText" class="text-xs text-gray-500 mt-1 text-center">Starting generation...</p>
+                    </div>
+                </div>
+                <!-- Preview Container -->
+                <div id="previewContainer" class="flex-grow flex flex-col items-center justify-center">
+                    <img id="noImagePlaceholder" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E"
+                         class="w-24 h-24 opacity-30" alt="No image generated">
+                    <p class="text-gray-500 mt-4">No image generated yet</p>
+                </div>
+                <!-- Result Container -->
+                <div id="resultContainer" class="hidden flex-grow flex flex-col">
+                    <div class="flex-grow flex items-center justify-center mb-4">
+                        <img id="resultImage" src="" alt="Generated image" class="max-w-full max-h-[500px] rounded-lg shadow">
+                    </div>
+                    <div class="text-sm text-gray-700">
+                        <div class="mb-2">
+                            <span class="font-medium">Image URL:</span>
+                            <a id="imageUrl" href="#" target="_blank" class="text-indigo-600 hover:underline break-all"></a>
+                        </div>
+                        <button id="downloadBtn" class="mt-2 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 w-full">
+                            Download Image
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const form = document.getElementById('imageForm');
+            const loadingContainer = document.getElementById('loadingContainer');
+            const previewContainer = document.getElementById('previewContainer');
+            const resultContainer = document.getElementById('resultContainer');
+            const progressContainer = document.getElementById('progressContainer');
+            const progressBar = document.getElementById('progressBar');
+            const progressText = document.getElementById('progressText');
+            const resultImage = document.getElementById('resultImage');
+            const imageUrl = document.getElementById('imageUrl');
+            const downloadBtn = document.getElementById('downloadBtn');
+            const clearCacheBtn = document.getElementById('clearCacheBtn');
+            const resolutionSelect = document.getElementById('resolution');
+            const customResolution = document.getElementById('customResolution');
+            const widthInput = document.getElementById('width');
+            const heightInput = document.getElementById('height');
+            const useRandomSeedCheckbox = document.getElementById('use_random_seed');
+            const seedContainer = document.getElementById('seedContainer');
+            // Handle resolution selection
+            resolutionSelect.addEventListener('change', (e) => {
+                if (e.target.value === 'custom') {
+                    customResolution.classList.remove('hidden');
+                } else {
+                    customResolution.classList.add('hidden');
+                    const [width, height] = e.target.value.split(',');
+                    widthInput.value = width;
+                    heightInput.value = height;
+                }
+            });
+            // Handle seed checkbox
+            useRandomSeedCheckbox.addEventListener('change', (e) => {
+                if (e.target.checked) {
+                    seedContainer.classList.add('hidden');
+                } else {
+                    seedContainer.classList.remove('hidden');
+                }
+            });
+            // Clear cache button
+            clearCacheBtn.addEventListener('click', async () => {
+                try {
+                    clearCacheBtn.disabled = true;
+                    clearCacheBtn.textContent = 'Clearing...';
+                    const response = await fetch('/clear-cache', {
+                        method: 'POST'
+                    });
+                    const data = await response.json();
+                    if (response.ok) {
+                        alert('Cache cleared successfully!');
+                    } else {
+                        alert(`Error: ${data.error}`);
+                    }
+                } catch (error) {
+                    alert(`Error: ${error.message}`);
+                } finally {
+                    clearCacheBtn.disabled = false;
+                    clearCacheBtn.textContent = 'Clear Cache';
+                }
+            });
+            // Form submission
+            form.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                // Show loading UI
+                previewContainer.classList.add('hidden');
+                resultContainer.classList.add('hidden');
+                loadingContainer.classList.remove('hidden');
+                progressContainer.classList.remove('hidden');
+                // Reset progress
+                progressBar.style.width = '0%';
+                progressText.textContent = 'Starting generation...';
+                try {
+                    // Get form data
+                    const formData = new FormData(form);
+                    // Add width and height from the resolution dropdown
+                    formData.set('width', widthInput.value);
+                    formData.set('height', heightInput.value);
+                    // Handle seed based on checkbox
+                    formData.set('use_random_seed', useRandomSeedCheckbox.checked);
+                    // Disable form elements during generation
+                    Array.from(form.elements).forEach(element => {
+                        element.disabled = true;
+                    });
+                    // Send the initial request
+                    const response = await fetch('/generate', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    if (!response.ok) {
+                        const error = await response.json();
+                        throw new Error(error.error || 'Failed to start image generation');
+                    }
+                    const data = await response.json();
+                    const eventId = data.event_id;
+                    // Poll for updates
+                    await pollForResults(eventId);
+                } catch (error) {
+                    alert(`Error: ${error.message}`);
+                    loadingContainer.classList.add('hidden');
+                    previewContainer.classList.remove('hidden');
+                } finally {
+                    // Re-enable form elements
+                    Array.from(form.elements).forEach(element => {
+                        element.disabled = false;
+                    });
+                }
+            });
+            async function pollForResults(eventId) {
+                let progress = 0;
+                let pollInterval;
+                let finalImageUrl = null;
+                const poll = async () => {
+                    try {
+                        const response = await fetch(`/poll/${eventId}`);
+                        if (!response.ok) {
+                            clearInterval(pollInterval);
+                            throw new Error('Failed to poll for updates');
+                        }
+                        const data = await response.json();
+                        // Update progress
+                        if (data.status === 'generating') {
+                            progress += 2;
+                            progress = Math.min(progress, 96); // Cap at 96% until complete
+                            progressBar.style.width = `${progress}%`;
+                            progressText.textContent = 'Generating image...';
+                            // Show latest progress image if available
+                            if (data.image_urls && data.image_urls.length > 0) {
+                                loadingContainer.classList.add('hidden');
+                                resultContainer.classList.remove('hidden');
+                                resultImage.src = data.image_urls[data.image_urls.length - 1];
+                                resultImage.classList.add('animate-pulse');
+                            }
+                        } else if (data.status === 'complete') {
+                            clearInterval(pollInterval);
+                            progressBar.style.width = '100%';
+                            progressText.textContent = 'Complete!';
+                            // Show the final image
+                            finalImageUrl = data.final_image;
+                            loadingContainer.classList.add('hidden');
+                            resultContainer.classList.remove('hidden');
+                            if (finalImageUrl) {
+                                resultImage.src = finalImageUrl;
+                                resultImage.classList.remove('animate-pulse');
+                                imageUrl.href = finalImageUrl;
+                                imageUrl.textContent = finalImageUrl;
+                                // Setup download button
+                                downloadBtn.onclick = () => {
+                                    const link = document.createElement('a');
+                                    link.href = finalImageUrl;
+                                    link.download = 'generated-image.webp';
+                                    document.body.appendChild(link);
+                                    link.click();
+                                    document.body.removeChild(link);
+                                };
+                            } else {
+                                throw new Error('No final image URL received');
+                            }
+                        }
+                    } catch (error) {
+                        clearInterval(pollInterval);
+                        alert(`Error polling for results: ${error.message}`);
+                        loadingContainer.classList.add('hidden');
+                        previewContainer.classList.remove('hidden');
+                    }
+                };
+                // Start polling every 1s
+                await poll(); // Initial poll
+                pollInterval = setInterval(poll, 1000);
+            }
+        });
+    </script>
+</body>
+</html>