TextToImage

Running

App Files Files Community

adminuser742150 commited on Jun 7, 2025

Commit

21f0344

verified ·

1 Parent(s): de4a1e3

Update index.html

Browse files

Files changed (1) hide show

index.html +139 -67

index.html CHANGED Viewed

@@ -2,96 +2,166 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <title>DALL·E Mini by Craiyon</title>
-  <!-- Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|IBM+Plex+Mono&display=swap" rel="stylesheet" />
-  <!-- Styles -->
-  <style>
     body {
       margin: 0;
-      font-family: "Source Sans Pro", sans-serif;
-      background: #f5f5f5;
     }
     .container {
-      max-width: 800px;
       margin: auto;
-      padding: 20px;
     }
-    h1, h2, p, center {
       text-align: center;
     }
     #screenshot {
       display: none;
-      margin: 10px auto;
-      padding: 10px;
-      width: 100%;
-      max-width: 200px;
     }
-    footer a {
-      color: #999 !important;
     }
-    footer img {
-      display: none !important;
     }
-  </style>
-  <!-- Gradio App Configuration -->
-  <script>
-    window.__gradio_mode__ = "app";
-  </script>
-  <!-- Load Gradio v3 App -->
-  <script type="module" crossorigin src="https://gradio.s3-us-west-2.amazonaws.com/3.0.26/assets/index.8eca4ae7.js"></script>
-  <link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/3.0.26/assets/index.cbea297d.css" />
-  <!-- html2canvas for screenshots -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" integrity="sha512-BNaPnfnzQ07hMPYIMz3EqzSc1VVm4ZzCDMQtXwOPlJKHnp4h7CMqvoSCk1QnXClQvUOJwSv6+FLpRSl5Is3gDA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </head>
 <body>
-  <div id="root" class="container">
-    <h1>DALL·E mini by <a href="https://www.craiyon.com/" target="_blank">craiyon.com</a></h1>
-    <p>AI model generating images from any prompt!</p>
-    <div style="display: flex; gap: 10px; justify-content: center; margin-top: 20px;">
-      <input id="prompt" type="text" placeholder="Enter your prompt" style="width: 60%;" />
-      <button onclick="runPrompt()">Run</button>
     </div>
-    <div id="gallery" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px;"></div>
     <button id="screenshot" onclick="captureScreenshot()">Download Screenshot</button>
-    <details style="margin-top: 30px;">
-      <summary><strong>Bias and Limitations</strong></summary>
-      <p style="font-size: small;">
-        While the capabilities of image generation models are impressive, they may also reinforce or exacerbate societal biases. Learn more in the
-        <a href="https://huggingface.co/dalle-mini/dalle-mini" target="_blank">model card</a>.
-      </p>
-    </details>
-    <p>DALL·E mini is migrating to 🖍️ <a href="https://www.craiyon.com/" target="_blank">craiyon.com</a></p>
-    <footer style="margin-top: 20px; text-align: center;">
-      Created by <a href="https://twitter.com/borisdayma" target="_blank">Boris Dayma</a> et al. (2021-2022) <br />
-      <a href="https://github.com/borisdayma/dalle-mini" target="_blank">GitHub</a> |
-      <a href="https://wandb.ai/dalle-mini/dalle-mini/reports/DALL-E-mini-Generate-images-from-any-text-prompt--VmlldzoyMDE4NDAy" target="_blank">Project Report</a> <br />
-      Powered by Google <a href="https://sites.research.google/trc/" target="_blank">TPU Research Cloud</a>
     </footer>
   </div>
   <script>
     async function runPrompt() {
-      const prompt = document.getElementById("prompt").value;
       const gallery = document.getElementById("gallery");
-      const button = document.getElementById("screenshot");
-      button.style.display = "none";
-      gallery.innerHTML = "Loading...";
       try {
         const res = await fetch("https://bf.dallemini.ai/generate", {
@@ -103,15 +173,17 @@
         const data = await res.json();
         const images = data.images || [];
-        gallery.innerHTML = images.map(img =>
-          `<img src="data:image/png;base64,${img}" style="width: 100%;" />`
-        ).join("");
-        button.style.display = "block";
-      } catch (err) {
-        alert("Too much traffic or error. Try again later.");
-        gallery.innerHTML = "Failed to generate images.";
-        button.style.display = "none";
       }
     }

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DALL·E Mini Modern UI</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;
+    }
+    * {
+      box-sizing: border-box;
+    }
     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(180px, 1fr));
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+    #gallery img {
+      width: 100%;
+      border-radius: 10px;
+      object-fit: cover;
     }
     #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>Type your prompt and generate AI images in seconds</p>
+    <div class="input-area">
+      <input id="prompt" type="text" placeholder="E.g. futuristic city made of candy" />
+      <button onclick="runPrompt()">Generate Images</button>
     </div>
+    <div id="gallery"></div>
+    <div class="loader" id="loader"></div>
     <button id="screenshot" onclick="captureScreenshot()">Download Screenshot</button>
+    <footer>
+      Made 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", {
         const data = await res.json();
         const images = data.images || [];
+        if (images.length > 0) {
+          gallery.innerHTML = images.map(img =>
+            `<img src="data:image/png;base64,${img}" alt="Generated Image" />`
+          ).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.";
       }
     }