Hugging Face's logo

Spaces:
adminuser742150
/
TextToImage
Running

App Files Community
adminuser742150 commited on
Commit
b6de60c
·
verified ·
1 Parent(s): 21f0344

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +46 -20
index.html CHANGED
@@ -2,9 +2,9 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>DALL·E Mini Modern UI</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
9
  <style>
10
  :root {
@@ -14,10 +14,6 @@
14
  --accent-color: #4ade80;
15
  }
16
 
17
- * {
18
- box-sizing: border-box;
19
- }
20
-
21
  body {
22
  margin: 0;
23
  background: var(--bg-color);
@@ -79,17 +75,35 @@
79
 
80
  #gallery {
81
  display: grid;
82
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
83
- gap: 1rem;
84
  margin-top: 2rem;
85
  }
86
 
87
- #gallery img {
88
- width: 100%;
89
  border-radius: 10px;
 
 
 
 
 
 
 
90
  object-fit: cover;
91
  }
92
 
 
 
 
 
 
 
 
 
 
 
 
93
  #screenshot {
94
  display: none;
95
  margin: 2rem auto;
@@ -130,20 +144,19 @@
130
  <body>
131
  <div class="container">
132
  <h1>DALL·E Mini by <a href="https://www.craiyon.com/" target="_blank">Craiyon</a></h1>
133
- <p>Type your prompt and generate AI images in seconds</p>
134
 
135
  <div class="input-area">
136
- <input id="prompt" type="text" placeholder="E.g. futuristic city made of candy" />
137
  <button onclick="runPrompt()">Generate Images</button>
138
  </div>
139
 
140
  <div id="gallery"></div>
141
  <div class="loader" id="loader"></div>
142
-
143
- <button id="screenshot" onclick="captureScreenshot()">Download Screenshot</button>
144
 
145
  <footer>
146
- 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>
147
  </footer>
148
  </div>
149
 
@@ -171,12 +184,16 @@
171
  });
172
 
173
  const data = await res.json();
174
- const images = data.images || [];
175
 
176
  if (images.length > 0) {
177
- gallery.innerHTML = images.map(img =>
178
- `<img src="data:image/png;base64,${img}" alt="Generated Image" />`
179
- ).join("");
 
 
 
 
180
  screenshotBtn.style.display = "block";
181
  loader.textContent = "";
182
  } else {
@@ -187,6 +204,15 @@
187
  }
188
  }
189
 
 
 
 
 
 
 
 
 
 
190
  function captureScreenshot() {
191
  html2canvas(document.getElementById("gallery")).then(canvas => {
192
  const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>DALL·E Mini - 4 Image Generator</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"/>
8
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
9
  <style>
10
  :root {
 
14
  --accent-color: #4ade80;
15
  }
16
 
 
 
 
 
17
  body {
18
  margin: 0;
19
  background: var(--bg-color);
 
75
 
76
  #gallery {
77
  display: grid;
78
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
79
+ gap: 1.5rem;
80
  margin-top: 2rem;
81
  }
82
 
83
+ .image-card {
84
+ background: var(--card-color);
85
  border-radius: 10px;
86
+ padding: 1rem;
87
+ text-align: center;
88
+ }
89
+
90
+ .image-card img {
91
+ width: 100%;
92
+ border-radius: 8px;
93
  object-fit: cover;
94
  }
95
 
96
+ .image-card button {
97
+ margin-top: 0.8rem;
98
+ width: 100%;
99
+ background: #3b82f6;
100
+ color: white;
101
+ }
102
+
103
+ .image-card button:hover {
104
+ background: #2563eb;
105
+ }
106
+
107
  #screenshot {
108
  display: none;
109
  margin: 2rem auto;
 
144
  <body>
145
  <div class="container">
146
  <h1>DALL·E Mini by <a href="https://www.craiyon.com/" target="_blank">Craiyon</a></h1>
147
+ <p>Generate 4 AI images instantly and download them</p>
148
 
149
  <div class="input-area">
150
+ <input id="prompt" type="text" placeholder="E.g. astronaut riding a unicorn in space" />
151
  <button onclick="runPrompt()">Generate Images</button>
152
  </div>
153
 
154
  <div id="gallery"></div>
155
  <div class="loader" id="loader"></div>
156
+ <button id="screenshot" onclick="captureScreenshot()">Download All as Screenshot</button>
 
157
 
158
  <footer>
159
+ 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>
160
  </footer>
161
  </div>
162
 
 
184
  });
185
 
186
  const data = await res.json();
187
+ const images = (data.images || []).slice(0, 4); // Only 4 images
188
 
189
  if (images.length > 0) {
190
+ gallery.innerHTML = images.map((img, i) => `
191
+ <div class="image-card">
192
+ <img src="data:image/png;base64,${img}" id="img-${i}" />
193
+ <button onclick="downloadImage('${img}', 'image-${i + 1}.png')">Download</button>
194
+ </div>
195
+ `).join("");
196
+
197
  screenshotBtn.style.display = "block";
198
  loader.textContent = "";
199
  } else {
 
204
  }
205
  }
206
 
207
+ function downloadImage(base64, filename) {
208
+ const a = document.createElement("a");
209
+ a.href = "data:image/png;base64," + base64;
210
+ a.download = filename;
211
+ document.body.appendChild(a);
212
+ a.click();
213
+ document.body.removeChild(a);
214
+ }
215
+
216
  function captureScreenshot() {
217
  html2canvas(document.getElementById("gallery")).then(canvas => {
218
  const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");