Hugging Face's logo

Spaces:
kevinsousa258gmailcom
/
avatarsync-studio
Running

App Files Community
kevinsousa258gmailcom commited on
Commit
cb04dfe
·
verified ·
1 Parent(s): c10883a

QUERO um prompt onde eu eu subo uma imagem e um áudio e consigo fazer animação estilo avatar

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +678 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Avatarsync Studio
3
- emoji: 🐠
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: AvatarSync Studio 🎭✨
3
+ colorFrom: red
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,679 @@
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>AvatarSync Studio - Create Animated Avatars</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
13
+
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .dropzone {
20
+ border: 2px dashed #9CA3AF;
21
+ transition: all 0.3s ease;
22
+ }
23
+
24
+ .dropzone.active {
25
+ border-color: #4F46E5;
26
+ background-color: rgba(79, 70, 229, 0.05);
27
+ }
28
+
29
+ .theme-selector input:checked + label {
30
+ border-color: #4F46E5;
31
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
32
+ }
33
+
34
+ .color-picker {
35
+ -webkit-appearance: none;
36
+ -moz-appearance: none;
37
+ appearance: none;
38
+ width: 40px;
39
+ height: 40px;
40
+ border: none;
41
+ cursor: pointer;
42
+ border-radius: 50%;
43
+ padding: 0;
44
+ }
45
+
46
+ .color-picker::-webkit-color-swatch {
47
+ border-radius: 50%;
48
+ border: 2px solid white;
49
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
50
+ }
51
+
52
+ #previewCanvas {
53
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
54
+ border-radius: 12px;
55
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
56
+ }
57
+
58
+ .animation-preview {
59
+ transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
60
+ }
61
+
62
+ .animation-preview:hover {
63
+ transform: scale(1.05);
64
+ }
65
+
66
+ .tooltip {
67
+ visibility: hidden;
68
+ opacity: 0;
69
+ transition: opacity 0.3s;
70
+ }
71
+
72
+ .has-tooltip:hover .tooltip {
73
+ visibility: visible;
74
+ opacity: 1;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-50 min-h-screen">
79
+ <!-- Vanta.js Background -->
80
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full -z-10"></div>
81
+
82
+ <!-- Main Container -->
83
+ <div class="container mx-auto px-4 py-12 max-w-6xl">
84
+ <!-- Header -->
85
+ <header class="text-center mb-12">
86
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">AvatarSync Studio</h1>
87
+ <p class="text-lg text-gray-600 max-w-2xl mx-auto">Transform your image and audio into a personalized animated avatar with synchronized movements</p>
88
+ <div class="flex justify-center mt-4">
89
+ <div class="w-16 h-1 bg-indigo-500 rounded-full"></div>
90
+ </div>
91
+ </header>
92
+
93
+ <!-- Main Content -->
94
+ <div class="bg-white rounded-xl shadow-xl overflow-hidden mb-12">
95
+ <!-- Progress Steps -->
96
+ <div class="flex justify-between items-center px-8 py-4 border-b">
97
+ <div class="flex items-center space-x-2">
98
+ <div class="w-8 h-8 rounded-full bg-indigo-500 text-white flex items-center justify-center">1</div>
99
+ <span class="font-medium text-indigo-600">Upload Media</span>
100
+ </div>
101
+ <div class="flex items-center space-x-2">
102
+ <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">2</div>
103
+ <span class="font-medium text-gray-500">Customize</span>
104
+ </div>
105
+ <div class="flex items-center space-x-2">
106
+ <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">3</div>
107
+ <span class="font-medium text-gray-500">Generate</span>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Content Area -->
112
+ <div class="p-8">
113
+ <!-- Step 1: Upload Media -->
114
+ <div id="step1" class="">
115
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Upload Your Media</h2>
116
+
117
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
118
+ <!-- Image Upload -->
119
+ <div class="space-y-4">
120
+ <h3 class="text-lg font-medium text-gray-700 flex items-center">
121
+ <i data-feather="image" class="mr-2"></i> Avatar Image
122
+ </h3>
123
+ <div class="dropzone rounded-lg p-8 text-center cursor-pointer" id="imageDropzone">
124
+ <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
125
+ <p class="text-gray-500 mb-2">Drag & drop your image here</p>
126
+ <p class="text-sm text-gray-400">or click to browse files</p>
127
+ <input type="file" id="imageInput" accept="image/*" class="hidden">
128
+ </div>
129
+ <div class="flex justify-center">
130
+ <button id="clearImageBtn" class="text-sm text-gray-500 hover:text-gray-700 flex items-center" disabled>
131
+ <i data-feather="trash-2" class="w-4 h-4 mr-1"></i> Clear
132
+ </button>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Audio Upload -->
137
+ <div class="space-y-4">
138
+ <h3 class="text-lg font-medium text-gray-700 flex items-center">
139
+ <i data-feather="music" class="mr-2"></i> Audio Track
140
+ </h3>
141
+ <div class="dropzone rounded-lg p-8 text-center cursor-pointer" id="audioDropzone">
142
+ <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
143
+ <p class="text-gray-500 mb-2">Drag & drop your audio file here</p>
144
+ <p class="text-sm text-gray-400">or click to browse files</p>
145
+ <input type="file" id="audioInput" accept="audio/*" class="hidden">
146
+ </div>
147
+ <div class="flex justify-center">
148
+ <button id="clearAudioBtn" class="text-sm text-gray-500 hover:text-gray-700 flex items-center" disabled>
149
+ <i data-feather="trash-2" class="w-4 h-4 mr-1"></i> Clear
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="flex justify-end">
156
+ <button id="nextStep1Btn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg flex items-center disabled:opacity-50" disabled>
157
+ Next <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Step 2: Customize (Hidden Initially) -->
163
+ <div id="step2" class="hidden">
164
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
165
+ <!-- Preview -->
166
+ <div class="lg:col-span-2">
167
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Customize Your Animation</h2>
168
+
169
+ <div class="bg-gray-100 rounded-xl p-4 mb-6">
170
+ <canvas id="previewCanvas" class="w-full h-64 md:h-96 mx-auto"></canvas>
171
+ </div>
172
+
173
+ <div class="bg-gray-100 rounded-xl p-4">
174
+ <div class="flex items-center justify-between mb-2">
175
+ <span class="text-gray-700">Audio Timeline</span>
176
+ <button id="playPauseBtn" class="text-indigo-500 hover:text-indigo-700">
177
+ <i data-feather="play" class="w-5 h-5"></i>
178
+ </button>
179
+ </div>
180
+ <div class="relative h-2 bg-gray-300 rounded-full">
181
+ <div id="progressBar" class="absolute top-0 left-0 h-full bg-indigo-500 rounded-full" style="width: 0%"></div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Customization Options -->
187
+ <div>
188
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Customization</h3>
189
+
190
+ <!-- Color Selection -->
191
+ <div class="mb-6">
192
+ <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Color Scheme</h4>
193
+ <div class="grid grid-cols-2 gap-4">
194
+ <div>
195
+ <label class="block text-sm text-gray-600 mb-1">Primary Color</label>
196
+ <input type="color" class="color-picker" value="#4F46E5" id="primaryColor">
197
+ </div>
198
+ <div>
199
+ <label class="block text-sm text-gray-600 mb-1">Secondary Color</label>
200
+ <input type="color" class="color-picker" value="#EC4899" id="secondaryColor">
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Theme Selection -->
206
+ <div class="mb-6">
207
+ <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Theme Style</h4>
208
+ <div class="grid grid-cols-3 gap-2">
209
+ <div>
210
+ <input type="radio" name="theme" id="theme-light" value="light" class="hidden" checked>
211
+ <label for="theme-light" class="theme-selector block p-2 border rounded-lg cursor-pointer text-center">
212
+ <div class="w-full h-16 bg-gradient-to-br from-gray-100 to-gray-200 rounded-md mb-1"></div>
213
+ <span class="text-xs">Light</span>
214
+ </label>
215
+ </div>
216
+ <div>
217
+ <input type="radio" name="theme" id="theme-dark" value="dark" class="hidden">
218
+ <label for="theme-dark" class="theme-selector block p-2 border rounded-lg cursor-pointer text-center">
219
+ <div class="w-full h-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-md mb-1"></div>
220
+ <span class="text-xs">Dark</span>
221
+ </label>
222
+ </div>
223
+ <div>
224
+ <input type="radio" name="theme" id="theme-neon" value="neon" class="hidden">
225
+ <label for="theme-neon" class="theme-selector block p-2 border rounded-lg cursor-pointer text-center">
226
+ <div class="w-full h-16 bg-gradient-to-br from-purple-900 to-pink-600 rounded-md mb-1"></div>
227
+ <span class="text-xs">Neon</span>
228
+ </label>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Animation Style -->
234
+ <div class="mb-6">
235
+ <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Animation Style</h4>
236
+ <select class="w-full px-3 py-2 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
237
+ <option>3D Cartoon</option>
238
+ <option>2D Minimal</option>
239
+ <option>Realistic</option>
240
+ <option>Anime Style</option>
241
+ <option>Pixel Art</option>
242
+ </select>
243
+ </div>
244
+
245
+ <!-- Motion Intensity -->
246
+ <div class="mb-6">
247
+ <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Motion Intensity</h4>
248
+ <input type="range" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="motionRange">
249
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
250
+ <span>Subtle</span>
251
+ <span>Dynamic</span>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Sync Options -->
256
+ <div class="mb-6">
257
+ <h4 class="text-sm font-medium text-gray-700 uppercase tracking-wider mb-3">Sync Options</h4>
258
+ <div class="space-y-2">
259
+ <label class="flex items-center space-x-2">
260
+ <input type="checkbox" class="rounded text-indigo-500" checked>
261
+ <span>Sync to Beat</span>
262
+ </label>
263
+ <label class="flex items-center space-x-2">
264
+ <input type="checkbox" class="rounded text-indigo-500" checked>
265
+ <span>Lip Sync</span>
266
+ </label>
267
+ <label class="flex items-center space-x-2">
268
+ <input type="checkbox" class="rounded text-indigo-500">
269
+ <span>Head Movement</span>
270
+ </label>
271
+ <label class="flex items-center space-x-2">
272
+ <input type="checkbox" class="rounded text-indigo-500" checked>
273
+ <span>Hand Gestures</span>
274
+ </label>
275
+ </div>
276
+ </div>
277
+
278
+ <div class="flex justify-between">
279
+ <button id="backStep2Btn" class="text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg flex items-center">
280
+ <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back
281
+ </button>
282
+ <button id="nextStep2Btn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg flex items-center">
283
+ Next <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Step 3: Generate (Hidden Initially) -->
291
+ <div id="step3" class="hidden">
292
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Generate Your Animated Avatar</h2>
293
+
294
+ <div class="bg-gray-100 rounded-xl p-8 text-center mb-8">
295
+ <div id="processingAnimation" class="flex justify-center mb-4">
296
+ <div class="w-16 h-16 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
297
+ </div>
298
+ <h3 class="text-xl font-medium text-gray-800 mb-2">Processing Your Animation</h3>
299
+ <p class="text-gray-600 max-w-md mx-auto">We're synchronizing your avatar with the audio and applying your customizations. This may take a few moments.</p>
300
+ <div class="w-full bg-gray-300 rounded-full h-2.5 mt-6">
301
+ <div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
302
+ </div>
303
+ </div>
304
+
305
+ <div id="resultSection" class="hidden">
306
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
307
+ <div class="bg-gray-100 rounded-xl p-4">
308
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Preview</h3>
309
+ <div class="animation-preview bg-white rounded-lg overflow-hidden shadow-md">
310
+ <video id="resultVideo" class="w-full" controls></video>
311
+ </div>
312
+ </div>
313
+ <div class="space-y-6">
314
+ <div>
315
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Export Options</h3>
316
+ <div class="grid grid-cols-2 gap-4">
317
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg flex flex-col items-center justify-center">
318
+ <i data-feather="download" class="w-6 h-6 mb-2"></i>
319
+ <span>Download Video</span>
320
+ </button>
321
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-3 rounded-lg flex flex-col items-center justify-center">
322
+ <i data-feather="image" class="w-6 h-6 mb-2"></i>
323
+ <span>Download GIF</span>
324
+ </button>
325
+ </div>
326
+ </div>
327
+
328
+ <div>
329
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Share</h3>
330
+ <div class="flex space-x-3">
331
+ <button class="bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full">
332
+ <i data-feather="facebook" class="w-5 h-5"></i>
333
+ </button>
334
+ <button class="bg-pink-500 hover:bg-pink-600 text-white p-3 rounded-full">
335
+ <i data-feather="instagram" class="w-5 h-5"></i>
336
+ </button>
337
+ <button class="bg-blue-400 hover:bg-blue-500 text-white p-3 rounded-full">
338
+ <i data-feather="twitter" class="w-5 h-5"></i>
339
+ </button>
340
+ <button class="bg-gray-800 hover:bg-gray-900 text-white p-3 rounded-full">
341
+ <i data-feather="share-2" class="w-5 h-5"></i>
342
+ </button>
343
+ </div>
344
+ </div>
345
+
346
+ <div>
347
+ <h3 class="text-lg font-medium text-gray-700 mb-3">Save Project</h3>
348
+ <div class="flex items-center space-x-4">
349
+ <input type="text" placeholder="Project Name" class="flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
350
+ <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg">
351
+ Save
352
+ </button>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="flex justify-center">
359
+ <button id="newProjectBtn" class="bg-white border border-indigo-500 text-indigo-500 hover:bg-indigo-50 px-6 py-2 rounded-lg flex items-center">
360
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i> Create New
361
+ </button>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Features Section -->
369
+ <div class="mb-16">
370
+ <h2 class="text-2xl font-semibold text-gray-800 text-center mb-8">Features</h2>
371
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
372
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
373
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
374
+ <i data-feather="sliders" class="text-indigo-500 w-6 h-6"></i>
375
+ </div>
376
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Advanced Customization</h3>
377
+ <p class="text-gray-600">Fine-tune colors, themes, and animation styles to match your brand or personal style.</p>
378
+ </div>
379
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
380
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
381
+ <i data-feather="zap" class="text-indigo-500 w-6 h-6"></i>
382
+ </div>
383
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Real-time Sync</h3>
384
+ <p class="text-gray-600">Perfect synchronization between audio and avatar movements for natural-looking animations.</p>
385
+ </div>
386
+ <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
387
+ <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
388
+ <i data-feather="download" class="text-indigo-500 w-6 h-6"></i>
389
+ </div>
390
+ <h3 class="text-lg font-medium text-gray-800 mb-2">Multiple Formats</h3>
391
+ <p class="text-gray-600">Export as high-quality video or GIF for use on any platform or device.</p>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Footer -->
397
+ <footer class="text-center text-gray-600 text-sm">
398
+ <p>© 2023 AvatarSync Studio. All rights reserved.</p>
399
+ <p class="mt-1">Made with <i data-feather="heart" class="w-4 h-4 inline text-red-500"></i> for content creators</p>
400
+ </footer>
401
+ </div>
402
+
403
+ <script>
404
+ // Initialize Vanta.js background
405
+ VANTA.GLOBE({
406
+ el: "#vanta-bg",
407
+ mouseControls: true,
408
+ touchControls: true,
409
+ gyroControls: false,
410
+ minHeight: 200.00,
411
+ minWidth: 200.00,
412
+ scale: 1.00,
413
+ scaleMobile: 1.00,
414
+ color: 0x4f46e5,
415
+ backgroundColor: 0xf5f7fa,
416
+ size: 0.8
417
+ });
418
+
419
+ // Initialize Feather Icons
420
+ feather.replace();
421
+
422
+ // Dropzone functionality
423
+ document.addEventListener('DOMContentLoaded', function() {
424
+ const imageDropzone = document.getElementById('imageDropzone');
425
+ const audioDropzone = document.getElementById('audioDropzone');
426
+ const imageInput = document.getElementById('imageInput');
427
+ const audioInput = document.getElementById('audioInput');
428
+ const clearImageBtn = document.getElementById('clearImageBtn');
429
+ const clearAudioBtn = document.getElementById('clearAudioBtn');
430
+ const nextStep1Btn = document.getElementById('nextStep1Btn');
431
+
432
+ let hasImage = false;
433
+ let hasAudio = false;
434
+
435
+ // Image dropzone events
436
+ imageDropzone.addEventListener('click', () => imageInput.click());
437
+ imageInput.addEventListener('change', handleImageFile);
438
+
439
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
440
+ imageDropzone.addEventListener(eventName, preventDefaults, false);
441
+ });
442
+
443
+ ['dragenter', 'dragover'].forEach(eventName => {
444
+ imageDropzone.addEventListener(eventName, highlightImage, false);
445
+ });
446
+
447
+ ['dragleave', 'drop'].forEach(eventName => {
448
+ imageDropzone.addEventListener(eventName, unhighlightImage, false);
449
+ });
450
+
451
+ imageDropzone.addEventListener('drop', handleImageDrop, false);
452
+
453
+ // Audio dropzone events
454
+ audioDropzone.addEventListener('click', () => audioInput.click());
455
+ audioInput.addEventListener('change', handleAudioFile);
456
+
457
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
458
+ audioDropzone.addEventListener(eventName, preventDefaults, false);
459
+ });
460
+
461
+ ['dragenter', 'dragover'].forEach(eventName => {
462
+ audioDropzone.addEventListener(eventName, highlightAudio, false);
463
+ });
464
+
465
+ ['dragleave', 'drop'].forEach(eventName => {
466
+ audioDropzone.addEventListener(eventName, unhighlightAudio, false);
467
+ });
468
+
469
+ audioDropzone.addEventListener('drop', handleAudioDrop, false);
470
+
471
+ // Clear buttons
472
+ clearImageBtn.addEventListener('click', clearImage);
473
+ clearAudioBtn.addEventListener('click', clearAudio);
474
+
475
+ // Navigation between steps
476
+ nextStep1Btn.addEventListener('click', goToStep2);
477
+ document.getElementById('backStep2Btn').addEventListener('click', goToStep1);
478
+ document.getElementById('nextStep2Btn').addEventListener('click', goToStep3);
479
+ document.getElementById('newProjectBtn').addEventListener('click', resetAll);
480
+
481
+ function preventDefaults(e) {
482
+ e.preventDefault();
483
+ e.stopPropagation();
484
+ }
485
+
486
+ function highlightImage() {
487
+ imageDropzone.classList.add('active');
488
+ }
489
+
490
+ function unhighlightImage() {
491
+ imageDropzone.classList.remove('active');
492
+ }
493
+
494
+ function highlightAudio() {
495
+ audioDropzone.classList.add('active');
496
+ }
497
+
498
+ function unhighlightAudio() {
499
+ audioDropzone.classList.remove('active');
500
+ }
501
+
502
+ function handleImageDrop(e) {
503
+ const dt = e.dataTransfer;
504
+ const file = dt.files[0];
505
+ handleImageFile({ target: { files: [file] } });
506
+ }
507
+
508
+ function handleAudioDrop(e) {
509
+ const dt = e.dataTransfer;
510
+ const file = dt.files[0];
511
+ handleAudioFile({ target: { files: [file] } });
512
+ }
513
+
514
+ function handleImageFile(e) {
515
+ const file = e.target.files[0];
516
+ if (file && file.type.match('image.*')) {
517
+ const reader = new FileReader();
518
+
519
+ reader.onload = function(e) {
520
+ imageDropzone.innerHTML = `
521
+ <div class="flex flex-col items-center">
522
+ <img src="${e.target.result}" class="h-32 object-contain mb-2" alt="Preview">
523
+ <p class="text-sm text-gray-600">${file.name}</p>
524
+ </div>
525
+ `;
526
+ hasImage = true;
527
+ clearImageBtn.disabled = false;
528
+ checkNextButton();
529
+ };
530
+
531
+ reader.readAsDataURL(file);
532
+ }
533
+ }
534
+
535
+ function handleAudioFile(e) {
536
+ const file = e.target.files[0];
537
+ if (file && file.type.match('audio.*')) {
538
+ const reader = new FileReader();
539
+
540
+ reader.onload = function(e) {
541
+ audioDropzone.innerHTML = `
542
+ <div class="flex flex-col items-center">
543
+ <i data-feather="music" class="w-12 h-12 mx-auto text-indigo-400 mb-3"></i>
544
+ <p class="text-sm text-gray-600 truncate w-full">${file.name}</p>
545
+ </div>
546
+ `;
547
+ feather.replace();
548
+ hasAudio = true;
549
+ clearAudioBtn.disabled = false;
550
+ checkNextButton();
551
+ };
552
+
553
+ reader.readAsDataURL(file);
554
+ }
555
+ }
556
+
557
+ function clearImage() {
558
+ imageDropzone.innerHTML = `
559
+ <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
560
+ <p class="text-gray-500 mb-2">Drag & drop your image here</p>
561
+ <p class="text-sm text-gray-400">or click to browse files</p>
562
+ `;
563
+ feather.replace();
564
+ imageInput.value = '';
565
+ hasImage = false;
566
+ clearImageBtn.disabled = true;
567
+ checkNextButton();
568
+ }
569
+
570
+ function clearAudio() {
571
+ audioDropzone.innerHTML = `
572
+ <i data-feather="upload" class="w-12 h-12 mx-auto text-gray-400 mb-3"></i>
573
+ <p class="text-gray-500 mb-2">Drag & drop your audio file here</p>
574
+ <p class="text-sm text-gray-400">or click to browse files</p>
575
+ `;
576
+ feather.replace();
577
+ audioInput.value = '';
578
+ hasAudio = false;
579
+ clearAudioBtn.disabled = true;
580
+ checkNextButton();
581
+ }
582
+
583
+ function checkNextButton() {
584
+ nextStep1Btn.disabled = !(hasImage && hasAudio);
585
+ }
586
+
587
+ function goToStep2() {
588
+ document.getElementById('step1').classList.add('hidden');
589
+ document.getElementById('step2').classList.remove('hidden');
590
+
591
+ // Simulate processing for demo
592
+ setTimeout(() => {
593
+ const canvas = document.getElementById('previewCanvas');
594
+ const ctx = canvas.getContext('2d');
595
+
596
+ // Set canvas dimensions
597
+ canvas.width = canvas.offsetWidth;
598
+ canvas.height = canvas.offsetHeight;
599
+
600
+ // Draw a simple placeholder
601
+ ctx.fillStyle = '#4F46E5';
602
+ ctx.beginPath();
603
+ ctx.arc(canvas.width/2, canvas.height/2, 80, 0, Math.PI * 2);
604
+ ctx.fill();
605
+
606
+ ctx.fillStyle = '#ffffff';
607
+ ctx.beginPath();
608
+ ctx.arc(canvas.width/2 - 30, canvas.height/2 - 20, 10, 0, Math.PI * 2);
609
+ ctx.arc(canvas.width/2 + 30, canvas.height/2 - 20, 10, 0, Math.PI * 2);
610
+ ctx.fill();
611
+
612
+ ctx.beginPath();
613
+ ctx.arc(canvas.width/2, canvas.height/2 + 20, 30, 0, Math.PI);
614
+ ctx.strokeStyle = '#ffffff';
615
+ ctx.lineWidth = 3;
616
+ ctx.stroke();
617
+ }, 300);
618
+ }
619
+
620
+ function goToStep1() {
621
+ document.getElementById('step2').classList.add('hidden');
622
+ document.getElementById('step1').classList.remove('hidden');
623
+ }
624
+
625
+ function goToStep3() {
626
+ document.getElementById('step2').classList.add('hidden');
627
+ document.getElementById('step3').classList.remove('hidden');
628
+
629
+ // Simulate processing animation
630
+ const progressBar = document.getElementById('progressBar');
631
+ const processingAnimation = document.getElementById('processingAnimation');
632
+ const resultSection = document.getElementById('resultSection');
633
+
634
+ let progress = 0;
635
+ const interval = setInterval(() => {
636
+ progress += 5;
637
+ progressBar.style.width = `${progress}%`;
638
+
639
+ if (progress >= 100) {
640
+ clearInterval(interval);
641
+ processingAnimation.classList.add('hidden');
642
+ resultSection.classList.remove('hidden');
643
+
644
+ // For demo purposes, we'll use a placeholder video
645
+ const resultVideo = document.getElementById('resultVideo');
646
+ resultVideo.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
647
+ resultVideo.load();
648
+ }
649
+ }, 200);
650
+ }
651
+
652
+ function resetAll() {
653
+ document.getElementById('step3').classList.add('hidden');
654
+ document.getElementById('step1').classList.remove('hidden');
655
+ document.getElementById('processingAnimation').classList.remove('hidden');
656
+ document.getElementById('resultSection').classList.add('hidden');
657
+ document.getElementById('progressBar').style.width = '0%';
658
+
659
+ clearImage();
660
+ clearAudio();
661
+ }
662
+
663
+ // Play/Pause button for audio
664
+ document.getElementById('playPauseBtn').addEventListener('click', function() {
665
+ const icon = this.querySelector('i');
666
+ if (icon.dataset.feather === 'play') {
667
+ icon.dataset.feather = 'pause';
668
+ feather.replace();
669
+ // Here you would play the audio and animation
670
+ } else {
671
+ icon.dataset.feather = 'play';
672
+ feather.replace();
673
+ // Here you would pause the audio and animation
674
+ }
675
+ });
676
+ });
677
+ </script>
678
+ </body>
679
  </html>