TextToImage

Running

App Files Files Community

adminuser742150 commited on Jun 8, 2025

Commit

441b2d9

verified ·

1 Parent(s): 6d02578

Update index.html

Browse files

Files changed (1) hide show

index.html +74 -168

index.html CHANGED Viewed

@@ -1,170 +1,76 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>AI Image Generator</title>
-  <style>
-    body {
-      font-family: 'Segoe UI', sans-serif;
-      background: #f9f9f9;
-      margin: 0;
-      padding: 20px;
-      color: #333;
-    }
-    h1 {
-      text-align: center;
-      margin-bottom: 20px;
-    }
-    .container {
-      max-width: 960px;
-      margin: auto;
-      padding: 20px;
-      background: white;
-      border-radius: 10px;
-      box-shadow: 0 0 20px rgba(0,0,0,0.1);
-    }
-    label {
-      display: block;
-      margin-top: 10px;
-      font-weight: 500;
-    }
-    input[type="text"], select, textarea {
-      width: 100%;
-      padding: 10px;
-      margin-top: 5px;
-      border: 1px solid #ccc;
-      border-radius: 6px;
-    }
-    input[type="range"] {
-      width: 100%;
-    }
-    button {
-      background: #007bff;
-      color: white;
-      border: none;
-      padding: 12px 20px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 16px;
-      margin-top: 20px;
-    }
-    button:hover {
-      background: #0056b3;
-    }
-    .image-grid {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 15px;
-      margin-top: 20px;
-    }
-    .image-grid a {
-      display: inline-block;
-      width: 100%;
-      max-width: 300px;
-      overflow: hidden;
-      border-radius: 8px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
-      transition: transform 0.3s;
-    }
-    .image-grid img {
-      width: 100%;
-      display: block;
-    }
-    .image-grid a:hover {
-      transform: scale(1.05);
-    }
-    @media (max-width: 768px) {
-      .image-grid {
-        flex-direction: column;
-        align-items: center;
-      }
-    }
-  </style>
-</head>
-<body>
-<div class="container">
-  <h1>🎨 AI Image Generator</h1>
-  <form id="generateForm">
-    <label for="prompt">Prompt</label>
-    <textarea id="prompt" rows="2" required></textarea>
-    <label for="negative">Negative Prompt (optional)</label>
-    <input type="text" id="negative" placeholder="e.g. blurry, watermark" />
-    <label for="model">Model</label>
-    <select id="model">
-      <option value="dalle3">DALL·E 3</option>
-      <option value="dalle2">DALL·E 2</option>
-    </select>
-    <label for="numImages">Number of Images: <span id="numImagesVal">2</span></label>
-    <input type="range" id="numImages" min="1" max="6" value="2" />
-    <label for="width">Width: <span id="widthVal">512</span>px</label>
-    <input type="range" id="width" min="256" max="1024" step="64" value="512" />
-    <label for="height">Height: <span id="heightVal">512</span>px</label>
-    <input type="range" id="height" min="256" max="1024" step="64" value="512" />
-    <label for="strength">Image Strength: <span id="strengthVal">0.5</span></label>
-    <input type="range" id="strength" min="0" max="1" step="0.1" value="0.5" />
-    <button type="submit">🚀 Generate Images</button>
-  </form>
-  <div id="output" class="image-grid"></div>
-</div>
-<script>
-  const form = document.getElementById('generateForm');
-  const output = document.getElementById('output');
-  // Show live values
-  ['numImages', 'width', 'height', 'strength'].forEach(id => {
-    const el = document.getElementById(id);
-    const span = document.getElementById(id + 'Val');
-    el.addEventListener('input', () => span.textContent = el.value);
-  });
-  form.addEventListener('submit', async (e) => {
-    e.preventDefault();
-    const prompt = document.getElementById('prompt').value;
-    const negative = document.getElementById('negative').value;
-    const model = document.getElementById('model').value;
-    const numImages = document.getElementById('numImages').value;
-    const width = document.getElementById('width').value;
-    const height = document.getElementById('height').value;
-    const strength = document.getElementById('strength').value;
-    output.innerHTML = '⏳ Generating images...';
-    try {
-      // Replace with your real backend API call
-      const dummyImages = Array.from({length: numImages}, (_, i) =>
-        `https://via.placeholder.com/${width}x${height}?text=Image+${i+1}`
-      );
-      // Display images with download link
-      output.innerHTML = '';
-      dummyImages.forEach((src, i) => {
-        const a = document.createElement('a');
-        a.href = src;
-        a.download = `image_${i + 1}.png`;
-        const img = document.createElement('img');
-        img.src = src;
-        a.appendChild(img);
-        output.appendChild(a);
-      });
-    } catch (err) {
-      output.innerHTML = `<p style="color:red;">❌ Error generating images. Please try again.</p>`;
-    }
-  });
-</script>
-</body>
-</html>

 <!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>
+            #screenshot {
+                display: none;
+            }
+            .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>