TextToImage

Running

App Files Files Community

adminuser742150 commited on Jun 7, 2025

Commit

7d8ac56

verified ·

1 Parent(s): a2814c1

Update index.html

Browse files

Files changed (1) hide show

index.html +17 -71

index.html CHANGED Viewed

@@ -2,10 +2,9 @@
 <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;
@@ -14,6 +13,10 @@
       --accent-color: #4ade80;
     }
     body {
       margin: 0;
       background: var(--bg-color);
@@ -75,45 +78,16 @@
     #gallery {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(300px, 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%;
-      aspect-ratio: 16 / 9;
-      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 {
@@ -145,7 +119,7 @@
 <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 (YouTube-ready size) and download them</p>
     <div class="input-area">
       <input id="prompt" type="text" placeholder="E.g. astronaut riding a unicorn in space" />
@@ -154,7 +128,6 @@
     <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>
@@ -166,11 +139,9 @@
       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.";
@@ -185,17 +156,13 @@
         });
         const data = await res.json();
-        const images = (data.images || []).slice(0, 4);
         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.";
@@ -204,27 +171,6 @@
         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>

 <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" />
   <style>
     :root {
       --bg-color: #121212;
       --accent-color: #4ade80;
     }
+    * {
+      box-sizing: border-box;
+    }
     body {
       margin: 0;
       background: var(--bg-color);
     #gallery {
       display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
       margin-top: 2rem;
     }
+    #gallery img {
       width: 100%;
+      border-radius: 10px;
       object-fit: cover;
+      cursor: pointer;
     }
     .loader {
 <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</p>
     <div class="input-area">
       <input id="prompt" type="text" placeholder="E.g. astronaut riding a unicorn in space" />
     <div id="gallery"></div>
     <div class="loader" id="loader"></div>
     <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>
       const prompt = document.getElementById("prompt").value.trim();
       const gallery = document.getElementById("gallery");
       const loader = document.getElementById("loader");
       gallery.innerHTML = "";
       loader.textContent = "Generating images... Please wait.";
       if (!prompt) {
         loader.textContent = "Please enter a prompt.";
         });
         const data = await res.json();
+        const images = (data.images || []).slice(0, 4); // Limit to 4 images
         if (images.length > 0) {
+          gallery.innerHTML = images.map((img, index) => {
+            const imgSrc = `data:image/png;base64,${img}`;
+            return `<a href="${imgSrc}" download="image_${index + 1}.png"><img src="${imgSrc}" alt="Generated Image" /></a>`;
+          }).join("");
           loader.textContent = "";
         } else {
           loader.textContent = "No images returned. Try a different prompt.";
         loader.textContent = "Error: Server busy or unreachable. Try again later.";
       }
     }
   </script>
 </body>
 </html>