Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="Text to Image Generation using Stable Diffusion with CLIP evaluation"> | |
| <title>Text to Image Generation</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Manrope', sans-serif; | |
| margin: 0; | |
| min-height: 100vh; | |
| background: linear-gradient(135deg, #0a0f1a 0%, #1a1f3a 50%, #0d1229 100%); | |
| color: #fff; | |
| } | |
| .container-main { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .header { | |
| text-align: center; | |
| padding: 40px 20px; | |
| background: linear-gradient(180deg, rgba(99, 102, 241, 0.1) 0%, transparent 100%); | |
| border-radius: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 10px; | |
| } | |
| .header p { | |
| color: #94a3b8; | |
| font-size: 1rem; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .input-section { | |
| background: rgba(30, 41, 59, 0.5); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| border-radius: 16px; | |
| padding: 24px; | |
| margin-bottom: 30px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .input-wrapper { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .prompt-input { | |
| flex: 1; | |
| background: rgba(15, 23, 42, 0.8); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| border-radius: 12px; | |
| padding: 16px 20px; | |
| color: #fff; | |
| font-size: 1rem; | |
| font-family: 'Manrope', sans-serif; | |
| transition: all 0.3s ease; | |
| } | |
| .prompt-input:focus { | |
| outline: none; | |
| border-color: #818cf8; | |
| box-shadow: 0 0 20px rgba(129, 140, 248, 0.2); | |
| } | |
| .prompt-input::placeholder { | |
| color: #64748b; | |
| } | |
| .generate-btn { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| border: none; | |
| border-radius: 12px; | |
| padding: 16px 32px; | |
| color: #fff; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| white-space: nowrap; | |
| } | |
| .generate-btn:hover:not(:disabled) { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4); | |
| } | |
| .generate-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .chat-history { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| margin-bottom: 30px; | |
| } | |
| .chat-message { | |
| display: flex; | |
| gap: 16px; | |
| padding: 20px; | |
| border-radius: 16px; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .user-message { | |
| background: rgba(99, 102, 241, 0.1); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| } | |
| .bot-message { | |
| background: rgba(30, 41, 59, 0.6); | |
| border: 1px solid rgba(148, 163, 184, 0.1); | |
| } | |
| .avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.2rem; | |
| } | |
| .user-avatar { | |
| background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); | |
| } | |
| .bot-avatar { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| } | |
| .message-content { | |
| flex: 1; | |
| } | |
| .message-content p { | |
| margin: 0; | |
| color: #e2e8f0; | |
| line-height: 1.6; | |
| } | |
| .image-container { | |
| margin-top: 16px; | |
| } | |
| .generated-image { | |
| max-width: 100%; | |
| width: 312px; | |
| height: auto; | |
| border-radius: 12px; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); | |
| } | |
| .scores-container { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .score-badge { | |
| background: rgba(15, 23, 42, 0.8); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| border-radius: 10px; | |
| padding: 12px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .score-label { | |
| font-size: 0.75rem; | |
| color: #94a3b8; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .score-value { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| background: linear-gradient(135deg, #818cf8 0%, #c084fc 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .loading-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 40px; | |
| } | |
| .loading-spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid rgba(99, 102, 241, 0.2); | |
| border-top-color: #818cf8; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| color: #94a3b8; | |
| font-size: 0.9rem; | |
| } | |
| .loading-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .loading-step { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: #64748b; | |
| font-size: 0.85rem; | |
| } | |
| .loading-step.active { | |
| color: #818cf8; | |
| } | |
| .loading-step.done { | |
| color: #10b981; | |
| } | |
| .step-icon { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| border: 2px solid currentColor; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.7rem; | |
| } | |
| .placeholder-container { | |
| text-align: center; | |
| padding: 60px 20px; | |
| background: rgba(30, 41, 59, 0.3); | |
| border: 2px dashed rgba(99, 102, 241, 0.3); | |
| border-radius: 20px; | |
| } | |
| .placeholder-icon { | |
| font-size: 4rem; | |
| margin-bottom: 16px; | |
| opacity: 0.5; | |
| } | |
| .placeholder-text { | |
| color: #64748b; | |
| font-size: 1.1rem; | |
| } | |
| .error-message { | |
| background: rgba(239, 68, 68, 0.1); | |
| border: 1px solid rgba(239, 68, 68, 0.3); | |
| border-radius: 12px; | |
| padding: 16px; | |
| color: #fca5a5; | |
| margin-top: 16px; | |
| } | |
| @media (max-width: 640px) { | |
| .header h1 { | |
| font-size: 1.75rem; | |
| } | |
| .input-wrapper { | |
| flex-direction: column; | |
| } | |
| .generate-btn { | |
| width: 100%; | |
| } | |
| .scores-container { | |
| flex-direction: column; | |
| } | |
| .score-badge { | |
| width: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container-main"> | |
| <div class="header"> | |
| <h1>✨ Text to Image Generator</h1> | |
| <p>Transform your imagination into stunning visuals using AI-powered image generation with quality evaluation</p> | |
| </div> | |
| <div align="center" style="margin-bottom: 20px; color: #fbbf24;"> | |
| ⚡ <strong>Note:</strong> Image generation may take 30-60 seconds depending on your hardware. Please be patient! | |
| </div> | |
| <div class="input-section"> | |
| <div class="input-wrapper"> | |
| <input | |
| type="text" | |
| class="prompt-input" | |
| id="chat-input" | |
| placeholder="Describe the image you want to create... (e.g., A majestic dragon flying over a crystal castle at sunset)" | |
| > | |
| <button id="generate-btn" class="generate-btn">Generate | |
| </button> | |
| </div> | |
| </div> | |
| <div id="chat-history" class="chat-history"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <div id="placeholder" class="placeholder-container"> | |
| <div class="placeholder-icon">🖼️</div> | |
| <p class="placeholder-text">Enter a prompt above to generate your first image</p> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.6.3.min.js" | |
| integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script> | |
| <script> | |
| $(document).ready(function() { | |
| const $chatHistory = $('#chat-history'); | |
| const $placeholder = $('#placeholder'); | |
| const $input = $('#chat-input'); | |
| const $btn = $('#generate-btn'); | |
| function generateImage() { | |
| const prompt = $input.val().trim(); | |
| if (!prompt) { | |
| alert('Please enter a prompt!'); | |
| return; | |
| } | |
| // Hide placeholder | |
| $placeholder.hide(); | |
| // Disable input | |
| $btn.prop('disabled', true).html('⏳ Generating...'); | |
| $input.prop('disabled', true); | |
| // Add user message | |
| const userMessage = ` | |
| <div class="chat-message user-message"> | |
| <div class="avatar user-avatar">👤</div> | |
| <div class="message-content"> | |
| <p>${escapeHtml(prompt)}</p> | |
| </div> | |
| </div> | |
| `; | |
| $chatHistory.append(userMessage); | |
| // Add loading message | |
| const loadingId = 'loading-' + Date.now(); | |
| const loadingMessage = ` | |
| <div class="chat-message bot-message" id="${loadingId}"> | |
| <div class="avatar bot-avatar">🤖</div> | |
| <div class="message-content"> | |
| <div class="loading-container"> | |
| <div class="loading-spinner"></div> | |
| <div class="loading-text">Creating your masterpiece...</div> | |
| <div class="loading-steps"> | |
| <div class="loading-step active" id="step1"> | |
| <span class="step-icon">1</span> | |
| <span>Processing prompt...</span> | |
| </div> | |
| <div class="loading-step" id="step2"> | |
| <span class="step-icon">2</span> | |
| <span>Generating image...</span> | |
| </div> | |
| <div class="loading-step" id="step3"> | |
| <span class="step-icon">3</span> | |
| <span>Evaluating quality...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| $chatHistory.append(loadingMessage); | |
| // Scroll to loading | |
| $('html, body').animate({ | |
| scrollTop: $(`#${loadingId}`).offset().top - 100 | |
| }, 300); | |
| // Simulate step progression | |
| setTimeout(() => { | |
| $('#step1').removeClass('active').addClass('done'); | |
| $('#step2').addClass('active'); | |
| }, 2000); | |
| setTimeout(() => { | |
| $('#step2').removeClass('active').addClass('done'); | |
| $('#step3').addClass('active'); | |
| }, 15000); | |
| // Clear input | |
| $input.val(''); | |
| // Make API call | |
| $.ajax({ | |
| type: "POST", | |
| url: "/", | |
| data: { 'prompt': prompt }, | |
| timeout: 300000, // 5 minute timeout | |
| success: function(data) { | |
| // Remove loading message | |
| $(`#${loadingId}`).remove(); | |
| if (data.error) { | |
| showError(data.error); | |
| return; | |
| } | |
| // Add result message | |
| const resultMessage = ` | |
| <div class="chat-message bot-message"> | |
| <div class="avatar bot-avatar">🤖</div> | |
| <div class="message-content"> | |
| <p>Here's your generated image! 🎉</p> | |
| <div class="image-container"> | |
| <img src="data:image/png;base64,${data.image_base64}" alt="Generated image" class="generated-image"> | |
| </div> | |
| <div class="scores-container"> | |
| <div class="score-badge"> | |
| <span class="score-label">CLIP Score</span> | |
| <span class="score-value">${data.clip_score}</span> | |
| </div> | |
| <div class="score-badge"> | |
| <span class="score-label">GenEval Score</span> | |
| <span class="score-value">${data.geneval_score}</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| $chatHistory.append(resultMessage); | |
| // Scroll to result | |
| $('html, body').animate({ | |
| scrollTop: $(document).height() | |
| }, 300); | |
| }, | |
| error: function(xhr, status, error) { | |
| $(`#${loadingId}`).remove(); | |
| let errorMsg = 'An error occurred while generating the image.'; | |
| if (status === 'timeout') { | |
| errorMsg = xhr.responseJSON.error + 'Request timed out. The server might be overloaded.'; | |
| } else if (xhr.responseJSON && xhr.responseJSON.error) { | |
| errorMsg = xhr.responseJSON.error; | |
| } | |
| showError(errorMsg); | |
| }, | |
| complete: function() { | |
| // Re-enable input | |
| $btn.prop('disabled', false).html('Generate'); | |
| $input.prop('disabled', false).focus(); | |
| } | |
| }); | |
| } | |
| function showError(message) { | |
| const errorMessage = ` | |
| <div class="chat-message bot-message"> | |
| <div class="avatar bot-avatar">🤖</div> | |
| <div class="message-content"> | |
| <div class="error-message"> | |
| ❌ ${escapeHtml(message)} | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| $chatHistory.append(errorMessage); | |
| } | |
| function escapeHtml(text) { | |
| const div = document.createElement('div'); | |
| div.textContent = text; | |
| return div.innerHTML; | |
| } | |
| // Event listeners | |
| $btn.click(generateImage); | |
| $input.keypress(function(e) { | |
| if (e.which === 13) { | |
| generateImage(); | |
| } | |
| }); | |
| // Focus input on page load | |
| $input.focus(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |