Hugging Face's logo

Spaces:
thetwistedpixie
/
anycoder-9cb50c91
Running

App Files Community
thetwistedpixie commited on
Commit
c1abf59
·
verified ·
1 Parent(s): f4608b9

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +560 -19
index.html CHANGED
@@ -1,19 +1,560 @@
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>Father & Son Image Creator</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ }
15
+
16
+ body {
17
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
18
+ color: white;
19
+ min-height: 100vh;
20
+ padding: 20px;
21
+ }
22
+
23
+ .container {
24
+ max-width: 1200px;
25
+ margin: 0 auto;
26
+ }
27
+
28
+ .header {
29
+ display: flex;
30
+ justify-content: space-between;
31
+ align-items: center;
32
+ padding: 20px 0;
33
+ border-bottom: 2px solid rgba(255, 255, 255, 0.1);
34
+ margin-bottom: 30px;
35
+ }
36
+
37
+ .logo {
38
+ display: flex;
39
+ align-items: center;
40
+ gap: 15px;
41
+ }
42
+
43
+ .logo i {
44
+ font-size: 2.5rem;
45
+ color: #ffd700;
46
+ }
47
+
48
+ .logo h1 {
49
+ font-size: 2rem;
50
+ font-weight: 700;
51
+ }
52
+
53
+ .anycoder-link {
54
+ color: #ffd700;
55
+ text-decoration: none;
56
+ font-weight: 600;
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ .anycoder-link:hover {
61
+ text-decoration: underline;
62
+ transform: scale(1.05);
63
+ }
64
+
65
+ .main-content {
66
+ display: grid;
67
+ grid-template-columns: 1fr 1fr;
68
+ gap: 30px;
69
+ margin-bottom: 40px;
70
+ }
71
+
72
+ @media (max-width: 768px) {
73
+ .main-content {
74
+ grid-template-columns: 1fr;
75
+ }
76
+ }
77
+
78
+ .controls {
79
+ background: rgba(255, 255, 255, 0.1);
80
+ backdrop-filter: blur(10px);
81
+ border-radius: 20px;
82
+ padding: 30px;
83
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
84
+ }
85
+
86
+ .controls h2 {
87
+ margin-bottom: 20px;
88
+ font-size: 1.8rem;
89
+ color: #ffd700;
90
+ text-align: center;
91
+ }
92
+
93
+ .setting-group {
94
+ margin-bottom: 25px;
95
+ }
96
+
97
+ .setting-group label {
98
+ display: block;
99
+ margin-bottom: 8px;
100
+ font-weight: 600;
101
+ }
102
+
103
+ .setting-group select, .setting-group input {
104
+ width: 100%;
105
+ padding: 12px 15px;
106
+ border-radius: 10px;
107
+ border: none;
108
+ background: rgba(255, 255, 255, 0.9);
109
+ font-size: 1rem;
110
+ }
111
+
112
+ .setting-group textarea {
113
+ width: 100%;
114
+ height: 100px;
115
+ padding: 12px 15px;
116
+ border-radius: 10px;
117
+ border: none;
118
+ background: rgba(255, 255, 255, 0.9);
119
+ font-size: 1rem;
120
+ resize: vertical;
121
+ }
122
+
123
+ .button-group {
124
+ display: flex;
125
+ gap: 15px;
126
+ margin-top: 30px;
127
+ }
128
+
129
+ .btn {
130
+ flex: 1;
131
+ padding: 15px;
132
+ border: none;
133
+ border-radius: 10px;
134
+ font-size: 1.1rem;
135
+ font-weight: 600;
136
+ cursor: pointer;
137
+ transition: all 0.3s ease;
138
+ display: flex;
139
+ align-items: center;
140
+ justify-content: center;
141
+ gap: 10px;
142
+ }
143
+
144
+ .btn-primary {
145
+ background: #ffd700;
146
+ color: #1e3c72;
147
+ }
148
+
149
+ .btn-primary:hover {
150
+ background: #ffed4e;
151
+ transform: translateY(-3px);
152
+ box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
153
+ }
154
+
155
+ .btn-secondary {
156
+ background: rgba(255, 255, 255, 0.2);
157
+ color: white;
158
+ }
159
+
160
+ .btn-secondary:hover {
161
+ background: rgba(255, 255, 255, 0.3);
162
+ transform: translateY(-3px);
163
+ }
164
+
165
+ .preview {
166
+ background: rgba(255, 255, 255, 0.1);
167
+ backdrop-filter: blur(10px);
168
+ border-radius: 20px;
169
+ padding: 30px;
170
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
171
+ display: flex;
172
+ flex-direction: column;
173
+ align-items: center;
174
+ justify-content: center;
175
+ }
176
+
177
+ .preview h2 {
178
+ margin-bottom: 20px;
179
+ font-size: 1.8rem;
180
+ color: #ffd700;
181
+ text-align: center;
182
+ }
183
+
184
+ .image-container {
185
+ width: 100%;
186
+ height: 400px;
187
+ background: rgba(255, 255, 255, 0.05);
188
+ border-radius: 15px;
189
+ display: flex;
190
+ align-items: center;
191
+ justify-content: center;
192
+ overflow: hidden;
193
+ margin-bottom: 20px;
194
+ border: 2px dashed rgba(255, 255, 255, 0.2);
195
+ }
196
+
197
+ .image-placeholder {
198
+ text-align: center;
199
+ color: rgba(255, 255, 255, 0.5);
200
+ }
201
+
202
+ .image-placeholder i {
203
+ font-size: 4rem;
204
+ margin-bottom: 15px;
205
+ color: rgba(255, 255, 255, 0.3);
206
+ }
207
+
208
+ .generated-image {
209
+ max-width: 100%;
210
+ max-height: 100%;
211
+ border-radius: 10px;
212
+ display: none;
213
+ }
214
+
215
+ .image-info {
216
+ width: 100%;
217
+ padding: 15px;
218
+ background: rgba(255, 255, 255, 0.1);
219
+ border-radius: 10px;
220
+ margin-top: 15px;
221
+ }
222
+
223
+ .image-info h3 {
224
+ margin-bottom: 10px;
225
+ color: #ffd700;
226
+ }
227
+
228
+ .gallery {
229
+ margin-top: 40px;
230
+ }
231
+
232
+ .gallery h2 {
233
+ text-align: center;
234
+ margin-bottom: 30px;
235
+ font-size: 2rem;
236
+ color: #ffd700;
237
+ }
238
+
239
+ .gallery-grid {
240
+ display: grid;
241
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
242
+ gap: 20px;
243
+ }
244
+
245
+ .gallery-item {
246
+ background: rgba(255, 255, 255, 0.1);
247
+ border-radius: 15px;
248
+ overflow: hidden;
249
+ transition: transform 0.3s ease;
250
+ cursor: pointer;
251
+ }
252
+
253
+ .gallery-item:hover {
254
+ transform: translateY(-5px);
255
+ }
256
+
257
+ .gallery-img {
258
+ width: 100%;
259
+ height: 200px;
260
+ background: rgba(255, 255, 255, 0.05);
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: center;
264
+ color: rgba(255, 255, 255, 0.5);
265
+ }
266
+
267
+ .gallery-info {
268
+ padding: 15px;
269
+ }
270
+
271
+ .gallery-info h4 {
272
+ margin-bottom: 5px;
273
+ }
274
+
275
+ .loading {
276
+ display: none;
277
+ text-align: center;
278
+ padding: 20px;
279
+ }
280
+
281
+ .loading-spinner {
282
+ width: 50px;
283
+ height: 50px;
284
+ border: 5px solid rgba(255, 255, 255, 0.3);
285
+ border-radius: 50%;
286
+ border-top-color: #ffd700;
287
+ animation: spin 1s linear infinite;
288
+ margin: 0 auto 15px;
289
+ }
290
+
291
+ @keyframes spin {
292
+ to {
293
+ transform: rotate(360deg);
294
+ }
295
+ }
296
+
297
+ .notification {
298
+ position: fixed;
299
+ bottom: 20px;
300
+ right: 20px;
301
+ background: #4CAF50;
302
+ color: white;
303
+ padding: 15px 25px;
304
+ border-radius: 10px;
305
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
306
+ display: none;
307
+ z-index: 1000;
308
+ }
309
+
310
+ .notification.error {
311
+ background: #f44336;
312
+ }
313
+ </style>
314
+ </head>
315
+ <body>
316
+ <div class="container">
317
+ <div class="header">
318
+ <div class="logo">
319
+ <i class="fas fa-users"></i>
320
+ <h1>Father & Son Image Creator</h1>
321
+ </div>
322
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
323
+ </div>
324
+
325
+ <div class="main-content">
326
+ <div class="controls">
327
+ <h2>Create Your Father & Son Image</h2>
328
+
329
+ <div class="setting-group">
330
+ <label for="scene">Scene/Situation</label>
331
+ <select id="scene">
332
+ <option value="playing">Playing in the Park</option>
333
+ <option value="fishing">Fishing Trip</option>
334
+ <option value="sports">Playing Sports</option>
335
+ <option value="reading">Reading Together</option>
336
+ <option value="cooking">Cooking Together</option>
337
+ <option value="workshop">Working in Workshop</option>
338
+ <option value="beach">Day at the Beach</option>
339
+ <option value="hiking">Hiking Adventure</option>
340
+ <option value="camping">Camping Trip</option>
341
+ <option value="celebration">Special Celebration</option>
342
+ </select>
343
+ </div>
344
+
345
+ <div class="setting-group">
346
+ <label for="style">Art Style</label>
347
+ <select id="style">
348
+ <option value="realistic">Realistic</option>
349
+ <option value="cartoon">Cartoon</option>
350
+ <option value="watercolor">Watercolor</option>
351
+ <option value="digital">Digital Art</option>
352
+ <option value="oil">Oil Painting</option>
353
+ <option value="sketch">Pencil Sketch</option>
354
+ </select>
355
+ </div>
356
+
357
+ <div class="setting-group">
358
+ <label for="time">Time of Day</label>
359
+ <select id="time">
360
+ <option value="day">Daytime</option>
361
+ <option value="sunset">Sunset</option>
362
+ <option value="night">Night</option>
363
+ <option value="morning">Morning</option>
364
+ </select>
365
+ </div>
366
+
367
+ <div class="setting-group">
368
+ <label for="season">Season</label>
369
+ <select id="season">
370
+ <option value="spring">Spring</option>
371
+ <option value="summer">Summer</option>
372
+ <option value="autumn">Autumn</option>
373
+ <option value="winter">Winter</option>
374
+ </select>
375
+ </div>
376
+
377
+ <div class="setting-group">
378
+ <label for="custom">Custom Description</label>
379
+ <textarea id="custom" placeholder="Describe your own father and son scenario..."></textarea>
380
+ </div>
381
+
382
+ <div class="button-group">
383
+ <button class="btn btn-primary" id="generate-btn">
384
+ <i class="fas fa-magic"></i> Generate Image
385
+ </button>
386
+ <button class="btn btn-secondary" id="save-btn">
387
+ <i class="fas fa-download"></i> Save Image
388
+ </button>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="preview">
393
+ <h2>Image Preview</h2>
394
+ <div class="image-container">
395
+ <div class="image-placeholder" id="image-placeholder">
396
+ <i class="fas fa-image"></i>
397
+ <p>Your father and son image will appear here</p>
398
+ </div>
399
+ <img id="generated-image" class="generated-image" alt="Generated father and son image">
400
+ </div>
401
+
402
+ <div class="loading" id="loading">
403
+ <div class="loading-spinner"></div>
404
+ <p>Creating your special father and son moment...</p>
405
+ </div>
406
+
407
+ <div class="image-info" id="image-info">
408
+ <h3>Image Details</h3>
409
+ <p id="image-details">No image generated yet</p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="gallery">
415
+ <h2>Inspiration Gallery</h2>
416
+ <div class="gallery-grid">
417
+ <div class="gallery-item" data-scene="fishing">
418
+ <div class="gallery-img">
419
+ <i class="fas fa-fish"></i>
420
+ </div>
421
+ <div class="gallery-info">
422
+ <h4>Fishing Adventure</h4>
423
+ <p>Father teaching son to fish</p>
424
+ </div>
425
+ </div>
426
+ <div class="gallery-item" data-scene="sports">
427
+ <div class="gallery-img">
428
+ <i class="fas fa-baseball-ball"></i>
429
+ </div>
430
+ <div class="gallery-info">
431
+ <h4>Baseball Practice</h4>
432
+ <p>Playing catch in the backyard</p>
433
+ </div>
434
+ </div>
435
+ <div class="gallery-item" data-scene="reading">
436
+ <div class="gallery-img">
437
+ <i class="fas fa-book"></i>
438
+ </div>
439
+ <div class="gallery-info">
440
+ <h4>Bedtime Stories</h4>
441
+ <p>Reading together before bed</p>
442
+ </div>
443
+ </div>
444
+ <div class="gallery-item" data-scene="workshop">
445
+ <div class="gallery-img">
446
+ <i class="fas fa-tools"></i>
447
+ </div>
448
+ <div class="gallery-info">
449
+ <h4>Workshop Time</h4>
450
+ <p>Building something together</p>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+
457
+ <div class="notification" id="notification"></div>
458
+
459
+ <script>
460
+ document.addEventListener('DOMContentLoaded', function() {
461
+ const generateBtn = document.getElementById('generate-btn');
462
+ const saveBtn = document.getElementById('save-btn');
463
+ const generatedImage = document.getElementById('generated-image');
464
+ const imagePlaceholder = document.getElementById('image-placeholder');
465
+ const loading = document.getElementById('loading');
466
+ const notification = document.getElementById('notification');
467
+ const imageDetails = document.getElementById('image-details');
468
+ const galleryItems = document.querySelectorAll('.gallery-item');
469
+
470
+ // Sample base64 encoded placeholder images (in a real app, these would be actual images)
471
+ const sampleImages = {
472
+ playing: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EFather %26 Son Playing%3C/text%3E%3C/svg%3E",
473
+ fishing: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EFishing Trip%3C/text%3E%3C/svg%3E",
474
+ sports: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3ESports Day%3C/text%3E%3C/svg%3E",
475
+ reading: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%231e3c72'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23ffd700'/%3E%3Ccircle cx='250' cy='150' r='30' fill='%23ffd700'/%3E%3Ctext x='200' y='250' font-family='Arial' font-size='20' fill='white' text-anchor='middle'%3EReading Time%3C/text%3E%3C/svg%3E"
476
+ };
477
+
478
+ // Generate image function
479
+ function generateImage() {
480
+ const scene = document.getElementById('scene').value;
481
+ const style = document.getElementById('style').value;
482
+ const time = document.getElementById('time').value;
483
+ const season = document.getElementById('season').value;
484
+ const custom = document.getElementById('custom').value;
485
+
486
+ // Show loading
487
+ loading.style.display = 'block';
488
+ imagePlaceholder.style.display = 'none';
489
+ generatedImage.style.display = 'none';
490
+
491
+ // Simulate image generation with timeout
492
+ setTimeout(() => {
493
+ // Hide loading
494
+ loading.style.display = 'none';
495
+
496
+ // Show generated image (using sample data for demo)
497
+ generatedImage.src = sampleImages[scene] || sampleImages.playing;
498
+ generatedImage.style.display = 'block';
499
+
500
+ // Update image details
501
+ const sceneText = document.getElementById('scene').options[document.getElementById('scene').selectedIndex].text;
502
+ const styleText = document.getElementById('style').options[document.getElementById('style').selectedIndex].text;
503
+ const timeText = document.getElementById('time').options[document.getElementById('time').selectedIndex].text;
504
+ const seasonText = document.getElementById('season').options[document.getElementById('season').selectedIndex].text;
505
+
506
+ let details = `Scene: ${sceneText}, Style: ${styleText}, Time: ${timeText}, Season: ${seasonText}`;
507
+ if (custom) {
508
+ details += `, Custom: ${custom}`;
509
+ }
510
+
511
+ imageDetails.textContent = details;
512
+
513
+ // Show success notification
514
+ showNotification('Father and son image created successfully!', 'success');
515
+ }, 2000);
516
+ }
517
+
518
+ // Save image function
519
+ function saveImage() {
520
+ if (generatedImage.style.display === 'block') {
521
+ // In a real app, this would download the actual image
522
+ showNotification('Image saved to your gallery!', 'success');
523
+ } else {
524
+ showNotification('Please generate an image first', 'error');
525
+ }
526
+ }
527
+
528
+ // Show notification
529
+ function showNotification(message, type) {
530
+ notification.textContent = message;
531
+ notification.className = 'notification';
532
+ if (type === 'error') {
533
+ notification.classList.add('error');
534
+ }
535
+ notification.style.display = 'block';
536
+
537
+ setTimeout(() => {
538
+ notification.style.display = 'none';
539
+ }, 3000);
540
+ }
541
+
542
+ // Gallery item click handler
543
+ galleryItems.forEach(item => {
544
+ item.addEventListener('click', function() {
545
+ const scene = this.getAttribute('data-scene');
546
+ document.getElementById('scene').value = scene;
547
+ generateImage();
548
+ });
549
+ });
550
+
551
+ // Event listeners
552
+ generateBtn.addEventListener('click', generateImage);
553
+ saveBtn.addEventListener('click', saveImage);
554
+
555
+ // Generate a default image on page load
556
+ generateImage();
557
+ });
558
+ </script>
559
+ </body>
560
+ </html>