TextToImage

Running

App Files Files Community

adminuser742150 commited on Jun 8, 2025

Commit

6d02578

verified ·

1 Parent(s): edf0da0

Update index.html

Browse files

Files changed (1) hide show

index.html +136 -141

index.html CHANGED Viewed

@@ -1,175 +1,170 @@
 <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;
-      --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(200px, 1fr));
-      gap: 1rem;
-      margin-top: 2rem;
     }
-    #gallery img {
       width: 100%;
-      border-radius: 10px;
-      object-fit: cover;
-      cursor: pointer;
-    }
-    .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</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>
-    <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");
-      gallery.innerHTML = "";
-      loader.textContent = "Generating images... Please wait.";
-      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); // 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.";
-        }
-      } catch (error) {
-        loader.textContent = "Error: Server busy or unreachable. Try again later.";
-      }
     }
-  </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>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>