Hugging Face's logo

Spaces:
AI4U2
/
ai-avatar-studio
Running

App Files Community
AI4U2 commited on
Commit
d208f32
·
verified ·
1 Parent(s): e057a98

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +291 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Avatar Studio
3
- emoji: 😻
4
- colorFrom: blue
5
- colorTo: indigo
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: ai-avatar-studio
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,291 @@
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>AI Video Avatar Creator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-10px); }
13
+ }
14
+ .floating { animation: float 3s ease-in-out infinite; }
15
+ .progress-ring__circle {
16
+ transition: stroke-dashoffset 0.35s;
17
+ transform: rotate(-90deg);
18
+ transform-origin: 50% 50%;
19
+ }
20
+ .avatar-preview {
21
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
22
+ }
23
+ .waveform {
24
+ background: linear-gradient(to right, #8a2be2, #00bfff);
25
+ height: 60px;
26
+ position: relative;
27
+ overflow: hidden;
28
+ }
29
+ .waveform-bar {
30
+ position: absolute;
31
+ bottom: 0;
32
+ width: 3px;
33
+ background: white;
34
+ animation: wave 1.2s infinite ease-in-out;
35
+ }
36
+ @keyframes wave {
37
+ 0%, 100% { height: 20%; }
38
+ 50% { height: 100%; }
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-900 text-white min-h-screen font-sans">
43
+ <div class="container mx-auto px-4 py-8">
44
+ <!-- Header -->
45
+ <header class="flex justify-between items-center mb-8">
46
+ <div class="flex items-center space-x-2">
47
+ <i class="fas fa-robot text-3xl text-purple-500"></i>
48
+ <h1 class="text-2xl md:text-3xl font-bold bg-gradient-to-r from-purple-500 to-blue-500 bg-clip-text text-transparent">AI Avatar Studio</h1>
49
+ </div>
50
+ <div class="flex space-x-4">
51
+ <button class="hidden md:flex items-center space-x-1 px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
52
+ <i class="fas fa-history"></i>
53
+ <span>History</span>
54
+ </button>
55
+ <button class="hidden md:flex items-center space-x-1 px-4 py-2 rounded-full bg-purple-600 hover:bg-purple-700 transition">
56
+ <i class="fas fa-user-plus"></i>
57
+ <span>New Project</span>
58
+ </button>
59
+ <button class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center">
60
+ <i class="fas fa-user"></i>
61
+ </button>
62
+ </div>
63
+ </header>
64
+
65
+ <!-- Main Content -->
66
+ <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
67
+ <!-- Avatar Preview Section -->
68
+ <div class="lg:col-span-2 space-y-6">
69
+ <div class="bg-gray-800 rounded-2xl p-6">
70
+ <div class="flex justify-between items-center mb-4">
71
+ <h2 class="text-xl font-semibold">Avatar Preview</h2>
72
+ <div class="flex space-x-2">
73
+ <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600">
74
+ <i class="fas fa-expand"></i>
75
+ </button>
76
+ <button class="p-2 rounded-full bg-gray-700 hover:bg-gray-600">
77
+ <i class="fas fa-download"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Avatar Display -->
83
+ <div class="relative">
84
+ <div class="avatar-preview rounded-xl overflow-hidden w-full h-80 flex items-center justify-center">
85
+ <div class="floating relative">
86
+ <div class="absolute -inset-4 bg-purple-500 rounded-full blur opacity-20"></div>
87
+ <img src="https://cdn-icons-png.flaticon.com/512/616/616408.png" alt="AI Avatar" class="w-48 h-48 object-contain">
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Progress Ring -->
92
+ <div class="absolute bottom-4 right-4 w-16 h-16">
93
+ <svg class="w-full h-full" viewBox="0 0 36 36">
94
+ <path class="text-gray-700"
95
+ d="M18 2.0845
96
+ a 15.9155 15.9155 0 0 1 0 31.831
97
+ a 15.9155 15.9155 0 0 1 0 -31.831"
98
+ fill="none"
99
+ stroke-width="2"
100
+ stroke-linecap="round"
101
+ stroke="currentColor"
102
+ />
103
+ <path class="progress-ring__circle text-purple-500"
104
+ stroke-dasharray="100, 100"
105
+ d="M18 2.0845
106
+ a 15.9155 15.9155 0 0 1 0 31.831
107
+ a 15.9155 15.9155 0 0 1 0 -31.831"
108
+ fill="none"
109
+ stroke-width="2"
110
+ stroke-linecap="round"
111
+ stroke="currentColor"
112
+ />
113
+ </svg>
114
+ <div class="absolute inset-0 flex items-center justify-center">
115
+ <i class="fas fa-microphone text-sm"></i>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Audio Waveform -->
122
+ <div class="bg-gray-800 rounded-2xl p-6">
123
+ <h3 class="text-lg font-semibold mb-4">Voice Recording</h3>
124
+ <div class="waveform rounded-lg relative">
125
+ <!-- Generated waveform bars (dynamically created with JS) -->
126
+ <div class="absolute inset-0 flex items-center justify-center space-x-1 px-4" id="waveform-container"></div>
127
+ </div>
128
+ <div class="mt-4 flex justify-center space-x-4">
129
+ <button id="record-btn" class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-600 hover:bg-purple-700 transition">
130
+ <i class="fas fa-microphone"></i>
131
+ </button>
132
+ <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-700 hover:bg-gray-600 transition">
133
+ <i class="fas fa-stop"></i>
134
+ </button>
135
+ <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-700 hover:bg-gray-600 transition">
136
+ <i class="fas fa-play"></i>
137
+ </button>
138
+ <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-700 hover:bg-gray-600 transition">
139
+ <i class="fas fa-trash"></i>
140
+ </button>
141
+ </div>
142
+ </div>
143
+ </div>
144
+
145
+ <!-- Controls Section -->
146
+ <div class="space-y-6">
147
+ <!-- Avatar Selection -->
148
+ <div class="bg-gray-800 rounded-2xl p-6">
149
+ <h2 class="text-xl font-semibold mb-4">Avatar Style</h2>
150
+ <div class="grid grid-cols-3 gap-3">
151
+ <div class="bg-gray-700 rounded-lg p-2 flex flex-col items-center cursor-pointer hover:bg-gray-600 transition">
152
+ <img src="https://cdn-icons-png.flaticon.com/512/4333/4333609.png" alt="Style 1" class="w-16 h-16 object-contain">
153
+ <span class="text-xs mt-1">Cartoon</span>
154
+ </div>
155
+ <div class="bg-gray-700 rounded-lg p-2 flex flex-col items-center cursor-pointer hover:bg-gray-600 transition border-2 border-purple-500">
156
+ <img src="https://cdn-icons-png.flaticon.com/512/616/616408.png" alt="Style 2" class="w-16 h-16 object-contain">
157
+ <span class="text-xs mt-1">Anime</span>
158
+ </div>
159
+ <div class="bg-gray-700 rounded-lg p-2 flex flex-col items-center cursor-pointer hover:bg-gray-600 transition">
160
+ <img src="https://cdn-icons-png.flaticon.com/512/4333/4333625.png" alt="Style 3" class="w-16 h-16 object-contain">
161
+ <span class="text-xs mt-1">Realistic</span>
162
+ </div>
163
+ <div class="bg-gray-700 rounded-lg p-2 flex flex-col items-center cursor-pointer hover:bg-gray-600 transition">
164
+ <img src="https://cdn-icons-png.flaticon.com/512/1154/1154471.png" alt="Style 4" class="w-16 h-16 object-contain">
165
+ <span class="text-xs mt-1">Sci-Fi</span>
166
+ </div>
167
+ <div class="bg-gray-700 rounded-lg p-2 flex flex-col items-center cursor-pointer hover:bg-gray-600 transition">
168
+ <img src="https://cdn-icons-png.flaticon.com/512/4333/4333602.png" alt="Style 5" class="w-16 h-16 object-contain">
169
+ <span class="text-xs mt-1">Robotic</span>
170
+ </div>
171
+ <div class="bg-gray-700 rounded-lg p-2 flex flex-col items-center cursor-pointer hover:bg-gray-600 transition">
172
+ <img src="https://cdn-icons-png.flaticon.com/512/4333/4333603.png" alt="Style 6" class="w-16 h-16 object-contain">
173
+ <span class="text-xs mt-1">More +</span>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Customization -->
179
+ <div class="bg-gray-800 rounded-2xl p-6">
180
+ <h2 class="text-xl font-semibold mb-4">Customization</h2>
181
+ <div class="space-y-4">
182
+ <div>
183
+ <label class="block text-sm mb-1">Voice Tone</label>
184
+ <select class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
185
+ <option>Friendly</option>
186
+ <option>Professional</option>
187
+ <option>Energetic</option>
188
+ <option>Calm</option>
189
+ </select>
190
+ </div>
191
+ <div>
192
+ <label class="block text-sm mb-1">Avatar Expression</label>
193
+ <div class="flex space-x-2">
194
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
195
+ <i class="far fa-smile"></i>
196
+ </button>
197
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
198
+ <i class="far fa-grin"></i>
199
+ </button>
200
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
201
+ <i class="far fa-meh"></i>
202
+ </button>
203
+ <button class="p-2 bg-gray-700 rounded-lg hover:bg-gray-600 transition">
204
+ <i class="far fa-frown"></i>
205
+ </button>
206
+ </div>
207
+ </div>
208
+ <div>
209
+ <label class="block text-sm mb-1">Background</label>
210
+ <div class="grid grid-cols-3 gap-2">
211
+ <div class="h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 cursor-pointer border-2 border-purple-400"></div>
212
+ <div class="h-12 rounded-lg bg-gradient-to-br from-green-500 to-teal-600 cursor-pointer"></div>
213
+ <div class="h-12 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-600 cursor-pointer"></div>
214
+ <div class="h-12 rounded-lg bg-gray-700 cursor-pointer"></div>
215
+ <div class="h-12 rounded-lg bg-white cursor-pointer"></div>
216
+ <div class="h-12 rounded-lg bg-black cursor-pointer flex items-center justify-center">
217
+ <i class="fas fa-plus text-gray-400"></i>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <!-- Text to Speech -->
225
+ <div class="bg-gray-800 rounded-2xl p-6">
226
+ <h2 class="text-xl font-semibold mb-4">Text to Speech</h2>
227
+ <textarea class="w-full bg-gray-700 rounded-lg px-4 py-3 h-24 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none" placeholder="Type your text here..."></textarea>
228
+ <button class="w-full mt-3 bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-medium transition flex items-center justify-center space-x-2">
229
+ <i class="fas fa-robot"></i>
230
+ <span>Generate Speech</span>
231
+ </button>
232
+ </div>
233
+
234
+ <!-- Export Options -->
235
+ <div class="bg-gray-800 rounded-2xl p-6">
236
+ <h2 class="text-xl font-semibold mb-4">Export</h2>
237
+ <button class="w-full mb-3 bg-blue-600 hover:bg-blue-700 py-3 rounded-lg font-medium transition flex items-center justify-center space-x-2">
238
+ <i class="fas fa-video"></i>
239
+ <span>Download Video (MP4)</span>
240
+ </button>
241
+ <button class="w-full bg-green-600 hover:bg-green-700 py-3 rounded-lg font-medium transition flex items-center justify-center space-x-2">
242
+ <i class="fas fa-file-audio"></i>
243
+ <span>Download Audio (MP3)</span>
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </main>
248
+ </div>
249
+
250
+ <script>
251
+ // Generate random waveform bars
252
+ const waveformContainer = document.getElementById('waveform-container');
253
+ for (let i = 0; i < 60; i++) {
254
+ const bar = document.createElement('div');
255
+ bar.className = 'waveform-bar';
256
+ bar.style.left = `${(i / 60) * 100}%`;
257
+ bar.style.height = `${Math.random() * 40 + 20}%`;
258
+ bar.style.animationDelay = `${Math.random() * 0.5}s`;
259
+ waveformContainer.appendChild(bar);
260
+ }
261
+
262
+ // Simulate recording progress
263
+ const progressCircle = document.querySelector('.progress-ring__circle');
264
+ const recordBtn = document.getElementById('record-btn');
265
+ let isRecording = false;
266
+ let progress = 0;
267
+ let interval;
268
+
269
+ recordBtn.addEventListener('click', () => {
270
+ isRecording = !isRecording;
271
+
272
+ if (isRecording) {
273
+ recordBtn.classList.add('animate-pulse');
274
+ interval = setInterval(() => {
275
+ progress += 1;
276
+ const offset = 100 - progress;
277
+ progressCircle.style.strokeDashoffset = offset;
278
+
279
+ if (progress >= 100) {
280
+ clearInterval(interval);
281
+ recordBtn.classList.remove('animate-pulse');
282
+ }
283
+ }, 100);
284
+ } else {
285
+ recordBtn.classList.remove('animate-pulse');
286
+ clearInterval(interval);
287
+ }
288
+ });
289
+ </script>
290
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AI4U2/ai-avatar-studio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
291
+ </html>