Hugging Face's logo

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

App Files Community
remiai3 commited on
Commit
9b943b2
·
verified ·
1 Parent(s): 13d2291

Upload 34 files

Browse files
Files changed (34) hide show
  1. .gitattributes +17 -0
  2. static/assets/image (1).png +2 -2
  3. static/assets/image (10).png +2 -2
  4. static/assets/image (11).png +2 -2
  5. static/assets/image (12).png +2 -2
  6. static/assets/image (13).png +2 -2
  7. static/assets/image (14).png +2 -2
  8. static/assets/image (15).png +2 -2
  9. static/assets/image (16).png +2 -2
  10. static/assets/image (17).png +3 -0
  11. static/assets/image (18).png +3 -0
  12. static/assets/image (19).png +3 -0
  13. static/assets/image (2).png +2 -2
  14. static/assets/image (20).png +3 -0
  15. static/assets/image (21).png +3 -0
  16. static/assets/image (22).png +3 -0
  17. static/assets/image (23).png +3 -0
  18. static/assets/image (24).png +3 -0
  19. static/assets/image (25).png +3 -0
  20. static/assets/image (26).png +3 -0
  21. static/assets/image (27).png +3 -0
  22. static/assets/image (28).png +3 -0
  23. static/assets/image (29).png +3 -0
  24. static/assets/image (30).png +3 -0
  25. static/assets/image (31).png +3 -0
  26. static/assets/image (32).png +3 -0
  27. static/assets/image (33).png +3 -0
  28. static/assets/image (4).png +2 -2
  29. static/assets/image (5).png +2 -2
  30. static/assets/image (6).png +2 -2
  31. static/assets/image (7).png +2 -2
  32. static/assets/image (8).png +2 -2
  33. static/assets/image (9).png +2 -2
  34. static/index.html +548 -516
.gitattributes CHANGED
@@ -49,3 +49,20 @@ static/assets/image[[:space:]](6).png filter=lfs diff=lfs merge=lfs -text
49
  static/assets/image[[:space:]](7).png filter=lfs diff=lfs merge=lfs -text
50
  static/assets/image[[:space:]](8).png filter=lfs diff=lfs merge=lfs -text
51
  static/assets/image[[:space:]](9).png filter=lfs diff=lfs merge=lfs -text
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  static/assets/image[[:space:]](7).png filter=lfs diff=lfs merge=lfs -text
50
  static/assets/image[[:space:]](8).png filter=lfs diff=lfs merge=lfs -text
51
  static/assets/image[[:space:]](9).png filter=lfs diff=lfs merge=lfs -text
52
+ static/assets/image[[:space:]](17).png filter=lfs diff=lfs merge=lfs -text
53
+ static/assets/image[[:space:]](18).png filter=lfs diff=lfs merge=lfs -text
54
+ static/assets/image[[:space:]](19).png filter=lfs diff=lfs merge=lfs -text
55
+ static/assets/image[[:space:]](20).png filter=lfs diff=lfs merge=lfs -text
56
+ static/assets/image[[:space:]](21).png filter=lfs diff=lfs merge=lfs -text
57
+ static/assets/image[[:space:]](22).png filter=lfs diff=lfs merge=lfs -text
58
+ static/assets/image[[:space:]](23).png filter=lfs diff=lfs merge=lfs -text
59
+ static/assets/image[[:space:]](24).png filter=lfs diff=lfs merge=lfs -text
60
+ static/assets/image[[:space:]](25).png filter=lfs diff=lfs merge=lfs -text
61
+ static/assets/image[[:space:]](26).png filter=lfs diff=lfs merge=lfs -text
62
+ static/assets/image[[:space:]](27).png filter=lfs diff=lfs merge=lfs -text
63
+ static/assets/image[[:space:]](28).png filter=lfs diff=lfs merge=lfs -text
64
+ static/assets/image[[:space:]](29).png filter=lfs diff=lfs merge=lfs -text
65
+ static/assets/image[[:space:]](30).png filter=lfs diff=lfs merge=lfs -text
66
+ static/assets/image[[:space:]](31).png filter=lfs diff=lfs merge=lfs -text
67
+ static/assets/image[[:space:]](32).png filter=lfs diff=lfs merge=lfs -text
68
+ static/assets/image[[:space:]](33).png filter=lfs diff=lfs merge=lfs -text
static/assets/image (1).png CHANGED

Git LFS Details

  • SHA256: 7555ef0b4568052d441645ad5ab0fa8f38c0ca900876ed2fb80727c8c1a637f0
  • Pointer size: 131 Bytes
  • Size of remote file: 525 kB

Git LFS Details

  • SHA256: 86ab4cf74b34bed581f2b846d02f1798f7e3b1c0b570ace62412c6a513cb57d6
  • Pointer size: 131 Bytes
  • Size of remote file: 412 kB
static/assets/image (10).png CHANGED

Git LFS Details

  • SHA256: 281985279856ca4fcb03eae38dc9e1569bba7def244cadd92829dcd1d83c8635
  • Pointer size: 131 Bytes
  • Size of remote file: 397 kB

Git LFS Details

  • SHA256: e9d3724fd24d59f9258c80d4217ce536ddfa2e23a494706bfb89b1ad827395aa
  • Pointer size: 131 Bytes
  • Size of remote file: 408 kB
static/assets/image (11).png CHANGED

Git LFS Details

  • SHA256: 180a1fd5a21ba8cd161666952286d9b408dcecfa99cdab392f8290c74066417a
  • Pointer size: 131 Bytes
  • Size of remote file: 414 kB

Git LFS Details

  • SHA256: 0a02cfd79c34a90f71b830d6e66ea088f8cf274347e3daa8055fb1c630dd3f16
  • Pointer size: 131 Bytes
  • Size of remote file: 516 kB
static/assets/image (12).png CHANGED

Git LFS Details

  • SHA256: 921eda83a86003ea4d9d9dcb2aee822bd3a71812e5c8471e007e83a6976e8522
  • Pointer size: 131 Bytes
  • Size of remote file: 403 kB

Git LFS Details

  • SHA256: 18f41604b89364d0ebecfea0d33db2308431956bda9cb71f95dbdc964e54815c
  • Pointer size: 131 Bytes
  • Size of remote file: 515 kB
static/assets/image (13).png CHANGED

Git LFS Details

  • SHA256: a8662cc6d381a50feed0811b6daade628cd4605826ba924f847cfda3aedd115e
  • Pointer size: 131 Bytes
  • Size of remote file: 544 kB

Git LFS Details

  • SHA256: a190d070f8864c41982e08a963807e8ca0ee50c218567c1da1221d923a66c735
  • Pointer size: 131 Bytes
  • Size of remote file: 511 kB
static/assets/image (14).png CHANGED

Git LFS Details

  • SHA256: 4571f02b6927024770434a46c0f37463a70d86abb82fa704bf1ea1a12fdba55a
  • Pointer size: 131 Bytes
  • Size of remote file: 514 kB

Git LFS Details

  • SHA256: 8704fd7308fce10acd55f6fd310233381f1e2e02205a044d4a9a7ba683ceaec6
  • Pointer size: 131 Bytes
  • Size of remote file: 440 kB
static/assets/image (15).png CHANGED

Git LFS Details

  • SHA256: 86ab4cf74b34bed581f2b846d02f1798f7e3b1c0b570ace62412c6a513cb57d6
  • Pointer size: 131 Bytes
  • Size of remote file: 412 kB

Git LFS Details

  • SHA256: 21e54e18b74b3b5460834eb02a082d69a4b6d901b9cfc5dc7c6c5bde8fc504bd
  • Pointer size: 131 Bytes
  • Size of remote file: 491 kB
static/assets/image (16).png CHANGED

Git LFS Details

  • SHA256: eb8686f981bd8cfe832889a6db08e4fc0c34b53f0c425f838f9fdf3dd48c837e
  • Pointer size: 131 Bytes
  • Size of remote file: 497 kB

Git LFS Details

  • SHA256: 86442e57b78ca592345ac6dffb3851e046a46f3702acb71bc4f326d7cc2e7642
  • Pointer size: 131 Bytes
  • Size of remote file: 366 kB
static/assets/image (17).png ADDED

Git LFS Details

  • SHA256: 558731e45d5f25a99fabb7b845d4b04f3429bb3055eea5a6006b2688536f22dc
  • Pointer size: 131 Bytes
  • Size of remote file: 507 kB
static/assets/image (18).png ADDED

Git LFS Details

  • SHA256: dc38b0f248df3792042509a57287549e8fbc00213e7f767e72c5f3e64d3d7bc1
  • Pointer size: 131 Bytes
  • Size of remote file: 452 kB
static/assets/image (19).png ADDED

Git LFS Details

  • SHA256: 3bb7be5b6c31aceca40d5f7f61d467d5dbdc0172923f8acd434392ed78db663a
  • Pointer size: 131 Bytes
  • Size of remote file: 495 kB
static/assets/image (2).png CHANGED

Git LFS Details

  • SHA256: c697ed9455d194737cbd0747af9c72dac9bb58800704d863ca51ee8175f3cef1
  • Pointer size: 131 Bytes
  • Size of remote file: 480 kB

Git LFS Details

  • SHA256: eb8686f981bd8cfe832889a6db08e4fc0c34b53f0c425f838f9fdf3dd48c837e
  • Pointer size: 131 Bytes
  • Size of remote file: 497 kB
static/assets/image (20).png ADDED

Git LFS Details

  • SHA256: 7555ef0b4568052d441645ad5ab0fa8f38c0ca900876ed2fb80727c8c1a637f0
  • Pointer size: 131 Bytes
  • Size of remote file: 525 kB
static/assets/image (21).png ADDED

Git LFS Details

  • SHA256: c697ed9455d194737cbd0747af9c72dac9bb58800704d863ca51ee8175f3cef1
  • Pointer size: 131 Bytes
  • Size of remote file: 480 kB
static/assets/image (22).png ADDED

Git LFS Details

  • SHA256: 8ef86c1d558c8e841affa2b5191ebcb30460c965fdad05188899aad3272ebcfa
  • Pointer size: 131 Bytes
  • Size of remote file: 432 kB
static/assets/image (23).png ADDED

Git LFS Details

  • SHA256: a99db375a533b1410f2f2ddf9dcbf8f04e354752aabd1d1a036bc41972b55cd8
  • Pointer size: 131 Bytes
  • Size of remote file: 517 kB
static/assets/image (24).png ADDED

Git LFS Details

  • SHA256: 36fc791aca67fb302f4336c67015d3faf32983108dc96a6257133114ba2aa4fc
  • Pointer size: 131 Bytes
  • Size of remote file: 437 kB
static/assets/image (25).png ADDED

Git LFS Details

  • SHA256: b48d908b70712b33b2518f7bcc6532eb291792ec2e1e886a6d403c4d0a8ca6b8
  • Pointer size: 131 Bytes
  • Size of remote file: 370 kB
static/assets/image (26).png ADDED

Git LFS Details

  • SHA256: f5830397eda7152995d9cb5a1d6993ba275db0a8cd2112badee4dd01de791ffe
  • Pointer size: 131 Bytes
  • Size of remote file: 453 kB
static/assets/image (27).png ADDED

Git LFS Details

  • SHA256: 5cac66a8add04e56a3f6017bf72f462e6194b3b17008c448996adea3436e3494
  • Pointer size: 131 Bytes
  • Size of remote file: 485 kB
static/assets/image (28).png ADDED

Git LFS Details

  • SHA256: c7014a036668e2f1b4b4b28f9f3d3de4f8c85575c7378124e8d7f88a2e7d79d8
  • Pointer size: 131 Bytes
  • Size of remote file: 478 kB
static/assets/image (29).png ADDED

Git LFS Details

  • SHA256: 281985279856ca4fcb03eae38dc9e1569bba7def244cadd92829dcd1d83c8635
  • Pointer size: 131 Bytes
  • Size of remote file: 397 kB
static/assets/image (30).png ADDED

Git LFS Details

  • SHA256: 180a1fd5a21ba8cd161666952286d9b408dcecfa99cdab392f8290c74066417a
  • Pointer size: 131 Bytes
  • Size of remote file: 414 kB
static/assets/image (31).png ADDED

Git LFS Details

  • SHA256: 921eda83a86003ea4d9d9dcb2aee822bd3a71812e5c8471e007e83a6976e8522
  • Pointer size: 131 Bytes
  • Size of remote file: 403 kB
static/assets/image (32).png ADDED

Git LFS Details

  • SHA256: a8662cc6d381a50feed0811b6daade628cd4605826ba924f847cfda3aedd115e
  • Pointer size: 131 Bytes
  • Size of remote file: 544 kB
static/assets/image (33).png ADDED

Git LFS Details

  • SHA256: 4571f02b6927024770434a46c0f37463a70d86abb82fa704bf1ea1a12fdba55a
  • Pointer size: 131 Bytes
  • Size of remote file: 514 kB
static/assets/image (4).png CHANGED

Git LFS Details

  • SHA256: a99db375a533b1410f2f2ddf9dcbf8f04e354752aabd1d1a036bc41972b55cd8
  • Pointer size: 131 Bytes
  • Size of remote file: 517 kB

Git LFS Details

  • SHA256: 15f22c2ee89264f78353a8c50ff9666fed632b032a351e8821fca84669a6fd6d
  • Pointer size: 131 Bytes
  • Size of remote file: 319 kB
static/assets/image (5).png CHANGED

Git LFS Details

  • SHA256: 36fc791aca67fb302f4336c67015d3faf32983108dc96a6257133114ba2aa4fc
  • Pointer size: 131 Bytes
  • Size of remote file: 437 kB

Git LFS Details

  • SHA256: 7cbf0fb7285e35b83047c9198a0986125e08824915724d91833cc9ba169bdd3d
  • Pointer size: 131 Bytes
  • Size of remote file: 556 kB
static/assets/image (6).png CHANGED

Git LFS Details

  • SHA256: b48d908b70712b33b2518f7bcc6532eb291792ec2e1e886a6d403c4d0a8ca6b8
  • Pointer size: 131 Bytes
  • Size of remote file: 370 kB

Git LFS Details

  • SHA256: 9dc08ae6e93cf335de2cc65db209c07ab32fadb38faca8d9fcb681e861913a4c
  • Pointer size: 131 Bytes
  • Size of remote file: 524 kB
static/assets/image (7).png CHANGED

Git LFS Details

  • SHA256: f5830397eda7152995d9cb5a1d6993ba275db0a8cd2112badee4dd01de791ffe
  • Pointer size: 131 Bytes
  • Size of remote file: 453 kB

Git LFS Details

  • SHA256: 40d28ad2ac3d1b4b09517d69841050c5143f83e12357f02b59af8011c4ec34fd
  • Pointer size: 131 Bytes
  • Size of remote file: 578 kB
static/assets/image (8).png CHANGED

Git LFS Details

  • SHA256: 5cac66a8add04e56a3f6017bf72f462e6194b3b17008c448996adea3436e3494
  • Pointer size: 131 Bytes
  • Size of remote file: 485 kB

Git LFS Details

  • SHA256: 8ef86c1d558c8e841affa2b5191ebcb30460c965fdad05188899aad3272ebcfa
  • Pointer size: 131 Bytes
  • Size of remote file: 432 kB
static/assets/image (9).png CHANGED

Git LFS Details

  • SHA256: c7014a036668e2f1b4b4b28f9f3d3de4f8c85575c7378124e8d7f88a2e7d79d8
  • Pointer size: 131 Bytes
  • Size of remote file: 478 kB

Git LFS Details

  • SHA256: 994036185690198164ea31b582d242f65acaf587859a5ae9151c78dc787796fa
  • Pointer size: 131 Bytes
  • Size of remote file: 531 kB
static/index.html CHANGED
@@ -1,517 +1,549 @@
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></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: 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 (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 (1).png" alt="Gallery Image" class="gallery-image">
385
+ <img src="/assets/image (2).png" alt="Gallery Image" class="gallery-image">
386
+ <img src="/assets/image (33).png" alt="Gallery Image" class="gallery-image">
387
+ <img src="/assets/image (4).png" alt="Gallery Image" class="gallery-image">
388
+ <img src="/assets/image (5).png" alt="Gallery Image" class="gallery-image">
389
+ <img src="/assets/image (6).png" alt="Gallery Image" class="gallery-image">
390
+ <img src="/assets/image (7).png" alt="Gallery Image" class="gallery-image">
391
+ <img src="/assets/image (8).png" alt="Gallery Image" class="gallery-image">
392
+ <img src="/assets/image (9).png" alt="Gallery Image" class="gallery-image">
393
+ <img src="/assets/image (10).png" alt="Gallery Image" class="gallery-image">
394
+ <img src="/assets/image (11).png" alt="Gallery Image" class="gallery-image">
395
+ <img src="/assets/image (12).png" alt="Gallery Image" class="gallery-image">
396
+ <img src="/assets/image (13).png" alt="Gallery Image" class="gallery-image">
397
+ <img src="/assets/image (14).png" alt="Gallery Image" class="gallery-image">
398
+ <img src="/assets/image (15).png" alt="Gallery Image" class="gallery-image">
399
+ <img src="/assets/image (16).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 (18).png" alt="Gallery Image" class="gallery-image">
402
+ <img src="/assets/image (19).png" alt="Gallery Image" class="gallery-image">
403
+ <img src="/assets/image (20).png" alt="Gallery Image" class="gallery-image">
404
+ <img src="/assets/image (21).png" alt="Gallery Image" class="gallery-image">
405
+ <img src="/assets/image (22).png" alt="Gallery Image" class="gallery-image">
406
+ <img src="/assets/image (23).png" alt="Gallery Image" class="gallery-image">
407
+ <img src="/assets/image (24).png" alt="Gallery Image" class="gallery-image">
408
+ <img src="/assets/image (25).png" alt="Gallery Image" class="gallery-image">
409
+ <img src="/assets/image (26).png" alt="Gallery Image" class="gallery-image">
410
+ <img src="/assets/image (27).png" alt="Gallery Image" class="gallery-image">
411
+ <img src="/assets/image (28).png" alt="Gallery Image" class="gallery-image">
412
+ <img src="/assets/image (29).png" alt="Gallery Image" class="gallery-image">
413
+ <img src="/assets/image (30).png" alt="Gallery Image" class="gallery-image">
414
+ <img src="/assets/image (31).png" alt="Gallery Image" class="gallery-image">
415
+ <img src="/assets/image (32).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>AI Image Generation Studio</h2>
425
+ <button class="back-button" onclick="showLandingPage()">← Back to Home</button>
426
+ </div>
427
+
428
+ <div class="container">
429
+ <h1>Create Your Images</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>