Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LE-3 Models</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background: #000000; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Landing Page Styles */ | |
| .landing-page { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| text-align: center; | |
| color: white; | |
| position: relative; | |
| } | |
| .logo-container { | |
| margin-bottom: 30px; | |
| animation: fadeInUp 1s ease-out; | |
| } | |
| .logo { | |
| width: 200px; | |
| height: 200px; | |
| object-fit: contain; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(255,255,255,0.3); | |
| background: black; | |
| padding: 20px; | |
| } | |
| .hero-title { | |
| font-size: 3.5em; | |
| font-weight: bold; | |
| margin-bottom: 20px; | |
| text-shadow: 2px 2px 4px rgb(255, 255, 255); | |
| animation: fadeInUp 1s ease-out 0.3s both; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.3em; | |
| margin-bottom: 40px; | |
| opacity: 0.9; | |
| animation: fadeInUp 1s ease-out 0.6s both; | |
| } | |
| .start-button { | |
| background: #ffffff; | |
| color: #000000; | |
| border: 2px solid #ffffff; | |
| padding: 20px 50px; | |
| font-size: 1.2em; | |
| font-weight: bold; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| box-shadow: 0 10px 30px rgba(255,255,255,0.3); | |
| transition: all 0.3s ease; | |
| animation: fadeInUp 1s ease-out 0.9s both; | |
| } | |
| .start-button:hover { | |
| background: #000000; | |
| color: #ffffff; | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 40px rgba(255,255,255,0.4); | |
| } | |
| /* Image Gallery Styles */ | |
| .gallery-container { | |
| margin-top: 80px; | |
| width: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .gallery-row { | |
| display: flex; | |
| width: 200%; | |
| animation-timing-function: linear; | |
| animation-iteration-count: infinite; | |
| } | |
| .gallery-row.row-1 { | |
| animation: scrollRight 20s linear infinite; | |
| margin-bottom: 20px; | |
| } | |
| .gallery-row.row-2 { | |
| animation: scrollLeft 25s linear infinite; | |
| } | |
| .gallery-image { | |
| width: 150px; | |
| height: 150px; | |
| object-fit: cover; | |
| border-radius: 15px; | |
| margin: 0 15px; | |
| box-shadow: 0 5px 15px rgba(255,255,255,0.3); | |
| transition: transform 0.3s ease; | |
| } | |
| .gallery-image:hover { | |
| transform: scale(1.1); | |
| } | |
| /* Animation Keyframes */ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes scrollRight { | |
| 0% { | |
| transform: translateX(-100%); | |
| } | |
| 100% { | |
| transform: translateX(0); | |
| } | |
| } | |
| @keyframes scrollLeft { | |
| 0% { | |
| transform: translateX(0); | |
| } | |
| 100% { | |
| transform: translateX(-100%); | |
| } | |
| } | |
| /* Generation UI Styles */ | |
| .generation-ui { | |
| display: none; | |
| min-height: 100vh; | |
| background: #000000; | |
| padding: 20px; | |
| } | |
| .header { | |
| background: #ffffff; | |
| color: #000000; | |
| padding: 20px; | |
| border-radius: 15px; | |
| box-shadow: 0 5px 20px rgba(255,255,255,0.1); | |
| margin-bottom: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .header-logo { | |
| width: 60px; | |
| height: 60px; | |
| object-fit: contain; | |
| } | |
| .back-button { | |
| background: #000000; | |
| color: #ffffff; | |
| border: 2px solid #000000; | |
| padding: 10px 20px; | |
| border-radius: 25px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: all 0.3s ease; | |
| } | |
| .back-button:hover { | |
| background: #ffffff; | |
| color: #000000; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| background: #ffffff; | |
| color: #000000; | |
| padding: 40px; | |
| border-radius: 20px; | |
| box-shadow: 0 10px 30px rgba(255,255,255,0.1); | |
| } | |
| h1 { | |
| color: #000000; | |
| margin-bottom: 30px; | |
| font-size: 2.5em; | |
| text-align: center; | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| text-align: left; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: bold; | |
| color: #000000; | |
| } | |
| select, input, button { | |
| width: 100%; | |
| padding: 15px; | |
| font-size: 16px; | |
| border-radius: 10px; | |
| border: 2px solid #000000; | |
| background: #ffffff; | |
| color: #000000; | |
| transition: border-color 0.3s ease; | |
| } | |
| select:focus, input:focus { | |
| outline: none; | |
| border-color: #000000; | |
| box-shadow: 0 0 0 3px rgba(0,0,0,0.1); | |
| } | |
| .generate-button { | |
| background: #000000; | |
| color: #ffffff; | |
| border: 2px solid #000000; | |
| cursor: pointer; | |
| font-weight: bold; | |
| margin-top: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .generate-button:hover { | |
| background: #ffffff; | |
| color: #000000; | |
| transform: translateY(-2px); | |
| } | |
| #prompt { | |
| min-height: 100px; | |
| resize: vertical; | |
| } | |
| #output { | |
| margin-top: 30px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 20px; | |
| } | |
| .output-image { | |
| max-width: 250px; | |
| border-radius: 15px; | |
| box-shadow: 0 10px 25px rgba(255,255,255,0.2); | |
| transition: transform 0.3s ease; | |
| } | |
| .output-image:hover { | |
| transform: scale(1.05); | |
| } | |
| .error { | |
| color: #ffffff; | |
| background: #000000; | |
| margin-top: 15px; | |
| padding: 15px; | |
| border-radius: 10px; | |
| border: 2px solid #ffffff; | |
| } | |
| .loading { | |
| display: none; | |
| margin-top: 20px; | |
| text-align: center; | |
| font-style: italic; | |
| color: #ffffff; | |
| font-size: 1.1em; | |
| } | |
| .loading::after { | |
| content: ''; | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid #ffffff; | |
| border-top: 3px solid transparent; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-left: 10px; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .hero-title { | |
| font-size: 2.5em; | |
| } | |
| .logo { | |
| width: 150px; | |
| height: 150px; | |
| } | |
| .container { | |
| padding: 20px; | |
| } | |
| .gallery-image { | |
| width: 100px; | |
| height: 100px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Landing Page --> | |
| <div id="landing-page" class="landing-page"> | |
| <div class="logo-container"> | |
| <img src="/assets/logo.png" alt="AI Studio Logo" class="logo"> | |
| </div> | |
| <h1 class="hero-title"></h1> | |
| <p class="hero-subtitle"></p> | |
| <button class="start-button" onclick="showGenerationUI()">Start Creating</button> | |
| <!-- Image Gallery --> | |
| <div class="gallery-container"> | |
| <div class="gallery-row row-1"> | |
| <img src="/assets/image (1).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (2).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (3).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (4).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (5).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (6).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (7).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (8).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (9).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (10).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (11).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (12).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (13).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (14).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (15).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (16).png" alt="Gallery Image" class="gallery-image"> | |
| </div> | |
| <div class="gallery-row row-2"> | |
| <img src="/assets/image (1).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (2).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (3).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (4).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (5).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (6).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (7).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (8).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (9).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (10).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (11).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (12).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (13).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (14).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (15).png" alt="Gallery Image" class="gallery-image"> | |
| <img src="/assets/image (16).png" alt="Gallery Image" class="gallery-image"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generation UI --> | |
| <div id="generation-ui" class="generation-ui"> | |
| <div class="header"> | |
| <img src="/assets/logo.png" alt="Logo" class="header-logo"> | |
| <h2>AI Image Generation Studio</h2> | |
| <button class="back-button" onclick="showLandingPage()">← Back to Home</button> | |
| </div> | |
| <div class="container"> | |
| <h1>Create Your Images</h1> | |
| <div class="form-group"> | |
| <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 class="form-group"> | |
| <label for="ratio-select">Image Ratio:</label> | |
| <select id="ratio-select"> | |
| <option value="1:1">1:1 (Square)</option> | |
| <option value="3:4">3:4 (Portrait)</option> | |
| <option value="16:9">16:9 (Landscape)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="num-images">Number of Images (1-4):</label> | |
| <input type="number" id="num-images" min="1" max="4" value="1"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="prompt">Describe your image:</label> | |
| <textarea id="prompt" placeholder="Enter a detailed description of the image you want to generate..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="guidance-scale">Guidance Scale (1-20):</label> | |
| <input type="number" id="guidance-scale" min="1" max="20" step="0.5" value="7.5"> | |
| </div> | |
| <button class="generate-button" onclick="generateImages()">Generate Images</button> | |
| <div id="loading" class="loading">Generating your images, please wait...</div> | |
| <div id="error" class="error"></div> | |
| <div id="output"></div> | |
| </div> | |
| </div> | |
| <script> | |
| function showGenerationUI() { | |
| document.getElementById('landing-page').style.display = 'none'; | |
| document.getElementById('generation-ui').style.display = 'block'; | |
| } | |
| function showLandingPage() { | |
| document.getElementById('generation-ui').style.display = 'none'; | |
| document.getElementById('landing-page').style.display = 'flex'; | |
| } | |
| 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'); | |
| if (!prompt.trim()) { | |
| errorDiv.innerText = 'Please enter a prompt to generate images.'; | |
| return; | |
| } | |
| 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'; | |
| img.alt = 'Generated Image'; | |
| outputDiv.appendChild(img); | |
| }); | |
| } else { | |
| errorDiv.innerText = data.error || 'Failed to generate images. Please try again.'; | |
| } | |
| } catch (error) { | |
| loadingDiv.style.display = 'none'; | |
| errorDiv.innerText = 'Error: ' + error.message; | |
| } | |
| } | |
| // Add some interactive effects | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Add parallax effect to gallery images | |
| const galleryImages = document.querySelectorAll('.gallery-image'); | |
| galleryImages.forEach(img => { | |
| img.addEventListener('mouseenter', function() { | |
| this.style.animationPlayState = 'paused'; | |
| }); | |
| img.addEventListener('mouseleave', function() { | |
| this.style.animationPlayState = 'running'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |