Spaces:
Paused
Paused
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Imagine | TaskBot v1+ AI</title> | |
| </head> | |
| <style> | |
| body { | |
| background-color: #2f2f2f; | |
| font-family: Arial, sans-serif; | |
| color: white; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| input { | |
| width: 100%; | |
| height: 26px; | |
| border-radius: 50px; | |
| text-align: center; | |
| justify-content: center; | |
| } | |
| #image { | |
| text-align: center; | |
| border: 1px solid white; | |
| padding: 10px; | |
| margin: 20px auto; | |
| height: 400px; | |
| width: 400px; | |
| } | |
| #inputWrapper { | |
| text-align: center; | |
| margin: 20px auto; | |
| bottom: 20px; | |
| } | |
| button { | |
| background-color: black; | |
| color: greenyellow; | |
| height: 50px | |
| } | |
| @media (max-width: 768px) { | |
| #image { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| input { | |
| width: 80%; | |
| } | |
| } | |
| small { | |
| color: gray; | |
| text-align: center; | |
| display: block; | |
| } | |
| h1 { | |
| text-align: center; | |
| } | |
| @keyframes color-change { | |
| 0% { | |
| background-color: red; | |
| } | |
| 20% { | |
| background-color: blue; | |
| } | |
| 40% { | |
| background-color: rgb(0, 255, 0); | |
| } | |
| 60% { | |
| background-color: aqua; | |
| } | |
| 80% { | |
| background-color: yellow; | |
| } | |
| 100% { | |
| background-color: red; | |
| } | |
| } | |
| .color_change { | |
| animation: color-change 4s infinite; | |
| } | |
| </style> | |
| <div> | |
| <h1>Image Generator</h1><br> | |
| <small>Powered by gemini-2.0-flash-preview-image-generation</small><br><br> | |
| <br> | |
| <div id="image"> | |
| <img src="" id="generated_image" style="max-width: 400px;" alt="Generated Image"><br><br><br> | |
| </div> | |
| <div id="inputWrapper"> | |
| <input type="text" id="contents" placeholder="Enter your prompt..."><br><br><br> | |
| <button onclick="generate()" id="generate_button">Generate Image</button> | |
| </div> | |
| </body> | |
| <script> | |
| async function generate() { | |
| document.getElementById("generate_button").disabled = true | |
| document.getElementById("image").classList.add("color_change"); | |
| document.getElementById("image").src = ""; | |
| const contents = document.getElementById("contents").value; | |
| const response = await fetch("/imagine", { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/x-www-form-urlencoded" | |
| }, | |
| body: new URLSearchParams({ contents }) | |
| }); | |
| if (response.ok) { | |
| const blob = await response.blob(); | |
| const imgUrl = URL.createObjectURL(blob); | |
| document.getElementById("generated_image").src = imgUrl; | |
| document.getElementById("image").classList.remove("color_change") | |
| document.getElementById("image").style.border = "none"; | |
| document.getElementById("generate_button").disabled = false | |
| } else { | |
| console.error("Error generating image:", response.statusText); | |
| } | |
| } | |
| document.getElementById("contents").addEventListener("keypress", (event) => { | |
| if (event.key === "Enter") { | |
| generate() | |
| } | |
| }) | |
| </script> | |
| </html> |