Spaces:
Sleeping
Sleeping
| <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; | |
| } | |
| </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> |