Hugging Face's logo

Spaces:
Ayeeee45
/
2nd
Running

App Files Community
Ayeeee45 commited on
Commit
b3b827b
·
verified ·
1 Parent(s): d1e25dd

Create Index

Browse files
Files changed (1) hide show
  1. Index +934 -0
Index ADDED
@@ -0,0 +1,934 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Advanced Live Portrait WebUI</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary: #6366f1;
12
+ --primary-dark: #4f46e5;
13
+ --secondary: #8b5cf6;
14
+ --dark: #1f2937;
15
+ --light: #f9fafb;
16
+ --gray: #6b7280;
17
+ --success: #10b981;
18
+ --danger: #ef4444;
19
+ --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
20
+ --transition: all 0.3s ease;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Poppins', sans-serif;
28
+ }
29
+
30
+ body {
31
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
32
+ min-height: 100vh;
33
+ color: var(--dark);
34
+ padding: 20px;
35
+ }
36
+
37
+ .container {
38
+ max-width: 1400px;
39
+ margin: 0 auto;
40
+ background: white;
41
+ border-radius: 20px;
42
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
43
+ overflow: hidden;
44
+ }
45
+
46
+ /* Header */
47
+ .header {
48
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
49
+ color: white;
50
+ padding: 3rem 2rem;
51
+ text-align: center;
52
+ position: relative;
53
+ overflow: hidden;
54
+ }
55
+
56
+ .header::before {
57
+ content: '';
58
+ position: absolute;
59
+ top: -50%;
60
+ left: -50%;
61
+ width: 200%;
62
+ height: 200%;
63
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
64
+ background-size: 50px 50px;
65
+ animation: float 20s linear infinite;
66
+ }
67
+
68
+ @keyframes float {
69
+ 0% { transform: rotate(0deg); }
70
+ 100% { transform: rotate(360deg); }
71
+ }
72
+
73
+ .logo {
74
+ font-size: 4rem;
75
+ margin-bottom: 1rem;
76
+ display: inline-block;
77
+ animation: bounce 2s infinite;
78
+ }
79
+
80
+ @keyframes bounce {
81
+ 0%, 100% { transform: translateY(0); }
82
+ 50% { transform: translateY(-10px); }
83
+ }
84
+
85
+ .title {
86
+ font-size: 3rem;
87
+ font-weight: 700;
88
+ margin-bottom: 0.5rem;
89
+ position: relative;
90
+ z-index: 1;
91
+ }
92
+
93
+ .subtitle {
94
+ font-size: 1.2rem;
95
+ opacity: 0.9;
96
+ max-width: 800px;
97
+ margin: 0 auto;
98
+ line-height: 1.6;
99
+ position: relative;
100
+ z-index: 1;
101
+ }
102
+
103
+ /* Main Content */
104
+ .main-content {
105
+ display: grid;
106
+ grid-template-columns: 1fr 1fr;
107
+ gap: 2rem;
108
+ padding: 3rem;
109
+ }
110
+
111
+ @media (max-width: 992px) {
112
+ .main-content {
113
+ grid-template-columns: 1fr;
114
+ }
115
+ }
116
+
117
+ /* Card Styles */
118
+ .card {
119
+ background: white;
120
+ border-radius: 15px;
121
+ padding: 2rem;
122
+ box-shadow: var(--shadow);
123
+ border: 1px solid #e5e7eb;
124
+ transition: var(--transition);
125
+ }
126
+
127
+ .card:hover {
128
+ transform: translateY(-5px);
129
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
130
+ }
131
+
132
+ .card h2 {
133
+ color: var(--primary);
134
+ margin-bottom: 1.5rem;
135
+ padding-bottom: 0.5rem;
136
+ border-bottom: 3px solid var(--primary);
137
+ display: inline-block;
138
+ }
139
+
140
+ /* Upload Area */
141
+ .upload-area {
142
+ border: 3px dashed var(--primary);
143
+ border-radius: 15px;
144
+ padding: 3rem 2rem;
145
+ text-align: center;
146
+ cursor: pointer;
147
+ transition: var(--transition);
148
+ margin-bottom: 2rem;
149
+ background: #f8fafc;
150
+ }
151
+
152
+ .upload-area:hover {
153
+ background: #f0f9ff;
154
+ border-color: var(--primary-dark);
155
+ }
156
+
157
+ .upload-icon {
158
+ font-size: 4rem;
159
+ color: var(--primary);
160
+ margin-bottom: 1rem;
161
+ }
162
+
163
+ .upload-area h3 {
164
+ color: var(--dark);
165
+ margin-bottom: 0.5rem;
166
+ }
167
+
168
+ /* Preview */
169
+ .preview-container {
170
+ position: relative;
171
+ border-radius: 10px;
172
+ overflow: hidden;
173
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
174
+ margin-bottom: 1.5rem;
175
+ }
176
+
177
+ .preview-container img {
178
+ width: 100%;
179
+ height: auto;
180
+ display: block;
181
+ transition: var(--transition);
182
+ }
183
+
184
+ /* Buttons */
185
+ .btn {
186
+ background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
187
+ color: white;
188
+ border: none;
189
+ padding: 1rem 2.5rem;
190
+ font-size: 1.1rem;
191
+ font-weight: 600;
192
+ border-radius: 50px;
193
+ cursor: pointer;
194
+ transition: var(--transition);
195
+ display: inline-flex;
196
+ align-items: center;
197
+ justify-content: center;
198
+ gap: 10px;
199
+ box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
200
+ margin: 0.5rem;
201
+ min-width: 200px;
202
+ }
203
+
204
+ .btn:hover {
205
+ transform: translateY(-3px);
206
+ box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
207
+ }
208
+
209
+ .btn:active {
210
+ transform: translateY(-1px);
211
+ }
212
+
213
+ .btn-success {
214
+ background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
215
+ }
216
+
217
+ .btn-secondary {
218
+ background: linear-gradient(135deg, var(--gray) 0%, #4b5563 100%);
219
+ }
220
+
221
+ .btn-danger {
222
+ background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
223
+ }
224
+
225
+ .btn:disabled {
226
+ opacity: 0.6;
227
+ cursor: not-allowed;
228
+ transform: none !important;
229
+ box-shadow: none !important;
230
+ }
231
+
232
+ /* Output Area */
233
+ .output-area {
234
+ min-height: 300px;
235
+ background: #f8fafc;
236
+ border-radius: 15px;
237
+ display: flex;
238
+ align-items: center;
239
+ justify-content: center;
240
+ flex-direction: column;
241
+ padding: 2rem;
242
+ text-align: center;
243
+ transition: var(--transition);
244
+ }
245
+
246
+ .output-area.video-loaded {
247
+ background: white;
248
+ padding: 0;
249
+ overflow: hidden;
250
+ }
251
+
252
+ .output-placeholder {
253
+ font-size: 5rem;
254
+ color: var(--primary);
255
+ margin-bottom: 1rem;
256
+ }
257
+
258
+ /* Examples */
259
+ .examples-grid {
260
+ display: grid;
261
+ grid-template-columns: repeat(3, 1fr);
262
+ gap: 1rem;
263
+ margin: 1.5rem 0;
264
+ }
265
+
266
+ @media (max-width: 768px) {
267
+ .examples-grid {
268
+ grid-template-columns: repeat(2, 1fr);
269
+ }
270
+ }
271
+
272
+ .example-img {
273
+ width: 100%;
274
+ height: 150px;
275
+ object-fit: cover;
276
+ border-radius: 10px;
277
+ cursor: pointer;
278
+ transition: var(--transition);
279
+ border: 3px solid transparent;
280
+ }
281
+
282
+ .example-img:hover {
283
+ transform: scale(1.05);
284
+ border-color: var(--primary);
285
+ }
286
+
287
+ /* Installation */
288
+ .code-block {
289
+ background: #1e293b;
290
+ color: #e2e8f0;
291
+ padding: 1.5rem;
292
+ border-radius: 10px;
293
+ font-family: 'Courier New', monospace;
294
+ overflow-x: auto;
295
+ margin: 1.5rem 0;
296
+ line-height: 1.8;
297
+ }
298
+
299
+ .code-block code {
300
+ color: #7dd3fc;
301
+ }
302
+
303
+ .comment {
304
+ color: #94a3b8;
305
+ }
306
+
307
+ /* Steps */
308
+ .steps {
309
+ display: flex;
310
+ flex-direction: column;
311
+ gap: 1.5rem;
312
+ margin: 2rem 0;
313
+ }
314
+
315
+ .step {
316
+ display: flex;
317
+ align-items: flex-start;
318
+ gap: 1rem;
319
+ }
320
+
321
+ .step-number {
322
+ background: var(--primary);
323
+ color: white;
324
+ width: 40px;
325
+ height: 40px;
326
+ border-radius: 50%;
327
+ display: flex;
328
+ align-items: center;
329
+ justify-content: center;
330
+ font-weight: bold;
331
+ flex-shrink: 0;
332
+ }
333
+
334
+ /* Footer */
335
+ .footer {
336
+ background: var(--dark);
337
+ color: white;
338
+ padding: 3rem 2rem;
339
+ text-align: center;
340
+ margin-top: 2rem;
341
+ }
342
+
343
+ .footer-links {
344
+ display: flex;
345
+ justify-content: center;
346
+ gap: 2rem;
347
+ margin: 2rem 0;
348
+ flex-wrap: wrap;
349
+ }
350
+
351
+ .footer-link {
352
+ color: #d1d5db;
353
+ text-decoration: none;
354
+ transition: var(--transition);
355
+ display: flex;
356
+ align-items: center;
357
+ gap: 8px;
358
+ }
359
+
360
+ .footer-link:hover {
361
+ color: white;
362
+ }
363
+
364
+ /* Loading Animation */
365
+ .loader {
366
+ border: 6px solid #f3f3f3;
367
+ border-top: 6px solid var(--primary);
368
+ border-radius: 50%;
369
+ width: 60px;
370
+ height: 60px;
371
+ animation: spin 1s linear infinite;
372
+ margin-bottom: 1rem;
373
+ }
374
+
375
+ @keyframes spin {
376
+ 0% { transform: rotate(0deg); }
377
+ 100% { transform: rotate(360deg); }
378
+ }
379
+
380
+ /* Progress Bar */
381
+ .progress-container {
382
+ width: 100%;
383
+ background: #e5e7eb;
384
+ border-radius: 10px;
385
+ margin: 1.5rem 0;
386
+ overflow: hidden;
387
+ }
388
+
389
+ .progress-bar {
390
+ height: 10px;
391
+ background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
392
+ width: 0%;
393
+ border-radius: 10px;
394
+ transition: width 0.5s ease;
395
+ }
396
+
397
+ /* Stats */
398
+ .stats {
399
+ display: grid;
400
+ grid-template-columns: repeat(3, 1fr);
401
+ gap: 1rem;
402
+ margin: 2rem 0;
403
+ }
404
+
405
+ .stat {
406
+ text-align: center;
407
+ padding: 1rem;
408
+ background: #f8fafc;
409
+ border-radius: 10px;
410
+ }
411
+
412
+ .stat-number {
413
+ font-size: 2rem;
414
+ font-weight: bold;
415
+ color: var(--primary);
416
+ margin-bottom: 0.5rem;
417
+ }
418
+
419
+ /* Responsive */
420
+ @media (max-width: 768px) {
421
+ .title {
422
+ font-size: 2rem;
423
+ }
424
+
425
+ .subtitle {
426
+ font-size: 1rem;
427
+ }
428
+
429
+ .main-content {
430
+ padding: 1.5rem;
431
+ }
432
+
433
+ .card {
434
+ padding: 1.5rem;
435
+ }
436
+ }
437
+ </style>
438
+ </head>
439
+ <body>
440
+ <div class="container">
441
+ <!-- Header -->
442
+ <header class="header">
443
+ <div class="logo">🎬</div>
444
+ <h1 class="title">Advanced Live Portrait WebUI</h1>
445
+ <p class="subtitle">Transform static portraits into animated videos with AI-powered face animation technology</p>
446
+
447
+ <div class="stats">
448
+ <div class="stat">
449
+ <div class="stat-number">1,000+</div>
450
+ <div>Animations Created</div>
451
+ </div>
452
+ <div class="stat">
453
+ <div class="stat-number">99%</div>
454
+ <div>Accuracy Rate</div>
455
+ </div>
456
+ <div class="stat">
457
+ <div class="stat-number">24/7</div>
458
+ <div>Available</div>
459
+ </div>
460
+ </div>
461
+ </header>
462
+
463
+ <!-- Main Content -->
464
+ <div class="main-content">
465
+ <!-- Left Column - Upload & Controls -->
466
+ <div class="left-column">
467
+ <div class="card">
468
+ <h2><i class="fas fa-upload"></i> Upload Image</h2>
469
+
470
+ <div class="upload-area" id="uploadArea">
471
+ <div class="upload-icon">
472
+ <i class="fas fa-cloud-upload-alt"></i>
473
+ </div>
474
+ <h3>Click to Upload Face Image</h3>
475
+ <p>or drag and drop</p>
476
+ <p class="comment">JPG, PNG up to 5MB • Clear frontal face works best</p>
477
+ </div>
478
+
479
+ <input type="file" id="fileInput" accept="image/*" style="display: none;">
480
+
481
+ <div id="imagePreview" style="display: none;">
482
+ <div class="preview-container">
483
+ <img id="previewImage" src="" alt="Preview">
484
+ </div>
485
+
486
+ <div style="text-align: center;">
487
+ <button class="btn btn-danger" onclick="clearImage()">
488
+ <i class="fas fa-trash"></i> Remove Image
489
+ </button>
490
+ </div>
491
+ </div>
492
+
493
+ <div class="steps">
494
+ <div class="step">
495
+ <div class="step-number">1</div>
496
+ <div>
497
+ <h4>Upload Image</h4>
498
+ <p class="comment">Select a clear frontal face photo</p>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="step">
503
+ <div class="step-number">2</div>
504
+ <div>
505
+ <h4>Generate Animation</h4>
506
+ <p class="comment">Click generate to create animation</p>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="step">
511
+ <div class="step-number">3</div>
512
+ <div>
513
+ <h4>Download Result</h4>
514
+ <p class="comment">Save your animated portrait</p>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <div style="text-align: center; margin-top: 2rem;">
520
+ <button class="btn" id="generateBtn" onclick="generateAnimation()" disabled>
521
+ <i class="fas fa-bolt"></i> Generate Animation
522
+ </button>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- Examples -->
527
+ <div class="card">
528
+ <h2><i class="fas fa-images"></i> Try Examples</h2>
529
+ <p class="comment">Click on any example image to try it instantly</p>
530
+
531
+ <div class="examples-grid">
532
+ <img src="https://images.unsplash.com/photo-1494790108755-2616b786d4b9?w=400&h=400&fit=crop&crop=face"
533
+ class="example-img"
534
+ onclick="useExample(this.src)"
535
+ alt="Example 1">
536
+ <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=face"
537
+ class="example-img"
538
+ onclick="useExample(this.src)"
539
+ alt="Example 2">
540
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=face"
541
+ class="example-img"
542
+ onclick="useExample(this.src)"
543
+ alt="Example 3">
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Right Column - Output & Info -->
549
+ <div class="right-column">
550
+ <!-- Output Area -->
551
+ <div class="card">
552
+ <h2><i class="fas fa-video"></i> Generated Animation</h2>
553
+
554
+ <div class="output-area" id="outputArea">
555
+ <div class="output-placeholder">
556
+ <i class="fas fa-film"></i>
557
+ </div>
558
+ <h3>Your animation will appear here</h3>
559
+ <p class="comment">Upload an image and click generate to start</p>
560
+ </div>
561
+
562
+ <div class="progress-container" id="progressContainer" style="display: none;">
563
+ <div class="progress-bar" id="progressBar"></div>
564
+ </div>
565
+
566
+ <div style="text-align: center; margin-top: 1.5rem;">
567
+ <button class="btn btn-success" id="downloadBtn" onclick="downloadResult()" disabled>
568
+ <i class="fas fa-download"></i> Download Video
569
+ </button>
570
+ <button class="btn btn-secondary" onclick="shareResult()">
571
+ <i class="fas fa-share"></i> Share
572
+ </button>
573
+ </div>
574
+ </div>
575
+
576
+ <!-- Installation Instructions -->
577
+ <div class="card">
578
+ <h2><i class="fas fa-download"></i> Full Installation</h2>
579
+ <p class="comment">This demo shows the interface. For full functionality with audio-driven animation:</p>
580
+
581
+ <div class="code-block">
582
+ <code>
583
+ <span class="comment"># 1. Clone the repository</span><br>
584
+ git clone https://github.com/Ayeeee45/AdvancedLivePortrait-WebUI.git<br>
585
+ cd AdvancedLivePortrait-WebUI<br><br>
586
+
587
+ <span class="comment"># 2. Install dependencies</span><br>
588
+ pip install -r requirements.txt<br><br>
589
+
590
+ <span class="comment"># 3. Download required models</span><br>
591
+ <span class="comment"># Check README.md for model download links</span><br><br>
592
+
593
+ <span class="comment"># 4. Run the application</span><br>
594
+ python webui.py<br><br>
595
+
596
+ <span class="comment"># 5. Open in browser</span><br>
597
+ <span class="comment"># Visit http://localhost:7860</span>
598
+ </code>
599
+ </div>
600
+
601
+ <div class="steps">
602
+ <div class="step">
603
+ <div class="step-number"><i class="fas fa-server"></i></div>
604
+ <div>
605
+ <h4>System Requirements</h4>
606
+ <p class="comment">• 8GB+ GPU VRAM (NVIDIA recommended)<br>• 20GB+ free disk space<br>• Python 3.10</p>
607
+ </div>
608
+ </div>
609
+
610
+ <div class="step">
611
+ <div class="step-number"><i class="fas fa-microphone"></i></div>
612
+ <div>
613
+ <h4>Audio Support</h4>
614
+ <p class="comment">Full version supports audio-driven lip sync animation</p>
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </div>
619
+ </div>
620
+ </div>
621
+
622
+ <!-- Footer -->
623
+ <footer class="footer">
624
+ <h3>Advanced Live Portrait WebUI</h3>
625
+ <p>AI-powered portrait animation tool</p>
626
+
627
+ <div class="footer-links">
628
+ <a href="https://github.com/Ayeeee45/AdvancedLivePortrait-WebUI" target="_blank" class="footer-link">
629
+ <i class="fab fa-github"></i> GitHub Repository
630
+ </a>
631
+ <a href="https://github.com/Ayeeee45/AdvancedLivePortrait-WebUI/issues" target="_blank" class="footer-link">
632
+ <i class="fas fa-bug"></i> Report Issues
633
+ </a>
634
+ <a href="https://github.com/Ayeeee45/AdvancedLivePortrait-WebUI/wiki" target="_blank" class="footer-link">
635
+ <i class="fas fa-book"></i> Documentation
636
+ </a>
637
+ </div>
638
+
639
+ <p style="color: #9ca3af; margin-top: 2rem; font-size: 0.9rem;">
640
+ © 2024 Advanced Live Portrait WebUI Demo. This is a preview interface.<br>
641
+ For complete functionality with audio support and real AI animation, install locally.
642
+ </p>
643
+ </footer>
644
+ </div>
645
+
646
+ <script>
647
+ // Global variables
648
+ let currentImage = null;
649
+ let animationProgress = 0;
650
+ let progressInterval = null;
651
+
652
+ // DOM Elements
653
+ const uploadArea = document.getElementById('uploadArea');
654
+ const fileInput = document.getElementById('fileInput');
655
+ const imagePreview = document.getElementById('imagePreview');
656
+ const previewImage = document.getElementById('previewImage');
657
+ const generateBtn = document.getElementById('generateBtn');
658
+ const outputArea = document.getElementById('outputArea');
659
+ const downloadBtn = document.getElementById('downloadBtn');
660
+ const progressContainer = document.getElementById('progressContainer');
661
+ const progressBar = document.getElementById('progressBar');
662
+
663
+ // Event Listeners
664
+ uploadArea.addEventListener('click', () => fileInput.click());
665
+ uploadArea.addEventListener('dragover', (e) => {
666
+ e.preventDefault();
667
+ uploadArea.style.background = '#e0f2fe';
668
+ });
669
+ uploadArea.addEventListener('dragleave', () => {
670
+ uploadArea.style.background = '#f8fafc';
671
+ });
672
+ uploadArea.addEventListener('drop', (e) => {
673
+ e.preventDefault();
674
+ uploadArea.style.background = '#f8fafc';
675
+ if (e.dataTransfer.files.length) {
676
+ handleFile(e.dataTransfer.files[0]);
677
+ }
678
+ });
679
+
680
+ fileInput.addEventListener('change', (e) => {
681
+ if (e.target.files.length) {
682
+ handleFile(e.target.files[0]);
683
+ }
684
+ });
685
+
686
+ // Handle file upload
687
+ function handleFile(file) {
688
+ if (!file.type.match('image.*')) {
689
+ alert('Please upload an image file (JPG, PNG)');
690
+ return;
691
+ }
692
+
693
+ if (file.size > 5 * 1024 * 1024) {
694
+ alert('File size must be less than 5MB');
695
+ return;
696
+ }
697
+
698
+ const reader = new FileReader();
699
+ reader.onload = function(e) {
700
+ currentImage = e.target.result;
701
+ previewImage.src = currentImage;
702
+ imagePreview.style.display = 'block';
703
+ generateBtn.disabled = false;
704
+
705
+ // Update upload area
706
+ uploadArea.innerHTML = `
707
+ <div class="upload-icon" style="color: #10b981;">
708
+ <i class="fas fa-check-circle"></i>
709
+ </div>
710
+ <h3>Image Uploaded Successfully!</h3>
711
+ <p>Ready to generate animation</p>
712
+ `;
713
+ };
714
+ reader.readAsDataURL(file);
715
+ }
716
+
717
+ // Use example image
718
+ function useExample(src) {
719
+ currentImage = src;
720
+ previewImage.src = src;
721
+ imagePreview.style.display = 'block';
722
+ generateBtn.disabled = false;
723
+
724
+ uploadArea.innerHTML = `
725
+ <div class="upload-icon" style="color: #10b981;">
726
+ <i class="fas fa-check-circle"></i>
727
+ </div>
728
+ <h3>Example Image Loaded!</h3>
729
+ <p>Ready to generate animation</p>
730
+ `;
731
+ }
732
+
733
+ // Clear image
734
+ function clearImage() {
735
+ currentImage = null;
736
+ imagePreview.style.display = 'none';
737
+ generateBtn.disabled = true;
738
+ fileInput.value = '';
739
+
740
+ uploadArea.innerHTML = `
741
+ <div class="upload-icon">
742
+ <i class="fas fa-cloud-upload-alt"></i>
743
+ </div>
744
+ <h3>Click to Upload Face Image</h3>
745
+ <p>or drag and drop</p>
746
+ <p class="comment">JPG, PNG up to 5MB • Clear frontal face works best</p>
747
+ `;
748
+ }
749
+
750
+ // Generate animation
751
+ function generateAnimation() {
752
+ if (!currentImage) return;
753
+
754
+ // Reset
755
+ outputArea.className = 'output-area';
756
+ downloadBtn.disabled = true;
757
+ progressContainer.style.display = 'block';
758
+ progressBar.style.width = '0%';
759
+ animationProgress = 0;
760
+
761
+ // Show loading
762
+ outputArea.innerHTML = `
763
+ <div class="loader"></div>
764
+ <h3>Creating Animation...</h3>
765
+ <p class="comment">Processing image and generating animation frames</p>
766
+ <div style="margin-top: 1rem; color: #6b7280; font-size: 0.9rem;">
767
+ <i class="fas fa-info-circle"></i> This is a demo. For actual animation, install locally.
768
+ </div>
769
+ `;
770
+
771
+ // Simulate progress
772
+ progressInterval = setInterval(() => {
773
+ animationProgress += Math.random() * 15;
774
+ if (animationProgress > 100) animationProgress = 100;
775
+ progressBar.style.width = animationProgress + '%';
776
+
777
+ if (animationProgress >= 100) {
778
+ clearInterval(progressInterval);
779
+ showResult();
780
+ }
781
+ }, 200);
782
+ }
783
+
784
+ // Show result
785
+ function showResult() {
786
+ progressContainer.style.display = 'none';
787
+ outputArea.className = 'output-area video-loaded';
788
+
789
+ // Create a demo video element
790
+ outputArea.innerHTML = `
791
+ <video width="100%" height="100%" controls autoplay style="border-radius: 10px;">
792
+ <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4">
793
+ Your browser does not support the video tag.
794
+ </video>
795
+ <div style="position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,0.7); color: white; padding: 10px 20px; border-radius: 20px; font-size: 0.9rem;">
796
+ <i class="fas fa-info-circle"></i> Demo Video
797
+ </div>
798
+ `;
799
+
800
+ downloadBtn.disabled = false;
801
+
802
+ // Show success message
803
+ setTimeout(() => {
804
+ const notification = document.createElement('div');
805
+ notification.style.cssText = `
806
+ position: fixed;
807
+ top: 20px;
808
+ right: 20px;
809
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
810
+ color: white;
811
+ padding: 15px 25px;
812
+ border-radius: 10px;
813
+ box-shadow: 0 10px 25px rgba(0,0,0,0.2);
814
+ z-index: 1000;
815
+ animation: slideIn 0.5s ease;
816
+ `;
817
+ notification.innerHTML = `
818
+ <i class="fas fa-check-circle"></i>
819
+ <strong>Animation Complete!</strong>
820
+ <p style="margin: 5px 0 0 0; font-size: 0.9rem;">Ready to download</p>
821
+ `;
822
+ document.body.appendChild(notification);
823
+
824
+ setTimeout(() => {
825
+ notification.style.animation = 'slideOut 0.5s ease';
826
+ setTimeout(() => notification.remove(), 500);
827
+ }, 3000);
828
+
829
+ // Add animation keyframes
830
+ const style = document.createElement('style');
831
+ style.textContent = `
832
+ @keyframes slideIn {
833
+ from { transform: translateX(100%); opacity: 0; }
834
+ to { transform: translateX(0); opacity: 1; }
835
+ }
836
+ @keyframes slideOut {
837
+ from { transform: translateX(0); opacity: 1; }
838
+ to { transform: translateX(100%); opacity: 0; }
839
+ }
840
+ `;
841
+ document.head.appendChild(style);
842
+ }, 500);
843
+ }
844
+
845
+ // Download result
846
+ function downloadResult() {
847
+ // Create a demo download experience
848
+ const downloadLink = document.createElement('a');
849
+ downloadLink.href = '#';
850
+ downloadLink.download = 'animated_portrait.mp4';
851
+
852
+ // Show modal with instructions
853
+ const modal = document.createElement('div');
854
+ modal.style.cssText = `
855
+ position: fixed;
856
+ top: 0;
857
+ left: 0;
858
+ width: 100%;
859
+ height: 100%;
860
+ background: rgba(0,0,0,0.8);
861
+ display: flex;
862
+ align-items: center;
863
+ justify-content: center;
864
+ z-index: 2000;
865
+ `;
866
+
867
+ modal.innerHTML = `
868
+ <div style="background: white; padding: 2rem; border-radius: 15px; max-width: 500px; width: 90%; text-align: center;">
869
+ <div style="font-size: 3rem; color: #6366f1; margin-bottom: 1rem;">
870
+ <i class="fas fa-download"></i>
871
+ </div>
872
+ <h3 style="color: #1f2937; margin-bottom: 1rem;">Download Full Version</h3>
873
+ <p style="color: #6b7280; margin-bottom: 1.5rem; line-height: 1.6;">
874
+ This is a demo interface. To download actual animated portraits with audio support,
875
+ you need to install the full application locally.
876
+ </p>
877
+ <div style="background: #f8fafc; padding: 1.5rem; border-radius: 10px; text-align: left; margin-bottom: 1.5rem;">
878
+ <code style="color: #1f2937; font-family: monospace; font-size: 0.9rem;">
879
+ # Install locally for full features:<br>
880
+ git clone https://github.com/Ayeeee45/AdvancedLivePortrait-WebUI.git<br>
881
+ cd AdvancedLivePortrait-WebUI<br>
882
+ pip install -r requirements.txt<br>
883
+ python webui.py
884
+ </code>
885
+ </div>
886
+ <button onclick="this.parentElement.parentElement.remove()"
887
+ style="background: #6366f1; color: white; border: none; padding: 10px 30px; border-radius: 25px; cursor: pointer; font-weight: bold;">
888
+ Got it!
889
+ </button>
890
+ </div>
891
+ `;
892
+
893
+ document.body.appendChild(modal);
894
+ modal.addEventListener('click', (e) => {
895
+ if (e.target === modal) {
896
+ modal.remove();
897
+ }
898
+ });
899
+ }
900
+
901
+ // Share result
902
+ function shareResult() {
903
+ if (navigator.share) {
904
+ navigator.share({
905
+ title: 'Advanced Live Portrait',
906
+ text: 'Check out this AI portrait animation tool!',
907
+ url: window.location.href
908
+ });
909
+ } else {
910
+ // Fallback: Copy to clipboard
911
+ navigator.clipboard.writeText(window.location.href).then(() => {
912
+ alert('Link copied to clipboard!');
913
+ });
914
+ }
915
+ }
916
+
917
+ // Initialize
918
+ document.addEventListener('DOMContentLoaded', () => {
919
+ console.log('Advanced Live Portrait Demo Loaded');
920
+
921
+ // Add some interactive effects
922
+ const cards = document.querySelectorAll('.card');
923
+ cards.forEach(card => {
924
+ card.addEventListener('mouseenter', () => {
925
+ card.style.transform = 'translateY(-5px)';
926
+ });
927
+ card.addEventListener('mouseleave', () => {
928
+ card.style.transform = 'translateY(0)';
929
+ });
930
+ });
931
+ });
932
+ </script>
933
+ </body>
934
+ </html>