Hugging Face's logo

Spaces:
remiai3
/
image-generation-ui-v2
Sleeping

App Files
xet
Community
remiai3 commited on
Commit
c8ffcee
·
verified ·
1 Parent(s): 70216af

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +517 -148
static/index.html CHANGED
@@ -1,148 +1,517 @@
1
- <!DOCTYPE html>
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>Image Generation UI</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- text-align: center;
11
- margin: 0;
12
- padding: 20px;
13
- background-color: #f0f0f0;
14
- }
15
- .container {
16
- max-width: 800px;
17
- margin: 0 auto;
18
- }
19
- img.logo {
20
- max-width: 150px;
21
- margin-bottom: 20px;
22
- }
23
- select, input, button {
24
- margin: 10px;
25
- padding: 8px;
26
- font-size: 16px;
27
- border-radius: 4px;
28
- border: 1px solid #ccc;
29
- }
30
- button {
31
- background-color: #4CAF50;
32
- color: white;
33
- cursor: pointer;
34
- }
35
- button:hover {
36
- background-color: #45a049;
37
- }
38
- #prompt {
39
- width: 300px;
40
- }
41
- #output {
42
- margin-top: 20px;
43
- display: flex;
44
- flex-wrap: wrap;
45
- justify-content: center;
46
- gap: 10px;
47
- }
48
- .output-image {
49
- max-width: 200px;
50
- border: 1px solid #ddd;
51
- border-radius: 4px;
52
- }
53
- .error {
54
- color: red;
55
- margin-top: 10px;
56
- }
57
- .loading {
58
- display: none;
59
- margin-top: 10px;
60
- font-style: italic;
61
- }
62
- </style>
63
- </head>
64
- <body>
65
- <div class="container">
66
- <img src="/assets/logo.png" alt="Logo" class="logo">
67
- <h1>Image Generation UI</h1>
68
- <div>
69
- <label for="model-select">Select Model:</label>
70
- <select id="model-select">
71
- <option value="ssd-1b">SSD-1B</option>
72
- <option value="sd-v1-5">Stable Diffusion v1-5</option>
73
- </select>
74
- </div>
75
- <div>
76
- <label for="ratio-select">Image Ratio:</label>
77
- <select id="ratio-select">
78
- <option value="1:1">1:1</option>
79
- <option value="3:4">3:4</option>
80
- <option value="16:9">16:9</option>
81
- </select>
82
- </div>
83
- <div>
84
- <label for="num-images">Number of Images (1-4):</label>
85
- <input type="number" id="num-images" min="1" max="4" value="1">
86
- </div>
87
- <div>
88
- <label for="prompt">Prompt:</label>
89
- <input type="text" id="prompt" placeholder="Enter your prompt">
90
- </div>
91
- <div>
92
- <label for="guidance-scale">Guidance Scale:</label>
93
- <input type="number" id="guidance-scale" min="1" max="20" step="0.5" value="7.5">
94
- </div>
95
- <button onclick="generateImages()">Generate Images</button>
96
- <div id="loading" class="loading">Generating images, please wait...</div>
97
- <div id="error" class="error"></div>
98
- <div id="output"></div>
99
- </div>
100
- <script>
101
- async function generateImages() {
102
- const model = document.getElementById('model-select').value;
103
- const ratio = document.getElementById('ratio-select').value;
104
- const numImages = document.getElementById('num-images').value;
105
- const prompt = document.getElementById('prompt').value;
106
- const guidanceScale = document.getElementById('guidance-scale').value;
107
- const outputDiv = document.getElementById('output');
108
- const errorDiv = document.getElementById('error');
109
- const loadingDiv = document.getElementById('loading');
110
-
111
- outputDiv.innerHTML = '';
112
- errorDiv.innerText = '';
113
- loadingDiv.style.display = 'block';
114
-
115
- try {
116
- const response = await fetch('/generate', {
117
- method: 'POST',
118
- headers: { 'Content-Type': 'application/json' },
119
- body: JSON.stringify({
120
- model,
121
- prompt,
122
- ratio,
123
- num_images: numImages,
124
- guidance_scale: guidanceScale
125
- })
126
- });
127
-
128
- loadingDiv.style.display = 'none';
129
- const data = await response.json();
130
-
131
- if (response.ok) {
132
- data.images.forEach(imgSrc => {
133
- const img = document.createElement('img');
134
- img.src = imgSrc;
135
- img.className = 'output-image';
136
- outputDiv.appendChild(img);
137
- });
138
- } else {
139
- errorDiv.innerText = data.error || 'Failed to generate images';
140
- }
141
- } catch (error) {
142
- loadingDiv.style.display = 'none';
143
- errorDiv.innerText = 'Error: ' + error.message;
144
- }
145
- }
146
- </script>
147
- </body>
148
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
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>LE-3 Models</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Arial', sans-serif;
16
+ background: #000000;
17
+ min-height: 100vh;
18
+ overflow-x: hidden;
19
+ }
20
+
21
+ /* Landing Page Styles */
22
+ .landing-page {
23
+ display: flex;
24
+ flex-direction: column;
25
+ align-items: center;
26
+ justify-content: center;
27
+ min-height: 100vh;
28
+ text-align: center;
29
+ color: white;
30
+ position: relative;
31
+ }
32
+
33
+ .logo-container {
34
+ margin-bottom: 30px;
35
+ animation: fadeInUp 1s ease-out;
36
+ }
37
+
38
+ .logo {
39
+ width: 200px;
40
+ height: 200px;
41
+ object-fit: contain;
42
+ border-radius: 20px;
43
+ box-shadow: 0 10px 30px rgba(255,255,255,0.3);
44
+ background: white;
45
+ padding: 20px;
46
+ }
47
+
48
+ .hero-title {
49
+ font-size: 3.5em;
50
+ font-weight: bold;
51
+ margin-bottom: 20px;
52
+ text-shadow: 2px 2px 4px rgb(255, 255, 255);
53
+ animation: fadeInUp 1s ease-out 0.3s both;
54
+ }
55
+
56
+ .hero-subtitle {
57
+ font-size: 1.3em;
58
+ margin-bottom: 40px;
59
+ opacity: 0.9;
60
+ animation: fadeInUp 1s ease-out 0.6s both;
61
+ }
62
+
63
+ .start-button {
64
+ background: #ffffff;
65
+ color: #000000;
66
+ border: 2px solid #ffffff;
67
+ padding: 20px 50px;
68
+ font-size: 1.2em;
69
+ font-weight: bold;
70
+ border-radius: 50px;
71
+ cursor: pointer;
72
+ box-shadow: 0 10px 30px rgba(255,255,255,0.3);
73
+ transition: all 0.3s ease;
74
+ animation: fadeInUp 1s ease-out 0.9s both;
75
+ }
76
+
77
+ .start-button:hover {
78
+ background: #000000;
79
+ color: #ffffff;
80
+ transform: translateY(-5px);
81
+ box-shadow: 0 15px 40px rgba(255,255,255,0.4);
82
+ }
83
+
84
+ /* Image Gallery Styles */
85
+ .gallery-container {
86
+ margin-top: 80px;
87
+ width: 100%;
88
+ overflow: hidden;
89
+ position: relative;
90
+ }
91
+
92
+ .gallery-row {
93
+ display: flex;
94
+ width: 200%;
95
+ animation-timing-function: linear;
96
+ animation-iteration-count: infinite;
97
+ }
98
+
99
+ .gallery-row.row-1 {
100
+ animation: scrollRight 20s linear infinite;
101
+ margin-bottom: 20px;
102
+ }
103
+
104
+ .gallery-row.row-2 {
105
+ animation: scrollLeft 25s linear infinite;
106
+ }
107
+
108
+ .gallery-image {
109
+ width: 150px;
110
+ height: 150px;
111
+ object-fit: cover;
112
+ border-radius: 15px;
113
+ margin: 0 15px;
114
+ box-shadow: 0 5px 15px rgba(255,255,255,0.3);
115
+ transition: transform 0.3s ease;
116
+ }
117
+
118
+ .gallery-image:hover {
119
+ transform: scale(1.1);
120
+ }
121
+
122
+ /* Animation Keyframes */
123
+ @keyframes fadeInUp {
124
+ from {
125
+ opacity: 0;
126
+ transform: translateY(50px);
127
+ }
128
+ to {
129
+ opacity: 1;
130
+ transform: translateY(0);
131
+ }
132
+ }
133
+
134
+ @keyframes scrollRight {
135
+ 0% {
136
+ transform: translateX(-100%);
137
+ }
138
+ 100% {
139
+ transform: translateX(0);
140
+ }
141
+ }
142
+
143
+ @keyframes scrollLeft {
144
+ 0% {
145
+ transform: translateX(0);
146
+ }
147
+ 100% {
148
+ transform: translateX(-100%);
149
+ }
150
+ }
151
+
152
+ /* Generation UI Styles */
153
+ .generation-ui {
154
+ display: none;
155
+ min-height: 100vh;
156
+ background: #000000;
157
+ padding: 20px;
158
+ }
159
+
160
+ .header {
161
+ background: #ffffff;
162
+ color: #000000;
163
+ padding: 20px;
164
+ border-radius: 15px;
165
+ box-shadow: 0 5px 20px rgba(255,255,255,0.1);
166
+ margin-bottom: 30px;
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: space-between;
170
+ }
171
+
172
+ .header-logo {
173
+ width: 60px;
174
+ height: 60px;
175
+ object-fit: contain;
176
+ }
177
+
178
+ .back-button {
179
+ background: #000000;
180
+ color: #ffffff;
181
+ border: 2px solid #000000;
182
+ padding: 10px 20px;
183
+ border-radius: 25px;
184
+ cursor: pointer;
185
+ font-size: 14px;
186
+ transition: all 0.3s ease;
187
+ }
188
+
189
+ .back-button:hover {
190
+ background: #ffffff;
191
+ color: #000000;
192
+ }
193
+
194
+ .container {
195
+ max-width: 1000px;
196
+ margin: 0 auto;
197
+ background: #ffffff;
198
+ color: #000000;
199
+ padding: 40px;
200
+ border-radius: 20px;
201
+ box-shadow: 0 10px 30px rgba(255,255,255,0.1);
202
+ }
203
+
204
+ h1 {
205
+ color: #000000;
206
+ margin-bottom: 30px;
207
+ font-size: 2.5em;
208
+ text-align: center;
209
+ }
210
+
211
+ .form-group {
212
+ margin-bottom: 25px;
213
+ text-align: left;
214
+ }
215
+
216
+ label {
217
+ display: block;
218
+ margin-bottom: 8px;
219
+ font-weight: bold;
220
+ color: #000000;
221
+ }
222
+
223
+ select, input, button {
224
+ width: 100%;
225
+ padding: 15px;
226
+ font-size: 16px;
227
+ border-radius: 10px;
228
+ border: 2px solid #000000;
229
+ background: #ffffff;
230
+ color: #000000;
231
+ transition: border-color 0.3s ease;
232
+ }
233
+
234
+ select:focus, input:focus {
235
+ outline: none;
236
+ border-color: #000000;
237
+ box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
238
+ }
239
+
240
+ .generate-button {
241
+ background: #000000;
242
+ color: #ffffff;
243
+ border: 2px solid #000000;
244
+ cursor: pointer;
245
+ font-weight: bold;
246
+ margin-top: 20px;
247
+ transition: all 0.3s ease;
248
+ }
249
+
250
+ .generate-button:hover {
251
+ background: #ffffff;
252
+ color: #000000;
253
+ transform: translateY(-2px);
254
+ }
255
+
256
+ #prompt {
257
+ min-height: 100px;
258
+ resize: vertical;
259
+ }
260
+
261
+ #output {
262
+ margin-top: 30px;
263
+ display: flex;
264
+ flex-wrap: wrap;
265
+ justify-content: center;
266
+ gap: 20px;
267
+ }
268
+
269
+ .output-image {
270
+ max-width: 250px;
271
+ border-radius: 15px;
272
+ box-shadow: 0 10px 25px rgba(255,255,255,0.2);
273
+ transition: transform 0.3s ease;
274
+ }
275
+
276
+ .output-image:hover {
277
+ transform: scale(1.05);
278
+ }
279
+
280
+ .error {
281
+ color: #ffffff;
282
+ background: #000000;
283
+ margin-top: 15px;
284
+ padding: 15px;
285
+ border-radius: 10px;
286
+ border: 2px solid #ffffff;
287
+ }
288
+
289
+ .loading {
290
+ display: none;
291
+ margin-top: 20px;
292
+ text-align: center;
293
+ font-style: italic;
294
+ color: #ffffff;
295
+ font-size: 1.1em;
296
+ }
297
+
298
+ .loading::after {
299
+ content: '';
300
+ display: inline-block;
301
+ width: 20px;
302
+ height: 20px;
303
+ border: 3px solid #ffffff;
304
+ border-top: 3px solid transparent;
305
+ border-radius: 50%;
306
+ animation: spin 1s linear infinite;
307
+ margin-left: 10px;
308
+ }
309
+
310
+ @keyframes spin {
311
+ 0% { transform: rotate(0deg); }
312
+ 100% { transform: rotate(360deg); }
313
+ }
314
+
315
+ /* Responsive Design */
316
+ @media (max-width: 768px) {
317
+ .hero-title {
318
+ font-size: 2.5em;
319
+ }
320
+
321
+ .logo {
322
+ width: 150px;
323
+ height: 150px;
324
+ }
325
+
326
+ .container {
327
+ padding: 20px;
328
+ }
329
+
330
+ .gallery-image {
331
+ width: 100px;
332
+ height: 100px;
333
+ }
334
+ }
335
+ </style>
336
+ </head>
337
+ <body>
338
+ <!-- Landing Page -->
339
+ <div id="landing-page" class="landing-page">
340
+ <div class="logo-container">
341
+ <img src="/assets/logo.png" alt="AI Studio Logo" class="logo">
342
+ </div>
343
+ <h1 class="hero-title"></h1>
344
+ <p class="hero-subtitle"></p>
345
+ <button class="start-button" onclick="showGenerationUI()">Start Creating</button>
346
+
347
+ <!-- Image Gallery -->
348
+ <div class="gallery-container">
349
+ <div class="gallery-row row-1">
350
+ <img src="/assets/image (1).png" alt="Gallery Image" class="gallery-image">
351
+ <img src="/assets/image (2).png" alt="Gallery Image" class="gallery-image">
352
+ <img src="/assets/image (3).png" alt="Gallery Image" class="gallery-image">
353
+ <img src="/assets/image (4).png" alt="Gallery Image" class="gallery-image">
354
+ <img src="/assets/image (5).png" alt="Gallery Image" class="gallery-image">
355
+ <img src="/assets/image (6).png" alt="Gallery Image" class="gallery-image">
356
+ <img src="/assets/image (7).png" alt="Gallery Image" class="gallery-image">
357
+ <img src="/assets/image (8).png" alt="Gallery Image" class="gallery-image">
358
+ <img src="/assets/image (9).png" alt="Gallery Image" class="gallery-image">
359
+ <img src="/assets/image (10).png" alt="Gallery Image" class="gallery-image">
360
+ <img src="/assets/image (11).png" alt="Gallery Image" class="gallery-image">
361
+ <img src="/assets/image (12).png" alt="Gallery Image" class="gallery-image">
362
+ <img src="/assets/image (13).png" alt="Gallery Image" class="gallery-image">
363
+ <img src="/assets/image (14).png" alt="Gallery Image" class="gallery-image">
364
+ <img src="/assets/image (15).png" alt="Gallery Image" class="gallery-image">
365
+ <img src="/assets/image (16).png" alt="Gallery Image" class="gallery-image">
366
+ </div>
367
+ <div class="gallery-row row-2">
368
+ <img src="/assets/image (1).png" alt="Gallery Image" class="gallery-image">
369
+ <img src="/assets/image (2).png" alt="Gallery Image" class="gallery-image">
370
+ <img src="/assets/image (3).png" alt="Gallery Image" class="gallery-image">
371
+ <img src="/assets/image (4).png" alt="Gallery Image" class="gallery-image">
372
+ <img src="/assets/image (5).png" alt="Gallery Image" class="gallery-image">
373
+ <img src="/assets/image (6).png" alt="Gallery Image" class="gallery-image">
374
+ <img src="/assets/image (7).png" alt="Gallery Image" class="gallery-image">
375
+ <img src="/assets/image (8).png" alt="Gallery Image" class="gallery-image">
376
+ <img src="/assets/image (9).png" alt="Gallery Image" class="gallery-image">
377
+ <img src="/assets/image (10).png" alt="Gallery Image" class="gallery-image">
378
+ <img src="/assets/image (11).png" alt="Gallery Image" class="gallery-image">
379
+ <img src="/assets/image (12).png" alt="Gallery Image" class="gallery-image">
380
+ <img src="/assets/image (13).png" alt="Gallery Image" class="gallery-image">
381
+ <img src="/assets/image (14).png" alt="Gallery Image" class="gallery-image">
382
+ <img src="/assets/image (15).png" alt="Gallery Image" class="gallery-image">
383
+ <img src="/assets/image (16).png" alt="Gallery Image" class="gallery-image">
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Generation UI -->
389
+ <div id="generation-ui" class="generation-ui">
390
+ <div class="header">
391
+ <img src="/assets/logo.png" alt="Logo" class="header-logo">
392
+ <h2>AI Image Generation Studio</h2>
393
+ <button class="back-button" onclick="showLandingPage()">← Back to Home</button>
394
+ </div>
395
+
396
+ <div class="container">
397
+ <h1>Create Your Images</h1>
398
+
399
+ <div class="form-group">
400
+ <label for="model-select">Select Model:</label>
401
+ <select id="model-select">
402
+ <option value="ssd-1b">SSD-1B</option>
403
+ <option value="sd-v1-5">Stable Diffusion v1-5</option>
404
+ </select>
405
+ </div>
406
+
407
+ <div class="form-group">
408
+ <label for="ratio-select">Image Ratio:</label>
409
+ <select id="ratio-select">
410
+ <option value="1:1">1:1 (Square)</option>
411
+ <option value="3:4">3:4 (Portrait)</option>
412
+ <option value="16:9">16:9 (Landscape)</option>
413
+ </select>
414
+ </div>
415
+
416
+ <div class="form-group">
417
+ <label for="num-images">Number of Images (1-4):</label>
418
+ <input type="number" id="num-images" min="1" max="4" value="1">
419
+ </div>
420
+
421
+ <div class="form-group">
422
+ <label for="prompt">Describe your image:</label>
423
+ <textarea id="prompt" placeholder="Enter a detailed description of the image you want to generate..."></textarea>
424
+ </div>
425
+
426
+ <div class="form-group">
427
+ <label for="guidance-scale">Guidance Scale (1-20):</label>
428
+ <input type="number" id="guidance-scale" min="1" max="20" step="0.5" value="7.5">
429
+ </div>
430
+
431
+ <button class="generate-button" onclick="generateImages()">Generate Images</button>
432
+
433
+ <div id="loading" class="loading">Generating your images, please wait...</div>
434
+ <div id="error" class="error"></div>
435
+ <div id="output"></div>
436
+ </div>
437
+ </div>
438
+
439
+ <script>
440
+ function showGenerationUI() {
441
+ document.getElementById('landing-page').style.display = 'none';
442
+ document.getElementById('generation-ui').style.display = 'block';
443
+ }
444
+
445
+ function showLandingPage() {
446
+ document.getElementById('generation-ui').style.display = 'none';
447
+ document.getElementById('landing-page').style.display = 'flex';
448
+ }
449
+
450
+ async function generateImages() {
451
+ const model = document.getElementById('model-select').value;
452
+ const ratio = document.getElementById('ratio-select').value;
453
+ const numImages = document.getElementById('num-images').value;
454
+ const prompt = document.getElementById('prompt').value;
455
+ const guidanceScale = document.getElementById('guidance-scale').value;
456
+ const outputDiv = document.getElementById('output');
457
+ const errorDiv = document.getElementById('error');
458
+ const loadingDiv = document.getElementById('loading');
459
+
460
+ if (!prompt.trim()) {
461
+ errorDiv.innerText = 'Please enter a prompt to generate images.';
462
+ return;
463
+ }
464
+
465
+ outputDiv.innerHTML = '';
466
+ errorDiv.innerText = '';
467
+ loadingDiv.style.display = 'block';
468
+
469
+ try {
470
+ const response = await fetch('/generate', {
471
+ method: 'POST',
472
+ headers: { 'Content-Type': 'application/json' },
473
+ body: JSON.stringify({
474
+ model,
475
+ prompt,
476
+ ratio,
477
+ num_images: numImages,
478
+ guidance_scale: guidanceScale
479
+ })
480
+ });
481
+
482
+ loadingDiv.style.display = 'none';
483
+ const data = await response.json();
484
+
485
+ if (response.ok) {
486
+ data.images.forEach(imgSrc => {
487
+ const img = document.createElement('img');
488
+ img.src = imgSrc;
489
+ img.className = 'output-image';
490
+ img.alt = 'Generated Image';
491
+ outputDiv.appendChild(img);
492
+ });
493
+ } else {
494
+ errorDiv.innerText = data.error || 'Failed to generate images. Please try again.';
495
+ }
496
+ } catch (error) {
497
+ loadingDiv.style.display = 'none';
498
+ errorDiv.innerText = 'Error: ' + error.message;
499
+ }
500
+ }
501
+
502
+ // Add some interactive effects
503
+ document.addEventListener('DOMContentLoaded', function() {
504
+ // Add parallax effect to gallery images
505
+ const galleryImages = document.querySelectorAll('.gallery-image');
506
+ galleryImages.forEach(img => {
507
+ img.addEventListener('mouseenter', function() {
508
+ this.style.animationPlayState = 'paused';
509
+ });
510
+ img.addEventListener('mouseleave', function() {
511
+ this.style.animationPlayState = 'running';
512
+ });
513
+ });
514
+ });
515
+ </script>
516
+ </body>
517
+ </html>