Hugging Face's logo

Spaces:
AniChikage
/
anycoder-9e5e3a1d
Running

App Files Community
AniChikage commited on
Commit
06cc442
·
verified ·
1 Parent(s): ea74975

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +574 -19
index.html CHANGED
@@ -1,19 +1,574 @@
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>Hugging Face Image Generator</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-color: #ff6b6b;
11
+ --secondary-color: #4ecdc4;
12
+ --dark-color: #2a2a2a;
13
+ --light-color: #f8f9fa;
14
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
15
+ --transition: all 0.3s ease;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ body {
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ line-height: 1.6;
27
+ color: var(--dark-color);
28
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
29
+ min-height: 100vh;
30
+ padding: 20px;
31
+ }
32
+
33
+ .container {
34
+ max-width: 1000px;
35
+ margin: 0 auto;
36
+ padding: 20px;
37
+ }
38
+
39
+ header {
40
+ text-align: center;
41
+ margin-bottom: 30px;
42
+ padding: 20px 0;
43
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
44
+ }
45
+
46
+ .header-content {
47
+ display: flex;
48
+ justify-content: space-between;
49
+ align-items: center;
50
+ flex-wrap: wrap;
51
+ gap: 15px;
52
+ }
53
+
54
+ h1 {
55
+ color: var(--primary-color);
56
+ font-size: 2.5rem;
57
+ margin-bottom: 10px;
58
+ display: flex;
59
+ align-items: center;
60
+ gap: 10px;
61
+ }
62
+
63
+ .anycoder-link {
64
+ color: var(--secondary-color);
65
+ text-decoration: none;
66
+ font-size: 0.9rem;
67
+ display: flex;
68
+ align-items: center;
69
+ gap: 5px;
70
+ transition: var(--transition);
71
+ }
72
+
73
+ .anycoder-link:hover {
74
+ color: var(--primary-color);
75
+ transform: translateY(-2px);
76
+ }
77
+
78
+ .generator-card {
79
+ background: white;
80
+ border-radius: 15px;
81
+ box-shadow: var(--shadow);
82
+ padding: 30px;
83
+ margin-bottom: 30px;
84
+ transition: var(--transition);
85
+ }
86
+
87
+ .generator-card:hover {
88
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
89
+ }
90
+
91
+ .form-group {
92
+ margin-bottom: 20px;
93
+ }
94
+
95
+ label {
96
+ display: block;
97
+ margin-bottom: 8px;
98
+ font-weight: 600;
99
+ color: var(--dark-color);
100
+ }
101
+
102
+ input[type="text"],
103
+ textarea,
104
+ select {
105
+ width: 100%;
106
+ padding: 12px 15px;
107
+ border: 2px solid #e0e0e0;
108
+ border-radius: 8px;
109
+ font-size: 1rem;
110
+ transition: var(--transition);
111
+ background-color: #f8f9fa;
112
+ }
113
+
114
+ input[type="text"]:focus,
115
+ textarea:focus,
116
+ select:focus {
117
+ outline: none;
118
+ border-color: var(--primary-color);
119
+ background-color: white;
120
+ }
121
+
122
+ textarea {
123
+ min-height: 120px;
124
+ resize: vertical;
125
+ }
126
+
127
+ .settings-grid {
128
+ display: grid;
129
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
130
+ gap: 20px;
131
+ margin-bottom: 20px;
132
+ }
133
+
134
+ .generate-btn {
135
+ background: linear-gradient(45deg, var(--primary-color), #ff8e53);
136
+ color: white;
137
+ border: none;
138
+ padding: 12px 30px;
139
+ font-size: 1rem;
140
+ font-weight: 600;
141
+ border-radius: 8px;
142
+ cursor: pointer;
143
+ transition: var(--transition);
144
+ display: flex;
145
+ align-items: center;
146
+ justify-content: center;
147
+ gap: 8px;
148
+ width: 100%;
149
+ }
150
+
151
+ .generate-btn:hover {
152
+ transform: translateY(-2px);
153
+ box-shadow: 0 4px 8px rgba(255, 107, 107, 0.3);
154
+ }
155
+
156
+ .generate-btn:disabled {
157
+ background: #cccccc;
158
+ cursor: not-allowed;
159
+ transform: none;
160
+ }
161
+
162
+ .results-section {
163
+ background: white;
164
+ border-radius: 15px;
165
+ box-shadow: var(--shadow);
166
+ padding: 30px;
167
+ }
168
+
169
+ .results-grid {
170
+ display: grid;
171
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
172
+ gap: 20px;
173
+ margin-top: 20px;
174
+ }
175
+
176
+ .image-card {
177
+ background: #f8f9fa;
178
+ border-radius: 10px;
179
+ overflow: hidden;
180
+ transition: var(--transition);
181
+ position: relative;
182
+ }
183
+
184
+ .image-card:hover {
185
+ transform: translateY(-5px);
186
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
187
+ }
188
+
189
+ .generated-image {
190
+ width: 100%;
191
+ height: 250px;
192
+ object-fit: cover;
193
+ display: block;
194
+ }
195
+
196
+ .image-actions {
197
+ padding: 10px;
198
+ display: flex;
199
+ justify-content: space-between;
200
+ background: white;
201
+ }
202
+
203
+ .download-btn {
204
+ background: var(--secondary-color);
205
+ color: white;
206
+ border: none;
207
+ padding: 8px 12px;
208
+ border-radius: 5px;
209
+ cursor: pointer;
210
+ transition: var(--transition);
211
+ display: flex;
212
+ align-items: center;
213
+ gap: 5px;
214
+ }
215
+
216
+ .download-btn:hover {
217
+ background: #3aa89d;
218
+ }
219
+
220
+ .loading {
221
+ display: none;
222
+ text-align: center;
223
+ padding: 20px;
224
+ }
225
+
226
+ .loading.active {
227
+ display: block;
228
+ }
229
+
230
+ .spinner {
231
+ border: 4px solid rgba(0, 0, 0, 0.1);
232
+ border-radius: 50%;
233
+ border-top: 4px solid var(--primary-color);
234
+ width: 40px;
235
+ height: 40px;
236
+ animation: spin 1s linear infinite;
237
+ margin: 0 auto 10px;
238
+ }
239
+
240
+ @keyframes spin {
241
+ 0% { transform: rotate(0deg); }
242
+ 100% { transform: rotate(360deg); }
243
+ }
244
+
245
+ .status-message {
246
+ text-align: center;
247
+ padding: 15px;
248
+ border-radius: 8px;
249
+ margin: 15px 0;
250
+ display: none;
251
+ }
252
+
253
+ .success {
254
+ background-color: #d4edda;
255
+ color: #155724;
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ gap: 8px;
260
+ }
261
+
262
+ .error {
263
+ background-color: #f8d7da;
264
+ color: #721c24;
265
+ display: flex;
266
+ align-items: center;
267
+ justify-content: center;
268
+ gap: 8px;
269
+ }
270
+
271
+ .api-info {
272
+ background: #e7f3ff;
273
+ border-left: 4px solid var(--secondary-color);
274
+ padding: 15px;
275
+ margin: 20px 0;
276
+ border-radius: 0 8px 8px 0;
277
+ }
278
+
279
+ .api-info h3 {
280
+ color: var(--secondary-color);
281
+ margin-bottom: 10px;
282
+ }
283
+
284
+ .api-info p {
285
+ margin-bottom: 5px;
286
+ }
287
+
288
+ .api-info code {
289
+ background: rgba(0, 0, 0, 0.05);
290
+ padding: 2px 5px;
291
+ border-radius: 3px;
292
+ font-family: monospace;
293
+ }
294
+
295
+ @media (max-width: 768px) {
296
+ .header-content {
297
+ flex-direction: column;
298
+ text-align: center;
299
+ }
300
+
301
+ h1 {
302
+ font-size: 2rem;
303
+ }
304
+
305
+ .settings-grid {
306
+ grid-template-columns: 1fr;
307
+ }
308
+
309
+ .results-grid {
310
+ grid-template-columns: 1fr;
311
+ }
312
+ }
313
+
314
+ @media (max-width: 480px) {
315
+ body {
316
+ padding: 10px;
317
+ }
318
+
319
+ .container {
320
+ padding: 10px;
321
+ }
322
+
323
+ .generator-card, .results-section {
324
+ padding: 20px;
325
+ }
326
+
327
+ h1 {
328
+ font-size: 1.8rem;
329
+ }
330
+ }
331
+ </style>
332
+ </head>
333
+ <body>
334
+ <div class="container">
335
+ <header>
336
+ <div class="header-content">
337
+ <h1>
338
+ <i class="fas fa-robot"></i>
339
+ Hugging Face Image Generator
340
+ </h1>
341
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
342
+ <i class="fas fa-code"></i> Built with anycoder
343
+ </a>
344
+ </div>
345
+ </header>
346
+
347
+ <div class="generator-card">
348
+ <h2>Generate Images with AI</h2>
349
+ <p>Enter a prompt and let the AI create amazing images for you!</p>
350
+
351
+ <div class="api-info">
352
+ <h3>⚠️ Important Note</h3>
353
+ <p>This demo uses the Hugging Face API. To make it work:</p>
354
+ <ol>
355
+ <li>You need to <a href="https://huggingface.co/settings/tokens" target="_blank">create an API token</a> on Hugging Face</li>
356
+ <li>Replace <code>YOUR_API_TOKEN</code> in the JavaScript code with your actual token</li>
357
+ <li>For security, in a production app, you should call the API from your backend</li>
358
+ </ol>
359
+ </div>
360
+
361
+ <form id="imageGenerator">
362
+ <div class="form-group">
363
+ <label for="prompt">Prompt</label>
364
+ <textarea id="prompt" placeholder="Describe the image you want to generate (e.g., 'a futuristic city at sunset with flying cars')" required></textarea>
365
+ </div>
366
+
367
+ <div class="settings-grid">
368
+ <div class="form-group">
369
+ <label for="model">Model</label>
370
+ <select id="model">
371
+ <option value="stabilityai/stable-diffusion-2">Stable Diffusion 2</option>
372
+ <option value="runwayml/stable-diffusion-v1-5">Stable Diffusion 1.5</option>
373
+ <option value="CompVis/stable-diffusion-v1-4">Stable Diffusion 1.4</option>
374
+ </select>
375
+ </div>
376
+
377
+ <div class="form-group">
378
+ <label for="negativePrompt">Negative Prompt (optional)</label>
379
+ <input type="text" id="negativePrompt" placeholder="Things to exclude from the image">
380
+ </div>
381
+
382
+ <div class="form-group">
383
+ <label for="numImages">Number of Images</label>
384
+ <select id="numImages">
385
+ <option value="1">1</option>
386
+ <option value="2">2</option>
387
+ <option value="3">3</option>
388
+ <option value="4">4</option>
389
+ </select>
390
+ </div>
391
+
392
+ <div class="form-group">
393
+ <label for="guidanceScale">Guidance Scale</label>
394
+ <select id="guidanceScale">
395
+ <option value="7.5">7.5 (Default)</option>
396
+ <option value="5">5 (Less creative)</option>
397
+ <option value="10">10 (More creative)</option>
398
+ <option value="15">15 (Very creative)</option>
399
+ </select>
400
+ </div>
401
+
402
+ <div class="form-group">
403
+ <label for="numInferenceSteps">Inference Steps</label>
404
+ <select id="numInferenceSteps">
405
+ <option value="50">50 (Default)</option>
406
+ <option value="25">25 (Faster)</option>
407
+ <option value="75">75 (Better quality)</option>
408
+ <option value="100">100 (Best quality)</option>
409
+ </select>
410
+ </div>
411
+ </div>
412
+
413
+ <button type="submit" class="generate-btn">
414
+ <i class="fas fa-magic"></i> Generate Images
415
+ </button>
416
+ </form>
417
+
418
+ <div class="loading" id="loading">
419
+ <div class="spinner"></div>
420
+ <p>Generating your images... This may take a moment</p>
421
+ </div>
422
+
423
+ <div class="status-message" id="statusMessage"></div>
424
+ </div>
425
+
426
+ <div class="results-section">
427
+ <h2>Generated Images</h2>
428
+ <p>Your AI-generated images will appear here</p>
429
+ <div class="results-grid" id="resultsGrid">
430
+ <!-- Generated images will appear here -->
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <script>
436
+ document.addEventListener('DOMContentLoaded', function() {
437
+ const form = document.getElementById('imageGenerator');
438
+ const resultsGrid = document.getElementById('resultsGrid');
439
+ const loading = document.getElementById('loading');
440
+ const statusMessage = document.getElementById('statusMessage');
441
+ const generateBtn = form.querySelector('.generate-btn');
442
+
443
+ form.addEventListener('submit', async function(e) {
444
+ e.preventDefault();
445
+
446
+ // Clear previous results and messages
447
+ resultsGrid.innerHTML = '';
448
+ statusMessage.style.display = 'none';
449
+ statusMessage.className = 'status-message';
450
+
451
+ // Show loading state
452
+ loading.classList.add('active');
453
+ generateBtn.disabled = true;
454
+ generateBtn.textContent = 'Generating...';
455
+
456
+ // Get form values
457
+ const prompt = document.getElementById('prompt').value;
458
+ const model = document.getElementById('model').value;
459
+ const negativePrompt = document.getElementById('negativePrompt').value;
460
+ const numImages = parseInt(document.getElementById('numImages').value);
461
+ const guidanceScale = parseFloat(document.getElementById('guidanceScale').value);
462
+ const numInferenceSteps = parseInt(document.getElementById('numInferenceSteps').value);
463
+
464
+ try {
465
+ // Replace with your actual Hugging Face API token
466
+ const API_TOKEN = 'YOUR_API_TOKEN';
467
+ const API_URL = `https://api-inference.huggingface.co/models/${model}`;
468
+
469
+ // Prepare the request payload
470
+ const payload = {
471
+ inputs: prompt,
472
+ options: {
473
+ wait_for_model: true
474
+ }
475
+ };
476
+
477
+ // Add optional parameters if they have values
478
+ if (negativePrompt) {
479
+ payload.parameters = {
480
+ negative_prompt: negativePrompt,
481
+ guidance_scale: guidanceScale,
482
+ num_inference_steps: numInferenceSteps,
483
+ num_images_per_prompt: numImages
484
+ };
485
+ } else {
486
+ payload.parameters = {
487
+ guidance_scale: guidanceScale,
488
+ num_inference_steps: numInferenceSteps,
489
+ num_images_per_prompt: numImages
490
+ };
491
+ }
492
+
493
+ // Make the API request
494
+ const response = await fetch(API_URL, {
495
+ method: 'POST',
496
+ headers: {
497
+ 'Content-Type': 'application/json',
498
+ 'Authorization': `Bearer ${API_TOKEN}`
499
+ },
500
+ body: JSON.stringify(payload)
501
+ });
502
+
503
+ if (!response.ok) {
504
+ throw new Error(`API request failed with status ${response.status}`);
505
+ }
506
+
507
+ const blob = await response.blob();
508
+ const imageUrl = URL.createObjectURL(blob);
509
+
510
+ // Display the generated image
511
+ displayImage(imageUrl);
512
+
513
+ // Show success message
514
+ showStatusMessage('Images generated successfully!', 'success');
515
+
516
+ } catch (error) {
517
+ console.error('Error generating image:', error);
518
+ showStatusMessage(`Error: ${error.message}`, 'error');
519
+ } finally {
520
+ // Hide loading state
521
+ loading.classList.remove('active');
522
+ generateBtn.disabled = false;
523
+ generateBtn.innerHTML = '<i class="fas fa-magic"></i> Generate Images';
524
+ }
525
+ });
526
+
527
+ function displayImage(imageUrl) {
528
+ // Clear previous results
529
+ resultsGrid.innerHTML = '';
530
+
531
+ // Create image card
532
+ const imageCard = document.createElement('div');
533
+ imageCard.className = 'image-card';
534
+
535
+ const img = document.createElement('img');
536
+ img.src = imageUrl;
537
+ img.className = 'generated-image';
538
+ img.alt = 'AI Generated Image';
539
+
540
+ const actions = document.createElement('div');
541
+ actions.className = 'image-actions';
542
+
543
+ const downloadBtn = document.createElement('button');
544
+ downloadBtn.className = 'download-btn';
545
+ downloadBtn.innerHTML = '<i class="fas fa-download"></i> Download';
546
+ downloadBtn.addEventListener('click', () => {
547
+ const link = document.createElement('a');
548
+ link.href = imageUrl;
549
+ link.download = 'ai-generated-image.png';
550
+ document.body.appendChild(link);
551
+ link.click();
552
+ document.body.removeChild(link);
553
+ });
554
+
555
+ actions.appendChild(downloadBtn);
556
+ imageCard.appendChild(img);
557
+ imageCard.appendChild(actions);
558
+ resultsGrid.appendChild(imageCard);
559
+ }
560
+
561
+ function showStatusMessage(message, type) {
562
+ statusMessage.textContent = message;
563
+ statusMessage.className = `status-message ${type}`;
564
+ statusMessage.style.display = 'block';
565
+
566
+ // Hide message after 5 seconds
567
+ setTimeout(() => {
568
+ statusMessage.style.display = 'none';
569
+ }, 5000);
570
+ }
571
+ });
572
+ </script>
573
+ </body>
574
+ </html>