Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Generation UI</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #f0f0f0; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| img.logo { | |
| max-width: 150px; | |
| margin-bottom: 20px; | |
| } | |
| select, input, button { | |
| margin: 10px; | |
| padding: 8px; | |
| font-size: 16px; | |
| border-radius: 4px; | |
| border: 1px solid #ccc; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: white; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| #prompt { | |
| width: 300px; | |
| } | |
| #output { | |
| margin-top: 20px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .output-image { | |
| max-width: 200px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| .error { | |
| color: red; | |
| margin-top: 10px; | |
| } | |
| .loading { | |
| display: none; | |
| margin-top: 10px; | |
| font-style: italic; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="/assets/logo.png" alt="Logo" class="logo"> | |
| <h1>Image Generation UI</h1> | |
| <div> | |
| <label for="model-select">Select Model:</label> | |
| <select id="model-select"> | |
| <option value="ssd-1b">SSD-1B</option> | |
| <option value="sd-v1-5">Stable Diffusion v1-5</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="ratio-select">Image Ratio:</label> | |
| <select id="ratio-select"> | |
| <option value="1:1">1:1</option> | |
| <option value="3:4">3:4</option> | |
| <option value="16:9">16:9</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="num-images">Number of Images (1-4):</label> | |
| <input type="number" id="num-images" min="1" max="4" value="1"> | |
| </div> | |
| <div> | |
| <label for="prompt">Prompt:</label> | |
| <input type="text" id="prompt" placeholder="Enter your prompt"> | |
| </div> | |
| <div> | |
| <label for="guidance-scale">Guidance Scale:</label> | |
| <input type="number" id="guidance-scale" min="1" max="20" step="0.5" value="7.5"> | |
| </div> | |
| <button onclick="generateImages()">Generate Images</button> | |
| <div id="loading" class="loading">Generating images, please wait...</div> | |
| <div id="error" class="error"></div> | |
| <div id="output"></div> | |
| </div> | |
| <script> | |
| async function generateImages() { | |
| const model = document.getElementById('model-select').value; | |
| const ratio = document.getElementById('ratio-select').value; | |
| const numImages = document.getElementById('num-images').value; | |
| const prompt = document.getElementById('prompt').value; | |
| const guidanceScale = document.getElementById('guidance-scale').value; | |
| const outputDiv = document.getElementById('output'); | |
| const errorDiv = document.getElementById('error'); | |
| const loadingDiv = document.getElementById('loading'); | |
| outputDiv.innerHTML = ''; | |
| errorDiv.innerText = ''; | |
| loadingDiv.style.display = 'block'; | |
| try { | |
| const response = await fetch('/generate', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| model, | |
| prompt, | |
| ratio, | |
| num_images: numImages, | |
| guidance_scale: guidanceScale | |
| }) | |
| }); | |
| loadingDiv.style.display = 'none'; | |
| const data = await response.json(); | |
| if (response.ok) { | |
| data.images.forEach(imgSrc => { | |
| const img = document.createElement('img'); | |
| img.src = imgSrc; | |
| img.className = 'output-image'; | |
| outputDiv.appendChild(img); | |
| }); | |
| } else { | |
| errorDiv.innerText = data.error || 'Failed to generate images'; | |
| } | |
| } catch (error) { | |
| loadingDiv.style.display = 'none'; | |
| errorDiv.innerText = 'Error: ' + error.message; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |