Hugging Face's logo

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

App Files Community
remiai3 commited on
Commit
2b5c125
·
verified ·
1 Parent(s): 51c9f04

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +516 -516
static/index.html CHANGED
@@ -1,517 +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>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>
 
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 (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>