Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>DALL·E Mini - 4 Image Generator</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"/> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <style> | |
| :root { | |
| --bg-color: #121212; | |
| --card-color: #1e1e1e; | |
| --text-color: #f0f0f0; | |
| --accent-color: #4ade80; | |
| } | |
| body { | |
| margin: 0; | |
| background: var(--bg-color); | |
| color: var(--text-color); | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .container { | |
| max-width: 960px; | |
| margin: auto; | |
| padding: 2rem; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| p { | |
| text-align: center; | |
| font-size: 1rem; | |
| color: #ccc; | |
| } | |
| .input-area { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin: 2rem 0; | |
| align-items: center; | |
| } | |
| input[type="text"] { | |
| padding: 0.8rem 1rem; | |
| border: none; | |
| border-radius: 8px; | |
| width: 100%; | |
| max-width: 600px; | |
| font-size: 1rem; | |
| background: #2a2a2a; | |
| color: var(--text-color); | |
| } | |
| button { | |
| padding: 0.8rem 1.5rem; | |
| background: var(--accent-color); | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| color: #000; | |
| cursor: pointer; | |
| transition: 0.3s ease; | |
| } | |
| button:hover { | |
| background: #22c55e; | |
| } | |
| #gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .image-card { | |
| background: var(--card-color); | |
| border-radius: 10px; | |
| padding: 1rem; | |
| text-align: center; | |
| } | |
| .image-card img { | |
| width: 100%; | |
| border-radius: 8px; | |
| object-fit: cover; | |
| } | |
| .image-card button { | |
| margin-top: 0.8rem; | |
| width: 100%; | |
| background: #3b82f6; | |
| color: white; | |
| } | |
| .image-card button:hover { | |
| background: #2563eb; | |
| } | |
| #screenshot { | |
| display: none; | |
| margin: 2rem auto; | |
| background: #3b82f6; | |
| color: white; | |
| } | |
| #screenshot:hover { | |
| background: #2563eb; | |
| } | |
| .loader { | |
| text-align: center; | |
| font-size: 1rem; | |
| color: #999; | |
| margin-top: 2rem; | |
| } | |
| footer { | |
| margin-top: 3rem; | |
| text-align: center; | |
| font-size: 0.85rem; | |
| color: #888; | |
| } | |
| a { | |
| color: var(--accent-color); | |
| text-decoration: none; | |
| } | |
| @media (max-width: 500px) { | |
| input[type="text"] { | |
| width: 90%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>DALL·E Mini by <a href="https://www.craiyon.com/" target="_blank">Craiyon</a></h1> | |
| <p>Generate 4 AI images instantly and download them</p> | |
| <div class="input-area"> | |
| <input id="prompt" type="text" placeholder="E.g. astronaut riding a unicorn in space" /> | |
| <button onclick="runPrompt()">Generate Images</button> | |
| </div> | |
| <div id="gallery"></div> | |
| <div class="loader" id="loader"></div> | |
| <button id="screenshot" onclick="captureScreenshot()">Download All as Screenshot</button> | |
| <footer> | |
| Built by <a href="https://twitter.com/borisdayma" target="_blank">Boris Dayma</a> • Powered by <a href="https://www.craiyon.com/" target="_blank">Craiyon</a> | |
| </footer> | |
| </div> | |
| <script> | |
| async function runPrompt() { | |
| const prompt = document.getElementById("prompt").value.trim(); | |
| const gallery = document.getElementById("gallery"); | |
| const loader = document.getElementById("loader"); | |
| const screenshotBtn = document.getElementById("screenshot"); | |
| gallery.innerHTML = ""; | |
| loader.textContent = "Generating images... Please wait."; | |
| screenshotBtn.style.display = "none"; | |
| if (!prompt) { | |
| loader.textContent = "Please enter a prompt."; | |
| return; | |
| } | |
| try { | |
| const res = await fetch("https://bf.dallemini.ai/generate", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ prompt }) | |
| }); | |
| const data = await res.json(); | |
| const images = (data.images || []).slice(0, 4); // Only 4 images | |
| if (images.length > 0) { | |
| gallery.innerHTML = images.map((img, i) => ` | |
| <div class="image-card"> | |
| <img src="data:image/png;base64,${img}" id="img-${i}" /> | |
| <button onclick="downloadImage('${img}', 'image-${i + 1}.png')">Download</button> | |
| </div> | |
| `).join(""); | |
| screenshotBtn.style.display = "block"; | |
| loader.textContent = ""; | |
| } else { | |
| loader.textContent = "No images returned. Try a different prompt."; | |
| } | |
| } catch (error) { | |
| loader.textContent = "Error: Server busy or unreachable. Try again later."; | |
| } | |
| } | |
| function downloadImage(base64, filename) { | |
| const a = document.createElement("a"); | |
| a.href = "data:image/png;base64," + base64; | |
| a.download = filename; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| } | |
| function captureScreenshot() { | |
| html2canvas(document.getElementById("gallery")).then(canvas => { | |
| const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); | |
| const a = document.createElement("a"); | |
| const now = new Date(); | |
| const filename = `dallemini_${now.toISOString().replace(/[:T]/g, "-").split(".")[0]}.png`; | |
| a.setAttribute("download", filename); | |
| a.setAttribute("href", image); | |
| a.click(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |