Hugging Face's logo

Spaces:
Phierru
/
anycoder-0e982fef
Running

App Files Community
Phierru commited on
Commit
281346a
·
verified ·
1 Parent(s): 6c49466

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +629 -19
index.html CHANGED
@@ -1,19 +1,629 @@
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 Portrait Creator | Qwen Image Edit</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', system-ui, -apple-system, sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --primary: #2563eb;
18
+ --primary-dark: #1d4ed8;
19
+ --secondary: #64748b;
20
+ --accent: #f59e0b;
21
+ --light: #f8fafc;
22
+ --dark: #1e293b;
23
+ --success: #10b981;
24
+ --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
25
+ }
26
+
27
+ body {
28
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
29
+ color: var(--dark);
30
+ line-height: 1.6;
31
+ min-height: 100vh;
32
+ padding: 1rem;
33
+ }
34
+
35
+ .container {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ }
39
+
40
+ header {
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: center;
44
+ padding: 1.5rem 0;
45
+ margin-bottom: 2rem;
46
+ }
47
+
48
+ .logo {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: 0.75rem;
52
+ font-size: 1.5rem;
53
+ font-weight: 700;
54
+ color: var(--primary);
55
+ }
56
+
57
+ .logo i {
58
+ font-size: 1.75rem;
59
+ }
60
+
61
+ .built-with {
62
+ font-size: 0.875rem;
63
+ color: var(--secondary);
64
+ }
65
+
66
+ .built-with a {
67
+ color: var(--primary);
68
+ text-decoration: none;
69
+ transition: color 0.3s;
70
+ }
71
+
72
+ .built-with a:hover {
73
+ color: var(--primary-dark);
74
+ text-decoration: underline;
75
+ }
76
+
77
+ main {
78
+ display: grid;
79
+ grid-template-columns: 1fr;
80
+ gap: 2rem;
81
+ }
82
+
83
+ @media (min-width: 768px) {
84
+ main {
85
+ grid-template-columns: 1fr 1fr;
86
+ }
87
+ }
88
+
89
+ .card {
90
+ background: white;
91
+ border-radius: 1rem;
92
+ padding: 2rem;
93
+ box-shadow: var(--shadow);
94
+ transition: transform 0.3s, box-shadow 0.3s;
95
+ }
96
+
97
+ .card:hover {
98
+ transform: translateY(-5px);
99
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
100
+ }
101
+
102
+ .card-title {
103
+ font-size: 1.25rem;
104
+ font-weight: 600;
105
+ margin-bottom: 1rem;
106
+ color: var(--primary);
107
+ display: flex;
108
+ align-items: center;
109
+ gap: 0.5rem;
110
+ }
111
+
112
+ .upload-area {
113
+ border: 2px dashed #cbd5e1;
114
+ border-radius: 0.75rem;
115
+ padding: 3rem 1.5rem;
116
+ text-align: center;
117
+ cursor: pointer;
118
+ transition: all 0.3s;
119
+ margin-bottom: 1.5rem;
120
+ background: #f8fafc;
121
+ }
122
+
123
+ .upload-area:hover {
124
+ border-color: var(--primary);
125
+ background: #f0f9ff;
126
+ }
127
+
128
+ .upload-area.active {
129
+ border-color: var(--primary);
130
+ background: #dbeafe;
131
+ }
132
+
133
+ .upload-icon {
134
+ font-size: 3rem;
135
+ color: var(--secondary);
136
+ margin-bottom: 1rem;
137
+ }
138
+
139
+ .upload-text {
140
+ color: var(--secondary);
141
+ margin-bottom: 0.5rem;
142
+ }
143
+
144
+ .upload-button {
145
+ background: var(--primary);
146
+ color: white;
147
+ border: none;
148
+ padding: 0.75rem 1.5rem;
149
+ border-radius: 0.5rem;
150
+ font-weight: 500;
151
+ cursor: pointer;
152
+ transition: background 0.3s;
153
+ display: inline-flex;
154
+ align-items: center;
155
+ gap: 0.5rem;
156
+ }
157
+
158
+ .upload-button:hover {
159
+ background: var(--primary-dark);
160
+ }
161
+
162
+ .preview-container {
163
+ margin-top: 1.5rem;
164
+ display: none;
165
+ }
166
+
167
+ .preview-title {
168
+ font-size: 1rem;
169
+ font-weight: 500;
170
+ margin-bottom: 0.5rem;
171
+ color: var(--secondary);
172
+ }
173
+
174
+ .preview-image {
175
+ width: 100%;
176
+ max-width: 300px;
177
+ border-radius: 0.5rem;
178
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
179
+ }
180
+
181
+ .options {
182
+ margin-top: 1.5rem;
183
+ }
184
+
185
+ .option-group {
186
+ margin-bottom: 1.5rem;
187
+ }
188
+
189
+ .option-label {
190
+ display: block;
191
+ font-weight: 500;
192
+ margin-bottom: 0.5rem;
193
+ color: var(--dark);
194
+ }
195
+
196
+ .slider-container {
197
+ display: flex;
198
+ align-items: center;
199
+ gap: 1rem;
200
+ }
201
+
202
+ .slider {
203
+ flex: 1;
204
+ -webkit-appearance: none;
205
+ width: 100%;
206
+ height: 8px;
207
+ border-radius: 4px;
208
+ background: #e2e8f0;
209
+ outline: none;
210
+ }
211
+
212
+ .slider::-webkit-slider-thumb {
213
+ -webkit-appearance: none;
214
+ appearance: none;
215
+ width: 20px;
216
+ height: 20px;
217
+ border-radius: 50%;
218
+ background: var(--primary);
219
+ cursor: pointer;
220
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
221
+ }
222
+
223
+ .slider-value {
224
+ font-weight: 600;
225
+ color: var(--primary);
226
+ min-width: 40px;
227
+ text-align: center;
228
+ }
229
+
230
+ .button-group {
231
+ display: flex;
232
+ gap: 1rem;
233
+ margin-top: 2rem;
234
+ }
235
+
236
+ .btn {
237
+ padding: 0.875rem 1.5rem;
238
+ border-radius: 0.5rem;
239
+ font-weight: 500;
240
+ cursor: pointer;
241
+ transition: all 0.3s;
242
+ display: inline-flex;
243
+ align-items: center;
244
+ gap: 0.5rem;
245
+ flex: 1;
246
+ justify-content: center;
247
+ }
248
+
249
+ .btn-primary {
250
+ background: var(--primary);
251
+ color: white;
252
+ border: none;
253
+ }
254
+
255
+ .btn-primary:hover {
256
+ background: var(--primary-dark);
257
+ }
258
+
259
+ .btn-secondary {
260
+ background: white;
261
+ color: var(--primary);
262
+ border: 1px solid var(--primary);
263
+ }
264
+
265
+ .btn-secondary:hover {
266
+ background: #f0f9ff;
267
+ }
268
+
269
+ .result-container {
270
+ display: none;
271
+ text-align: center;
272
+ }
273
+
274
+ .result-title {
275
+ font-size: 1.25rem;
276
+ font-weight: 600;
277
+ margin-bottom: 1rem;
278
+ color: var(--success);
279
+ }
280
+
281
+ .result-image {
282
+ width: 100%;
283
+ max-width: 400px;
284
+ border-radius: 0.75rem;
285
+ box-shadow: var(--shadow);
286
+ margin-bottom: 1.5rem;
287
+ }
288
+
289
+ .loading {
290
+ display: none;
291
+ text-align: center;
292
+ padding: 2rem;
293
+ }
294
+
295
+ .loading-spinner {
296
+ width: 50px;
297
+ height: 50px;
298
+ border: 5px solid #e2e8f0;
299
+ border-top: 5px solid var(--primary);
300
+ border-radius: 50%;
301
+ animation: spin 1s linear infinite;
302
+ margin: 0 auto 1rem;
303
+ }
304
+
305
+ @keyframes spin {
306
+ 0% { transform: rotate(0deg); }
307
+ 100% { transform: rotate(360deg); }
308
+ }
309
+
310
+ .feature-list {
311
+ list-style: none;
312
+ margin-top: 1.5rem;
313
+ }
314
+
315
+ .feature-list li {
316
+ padding: 0.5rem 0;
317
+ display: flex;
318
+ align-items: center;
319
+ gap: 0.75rem;
320
+ }
321
+
322
+ .feature-list i {
323
+ color: var(--success);
324
+ }
325
+
326
+ footer {
327
+ text-align: center;
328
+ margin-top: 3rem;
329
+ padding: 1.5rem 0;
330
+ color: var(--secondary);
331
+ font-size: 0.875rem;
332
+ border-top: 1px solid #e2e8f0;
333
+ }
334
+
335
+ .notification {
336
+ position: fixed;
337
+ bottom: 20px;
338
+ right: 20px;
339
+ padding: 1rem 1.5rem;
340
+ background: var(--success);
341
+ color: white;
342
+ border-radius: 0.5rem;
343
+ box-shadow: var(--shadow);
344
+ display: none;
345
+ z-index: 1000;
346
+ }
347
+ </style>
348
+ </head>
349
+ <body>
350
+ <div class="container">
351
+ <header>
352
+ <div class="logo">
353
+ <i class="fas fa-camera-retro"></i>
354
+ <span>Professional Portrait Creator</span>
355
+ </div>
356
+ <div class="built-with">
357
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
358
+ </div>
359
+ </header>
360
+
361
+ <main>
362
+ <div class="card">
363
+ <h2 class="card-title"><i class="fas fa-upload"></i> Upload Your Photo</h2>
364
+ <div class="upload-area" id="uploadArea">
365
+ <i class="fas fa-cloud-upload-alt upload-icon"></i>
366
+ <p class="upload-text">Drag & drop your iPhone photo here</p>
367
+ <p class="upload-text">or</p>
368
+ <button class="upload-button" id="uploadButton">
369
+ <i class="fas fa-folder-open"></i> Browse Files
370
+ </button>
371
+ <input type="file" id="fileInput" accept="image/*" style="display: none;">
372
+ </div>
373
+
374
+ <div class="preview-container" id="previewContainer">
375
+ <p class="preview-title">Photo Preview:</p>
376
+ <img id="previewImage" class="preview-image" src="" alt="Preview">
377
+ </div>
378
+
379
+ <div class="options">
380
+ <div class="option-group">
381
+ <label class="option-label">Background Blur (Bokeh)</label>
382
+ <div class="slider-container">
383
+ <input type="range" min="1" max="10" value="7" class="slider" id="blurSlider">
384
+ <span class="slider-value" id="blurValue">7</span>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="option-group">
389
+ <label class="option-label">Professional Enhancement</label>
390
+ <div class="slider-container">
391
+ <input type="range" min="1" max="10" value="8" class="slider" id="enhanceSlider">
392
+ <span class="slider-value" id="enhanceValue">8</span>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="option-group">
397
+ <label class="option-label">Background Style</label>
398
+ <select id="backgroundStyle" class="slider" style="width: 100%; padding: 0.5rem; border-radius: 0.5rem; border: 1px solid #cbd5e1;">
399
+ <option value="modern">Modern Office</option>
400
+ <option value="corporate">Corporate Environment</option>
401
+ <option value="executive">Executive Suite</option>
402
+ </select>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="button-group">
407
+ <button class="btn btn-primary" id="generateBtn">
408
+ <i class="fas fa-magic"></i> Generate Portrait
409
+ </button>
410
+ <button class="btn btn-secondary" id="resetBtn">
411
+ <i class="fas fa-redo"></i> Reset
412
+ </button>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="card">
417
+ <h2 class="card-title"><i class="fas fa-image"></i> Your Professional Portrait</h2>
418
+
419
+ <div class="loading" id="loading">
420
+ <div class="loading-spinner"></div>
421
+ <p>Creating your professional portrait with Qwen Image Edit 2509...</p>
422
+ </div>
423
+
424
+ <div class="result-container" id="resultContainer">
425
+ <h3 class="result-title">Your Enhanced Business Portrait</h3>
426
+ <img id="resultImage" class="result-image" src="" alt="Enhanced Portrait">
427
+ <div class="button-group">
428
+ <button class="btn btn-primary" id="downloadBtn">
429
+ <i class="fas fa-download"></i> Download Portrait
430
+ </button>
431
+ </div>
432
+ </div>
433
+
434
+ <div id="placeholderResult">
435
+ <p style="text-align: center; color: var(--secondary); padding: 4rem 2rem;">
436
+ <i class="fas fa-user-tie" style="font-size: 4rem; margin-bottom: 1rem; color: #e2e8f0;"></i><br>
437
+ Your enhanced business portrait will appear here after processing.
438
+ </p>
439
+
440
+ <h3 class="card-title" style="margin-top: 2rem;"><i class="fas fa-star"></i> Features</h3>
441
+ <ul class="feature-list">
442
+ <li><i class="fas fa-check-circle"></i> High-quality portrait enhancement</li>
443
+ <li><i class="fas fa-check-circle"></i> Professional bokeh office background</li>
444
+ <li><i class="fas fa-check-circle"></i> Lighting and color correction</li>
445
+ <li><i class="fas fa-check-circle"></i> Professional attire enhancement</li>
446
+ <li><i class="fas fa-check-circle"></i> Optimized for LinkedIn & professional profiles</li>
447
+ </ul>
448
+ </div>
449
+ </div>
450
+ </main>
451
+
452
+ <footer>
453
+ <p>Professional Portrait Creator &copy; 2023 | Powered by Qwen Image Edit 2509</p>
454
+ </footer>
455
+ </div>
456
+
457
+ <div class="notification" id="notification">
458
+ <i class="fas fa-check-circle"></i> Portrait successfully generated!
459
+ </div>
460
+
461
+ <script>
462
+ // DOM Elements
463
+ const uploadArea = document.getElementById('uploadArea');
464
+ const uploadButton = document.getElementById('uploadButton');
465
+ const fileInput = document.getElementById('fileInput');
466
+ const previewContainer = document.getElementById('previewContainer');
467
+ const previewImage = document.getElementById('previewImage');
468
+ const blurSlider = document.getElementById('blurSlider');
469
+ const blurValue = document.getElementById('blurValue');
470
+ const enhanceSlider = document.getElementById('enhanceSlider');
471
+ const enhanceValue = document.getElementById('enhanceValue');
472
+ const generateBtn = document.getElementById('generateBtn');
473
+ const resetBtn = document.getElementById('resetBtn');
474
+ const loading = document.getElementById('loading');
475
+ const resultContainer = document.getElementById('resultContainer');
476
+ const placeholderResult = document.getElementById('placeholderResult');
477
+ const resultImage = document.getElementById('resultImage');
478
+ const downloadBtn = document.getElementById('downloadBtn');
479
+ const notification = document.getElementById('notification');
480
+
481
+ // Event Listeners
482
+ uploadButton.addEventListener('click', () => {
483
+ fileInput.click();
484
+ });
485
+
486
+ uploadArea.addEventListener('dragover', (e) => {
487
+ e.preventDefault();
488
+ uploadArea.classList.add('active');
489
+ });
490
+
491
+ uploadArea.addEventListener('dragleave', () => {
492
+ uploadArea.classList.remove('active');
493
+ });
494
+
495
+ uploadArea.addEventListener('drop', (e) => {
496
+ e.preventDefault();
497
+ uploadArea.classList.remove('active');
498
+
499
+ if (e.dataTransfer.files.length) {
500
+ handleFile(e.dataTransfer.files[0]);
501
+ }
502
+ });
503
+
504
+ fileInput.addEventListener('change', (e) => {
505
+ if (e.target.files.length) {
506
+ handleFile(e.target.files[0]);
507
+ }
508
+ });
509
+
510
+ blurSlider.addEventListener('input', () => {
511
+ blurValue.textContent = blurSlider.value;
512
+ });
513
+
514
+ enhanceSlider.addEventListener('input', () => {
515
+ enhanceValue.textContent = enhanceSlider.value;
516
+ });
517
+
518
+ generateBtn.addEventListener('click', generatePortrait);
519
+ resetBtn.addEventListener('click', resetForm);
520
+ downloadBtn.addEventListener('click', downloadPortrait);
521
+
522
+ // Functions
523
+ function handleFile(file) {
524
+ if (!file.type.match('image.*')) {
525
+ alert('Please select an image file.');
526
+ return;
527
+ }
528
+
529
+ const reader = new FileReader();
530
+
531
+ reader.onload = (e) => {
532
+ previewImage.src = e.target.result;
533
+ previewContainer.style.display = 'block';
534
+ generateBtn.disabled = false;
535
+ };
536
+
537
+ reader.readAsDataURL(file);
538
+ }
539
+
540
+ function generatePortrait() {
541
+ if (!previewImage.src) {
542
+ alert('Please upload a photo first.');
543
+ return;
544
+ }
545
+
546
+ // Show loading state
547
+ loading.style.display = 'block';
548
+ placeholderResult.style.display = 'none';
549
+ resultContainer.style.display = 'none';
550
+ generateBtn.disabled = true;
551
+
552
+ // Simulate processing time (in a real app, this would call an API)
553
+ setTimeout(() => {
554
+ loading.style.display = 'none';
555
+ resultContainer.style.display = 'block';
556
+
557
+ // In a real implementation, this would be the result from Qwen Image Edit 2509
558
+ // For demo purposes, we'll use the same image with a filter applied
559
+ applyImageFilter();
560
+
561
+ // Show notification
562
+ notification.style.display = 'block';
563
+ setTimeout(() => {
564
+ notification.style.display = 'none';
565
+ }, 3000);
566
+ }, 3000);
567
+ }
568
+
569
+ function applyImageFilter() {
570
+ // Create a canvas to apply filter effects
571
+ const canvas = document.createElement('canvas');
572
+ const ctx = canvas.getContext('2d');
573
+ const img = new Image();
574
+
575
+ img.onload = function() {
576
+ canvas.width = img.width;
577
+ canvas.height = img.height;
578
+
579
+ // Draw original image
580
+ ctx.drawImage(img, 0, 0);
581
+
582
+ // Apply a simple filter for demo (in real app, this would be Qwen processing)
583
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
584
+ const data = imageData.data;
585
+
586
+ // Enhance contrast and saturation slightly
587
+ for (let i = 0; i < data.length; i += 4) {
588
+ // Increase contrast
589
+ data[i] = data[i] < 128 ? data[i] * 0.9 : 255 - (255 - data[i]) * 0.9; // Red
590
+ data[i + 1] = data[i + 1] < 128 ? data[i + 1] * 0.9 : 255 - (255 - data[i + 1]) * 0.9; // Green
591
+ data[i + 2] = data[i + 2] < 128 ? data[i + 2] * 0.9 : 255 - (255 - data[i + 2]) * 0.9; // Blue
592
+ }
593
+
594
+ ctx.putImageData(imageData, 0, 0);
595
+
596
+ // Set the result image
597
+ resultImage.src = canvas.toDataURL();
598
+ };
599
+
600
+ img.src = previewImage.src;
601
+ }
602
+
603
+ function resetForm() {
604
+ fileInput.value = '';
605
+ previewImage.src = '';
606
+ previewContainer.style.display = 'none';
607
+ resultContainer.style.display = 'none';
608
+ placeholderResult.style.display = 'block';
609
+ generateBtn.disabled = true;
610
+ blurSlider.value = 7;
611
+ blurValue.textContent = 7;
612
+ enhanceSlider.value = 8;
613
+ enhanceValue.textContent = 8;
614
+ }
615
+
616
+ function downloadPortrait() {
617
+ if (!resultImage.src) return;
618
+
619
+ const link = document.createElement('a');
620
+ link.download = 'professional-portrait.png';
621
+ link.href = resultImage.src;
622
+ link.click();
623
+ }
624
+
625
+ // Initialize
626
+ resetForm();
627
+ </script>
628
+ </body>
629
+ </html>