Hugging Face's logo

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

App Files Community
remiai3 commited on
Commit
48a8a77
·
verified ·
1 Parent(s): 09c07c9

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +147 -548
static/index.html CHANGED
@@ -1,549 +1,148 @@
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: black;
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 (33).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
- <img src="/assets/image (17).png" alt="Gallery Image" class="gallery-image">
367
- <img src="/assets/image (18).png" alt="Gallery Image" class="gallery-image">
368
- <img src="/assets/image (19).png" alt="Gallery Image" class="gallery-image">
369
- <img src="/assets/image (20).png" alt="Gallery Image" class="gallery-image">
370
- <img src="/assets/image (21).png" alt="Gallery Image" class="gallery-image">
371
- <img src="/assets/image (22).png" alt="Gallery Image" class="gallery-image">
372
- <img src="/assets/image (23).png" alt="Gallery Image" class="gallery-image">
373
- <img src="/assets/image (24).png" alt="Gallery Image" class="gallery-image">
374
- <img src="/assets/image (25).png" alt="Gallery Image" class="gallery-image">
375
- <img src="/assets/image (26).png" alt="Gallery Image" class="gallery-image">
376
- <img src="/assets/image (27).png" alt="Gallery Image" class="gallery-image">
377
- <img src="/assets/image (28).png" alt="Gallery Image" class="gallery-image">
378
- <img src="/assets/image (29).png" alt="Gallery Image" class="gallery-image">
379
- <img src="/assets/image (30).png" alt="Gallery Image" class="gallery-image">
380
- <img src="/assets/image (31).png" alt="Gallery Image" class="gallery-image">
381
- <img src="/assets/image (32).png" alt="Gallery Image" class="gallery-image">
382
- </div>
383
- <div class="gallery-row row-2">
384
- <img src="/assets/image (33).png" alt="Gallery Image" class="gallery-image">
385
- <img src="/assets/image (32).png" alt="Gallery Image" class="gallery-image">
386
- <img src="/assets/image (31).png" alt="Gallery Image" class="gallery-image">
387
- <img src="/assets/image (30).png" alt="Gallery Image" class="gallery-image">
388
- <img src="/assets/image (29).png" alt="Gallery Image" class="gallery-image">
389
- <img src="/assets/image (28).png" alt="Gallery Image" class="gallery-image">
390
- <img src="/assets/image (27).png" alt="Gallery Image" class="gallery-image">
391
- <img src="/assets/image (26).png" alt="Gallery Image" class="gallery-image">
392
- <img src="/assets/image (25).png" alt="Gallery Image" class="gallery-image">
393
- <img src="/assets/image (24).png" alt="Gallery Image" class="gallery-image">
394
- <img src="/assets/image (23).png" alt="Gallery Image" class="gallery-image">
395
- <img src="/assets/image (22).png" alt="Gallery Image" class="gallery-image">
396
- <img src="/assets/image (21).png" alt="Gallery Image" class="gallery-image">
397
- <img src="/assets/image (20).png" alt="Gallery Image" class="gallery-image">
398
- <img src="/assets/image (19).png" alt="Gallery Image" class="gallery-image">
399
- <img src="/assets/image (18).png" alt="Gallery Image" class="gallery-image">
400
- <img src="/assets/image (17).png" alt="Gallery Image" class="gallery-image">
401
- <img src="/assets/image (16).png" alt="Gallery Image" class="gallery-image">
402
- <img src="/assets/image (15).png" alt="Gallery Image" class="gallery-image">
403
- <img src="/assets/image (14).png" alt="Gallery Image" class="gallery-image">
404
- <img src="/assets/image (13).png" alt="Gallery Image" class="gallery-image">
405
- <img src="/assets/image (12).png" alt="Gallery Image" class="gallery-image">
406
- <img src="/assets/image (11).png" alt="Gallery Image" class="gallery-image">
407
- <img src="/assets/image (10).png" alt="Gallery Image" class="gallery-image">
408
- <img src="/assets/image (9).png" alt="Gallery Image" class="gallery-image">
409
- <img src="/assets/image (8).png" alt="Gallery Image" class="gallery-image">
410
- <img src="/assets/image (7).png" alt="Gallery Image" class="gallery-image">
411
- <img src="/assets/image (6).png" alt="Gallery Image" class="gallery-image">
412
- <img src="/assets/image (5).png" alt="Gallery Image" class="gallery-image">
413
- <img src="/assets/image (4).png" alt="Gallery Image" class="gallery-image">
414
- <img src="/assets/image (1).png" alt="Gallery Image" class="gallery-image">
415
- <img src="/assets/image (2).png" alt="Gallery Image" class="gallery-image">
416
- </div>
417
- </div>
418
- </div>
419
-
420
- <!-- Generation UI -->
421
- <div id="generation-ui" class="generation-ui">
422
- <div class="header">
423
- <img src="/assets/logo.png" alt="Logo" class="header-logo">
424
- <h2></h2>
425
- <button class="back-button" onclick="showLandingPage()">← Back to Home</button>
426
- </div>
427
-
428
- <div class="container">
429
- <h1>LE-3 Models</h1>
430
-
431
- <div class="form-group">
432
- <label for="model-select">Select Model:</label>
433
- <select id="model-select">
434
- <option value="ssd-1b">SSD-1B</option>
435
- <option value="sd-v1-5">Stable Diffusion v1-5</option>
436
- </select>
437
- </div>
438
-
439
- <div class="form-group">
440
- <label for="ratio-select">Image Ratio:</label>
441
- <select id="ratio-select">
442
- <option value="1:1">1:1 (Square)</option>
443
- <option value="3:4">3:4 (Portrait)</option>
444
- <option value="16:9">16:9 (Landscape)</option>
445
- </select>
446
- </div>
447
-
448
- <div class="form-group">
449
- <label for="num-images">Number of Images (1-4):</label>
450
- <input type="number" id="num-images" min="1" max="4" value="1">
451
- </div>
452
-
453
- <div class="form-group">
454
- <label for="prompt">Describe your image:</label>
455
- <textarea id="prompt" placeholder="Enter a detailed description of the image you want to generate..."></textarea>
456
- </div>
457
-
458
- <div class="form-group">
459
- <label for="guidance-scale">Guidance Scale (1-20):</label>
460
- <input type="number" id="guidance-scale" min="1" max="20" step="0.5" value="7.5">
461
- </div>
462
-
463
- <button class="generate-button" onclick="generateImages()">Generate Images</button>
464
-
465
- <div id="loading" class="loading">Generating your images, please wait...</div>
466
- <div id="error" class="error"></div>
467
- <div id="output"></div>
468
- </div>
469
- </div>
470
-
471
- <script>
472
- function showGenerationUI() {
473
- document.getElementById('landing-page').style.display = 'none';
474
- document.getElementById('generation-ui').style.display = 'block';
475
- }
476
-
477
- function showLandingPage() {
478
- document.getElementById('generation-ui').style.display = 'none';
479
- document.getElementById('landing-page').style.display = 'flex';
480
- }
481
-
482
- async function generateImages() {
483
- const model = document.getElementById('model-select').value;
484
- const ratio = document.getElementById('ratio-select').value;
485
- const numImages = document.getElementById('num-images').value;
486
- const prompt = document.getElementById('prompt').value;
487
- const guidanceScale = document.getElementById('guidance-scale').value;
488
- const outputDiv = document.getElementById('output');
489
- const errorDiv = document.getElementById('error');
490
- const loadingDiv = document.getElementById('loading');
491
-
492
- if (!prompt.trim()) {
493
- errorDiv.innerText = 'Please enter a prompt to generate images.';
494
- return;
495
- }
496
-
497
- outputDiv.innerHTML = '';
498
- errorDiv.innerText = '';
499
- loadingDiv.style.display = 'block';
500
-
501
- try {
502
- const response = await fetch('/generate', {
503
- method: 'POST',
504
- headers: { 'Content-Type': 'application/json' },
505
- body: JSON.stringify({
506
- model,
507
- prompt,
508
- ratio,
509
- num_images: numImages,
510
- guidance_scale: guidanceScale
511
- })
512
- });
513
-
514
- loadingDiv.style.display = 'none';
515
- const data = await response.json();
516
-
517
- if (response.ok) {
518
- data.images.forEach(imgSrc => {
519
- const img = document.createElement('img');
520
- img.src = imgSrc;
521
- img.className = 'output-image';
522
- img.alt = 'Generated Image';
523
- outputDiv.appendChild(img);
524
- });
525
- } else {
526
- errorDiv.innerText = data.error || 'Failed to generate images. Please try again.';
527
- }
528
- } catch (error) {
529
- loadingDiv.style.display = 'none';
530
- errorDiv.innerText = 'Error: ' + error.message;
531
- }
532
- }
533
-
534
- // Add some interactive effects
535
- document.addEventListener('DOMContentLoaded', function() {
536
- // Add parallax effect to gallery images
537
- const galleryImages = document.querySelectorAll('.gallery-image');
538
- galleryImages.forEach(img => {
539
- img.addEventListener('mouseenter', function() {
540
- this.style.animationPlayState = 'paused';
541
- });
542
- img.addEventListener('mouseleave', function() {
543
- this.style.animationPlayState = 'running';
544
- });
545
- });
546
- });
547
- </script>
548
- </body>
549
- </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>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>