Spaces:
Running
on
Zero
Running
on
Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Image Generator</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: system-ui, -apple-system, sans-serif; | |
| } | |
| body { | |
| background: #f9fafb; | |
| min-height: 100vh; | |
| padding: 2rem; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| color: #4f46e5; | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| .description { | |
| color: #6b7280; | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| animation: fadeIn 0.5s ease-in 0.2s backwards; | |
| } | |
| .iframe-container { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 1rem; | |
| box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); | |
| margin-bottom: 2rem; | |
| animation: slideUp 0.5s ease-out 0.4s backwards; | |
| } | |
| iframe { | |
| width: 100%; | |
| border: none; | |
| border-radius: 0.5rem; | |
| background: white; | |
| } | |
| .tips { | |
| background: #f0f9ff; | |
| padding: 1.5rem; | |
| border-radius: 0.5rem; | |
| margin-top: 2rem; | |
| border: 1px solid #bae6fd; | |
| animation: fadeIn 0.5s ease-in 0.6s backwards; | |
| } | |
| .tips h2 { | |
| color: #0369a1; | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| } | |
| .tips ul { | |
| list-style-position: inside; | |
| color: #0c4a6e; | |
| } | |
| .tips li { | |
| margin-bottom: 0.5rem; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @media (max-width: 900px) { | |
| body { | |
| padding: 1rem; | |
| } | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .iframe-container { | |
| padding: 1rem; | |
| } | |
| iframe { | |
| height: 600px; | |
| } | |
| } | |
| .loader { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 450px; | |
| background: #f9fafb; | |
| border-radius: 0.5rem; | |
| } | |
| .loader-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid #4f46e5; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>AI Image Generator</h1> | |
| <p class="description">Create amazing AI-generated images with Stable Diffusion</p> | |
| <p class="description">Powered by Black Forest Labs</p> | |
| </header> | |
| <main> | |
| <div class="iframe-container"> | |
| <div id="loader" class="loader"> | |
| <div class="loader-spinner"></div> | |
| </div> | |
| <iframe | |
| id="generatorFrame" | |
| src="https://black-forest-labs-flux-1-dev.hf.space" | |
| frameborder="0" | |
| width="850" | |
| height="450" | |
| style="display: none;" | |
| onload="frameLoaded()" | |
| ></iframe> | |
| </div> | |
| <div class="tips"> | |
| <h2>Tips for Best Results</h2> | |
| <ul> | |
| <li>Be specific in your descriptions - include details about style, mood, and composition</li> | |
| <li>Try adding artistic styles like "oil painting", "watercolor", or "digital art"</li> | |
| <li>Include lighting descriptions like "sunset", "studio lighting", or "moonlight"</li> | |
| <li>Experiment with different perspectives: "close-up", "aerial view", or "wide angle"</li> | |
| <li>Add quality enhancers like "highly detailed", "4K", or "professional photography"</li> | |
| </ul> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| function frameLoaded() { | |
| const frame = document.getElementById('generatorFrame'); | |
| const loader = document.getElementById('loader'); | |
| // Hide loader and show iframe | |
| loader.style.display = 'none'; | |
| frame.style.display = 'block'; | |
| // Adjust iframe height for mobile | |
| if (window.innerWidth <= 900) { | |
| frame.style.height = '600px'; | |
| } | |
| } | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| const frame = document.getElementById('generatorFrame'); | |
| if (window.innerWidth <= 900) { | |
| frame.style.height = '600px'; | |
| } else { | |
| frame.style.height = '450px'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |