Hugging Face's logo

Spaces:
rmgn888
/
anycoder-1ecd92c4
Running

App Files Community
rmgn888 commited on
Commit
1cccc50
·
verified ·
1 Parent(s): af7140d

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +928 -19
index.html CHANGED
@@ -1,19 +1,928 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>NeuraFlow AI | Image Generation & Editing Pipeline</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #6366f1;
11
+ --primary-dark: #4f46e5;
12
+ --secondary: #06b6d4;
13
+ --dark: #0f172a;
14
+ --light: #f8fafc;
15
+ --gray: #94a3b8;
16
+ --success: #10b981;
17
+ --warning: #f59e0b;
18
+ --error: #ef4444;
19
+ --card-bg: rgba(255, 255, 255, 0.05);
20
+ --border: rgba(255, 255, 255, 0.1);
21
+ --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
22
+ --transition: all 0.3s ease;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
30
+ }
31
+
32
+ body {
33
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
34
+ color: var(--light);
35
+ min-height: 100vh;
36
+ line-height: 1.6;
37
+ overflow-x: hidden;
38
+ }
39
+
40
+ .container {
41
+ max-width: 1400px;
42
+ margin: 0 auto;
43
+ padding: 20px;
44
+ }
45
+
46
+ /* Header */
47
+ header {
48
+ display: flex;
49
+ justify-content: space-between;
50
+ align-items: center;
51
+ padding: 20px 0;
52
+ margin-bottom: 30px;
53
+ border-bottom: 1px solid var(--border);
54
+ }
55
+
56
+ .logo {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: 12px;
60
+ font-size: 1.8rem;
61
+ font-weight: 700;
62
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
63
+ -webkit-background-clip: text;
64
+ background-clip: text;
65
+ color: transparent;
66
+ }
67
+
68
+ .logo i {
69
+ font-size: 2.2rem;
70
+ }
71
+
72
+ .anycoder-link {
73
+ color: var(--secondary);
74
+ text-decoration: none;
75
+ font-size: 0.9rem;
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 5px;
79
+ transition: var(--transition);
80
+ }
81
+
82
+ .anycoder-link:hover {
83
+ color: var(--primary);
84
+ text-decoration: underline;
85
+ }
86
+
87
+ /* Main Layout */
88
+ .main-content {
89
+ display: grid;
90
+ grid-template-columns: 1fr 1fr;
91
+ gap: 30px;
92
+ margin-bottom: 40px;
93
+ }
94
+
95
+ @media (max-width: 1024px) {
96
+ .main-content {
97
+ grid-template-columns: 1fr;
98
+ }
99
+ }
100
+
101
+ /* Cards */
102
+ .card {
103
+ background: var(--card-bg);
104
+ border-radius: 16px;
105
+ padding: 24px;
106
+ backdrop-filter: blur(10px);
107
+ border: 1px solid var(--border);
108
+ box-shadow: var(--shadow);
109
+ transition: var(--transition);
110
+ }
111
+
112
+ .card:hover {
113
+ border-color: rgba(99, 102, 241, 0.3);
114
+ box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.3);
115
+ }
116
+
117
+ .card-header {
118
+ display: flex;
119
+ justify-content: space-between;
120
+ align-items: center;
121
+ margin-bottom: 20px;
122
+ padding-bottom: 15px;
123
+ border-bottom: 1px solid var(--border);
124
+ }
125
+
126
+ .card-title {
127
+ font-size: 1.4rem;
128
+ font-weight: 600;
129
+ display: flex;
130
+ align-items: center;
131
+ gap: 10px;
132
+ }
133
+
134
+ .card-title i {
135
+ color: var(--secondary);
136
+ }
137
+
138
+ /* Input Section */
139
+ .prompt-container {
140
+ margin-bottom: 25px;
141
+ }
142
+
143
+ .prompt-label {
144
+ display: block;
145
+ margin-bottom: 10px;
146
+ font-weight: 500;
147
+ color: var(--gray);
148
+ }
149
+
150
+ .prompt-input {
151
+ width: 100%;
152
+ background: rgba(15, 23, 42, 0.7);
153
+ border: 1px solid var(--border);
154
+ border-radius: 10px;
155
+ padding: 16px;
156
+ color: var(--light);
157
+ font-size: 1rem;
158
+ resize: vertical;
159
+ min-height: 120px;
160
+ transition: var(--transition);
161
+ }
162
+
163
+ .prompt-input:focus {
164
+ outline: none;
165
+ border-color: var(--primary);
166
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
167
+ }
168
+
169
+ /* Model Selection */
170
+ .model-selection {
171
+ display: grid;
172
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
173
+ gap: 15px;
174
+ margin-bottom: 25px;
175
+ }
176
+
177
+ .model-option {
178
+ background: rgba(15, 23, 42, 0.7);
179
+ border: 1px solid var(--border);
180
+ border-radius: 10px;
181
+ padding: 15px;
182
+ text-align: center;
183
+ cursor: pointer;
184
+ transition: var(--transition);
185
+ }
186
+
187
+ .model-option:hover {
188
+ border-color: var(--primary);
189
+ transform: translateY(-3px);
190
+ }
191
+
192
+ .model-option.active {
193
+ border-color: var(--primary);
194
+ background: rgba(99, 102, 241, 0.1);
195
+ }
196
+
197
+ .model-icon {
198
+ font-size: 2rem;
199
+ margin-bottom: 10px;
200
+ color: var(--secondary);
201
+ }
202
+
203
+ .model-name {
204
+ font-weight: 600;
205
+ margin-bottom: 5px;
206
+ }
207
+
208
+ .model-desc {
209
+ font-size: 0.85rem;
210
+ color: var(--gray);
211
+ }
212
+
213
+ /* Parameters */
214
+ .parameters {
215
+ display: grid;
216
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
217
+ gap: 20px;
218
+ margin-bottom: 25px;
219
+ }
220
+
221
+ .param-group {
222
+ display: flex;
223
+ flex-direction: column;
224
+ }
225
+
226
+ .param-label {
227
+ display: flex;
228
+ justify-content: space-between;
229
+ margin-bottom: 8px;
230
+ font-weight: 500;
231
+ }
232
+
233
+ .param-value {
234
+ color: var(--secondary);
235
+ font-weight: 600;
236
+ }
237
+
238
+ .slider {
239
+ width: 100%;
240
+ height: 8px;
241
+ border-radius: 4px;
242
+ background: rgba(15, 23, 42, 0.7);
243
+ outline: none;
244
+ -webkit-appearance: none;
245
+ }
246
+
247
+ .slider::-webkit-slider-thumb {
248
+ -webkit-appearance: none;
249
+ width: 20px;
250
+ height: 20px;
251
+ border-radius: 50%;
252
+ background: var(--primary);
253
+ cursor: pointer;
254
+ border: 3px solid var(--light);
255
+ }
256
+
257
+ /* Buttons */
258
+ .btn-group {
259
+ display: flex;
260
+ gap: 15px;
261
+ margin-top: 20px;
262
+ }
263
+
264
+ .btn {
265
+ flex: 1;
266
+ padding: 16px 24px;
267
+ border: none;
268
+ border-radius: 10px;
269
+ font-weight: 600;
270
+ font-size: 1rem;
271
+ cursor: pointer;
272
+ transition: var(--transition);
273
+ display: flex;
274
+ align-items: center;
275
+ justify-content: center;
276
+ gap: 10px;
277
+ }
278
+
279
+ .btn-primary {
280
+ background: linear-gradient(90deg, var(--primary), var(--primary-dark));
281
+ color: white;
282
+ }
283
+
284
+ .btn-primary:hover {
285
+ transform: translateY(-3px);
286
+ box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4);
287
+ }
288
+
289
+ .btn-secondary {
290
+ background: rgba(255, 255, 255, 0.1);
291
+ color: white;
292
+ border: 1px solid var(--border);
293
+ }
294
+
295
+ .btn-secondary:hover {
296
+ background: rgba(255, 255, 255, 0.15);
297
+ transform: translateY(-3px);
298
+ }
299
+
300
+ /* Image Display */
301
+ .image-container {
302
+ position: relative;
303
+ width: 100%;
304
+ height: 400px;
305
+ border-radius: 16px;
306
+ overflow: hidden;
307
+ background: rgba(15, 23, 42, 0.7);
308
+ border: 1px solid var(--border);
309
+ display: flex;
310
+ align-items: center;
311
+ justify-content: center;
312
+ margin-bottom: 25px;
313
+ }
314
+
315
+ .image-placeholder {
316
+ text-align: center;
317
+ color: var(--gray);
318
+ }
319
+
320
+ .image-placeholder i {
321
+ font-size: 4rem;
322
+ margin-bottom: 15px;
323
+ color: var(--secondary);
324
+ }
325
+
326
+ .generated-image {
327
+ max-width: 100%;
328
+ max-height: 100%;
329
+ object-fit: contain;
330
+ border-radius: 8px;
331
+ display: none;
332
+ }
333
+
334
+ /* Pipeline Visualization */
335
+ .pipeline {
336
+ display: flex;
337
+ align-items: center;
338
+ justify-content: center;
339
+ margin: 40px 0;
340
+ }
341
+
342
+ .pipeline-step {
343
+ display: flex;
344
+ flex-direction: column;
345
+ align-items: center;
346
+ text-align: center;
347
+ width: 120px;
348
+ position: relative;
349
+ }
350
+
351
+ .pipeline-step:not(:last-child)::after {
352
+ content: '';
353
+ position: absolute;
354
+ top: 25px;
355
+ right: -60px;
356
+ width: 120px;
357
+ height: 2px;
358
+ background: var(--border);
359
+ }
360
+
361
+ .step-icon {
362
+ width: 50px;
363
+ height: 50px;
364
+ border-radius: 50%;
365
+ background: rgba(15, 23, 42, 0.7);
366
+ border: 2px solid var(--border);
367
+ display: flex;
368
+ align-items: center;
369
+ justify-content: center;
370
+ font-size: 1.2rem;
371
+ margin-bottom: 10px;
372
+ transition: var(--transition);
373
+ }
374
+
375
+ .pipeline-step.active .step-icon {
376
+ background: rgba(99, 102, 241, 0.2);
377
+ border-color: var(--primary);
378
+ color: var(--primary);
379
+ }
380
+
381
+ .step-name {
382
+ font-size: 0.9rem;
383
+ font-weight: 500;
384
+ }
385
+
386
+ /* Editing Tools */
387
+ .edit-tools {
388
+ display: grid;
389
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
390
+ gap: 15px;
391
+ margin-top: 20px;
392
+ }
393
+
394
+ .edit-tool {
395
+ background: rgba(15, 23, 42, 0.7);
396
+ border: 1px solid var(--border);
397
+ border-radius: 10px;
398
+ padding: 15px;
399
+ text-align: center;
400
+ cursor: pointer;
401
+ transition: var(--transition);
402
+ }
403
+
404
+ .edit-tool:hover {
405
+ border-color: var(--secondary);
406
+ transform: translateY(-3px);
407
+ }
408
+
409
+ .edit-tool i {
410
+ font-size: 1.5rem;
411
+ color: var(--secondary);
412
+ margin-bottom: 10px;
413
+ }
414
+
415
+ /* Processing Animation */
416
+ .processing {
417
+ display: none;
418
+ text-align: center;
419
+ padding: 20px;
420
+ }
421
+
422
+ .spinner {
423
+ width: 50px;
424
+ height: 50px;
425
+ border: 4px solid rgba(6, 182, 212, 0.2);
426
+ border-top-color: var(--secondary);
427
+ border-radius: 50%;
428
+ animation: spin 1s linear infinite;
429
+ margin: 0 auto 15px;
430
+ }
431
+
432
+ @keyframes spin {
433
+ to { transform: rotate(360deg); }
434
+ }
435
+
436
+ /* Footer */
437
+ footer {
438
+ text-align: center;
439
+ padding: 30px 0;
440
+ margin-top: 40px;
441
+ border-top: 1px solid var(--border);
442
+ color: var(--gray);
443
+ font-size: 0.9rem;
444
+ }
445
+
446
+ /* Responsive */
447
+ @media (max-width: 768px) {
448
+ .main-content {
449
+ gap: 20px;
450
+ }
451
+
452
+ .card {
453
+ padding: 20px;
454
+ }
455
+
456
+ .model-selection {
457
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
458
+ }
459
+
460
+ .pipeline {
461
+ flex-wrap: wrap;
462
+ gap: 30px;
463
+ }
464
+
465
+ .pipeline-step:not(:last-child)::after {
466
+ display: none;
467
+ }
468
+
469
+ .btn-group {
470
+ flex-direction: column;
471
+ }
472
+ }
473
+
474
+ @media (max-width: 480px) {
475
+ .container {
476
+ padding: 15px;
477
+ }
478
+
479
+ .logo {
480
+ font-size: 1.4rem;
481
+ }
482
+
483
+ .parameters {
484
+ grid-template-columns: 1fr;
485
+ }
486
+
487
+ .image-container {
488
+ height: 300px;
489
+ }
490
+ }
491
+ </style>
492
+ </head>
493
+ <body>
494
+ <div class="container">
495
+ <header>
496
+ <div class="logo">
497
+ <i class="fas fa-brain-circuit"></i>
498
+ <span>NeuraFlow AI</span>
499
+ </div>
500
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
501
+ <i class="fas fa-code"></i>
502
+ <span>Built with anycoder</span>
503
+ </a>
504
+ </header>
505
+
506
+ <div class="main-content">
507
+ <!-- Generation Panel -->
508
+ <div class="card">
509
+ <div class="card-header">
510
+ <h2 class="card-title">
511
+ <i class="fas fa-robot"></i>
512
+ AI Image Generation
513
+ </h2>
514
+ <div class="status-indicator">
515
+ <span class="status-dot active"></span>
516
+ <span class="status-text">Ready</span>
517
+ </div>
518
+ </div>
519
+
520
+ <div class="prompt-container">
521
+ <label class="prompt-label" for="prompt-input">
522
+ <i class="fas fa-keyboard"></i> Describe your image
523
+ </label>
524
+ <textarea
525
+ id="prompt-input"
526
+ class="prompt-input"
527
+ placeholder="A futuristic cityscape at sunset with flying cars and neon lights, cyberpunk style, highly detailed, 4k"
528
+ >A futuristic cityscape at sunset with flying cars and neon lights, cyberpunk style, highly detailed, 4k</textarea>
529
+ </div>
530
+
531
+ <div class="model-selection">
532
+ <div class="model-option active" data-model="grok">
533
+ <div class="model-icon">
534
+ <i class="fas fa-brain"></i>
535
+ </div>
536
+ <div class="model-name">Grok-Vision</div>
537
+ <div class="model-desc">Advanced multimodal</div>
538
+ </div>
539
+ <div class="model-option" data-model="dalle">
540
+ <div class="model-icon">
541
+ <i class="fas fa-palette"></i>
542
+ </div>
543
+ <div class="model-name">DALL-E 3</div>
544
+ <div class="model-desc">Creative & artistic</div>
545
+ </div>
546
+ <div class="model-option" data-model="midjourney">
547
+ <div class="model-icon">
548
+ <i class="fas fa-magic"></i>
549
+ </div>
550
+ <div class="model-name">Midjourney V6</div>
551
+ <div class="model-desc">Stylized & detailed</div>
552
+ </div>
553
+ <div class="model-option" data-model="stable">
554
+ <div class="model-icon">
555
+ <i class="fas fa-cube"></i>
556
+ </div>
557
+ <div class="model-name">Stable Diffusion</div>
558
+ <div class="model-desc">Open source</div>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="parameters">
563
+ <div class="param-group">
564
+ <label class="param-label" for="creativity-slider">
565
+ Creativity
566
+ <span class="param-value" id="creativity-value">7</span>
567
+ </label>
568
+ <input type="range" min="1" max="10" value="7" class="slider" id="creativity-slider">
569
+ </div>
570
+ <div class="param-group">
571
+ <label class="param-label" for="detail-slider">
572
+ Detail
573
+ <span class="param-value" id="detail-value">8</span>
574
+ </label>
575
+ <input type="range" min="1" max="10" value="8" class="slider" id="detail-slider">
576
+ </div>
577
+ <div class="param-group">
578
+ <label class="param-label" for="style-slider">
579
+ Style Strength
580
+ <span class="param-value" id="style-value">6</span>
581
+ </label>
582
+ <input type="range" min="1" max="10" value="6" class="slider" id="style-slider">
583
+ </div>
584
+ </div>
585
+
586
+ <div class="btn-group">
587
+ <button class="btn btn-primary" id="generate-btn">
588
+ <i class="fas fa-bolt"></i>
589
+ Generate Image
590
+ </button>
591
+ <button class="btn btn-secondary" id="random-prompt">
592
+ <i class="fas fa-dice"></i>
593
+ Random Prompt
594
+ </button>
595
+ </div>
596
+
597
+ <div class="processing" id="processing">
598
+ <div class="spinner"></div>
599
+ <p>Generating your image with AI... This may take a moment.</p>
600
+ <p class="processing-detail" id="processing-detail">Initializing Grok-Vision model...</p>
601
+ </div>
602
+ </div>
603
+
604
+ <!-- Image Display & Editing Panel -->
605
+ <div class="card">
606
+ <div class="card-header">
607
+ <h2 class="card-title">
608
+ <i class="fas fa-image"></i>
609
+ Output & Editing
610
+ </h2>
611
+ <div class="image-actions">
612
+ <button class="btn-secondary" id="download-btn" style="padding: 8px 12px; font-size: 0.9rem;">
613
+ <i class="fas fa-download"></i>
614
+ </button>
615
+ </div>
616
+ </div>
617
+
618
+ <div class="image-container">
619
+ <div class="image-placeholder" id="image-placeholder">
620
+ <i class="fas fa-cloud-upload-alt"></i>
621
+ <p>Your generated image will appear here</p>
622
+ <p>You can also upload an image to edit</p>
623
+ </div>
624
+ <img src="" alt="Generated Image" class="generated-image" id="generated-image">
625
+ </div>
626
+
627
+ <!-- Pipeline Visualization -->
628
+ <div class="pipeline">
629
+ <div class="pipeline-step active" id="step-1">
630
+ <div class="step-icon">
631
+ <i class="fas fa-keyboard"></i>
632
+ </div>
633
+ <div class="step-name">Input</div>
634
+ </div>
635
+ <div class="pipeline-step" id="step-2">
636
+ <div class="step-icon">
637
+ <i class="fas fa-brain"></i>
638
+ </div>
639
+ <div class="step-name">Processing</div>
640
+ </div>
641
+ <div class="pipeline-step" id="step-3">
642
+ <div class="step-icon">
643
+ <i class="fas fa-image"></i>
644
+ </div>
645
+ <div class="step-name">Generation</div>
646
+ </div>
647
+ <div class="pipeline-step" id="step-4">
648
+ <div class="step-icon">
649
+ <i class="fas fa-sliders-h"></i>
650
+ </div>
651
+ <div class="step-name">Refinement</div>
652
+ </div>
653
+ <div class="pipeline-step" id="step-5">
654
+ <div class="step-icon">
655
+ <i class="fas fa-check-circle"></i>
656
+ </div>
657
+ <div class="step-name">Output</div>
658
+ </div>
659
+ </div>
660
+
661
+ <h3 class="card-title" style="margin-top: 30px;">
662
+ <i class="fas fa-edit"></i>
663
+ Edit Tools
664
+ </h3>
665
+
666
+ <div class="edit-tools">
667
+ <div class="edit-tool" data-edit="enhance">
668
+ <i class="fas fa-star"></i>
669
+ <div>Enhance</div>
670
+ </div>
671
+ <div class="edit-tool" data-edit="upscale">
672
+ <i class="fas fa-expand-alt"></i>
673
+ <div>Upscale 2x</div>
674
+ </div>
675
+ <div class="edit-tool" data-edit="style">
676
+ <i class="fas fa-paint-brush"></i>
677
+ <div>Change Style</div>
678
+ </div>
679
+ <div class="edit-tool" data-edit="background">
680
+ <i class="fas fa-layer-group"></i>
681
+ <div>Remove BG</div>
682
+ </div>
683
+ <div class="edit-tool" data-edit="color">
684
+ <i class="fas fa-fill-drip"></i>
685
+ <div>Recolor</div>
686
+ </div>
687
+ <div class="edit-tool" data-edit="object">
688
+ <i class="fas fa-plus-circle"></i>
689
+ <div>Add Object</div>
690
+ </div>
691
+ </div>
692
+
693
+ <div class="btn-group" style="margin-top: 30px;">
694
+ <button class="btn btn-secondary" id="upload-btn">
695
+ <i class="fas fa-upload"></i>
696
+ Upload Image to Edit
697
+ </button>
698
+ <button class="btn btn-primary" id="apply-edit-btn" disabled>
699
+ <i class="fas fa-play"></i>
700
+ Apply Edit
701
+ </button>
702
+ </div>
703
+ </div>
704
+ </div>
705
+
706
+ <footer>
707
+ <p>NeuraFlow AI Pipeline v1.2 | Advanced image generation and editing with state-of-the-art AI models</p>
708
+ <p>© 2023 NeuraFlow AI. All rights reserved. | <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank" style="display: inline;">Built with anycoder</a></p>
709
+ </footer>
710
+ </div>
711
+
712
+ <script>
713
+ // DOM Elements
714
+ const promptInput = document.getElementById('prompt-input');
715
+ const generateBtn = document.getElementById('generate-btn');
716
+ const randomPromptBtn = document.getElementById('random-prompt');
717
+ const processingDiv = document.getElementById('processing');
718
+ const processingDetail = document.getElementById('processing-detail');
719
+ const imagePlaceholder = document.getElementById('image-placeholder');
720
+ const generatedImage = document.getElementById('generated-image');
721
+ const downloadBtn = document.getElementById('download-btn');
722
+ const uploadBtn = document.getElementById('upload-btn');
723
+ const applyEditBtn = document.getElementById('apply-edit-btn');
724
+ const modelOptions = document.querySelectorAll('.model-option');
725
+ const sliders = document.querySelectorAll('.slider');
726
+ const pipelineSteps = document.querySelectorAll('.pipeline-step');
727
+ const editTools = document.querySelectorAll('.edit-tool');
728
+
729
+ // Sample images for demonstration
730
+ const sampleImages = [
731
+ 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
732
+ 'https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
733
+ 'https://images.unsplash.com/photo-1550684376-efcbd6e3f031?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
734
+ 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
735
+ ];
736
+
737
+ // Random prompts for demo
738
+ const randomPrompts = [
739
+ "A majestic dragon soaring over a medieval castle at sunrise, fantasy art, highly detailed, digital painting",
740
+ "An astronaut exploring an alien jungle with bioluminescent plants, sci-fi, cinematic lighting",
741
+ "A cyberpunk street market in a futuristic Asian city at night, neon signs, rain reflections",
742
+ "A serene landscape of floating islands with waterfalls, Studio Ghibli style, soft colors",
743
+ "A steampunk laboratory with intricate brass machinery, gears, and glowing crystals",
744
+ "A magical library with infinite bookshelves, floating books, and celestial ceiling"
745
+ ];
746
+
747
+ // Selected model and edit tool
748
+ let selectedModel = 'grok';
749
+ let selectedEditTool = null;
750
+
751
+ // Initialize sliders
752
+ sliders.forEach(slider => {
753
+ const valueElement = document.getElementById(`${slider.id.replace('-slider', '')}-value`);
754
+ valueElement.textContent = slider.value;
755
+
756
+ slider.addEventListener('input', () => {
757
+ valueElement.textContent = slider.value;
758
+ });
759
+ });
760
+
761
+ // Model selection
762
+ modelOptions.forEach(option => {
763
+ option.addEventListener('click', () => {
764
+ modelOptions.forEach(opt => opt.classList.remove('active'));
765
+ option.classList.add('active');
766
+ selectedModel = option.getAttribute('data-model');
767
+ });
768
+ });
769
+
770
+ // Edit tool selection
771
+ editTools.forEach(tool => {
772
+ tool.addEventListener('click', () => {
773
+ editTools.forEach(t => t.style.borderColor = '');
774
+ tool.style.borderColor = 'var(--secondary)';
775
+ selectedEditTool = tool.getAttribute('data-edit');
776
+ applyEditBtn.disabled = false;
777
+ });
778
+ });
779
+
780
+ // Random prompt button
781
+ randomPromptBtn.addEventListener('click', () => {
782
+ const randomIndex = Math.floor(Math.random() * randomPrompts.length);
783
+ promptInput.value = randomPrompts[randomIndex];
784
+ });
785
+
786
+ // Generate image button
787
+ generateBtn.addEventListener('click', () => {
788
+ // Show processing
789
+ processingDiv.style.display = 'block';
790
+ generateBtn.disabled = true;
791
+
792
+ // Reset pipeline visualization
793
+ pipelineSteps.forEach(step => step.classList.remove('active'));
794
+ pipelineSteps[0].classList.add('active');
795
+
796
+ // Simulate pipeline steps
797
+ const steps = [
798
+ "Processing your prompt with Grok-Vision...",
799
+ "Analyzing semantic context and style parameters...",
800
+ "Generating initial image composition...",
801
+ "Refining details and enhancing visual quality...",
802
+ "Finalizing output and applying post-processing..."
803
+ ];
804
+
805
+ let step = 0;
806
+ const processInterval = setInterval(() => {
807
+ if (step < steps.length) {
808
+ processingDetail.textContent = steps[step];
809
+ pipelineSteps[step].classList.add('active');
810
+ step++;
811
+ } else {
812
+ clearInterval(processInterval);
813
+
814
+ // Show generated image after a delay
815
+ setTimeout(() => {
816
+ processingDiv.style.display = 'none';
817
+ generateBtn.disabled = false;
818
+
819
+ // Randomly select a sample image for demo
820
+ const randomImage = sampleImages[Math.floor(Math.random() * sampleImages.length)];
821
+ generatedImage.src = randomImage;
822
+ generatedImage.style.display = 'block';
823
+ imagePlaceholder.style.display = 'none';
824
+
825
+ // Enable download button
826
+ downloadBtn.disabled = false;
827
+ }, 1000);
828
+ }
829
+ }, 800);
830
+ });
831
+
832
+ // Download button
833
+ downloadBtn.addEventListener('click', () => {
834
+ if (generatedImage.src) {
835
+ // Create a temporary link to download the image
836
+ const link = document.createElement('a');
837
+ link.href = generatedImage.src;
838
+ link.download = 'neuraflow-ai-generated-image.jpg';
839
+ document.body.appendChild(link);
840
+ link.click();
841
+ document.body.removeChild(link);
842
+
843
+ // Show feedback
844
+ const originalText = downloadBtn.innerHTML;
845
+ downloadBtn.innerHTML = '<i class="fas fa-check"></i> Downloaded!';
846
+ downloadBtn.style.background = 'var(--success)';
847
+
848
+ setTimeout(() => {
849
+ downloadBtn.innerHTML = originalText;
850
+ downloadBtn.style.background = '';
851
+ }, 2000);
852
+ }
853
+ });
854
+
855
+ // Upload button
856
+ uploadBtn.addEventListener('click', () => {
857
+ // Simulate file upload
858
+ const fileInput = document.createElement('input');
859
+ fileInput.type = 'file';
860
+ fileInput.accept = 'image/*';
861
+
862
+ fileInput.addEventListener('change', (e) => {
863
+ if (e.target.files && e.target.files[0]) {
864
+ const reader = new FileReader();
865
+
866
+ reader.onload = (event) => {
867
+ generatedImage.src = event.target.result;
868
+ generatedImage.style.display = 'block';
869
+ imagePlaceholder.style.display = 'none';
870
+
871
+ // Reset edit selection
872
+ editTools.forEach(t => t.style.borderColor = '');
873
+ selectedEditTool = null;
874
+ applyEditBtn.disabled = true;
875
+ };
876
+
877
+ reader.readAsDataURL(e.target.files[0]);
878
+ }
879
+ });
880
+
881
+ fileInput.click();
882
+ });
883
+
884
+ // Apply edit button
885
+ applyEditBtn.addEventListener('click', () => {
886
+ if (!selectedEditTool) return;
887
+
888
+ // Show processing
889
+ processingDiv.style.display = 'block';
890
+ processingDetail.textContent = `Applying ${selectedEditTool} edit...`;
891
+ applyEditBtn.disabled = true;
892
+
893
+ // Simulate edit processing
894
+ setTimeout(() => {
895
+ processingDiv.style.display = 'none';
896
+ applyEditBtn.disabled = false;
897
+
898
+ // Show a different sample image as if edited
899
+ const currentIndex = sampleImages.indexOf(generatedImage.src);
900
+ let nextIndex = (currentIndex + 1) % sampleImages.length;
901
+ if (currentIndex === -1) nextIndex = 0;
902
+
903
+ generatedImage.src = sampleImages[nextIndex];
904
+
905
+ // Show feedback
906
+ const originalText = applyEditBtn.innerHTML;
907
+ applyEditBtn.innerHTML = '<i class="fas fa-check"></i> Edit Applied!';
908
+ applyEditBtn.style.background = 'var(--success)';
909
+
910
+ setTimeout(() => {
911
+ applyEditBtn.innerHTML = originalText;
912
+ applyEditBtn.style.background = '';
913
+ }, 2000);
914
+ }, 1500);
915
+ });
916
+
917
+ // Initialize with a sample image for demo purposes
918
+ window.addEventListener('load', () => {
919
+ // Show a sample image after a short delay
920
+ setTimeout(() => {
921
+ generatedImage.src = sampleImages[0];
922
+ generatedImage.style.display = 'block';
923
+ imagePlaceholder.style.display = 'none';
924
+ }, 500);
925
+ });
926
+ </script>
927
+ </body>
928
+ </html>