Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text-to-Image Generator | Hugging Face Space</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .model-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .model-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .prompt-textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .result-image { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .result-image:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .sampler-option { | |
| transition: all 0.2s ease; | |
| } | |
| .sampler-option:hover { | |
| background-color: #e2e8f0; | |
| } | |
| .sampler-option.selected { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex items-center justify-between mb-8"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face" class="h-10"> | |
| <h1 class="text-2xl font-bold text-gray-800">Text-to-Image Generator</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"> | |
| <i class="fas fa-user mr-2"></i>Sign In | |
| </button> | |
| <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-cog mr-2"></i>Settings | |
| </button> | |
| </div> | |
| </header> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left Panel - Input Controls --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Generation Settings</h2> | |
| <!-- Model Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Model</label> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="model-card bg-gray-50 p-3 rounded-lg cursor-pointer border border-blue-300"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-paint-brush text-blue-500"></i> | |
| </div> | |
| <span class="font-medium">Stable Diffusion</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">v2.1</div> | |
| </div> | |
| <div class="model-card bg-gray-50 p-3 rounded-lg cursor-pointer border border-gray-200 hover:border-blue-300"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-magic text-purple-500"></i> | |
| </div> | |
| <span class="font-medium">Kandinsky</span> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">v2.2</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Input --> | |
| <div class="mb-6"> | |
| <label for="prompt" class="block text-sm font-medium text-gray-700 mb-2">Prompt</label> | |
| <textarea id="prompt" class="w-full prompt-textarea px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="Describe the image you want to generate..."></textarea> | |
| </div> | |
| <!-- Negative Prompt --> | |
| <div class="mb-6"> | |
| <label for="negative-prompt" class="block text-sm font-medium text-gray-700 mb-2">Negative Prompt</label> | |
| <textarea id="negative-prompt" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" placeholder="What you don't want to see in the image..."></textarea> | |
| </div> | |
| <!-- Sampler Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Sampler</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer selected" data-sampler="euler_a"> | |
| Euler a | |
| </div> | |
| <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="euler"> | |
| Euler | |
| </div> | |
| <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="lms"> | |
| LMS | |
| </div> | |
| <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="heun"> | |
| Heun | |
| </div> | |
| <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="dpm2"> | |
| DPM2 | |
| </div> | |
| <div class="sampler-option p-2 text-center text-sm rounded cursor-pointer" data-sampler="ddim"> | |
| DDIM | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Settings --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <label class="text-sm font-medium text-gray-700">Advanced Settings</label> | |
| <button id="toggle-advanced" class="text-blue-500 text-sm"> | |
| <i class="fas fa-chevron-down mr-1"></i> Show | |
| </button> | |
| </div> | |
| <div id="advanced-settings" class="hidden space-y-4 pt-2"> | |
| <!-- Steps --> | |
| <div> | |
| <label for="steps" class="block text-sm font-medium text-gray-700 mb-1">Steps</label> | |
| <input type="range" id="steps" min="10" max="100" value="30" class="w-full"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>10</span> | |
| <span id="steps-value">30</span> | |
| <span>100</span> | |
| </div> | |
| </div> | |
| <!-- CFG Scale --> | |
| <div> | |
| <label for="cfg-scale" class="block text-sm font-medium text-gray-700 mb-1">CFG Scale</label> | |
| <input type="range" id="cfg-scale" min="1" max="20" value="7" class="w-full"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>1</span> | |
| <span id="cfg-value">7</span> | |
| <span>20</span> | |
| </div> | |
| </div> | |
| <!-- Seed --> | |
| <div> | |
| <label for="seed" class="block text-sm font-medium text-gray-700 mb-1">Seed</label> | |
| <div class="flex space-x-2"> | |
| <input type="number" id="seed" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500" value="-1"> | |
| <button class="px-3 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Image Size --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Image Size</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-sm">512×512</button> | |
| <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-sm">512×768</button> | |
| <button class="px-2 py-1 bg-gray-100 text-gray-700 rounded text-sm">768×512</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generate Button --> | |
| <button id="generate-btn" class="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-700 transition flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Generate Image | |
| </button> | |
| </div> | |
| <!-- Right Panel - Results --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Generated Images</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition"> | |
| <i class="fas fa-download mr-1"></i> Download All | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition"> | |
| <i class="fas fa-trash-alt mr-1"></i> Clear | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Loading State --> | |
| <div id="loading-state" class="hidden flex-col items-center justify-center py-12"> | |
| <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full loading-spinner mb-4"></div> | |
| <p class="text-gray-600">Generating your image...</p> | |
| <p class="text-sm text-gray-500 mt-1">This may take a few moments</p> | |
| </div> | |
| <!-- Results Grid --> | |
| <div id="results-grid" class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- Placeholder for generated images --> | |
| <div class="bg-gray-100 rounded-lg p-4 flex items-center justify-center" style="min-height: 300px;"> | |
| <div class="text-center text-gray-500"> | |
| <i class="fas fa-image text-4xl mb-2"></i> | |
| <p>No images generated yet</p> | |
| <p class="text-sm mt-1">Enter a prompt and click "Generate"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Community Showcase --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Community Showcase</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3"> | |
| <!-- Sample community images --> | |
| <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/300x300/3b82f6/ffffff?text=Example" alt="Community image" class="w-full h-auto"> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">A beautiful sunset over mountains</p> | |
| <div class="flex items-center justify-between mt-1"> | |
| <span class="text-xs text-gray-500">@user123</span> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-heart text-red-500 text-xs"></i> | |
| <span class="text-xs">42</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/300x300/10b981/ffffff?text=Example" alt="Community image" class="w-full h-auto"> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">Cyberpunk city at night</p> | |
| <div class="flex items-center justify-between mt-1"> | |
| <span class="text-xs text-gray-500">@ai_artist</span> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-heart text-red-500 text-xs"></i> | |
| <span class="text-xs">28</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/300x300/f59e0b/ffffff?text=Example" alt="Community image" class="w-full h-auto"> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">Portrait of a futuristic robot</p> | |
| <div class="flex items-center justify-between mt-1"> | |
| <span class="text-xs text-gray-500">@tech_creator</span> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-heart text-red-500 text-xs"></i> | |
| <span class="text-xs">35</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="result-image bg-gray-100 rounded-lg overflow-hidden cursor-pointer"> | |
| <img src="https://via.placeholder.com/300x300/ef4444/ffffff?text=Example" alt="Community image" class="w-full h-auto"> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">Fantasy castle in the clouds</p> | |
| <div class="flex items-center justify-between mt-1"> | |
| <span class="text-xs text-gray-500">@dreamer</span> | |
| <div class="flex items-center space-x-1"> | |
| <i class="fas fa-heart text-red-500 text-xs"></i> | |
| <span class="text-xs">19</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Sampler selection | |
| const samplerOptions = document.querySelectorAll('.sampler-option'); | |
| samplerOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| samplerOptions.forEach(opt => opt.classList.remove('selected')); | |
| this.classList.add('selected'); | |
| }); | |
| }); | |
| // Toggle advanced settings | |
| const toggleAdvanced = document.getElementById('toggle-advanced'); | |
| const advancedSettings = document.getElementById('advanced-settings'); | |
| toggleAdvanced.addEventListener('click', function() { | |
| const isHidden = advancedSettings.classList.contains('hidden'); | |
| advancedSettings.classList.toggle('hidden'); | |
| this.innerHTML = isHidden | |
| ? '<i class="fas fa-chevron-up mr-1"></i> Hide' | |
| : '<i class="fas fa-chevron-down mr-1"></i> Show'; | |
| }); | |
| // Update slider values | |
| document.getElementById('steps').addEventListener('input', function() { | |
| document.getElementById('steps-value').textContent = this.value; | |
| }); | |
| document.getElementById('cfg-scale').addEventListener('input', function() { | |
| document.getElementById('cfg-value').textContent = this.value; | |
| }); | |
| // Generate button functionality | |
| const generateBtn = document.getElementById('generate-btn'); | |
| const loadingState = document.getElementById('loading-state'); | |
| const resultsGrid = document.getElementById('results-grid'); | |
| generateBtn.addEventListener('click', function() { | |
| const prompt = document.getElementById('prompt').value.trim(); | |
| if (!prompt) { | |
| alert('Please enter a prompt to generate an image'); | |
| return; | |
| } | |
| // Show loading state | |
| loadingState.classList.remove('hidden'); | |
| resultsGrid.innerHTML = ''; | |
| // Simulate API call with timeout | |
| setTimeout(() => { | |
| // Hide loading state | |
| loadingState.classList.add('hidden'); | |
| // Get selected sampler | |
| const selectedSampler = document.querySelector('.sampler-option.selected').dataset.sampler; | |
| // Create result item | |
| const resultItem = document.createElement('div'); | |
| resultItem.className = 'result-image bg-gray-100 rounded-lg overflow-hidden'; | |
| resultItem.innerHTML = ` | |
| <img src="https://via.placeholder.com/512x512/6366f1/ffffff?text=Generated+Image" alt="Generated image" class="w-full h-auto"> | |
| <div class="p-3"> | |
| <p class="font-medium text-sm mb-1">${prompt}</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Sampler: ${selectedSampler}</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-500 hover:text-blue-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Add to results grid | |
| resultsGrid.appendChild(resultItem); | |
| // Scroll to results | |
| resultsGrid.scrollIntoView({ behavior: 'smooth' }); | |
| }, 3000); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=BBbb22/deepsite-generated-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |