Hugging Face's logo

Spaces:
gaur3009
/
editing_platform
Running

App Files Community
gaur3009 commited on
Commit
6a2a63a
·
verified ·
1 Parent(s): 747c753

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +555 -19
index.html CHANGED
@@ -1,19 +1,555 @@
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>Professional Image Editor</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
+ }
14
+
15
+ body {
16
+ background: linear-gradient(135deg, #1a1a2e, #16213e);
17
+ color: #fff;
18
+ min-height: 100vh;
19
+ padding: 20px;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1200px;
24
+ margin: 0 auto;
25
+ padding: 20px;
26
+ }
27
+
28
+ header {
29
+ text-align: center;
30
+ margin-bottom: 30px;
31
+ padding: 20px;
32
+ background: rgba(255, 255, 255, 0.05);
33
+ border-radius: 15px;
34
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
35
+ backdrop-filter: blur(4px);
36
+ border: 1px solid rgba(255, 255, 255, 0.1);
37
+ }
38
+
39
+ h1 {
40
+ font-size: 2.5rem;
41
+ margin-bottom: 10px;
42
+ background: linear-gradient(45deg, #ff7e5f, #feb47b);
43
+ -webkit-background-clip: text;
44
+ background-clip: text;
45
+ color: transparent;
46
+ }
47
+
48
+ .subtitle {
49
+ font-size: 1.2rem;
50
+ color: #a0a0c0;
51
+ max-width: 700px;
52
+ margin: 0 auto;
53
+ line-height: 1.6;
54
+ }
55
+
56
+ .app-container {
57
+ display: grid;
58
+ grid-template-columns: 1fr 1fr;
59
+ gap: 30px;
60
+ margin-bottom: 40px;
61
+ }
62
+
63
+ @media (max-width: 768px) {
64
+ .app-container {
65
+ grid-template-columns: 1fr;
66
+ }
67
+ }
68
+
69
+ .panel {
70
+ background: rgba(30, 30, 50, 0.7);
71
+ border-radius: 15px;
72
+ padding: 25px;
73
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
74
+ backdrop-filter: blur(10px);
75
+ border: 1px solid rgba(255, 255, 255, 0.1);
76
+ }
77
+
78
+ .panel-title {
79
+ font-size: 1.5rem;
80
+ margin-bottom: 20px;
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 10px;
84
+ color: #feb47b;
85
+ }
86
+
87
+ .panel-title i {
88
+ font-size: 1.8rem;
89
+ }
90
+
91
+ .form-group {
92
+ margin-bottom: 20px;
93
+ }
94
+
95
+ label {
96
+ display: block;
97
+ margin-bottom: 8px;
98
+ font-weight: 500;
99
+ color: #d0d0e0;
100
+ }
101
+
102
+ input, textarea {
103
+ width: 100%;
104
+ padding: 12px 15px;
105
+ border-radius: 8px;
106
+ border: 1px solid rgba(255, 255, 255, 0.2);
107
+ background: rgba(20, 20, 40, 0.8);
108
+ color: #fff;
109
+ font-size: 1rem;
110
+ }
111
+
112
+ textarea {
113
+ min-height: 100px;
114
+ resize: vertical;
115
+ }
116
+
117
+ input::placeholder, textarea::placeholder {
118
+ color: #8888a8;
119
+ }
120
+
121
+ .upload-area {
122
+ border: 2px dashed rgba(255, 255, 255, 0.2);
123
+ border-radius: 10px;
124
+ padding: 30px;
125
+ text-align: center;
126
+ cursor: pointer;
127
+ transition: all 0.3s ease;
128
+ background: rgba(20, 20, 40, 0.5);
129
+ }
130
+
131
+ .upload-area:hover {
132
+ border-color: #ff7e5f;
133
+ background: rgba(20, 20, 40, 0.7);
134
+ }
135
+
136
+ .upload-area i {
137
+ font-size: 3rem;
138
+ color: #ff7e5f;
139
+ margin-bottom: 15px;
140
+ }
141
+
142
+ .upload-text {
143
+ color: #a0a0c0;
144
+ margin-bottom: 15px;
145
+ }
146
+
147
+ .file-input {
148
+ display: none;
149
+ }
150
+
151
+ .btn {
152
+ background: linear-gradient(45deg, #ff7e5f, #feb47b);
153
+ color: white;
154
+ border: none;
155
+ padding: 14px 25px;
156
+ font-size: 1.1rem;
157
+ font-weight: 600;
158
+ border-radius: 8px;
159
+ cursor: pointer;
160
+ transition: all 0.3s ease;
161
+ width: 100%;
162
+ display: flex;
163
+ justify-content: center;
164
+ align-items: center;
165
+ gap: 10px;
166
+ }
167
+
168
+ .btn:hover {
169
+ transform: translateY(-3px);
170
+ box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4);
171
+ }
172
+
173
+ .btn:disabled {
174
+ background: #555575;
175
+ cursor: not-allowed;
176
+ transform: none;
177
+ box-shadow: none;
178
+ }
179
+
180
+ .image-container {
181
+ position: relative;
182
+ overflow: hidden;
183
+ border-radius: 10px;
184
+ height: 400px;
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ background: rgba(20, 20, 40, 0.5);
189
+ border: 1px solid rgba(255, 255, 255, 0.1);
190
+ }
191
+
192
+ .image-placeholder {
193
+ color: #8888a8;
194
+ text-align: center;
195
+ padding: 20px;
196
+ }
197
+
198
+ .image-placeholder i {
199
+ font-size: 4rem;
200
+ margin-bottom: 20px;
201
+ color: #555575;
202
+ }
203
+
204
+ img {
205
+ max-width: 100%;
206
+ max-height: 100%;
207
+ object-fit: contain;
208
+ display: none;
209
+ }
210
+
211
+ .loading {
212
+ display: none;
213
+ text-align: center;
214
+ padding: 20px;
215
+ }
216
+
217
+ .spinner {
218
+ border: 4px solid rgba(255, 255, 255, 0.3);
219
+ border-radius: 50%;
220
+ border-top: 4px solid #ff7e5f;
221
+ width: 40px;
222
+ height: 40px;
223
+ animation: spin 1s linear infinite;
224
+ margin: 0 auto 20px;
225
+ }
226
+
227
+ @keyframes spin {
228
+ 0% { transform: rotate(0deg); }
229
+ 100% { transform: rotate(360deg); }
230
+ }
231
+
232
+ .tips {
233
+ background: rgba(30, 30, 50, 0.7);
234
+ border-radius: 15px;
235
+ padding: 25px;
236
+ margin-top: 30px;
237
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
238
+ backdrop-filter: blur(10px);
239
+ border: 1px solid rgba(255, 255, 255, 0.1);
240
+ }
241
+
242
+ .tips h2 {
243
+ margin-bottom: 20px;
244
+ color: #feb47b;
245
+ }
246
+
247
+ .tip {
248
+ display: flex;
249
+ gap: 15px;
250
+ margin-bottom: 15px;
251
+ align-items: flex-start;
252
+ }
253
+
254
+ .tip i {
255
+ color: #ff7e5f;
256
+ font-size: 1.2rem;
257
+ margin-top: 3px;
258
+ }
259
+
260
+ .footer {
261
+ text-align: center;
262
+ margin-top: 40px;
263
+ padding: 20px;
264
+ color: #8888a8;
265
+ font-size: 0.9rem;
266
+ }
267
+
268
+ .api-info {
269
+ display: flex;
270
+ gap: 10px;
271
+ align-items: center;
272
+ justify-content: center;
273
+ margin-top: 10px;
274
+ }
275
+
276
+ .api-badge {
277
+ background: rgba(255, 126, 95, 0.2);
278
+ padding: 5px 10px;
279
+ border-radius: 20px;
280
+ font-size: 0.8rem;
281
+ }
282
+ </style>
283
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
284
+ </head>
285
+ <body>
286
+ <div class="container">
287
+ <header>
288
+ <h1>Professional Image Editor</h1>
289
+ <p class="subtitle">Transform your images with AI-powered editing. Powered by Hugging Face's multimodalart/cosxl model running on CPU.</p>
290
+ </header>
291
+
292
+ <div class="app-container">
293
+ <div class="panel">
294
+ <h2 class="panel-title"><i class="fas fa-edit"></i> Edit Parameters</h2>
295
+
296
+ <div class="form-group">
297
+ <label for="imageUpload">Upload Image</label>
298
+ <div class="upload-area" id="dropArea">
299
+ <i class="fas fa-cloud-upload-alt"></i>
300
+ <p class="upload-text">Drag & drop your image here or click to browse</p>
301
+ <button class="btn" id="browseBtn"><i class="fas fa-folder-open"></i> Select Image</button>
302
+ <input type="file" id="imageUpload" accept="image/*" class="file-input">
303
+ </div>
304
+ </div>
305
+
306
+ <div class="form-group">
307
+ <label for="prompt">Edit Prompt</label>
308
+ <textarea id="prompt" placeholder="Describe what to edit (e.g. 'Change the dress color to blue', 'Add a hat', 'Make background blurry')"></textarea>
309
+ </div>
310
+
311
+ <div class="form-group">
312
+ <label for="negativePrompt">Negative Prompt</label>
313
+ <input type="text" id="negativePrompt" value="blurry, distorted" placeholder="Things to avoid in the result">
314
+ </div>
315
+
316
+ <div class="form-group">
317
+ <label for="guidanceScale">Guidance Scale: <span id="scaleValue">7</span></label>
318
+ <input type="range" id="guidanceScale" min="1" max="15" step="0.5" value="7">
319
+ </div>
320
+
321
+ <div class="form-group">
322
+ <label for="steps">Processing Steps: <span id="stepsValue">20</span></label>
323
+ <input type="range" id="steps" min="5" max="50" value="20">
324
+ </div>
325
+
326
+ <button class="btn" id="runEdit">
327
+ <i class="fas fa-magic"></i> Apply Edits
328
+ </button>
329
+ </div>
330
+
331
+ <div class="panel">
332
+ <h2 class="panel-title"><i class="fas fa-image"></i> Results</h2>
333
+
334
+ <div class="image-container" id="resultContainer">
335
+ <div class="image-placeholder" id="originalPlaceholder">
336
+ <i class="fas fa-image"></i>
337
+ <p>Original image will appear here</p>
338
+ </div>
339
+ <img id="originalImage">
340
+ </div>
341
+
342
+ <div class="loading" id="loadingIndicator">
343
+ <div class="spinner"></div>
344
+ <p>Processing your image... This may take 15-30 seconds</p>
345
+ <p><small>Using CPU-based model - slower than GPU but more accessible</small></p>
346
+ </div>
347
+
348
+ <div class="image-container" id="resultContainer">
349
+ <div class="image-placeholder" id="resultPlaceholder">
350
+ <i class="fas fa-star"></i>
351
+ <p>Edited result will appear here</p>
352
+ </div>
353
+ <img id="resultImage">
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="tips">
359
+ <h2><i class="fas fa-lightbulb"></i> Tips for Best Results</h2>
360
+ <div class="tip">
361
+ <i class="fas fa-check-circle"></i>
362
+ <p>Be specific in your prompts: "Change the dress color to navy blue" works better than "Change color"</p>
363
+ </div>
364
+ <div class="tip">
365
+ <i class="fas fa-check-circle"></i>
366
+ <p>Use negative prompts to avoid unwanted artifacts: "blurry, distorted, low quality"</p>
367
+ </div>
368
+ <div class="tip">
369
+ <i class="fas fa-check-circle"></i>
370
+ <p>For clothing edits, mention the garment: "Recolor the dress to emerald green"</p>
371
+ </div>
372
+ <div class="tip">
373
+ <i class="fas fa-check-circle"></i>
374
+ <p>Higher guidance scale (7-10) gives better adherence to prompts</p>
375
+ </div>
376
+ <div class="tip">
377
+ <i class="fas fa-check-circle"></i>
378
+ <p>More steps (20-30) generally improve quality but take longer to process</p>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="footer">
383
+ <p>Professional Image Editor | Powered by Hugging Face's multimodalart/cosxl model</p>
384
+ <div class="api-info">
385
+ <span class="api-badge">API: multimodalart/cosxl</span>
386
+ <span class="api-badge">Mode: CPU</span>
387
+ <span class="api-badge">Image Editing</span>
388
+ </div>
389
+ <p>Note: Processing may take 15-30 seconds as it uses CPU-based models</p>
390
+ </div>
391
+ </div>
392
+
393
+ <script>
394
+ document.addEventListener('DOMContentLoaded', function() {
395
+ // DOM elements
396
+ const imageUpload = document.getElementById('imageUpload');
397
+ const dropArea = document.getElementById('dropArea');
398
+ const browseBtn = document.getElementById('browseBtn');
399
+ const originalImage = document.getElementById('originalImage');
400
+ const originalPlaceholder = document.getElementById('originalPlaceholder');
401
+ const resultImage = document.getElementById('resultImage');
402
+ const resultPlaceholder = document.getElementById('resultPlaceholder');
403
+ const runEditBtn = document.getElementById('runEdit');
404
+ const loadingIndicator = document.getElementById('loadingIndicator');
405
+ const promptInput = document.getElementById('prompt');
406
+ const negativePromptInput = document.getElementById('negativePrompt');
407
+ const guidanceScaleInput = document.getElementById('guidanceScale');
408
+ const scaleValue = document.getElementById('scaleValue');
409
+ const stepsInput = document.getElementById('steps');
410
+ const stepsValue = document.getElementById('stepsValue');
411
+
412
+ // Set initial slider values
413
+ scaleValue.textContent = guidanceScaleInput.value;
414
+ stepsValue.textContent = stepsInput.value;
415
+
416
+ // Event listeners for sliders
417
+ guidanceScaleInput.addEventListener('input', () => {
418
+ scaleValue.textContent = guidanceScaleInput.value;
419
+ });
420
+
421
+ stepsInput.addEventListener('input', () => {
422
+ stepsValue.textContent = stepsInput.value;
423
+ });
424
+
425
+ // File selection
426
+ browseBtn.addEventListener('click', () => {
427
+ imageUpload.click();
428
+ });
429
+
430
+ imageUpload.addEventListener('change', function(e) {
431
+ if (this.files && this.files[0]) {
432
+ handleImageUpload(this.files[0]);
433
+ }
434
+ });
435
+
436
+ // Drag and drop
437
+ dropArea.addEventListener('dragover', (e) => {
438
+ e.preventDefault();
439
+ dropArea.style.borderColor = '#ff7e5f';
440
+ dropArea.style.backgroundColor = 'rgba(20, 20, 40, 0.9)';
441
+ });
442
+
443
+ dropArea.addEventListener('dragleave', () => {
444
+ dropArea.style.borderColor = 'rgba(255, 255, 255, 0.2)';
445
+ dropArea.style.backgroundColor = 'rgba(20, 20, 40, 0.5)';
446
+ });
447
+
448
+ dropArea.addEventListener('drop', (e) => {
449
+ e.preventDefault();
450
+ dropArea.style.borderColor = 'rgba(255, 255, 255, 0.2)';
451
+ dropArea.style.backgroundColor = 'rgba(20, 20, 40, 0.5)';
452
+
453
+ if (e.dataTransfer.files && e.dataTransfer.files[0]) {
454
+ handleImageUpload(e.dataTransfer.files[0]);
455
+ }
456
+ });
457
+
458
+ // Handle image upload and preview
459
+ function handleImageUpload(file) {
460
+ if (!file.type.match('image.*')) {
461
+ alert('Please select an image file');
462
+ return;
463
+ }
464
+
465
+ const reader = new FileReader();
466
+
467
+ reader.onload = function(e) {
468
+ originalImage.src = e.target.result;
469
+ originalImage.style.display = 'block';
470
+ originalPlaceholder.style.display = 'none';
471
+
472
+ // Clear previous result
473
+ resultImage.style.display = 'none';
474
+ resultPlaceholder.style.display = 'block';
475
+ };
476
+
477
+ reader.readAsDataURL(file);
478
+ }
479
+
480
+ // Run the edit process
481
+ runEditBtn.addEventListener('click', async () => {
482
+ // Validate inputs
483
+ if (!originalImage.src || originalImage.src === window.location.href) {
484
+ alert('Please upload an image first');
485
+ return;
486
+ }
487
+
488
+ if (!promptInput.value.trim()) {
489
+ alert('Please enter an edit prompt');
490
+ return;
491
+ }
492
+
493
+ // Show loading indicator
494
+ runEditBtn.disabled = true;
495
+ loadingIndicator.style.display = 'block';
496
+
497
+ try {
498
+ // Create FormData
499
+ const formData = new FormData();
500
+
501
+ // Convert data URL to blob
502
+ const blob = await fetch(originalImage.src).then(r => r.blob());
503
+ formData.append('image', blob, 'image.png');
504
+
505
+ // Add other parameters
506
+ formData.append('prompt', promptInput.value);
507
+ formData.append('negative_prompt', negativePromptInput.value);
508
+ formData.append('guidance_scale', guidanceScaleInput.value);
509
+ formData.append('steps', stepsInput.value);
510
+
511
+ // Make request to Hugging Face API
512
+ const response = await fetch('https://multimodalart-cosxl.hf.space/run/run_edit', {
513
+ method: 'POST',
514
+ body: formData
515
+ });
516
+
517
+ if (!response.ok) {
518
+ throw new Error(`API request failed with status ${response.status}`);
519
+ }
520
+
521
+ // Get the result image
522
+ const resultBlob = await response.blob();
523
+ const resultUrl = URL.createObjectURL(resultBlob);
524
+
525
+ // Display result
526
+ resultImage.src = resultUrl;
527
+ resultImage.style.display = 'block';
528
+ resultPlaceholder.style.display = 'none';
529
+
530
+ } catch (error) {
531
+ console.error('Error processing image:', error);
532
+ alert('Error processing image. Please try again.');
533
+ } finally {
534
+ // Hide loading indicator
535
+ runEditBtn.disabled = false;
536
+ loadingIndicator.style.display = 'none';
537
+ }
538
+ });
539
+
540
+ // Example prompts
541
+ const examplePrompts = [
542
+ "Change the dress color to royal blue",
543
+ "Make the background blurry with bokeh effect",
544
+ "Recolor the jacket to bright red",
545
+ "Add a sun hat to the person",
546
+ "Change the hair color to purple",
547
+ "Make the dress look like silk material"
548
+ ];
549
+
550
+ // Set a random example prompt
551
+ promptInput.placeholder = examplePrompts[Math.floor(Math.random() * examplePrompts.length)];
552
+ });
553
+ </script>
554
+ </body>
555
+ </html>