TextToImage

Running

App Files Files Community

adminuser742150 commited on Aug 25, 2025

Commit

32476aa

verified ·

1 Parent(s): bd95623

Update index.html

Browse files

Files changed (1) hide show

index.html +135 -141

index.html CHANGED Viewed

@@ -1,143 +1,137 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta
-			name="viewport"
-			content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
-		/>
-		<script>
-			window.__gradio_mode__ = "app";
-            window.gradio_config = {"version": "3.0.26\n", "mode": "blocks", "dev_mode": false, "components": [{"id": 1, "type": "column", "props": {"type": "column", "variant": "default", "visible": true, "style": {}}}, {"id": 2, "type": "markdown", "props": {"value": "<h1><center>DALL\u00b7E mini by <a href=\"https://www.craiyon.com/\" target=\"_blank\">craiyon.com</a></center></h1>", "name": "markdown", "visible": true, "style": {}}}, {"id": 3, "type": "markdown", "props": {"value": "<center>AI model generating images from any prompt!</center>", "name": "markdown", "visible": true, "style": {}}}, {"id": 4, "type": "group", "props": {"type": "group", "visible": true, "style": {}}}, {"id": 5, "type": "box", "props": {"type": "box", "visible": true, "style": {}}}, {"id": 6, "type": "row", "props": {"type": "row", "visible": true, "style": {"equal_height": true, "mobile_collapse": false}}}, {"id": 7, "type": "textbox", "props": {"lines": 1, "max_lines": 1, "value": "", "label": "Enter your prompt", "show_label": false, "name": "textbox", "visible": true, "elem_id": "prompt", "style": {"container": false}}}, {"id": 8, "type": "button", "props": {"value": "Run", "variant": "primary", "name": "button", "visible": true, "style": {}}}, {"id": 9, "type": "gallery", "props": {"value": [], "label": "Generated images", "show_label": false, "name": "gallery", "visible": true, "elem_id": "gallery", "style": {"grid": [3], "height": "auto"}}}, {"id": 10, "type": "column", "props": {"type": "column", "variant": "default", "visible": true, "style": {}}}, {"id": 11, "type": "button", "props": {"value": "Screenshot", "variant": "secondary", "name": "button", "visible": true, "elem_id": "screenshot", "style": {"full_width": true}}}, {"id": 12, "type": "markdown", "props": {"value": "<details>\n<summary>Bias and Limitations</summary>\n<p style='line-height: normal; font-size: small'>\nWhile the capabilities of image generation models are impressive, they may also reinforce or exacerbate societal biases. While the extent and nature of the biases of the DALL\u00b7E mini model have yet to be fully documented, given the fact that the model was trained on unfiltered data from the Internet, it may generate images that contain stereotypes against minority groups. Work to analyze the nature and extent of these limitations is ongoing, and will be documented in more detail in the <a href=\"https://huggingface.co/dalle-mini/dalle-mini\" target=\"_blank\">DALL\u00b7E mini model card</a>.\n</p>\n</details>", "name": "markdown", "visible": true, "style": {}}}, {"id": 13, "type": "markdown", "props": {"value": "<p style='text-align: center'>\nDALL\u00b7E mini is migrating to \ud83d\udd8d\ufe0f <a href=\"https://www.craiyon.com/\" target=\"_blank\">craiyon.com</a>\n</p>", "name": "markdown", "visible": true, "style": {}}}, {"id": 14, "type": "markdown", "props": {"value": "<hr />\n<p style='text-align: center'>\nCreated by <a href=\"https://twitter.com/borisdayma\" target=\"_blank\">Boris Dayma</a> et al. 2021-2022\n<br/>\n<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>\n<p style='text-align: center'>Powered by Google <a href=\"https://sites.research.google/trc/\" target=\"_blank\">TPU Research Cloud</a>\n</p>", "name": "markdown", "visible": true, "style": {}}}], "theme": "default", "css": ".container { max-width: 800px; margin: auto; }", "title": "Gradio", "enable_queue": false, "layout": {"id": 0, "children": [{"id": 1, "children": [{"id": 2}, {"id": 3}, {"id": 4, "children": [{"id": 5, "children": [{"id": 6, "children": [{"id": 7}, {"id": 8}]}]}, {"id": 9}]}]}, {"id": 10, "children": [{"id": 11}, {"id": 12}, {"id": 13}, {"id": 14}]}]}, "dependencies": [{"targets": [8], "trigger": "click", "inputs": [7], "outputs": [9], "backend_fn": false, "js": "\n        async (text) => {\n            try {\n                document.querySelector('#screenshot').style.display = 'none';\n                response = await fetch('https://bf.dallemini.ai/generate', {\n                    method: 'POST',\n                    headers: {\n                        'Accept': 'application/json',\n                        'Content-Type': 'application/json'\n                    },\n                    body: JSON.stringify({\n                        prompt: text\n                    })\n                });\n                response = await response.json()\n                let imgs = response.images.map(r => \"data:image/png;base64,\" + r)\n                document.querySelector('#screenshot').style.display = 'block';\n                return imgs\n            } catch (e) {\n                alert(\"Too much traffic, please try again.\")\n                IMG = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAOVBMVEXg4OB1dXXX19fd3d2EhIR9fX14eHjJycm2trbb29uurq6goKCZmZmIiIiBgYHNzc2np6e8vLySkpKXK8HrAAABuUlEQVR4nO3Z0bKCIBCAYQNFVCzr/R/2nHU6k8KpJi6wZf7vLu1id9gFhKYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAb249h7pzr5jD29uhospnlfNo4L+boiLKYyZ0iblKYiu/iNER3PTquD9npPgbB98Za0/twH59JVasMtzXo1m+iHny7PrwpysSuebgxCtmOTlkma121l/TFZR2UqXxEebxEO/87QZlZ3inpeCPzVftkojUyJp2OWVgKy23qSsbg8evitBSXkUjHzYN9Is0oeWoYkkUKazsxRYlYKa6ldFSfs7K/8tsnUSLrXHAuG1SOXpp5t1LEiQxSe33ZqDJIC4TdkziRJkRN9J1CXFlpIj7J9RvNSd0kiUj1zSVjyiKr4X5yTRIx0kYlY8oinbzfFSaJWFlJSsaUpZpEqimttNkTOpo9nX4TOqbfdEFM6FgQpW7c8OofSrYo1Wwaq9nG1/NhVc2nbj2HD821kuOgeg7o3hyZBj1Hpo9D7M3K+HeIrSmPeq4Vfl3ruOhpnly9vdyEfa1KLkPF7nr66GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPjcD13rCcC3ILx/AAAAAElFTkSuQmCC\"\n                document.querySelector('#screenshot').style.display = 'block';\n                return Array(9).fill(IMG)\n            }\n        }\n        ", "status_tracker": null, "queue": null, "api_name": null, "scroll_to_output": false, "show_progress": true}, {"targets": [11], "trigger": "click", "inputs": [], "outputs": [], "backend_fn": false, "js": "\n            () => {\n                const captureElement = document.getElementById(1)\n                let bg_color = getComputedStyle(document.querySelector(\"#root .container\"))[\"background-color\"]\n                captureElement.style.backgroundColor = bg_color;     \n                html2canvas(captureElement)\n                .then(canvas => {\n                    canvas.style.display = 'none'\n                    document.body.appendChild(canvas)\n                    return canvas\n                })\n                .then(canvas => {\n                    const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')\n                    const a = document.createElement('a')\n                    const date = new Date()\n                    const filename = `dallemini_${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}_${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}.png`\n                    a.setAttribute('download', filename)\n                    a.setAttribute('href', image)\n                    a.click()\n                    canvas.remove()\n                })\n            }\n        ", "status_tracker": null, "queue": null, "api_name": null, "scroll_to_output": false, "show_progress": true}]};
-        </script>
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link
-			rel="preconnect"
-			href="https://fonts.gstatic.com"
-			crossorigin="anonymous"
-		/>
-		<link
-			href="https://fonts.googleapis.com/css?family=Source Sans Pro"
-			rel="stylesheet"
-		/>
-		<link
-			href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
-			rel="stylesheet"
-		/>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
-        <script type="module" crossorigin src="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.8eca4ae7.js"></script>
-        <link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.cbea297d.css">
-        <style>
-            body {
-                min-height: 100vh;
-                margin: 0;
-                padding: 0;
-                display: flex;
-                flex-direction: column;
-                flex-grow: 1;
-                font-family: 'Source Sans Pro', 'Segoe UI', Arial, sans-serif;
-                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            }
-            #root {
-                display: flex;
-                flex-direction: column;
-                flex-grow: 1;
-                align-items: center;
-                justify-content: center;
-                min-height: 100vh;
-            }
-            .container {
-                background: #fff;
-                border-radius: 18px;
-                box-shadow: 0 4px 24px rgba(0,0,0,0.08);
-                padding: 2.5rem 2rem 2rem 2rem;
-                max-width: 800px;
-                margin: 2rem auto;
-                width: 100%;
-            }
-            input[type="text"], textarea {
-                width: 100%;
-                padding: 0.75rem 1rem;
-                border: 1px solid #e0e0e0;
-                border-radius: 8px;
-                font-size: 1rem;
-                margin-bottom: 1rem;
-                background: #f9fafb;
-                transition: border 0.2s;
-            }
-            input[type="text"]:focus, textarea:focus {
-                border: 1.5px solid #7b61ff;
-                outline: none;
-            }
-            button, #screenshot {
-                background: linear-gradient(90deg, #7b61ff 0%, #5eead4 100%);
-                color: #fff;
-                border: none;
-                border-radius: 8px;
-                padding: 0.75rem 1.5rem;
-                font-size: 1.1rem;
-                font-weight: 600;
-                cursor: pointer;
-                box-shadow: 0 2px 8px rgba(123,97,255,0.08);
-                transition: background 0.2s, transform 0.1s;
-                margin-bottom: 1rem;
-            }
-            button:hover, #screenshot:hover {
-                background: linear-gradient(90deg, #5eead4 0%, #7b61ff 100%);
-                transform: translateY(-2px) scale(1.03);
-            }
-            .gallery {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-                gap: 1.2rem;
-                margin-top: 1.5rem;
-            }
-            .gallery img {
-                width: 100%;
-                border-radius: 12px;
-                box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-                background: #f3f4f6;
-            }
-            .container > div > div {
-                padding: 0.5rem;
-            }
-            footer a {
-                color: rgb(156 163 175) !important;
-            }
-            footer img {
-                display: none !important;
-            }
-        </style>
-        <style id="mofo">
-        body {
-            display: none !important;
-        }
-        </style>
-        <script type="text/javascript">
-        if (self === top || window.location.ancestorOrigins[0] === "https://huggingface.co") {
-            var mofo = document.getElementById("mofo");
-            mofo.parentNode.removeChild(mofo);
-        } else {
-            top.location = self.location;
-        }
-        </script>
-	</head>
-	<body
-		style="
-			margin: 0;
-			padding: 0;
-			display: flex;
-			flex-direction: column;
-			flex-grow: 1;
-		"
-	>
-		<div
-			id="root"
-			style="display: flex; flex-direction: column; flex-grow: 1"
-		></div>
-        <script src="html2canvas.js"></script>
-	</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>DALL·E Mini Generator</title>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: "Source Sans Pro", sans-serif;
+      background: linear-gradient(135deg, #ece9f7 0%, #d4f1f9 100%);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+    }
+    .container {
+      background: #fff;
+      border-radius: 16px;
+      padding: 2rem;
+      box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
+      max-width: 700px;
+      width: 100%;
+      text-align: center;
+    }
+    h1 {
+      margin-bottom: 0.5rem;
+      font-size: 1.8rem;
+      color: #333;
+    }
+    p {
+      margin-bottom: 1.5rem;
+      font-size: 1rem;
+      color: #666;
+    }
+    input {
+      width: 100%;
+      padding: 0.8rem 1rem;
+      border-radius: 10px;
+      border: 1px solid #ddd;
+      margin-bottom: 1rem;
+      font-size: 1rem;
+      background: #fafafa;
+    }
+    input:focus {
+      outline: none;
+      border-color: #7b61ff;
+      box-shadow: 0 0 0 2px rgba(123, 97, 255, 0.2);
+    }
+    button {
+      background: linear-gradient(90deg, #7b61ff, #5eead4);
+      border: none;
+      color: white;
+      font-size: 1rem;
+      font-weight: 600;
+      padding: 0.8rem 1.6rem;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: 0.2s ease;
+    }
+    button:hover {
+      transform: translateY(-2px);
+      background: linear-gradient(90deg, #5eead4, #7b61ff);
+    }
+    .gallery {
+      margin-top: 1.5rem;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 1rem;
+    }
+    .gallery img {
+      width: 100%;
+      border-radius: 12px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.08);
+      background: #f9f9f9;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🎨 DALL·E Mini Generator</h1>
+    <p>Generate AI-powered images from any text prompt.</p>
+    <input id="prompt" type="text" placeholder="Enter your prompt here..." />
+    <button onclick="generateImages()">Generate</button>
+    <div id="gallery" class="gallery"></div>
+  </div>
+  <script>
+    async function generateImages() {
+      const prompt = document.getElementById("prompt").value.trim();
+      const gallery = document.getElementById("gallery");
+      if (!prompt) {
+        alert("Please enter a prompt first!");
+        return;
+      }
+      gallery.innerHTML = "<p>⏳ Generating images...</p>";
+      try {
+        const response = await fetch("https://bf.dallemini.ai/generate", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Accept": "application/json",
+          },
+          body: JSON.stringify({ prompt }),
+        });
+        const data = await response.json();
+        gallery.innerHTML = "";
+        data.images.forEach(imgBase64 => {
+          const img = document.createElement("img");
+          img.src = "data:image/png;base64," + imgBase64;
+          gallery.appendChild(img);
+        });
+      } catch (error) {
+        console.error(error);
+        gallery.innerHTML = "<p>⚠️ Error: Too much traffic, try again later.</p>";
+      }
+    }
+  </script>
+</body>
+</html>