Hugging Face's logo

Spaces:
Hamed744
/
Tttt6
Running

App Files Community
Hamed744 commited on
Commit
da54c91
·
verified ·
1 Parent(s): 452b4e3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +285 -19
index.html CHANGED
@@ -1,19 +1,285 @@
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="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تولیدکننده ویدیو LongCat-Video-Avatar 1.5</title>
7
+ <!-- استفاده از Tailwind CSS برای طراحی رابط کاربری -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap');
11
+ body {
12
+ font-family: 'Vazirmatn', sans-serif;
13
+ }
14
+ </style>
15
+ </head>
16
+ <body class="bg-gray-100 min-h-screen p-4 md:p-8">
17
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
18
+ <h1 class="text-2xl font-bold text-center text-gray-800 mb-6">اتصال به API ابزار LongCat-Video-Avatar 1.5</h1>
19
+
20
+ <form id="generator-form" class="space-y-6">
21
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
22
+ <!-- آپلود تصویر -->
23
+ <div>
24
+ <label class="block text-sm font-medium text-gray-700 mb-2">تصویر مرجع (Image)</label>
25
+ <input type="file" id="image-input" accept="image/*" required class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100 border border-gray-300 rounded-md p-2" />
26
+ </div>
27
+
28
+ <!-- آپلود صدا -->
29
+ <div>
30
+ <label class="block text-sm font-medium text-gray-700 mb-2">فایل صوتی (Audio)</label>
31
+ <input type="file" id="audio-input" accept="audio/*" required class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-orange-50 file:text-orange-700 hover:file:bg-orange-100 border border-gray-300 rounded-md p-2" />
32
+ </div>
33
+ </div>
34
+
35
+ <!-- پرامپت متن -->
36
+ <div>
37
+ <label class="block text-sm font-medium text-gray-700 mb-2">پرامپت متنی (Prompt)</label>
38
+ <textarea id="prompt-input" rows="3" class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-orange-500 focus:border-orange-500" placeholder="توصیف رفتار کاراکتر...">A person is speaking expressively, looking at the camera.</textarea>
39
+ </div>
40
+
41
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
42
+ <!-- رزولوشن -->
43
+ <div>
44
+ <label class="block text-sm font-medium text-gray-700 mb-2">رزولوشن (Resolution)</label>
45
+ <select id="resolution-input" class="w-full p-2 border border-gray-300 rounded-md">
46
+ <option value="480p" selected>480p</option>
47
+ <option value="720p">720p</option>
48
+ </select>
49
+ </div>
50
+
51
+ <!-- سید عددی -->
52
+ <div>
53
+ <label class="block text-sm font-medium text-gray-700 mb-2">سید (Seed)</label>
54
+ <input type="number" id="seed-input" value="42" class="w-full p-2 border border-gray-300 rounded-md" />
55
+ </div>
56
+
57
+ <!-- پیش‌پردازش صدا -->
58
+ <div>
59
+ <label class="block text-sm font-medium text-gray-700 mb-2">پیش‌پردازش صدا</label>
60
+ <select id="vocal-mode-input" class="w-full p-2 border border-gray-300 rounded-md">
61
+ <option value="Clean speech (fast)" selected>Clean speech (fast)</option>
62
+ <option value="Isolate vocals (quality)">Isolate vocals (quality)</option>
63
+ </select>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- شتاب‌دهنده سخت‌افزار -->
68
+ <div>
69
+ <label class="block text-sm font-medium text-gray-700 mb-2">شتاب‌دهنده شبیه‌ساز (Acceleration)</label>
70
+ <select id="acceleration-input" class="w-full p-2 border border-gray-300 rounded-md">
71
+ <option value="DBCache faster" selected>DBCache faster</option>
72
+ <option value="DBCache fast">DBCache fast</option>
73
+ <option value="Exact 8-step">Exact 8-step</option>
74
+ </select>
75
+ </div>
76
+
77
+ <!-- دکمه تولید -->
78
+ <button type="submit" id="submit-btn" class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-4 rounded-md transition duration-200">
79
+ تولید ویدیو (Generate)
80
+ </button>
81
+ </form>
82
+
83
+ <!-- بخش وضعیت و خروجی -->
84
+ <div class="mt-8 border-t pt-6">
85
+ <h2 class="text-lg font-bold text-gray-800 mb-4">وضعیت پردازش و خروجی</h2>
86
+
87
+ <div id="status-box" class="hidden p-4 rounded-md mb-4 bg-gray-100 text-sm text-gray-700 space-y-1">
88
+ <p id="status-text" class="font-semibold"></p>
89
+ <div class="w-full bg-gray-300 rounded-full h-2.5 mt-2 overflow-hidden">
90
+ <div id="progress-bar" class="bg-orange-600 h-2.5" style="width: 0%"></div>
91
+ </div>
92
+ </div>
93
+
94
+ <div id="result-box" class="hidden space-y-4">
95
+ <p class="text-green-600 font-bold">ویدیو با موفقیت ساخته شد!</p>
96
+ <video id="output-video" controls class="w-full rounded-md border shadow"></video>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <script>
102
+ const BASE_SPACE_URL = "https://velocityaipartners-longcat-video-avatar-1-5-2nd.hf.space";
103
+
104
+ const form = document.getElementById('generator-form');
105
+ const submitBtn = document.getElementById('submit-btn');
106
+ const statusBox = document.getElementById('status-box');
107
+ const statusText = document.getElementById('status-text');
108
+ const progressBar = document.getElementById('progress-bar');
109
+ const resultBox = document.getElementById('result-box');
110
+ const outputVideo = document.getElementById('output-video');
111
+
112
+ // تولید Session Hash تصادفی برای Gradio
113
+ function generateSessionHash() {
114
+ return Math.random().toString(36).substring(2, 13);
115
+ }
116
+
117
+ // آپلود فایل در سرور Gradio
118
+ async function uploadFile(file) {
119
+ const formData = new FormData();
120
+ formData.append('files', file);
121
+
122
+ const response = await fetch(`${BASE_SPACE_URL}/gradio_api/upload`, {
123
+ method: 'POST',
124
+ body: formData
125
+ });
126
+
127
+ if (!response.ok) {
128
+ throw new Error('خطا در آپلود فایل');
129
+ }
130
+
131
+ const result = await response.json();
132
+ return {
133
+ path: result[0],
134
+ meta: { _type: "gradio.FileData" },
135
+ orig_name: file.name
136
+ };
137
+ }
138
+
139
+ // یافتن شناسه تابع (fn_index) اصلی متناسب با داده‌های ورودی
140
+ async function getFnIndex() {
141
+ try {
142
+ const response = await fetch(`${BASE_SPACE_URL}/config`);
143
+ const config = await response.json();
144
+ // پیدا کردن تابعی در کانفیگ که دقیقاً ۷ ورودی دارد
145
+ const dependency = config.dependencies.find(dep => dep.inputs && dep.inputs.length === 7);
146
+ return dependency ? dependency.id : 2; // در صورت پیدا نشدن، پیش‌فرض ۲
147
+ } catch (e) {
148
+ console.warn("خطا در خواندن خودکار کانفیگ، استفاده از پیش‌فرض ۲", e);
149
+ return 2;
150
+ }
151
+ }
152
+
153
+ form.addEventListener('submit', async (e) => {
154
+ e.preventDefault();
155
+
156
+ submitBtn.disabled = true;
157
+ statusBox.classList.remove('hidden');
158
+ resultBox.classList.add('hidden');
159
+ progressBar.style.width = '0%';
160
+
161
+ const imageFile = document.getElementById('image-input').files[0];
162
+ const audioFile = document.getElementById('audio-input').files[0];
163
+ const prompt = document.getElementById('prompt-input').value;
164
+ const resolution = document.getElementById('resolution-input').value;
165
+ const seed = parseInt(document.getElementById('seed-input').value);
166
+ const vocalMode = document.getElementById('vocal-mode-input').value;
167
+ const acceleration = document.getElementById('acceleration-input').value;
168
+
169
+ try {
170
+ // مرحله ۱: آپلود تصویر
171
+ statusText.innerText = "در حال آپلود تصویر مرجع...";
172
+ progressBar.style.width = '10%';
173
+ const uploadedImage = await uploadFile(imageFile);
174
+
175
+ // مرحله ۲: آپلود صدا
176
+ statusText.innerText = "در حال آپلود فایل صوتی...";
177
+ progressBar.style.width = '20%';
178
+ const uploadedAudio = await uploadFile(audioFile);
179
+
180
+ // مرحله ۳: استخراج دقیق fn_index
181
+ statusText.innerText = "در حال اتصال به سرور اسپیس...";
182
+ progressBar.style.width = '30%';
183
+ const fnIndex = await getFnIndex();
184
+
185
+ // مرحله ۴: پیوستن به صف پردازش
186
+ statusText.innerText = "در حال پیوستن به صف پردازش...";
187
+ progressBar.style.width = '40%';
188
+ const sessionHash = generateSessionHash();
189
+
190
+ const payload = {
191
+ data: [
192
+ uploadedImage,
193
+ uploadedAudio,
194
+ prompt,
195
+ resolution,
196
+ seed,
197
+ vocalMode,
198
+ acceleration
199
+ ],
200
+ fn_index: fnIndex,
201
+ session_hash: sessionHash
202
+ };
203
+
204
+ const joinResponse = await fetch(`${BASE_SPACE_URL}/gradio_api/queue/join`, {
205
+ method: 'POST',
206
+ headers: { 'Content-Type': 'application/json' },
207
+ body: JSON.stringify(payload)
208
+ });
209
+
210
+ if (!joinResponse.ok) {
211
+ throw new Error('خطا در الحاق به صف پردازش');
212
+ }
213
+
214
+ // مرحله ۵: گوش دادن به وب‌سوکت/SSE برای دریافت رویدادها
215
+ const eventSource = new EventSource(`${BASE_SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`);
216
+
217
+ eventSource.onmessage = (event) => {
218
+ const data = JSON.parse(event.data);
219
+
220
+ if (data.msg === 'estimation') {
221
+ const queueSize = data.queue_size || 0;
222
+ const rank = data.rank !== undefined ? data.rank : '?';
223
+ statusText.innerText = `در صف انتظار. رتبه شما در صف: ${rank} (تعداد کل صف: ${queueSize})`;
224
+ progressBar.style.width = '50%';
225
+ }
226
+ else if (data.msg === 'progress') {
227
+ if (data.progress_data && data.progress_data.length > 0) {
228
+ const prog = data.progress_data[0];
229
+ const unit = prog.unit || '';
230
+ const desc = prog.desc || 'در حال پردازش نسل ویدیو';
231
+ const index = prog.index || 0;
232
+ const total = prog.length || 8; // معمولاً ۸ استپ dmd2
233
+ const percentage = Math.min(50 + Math.round((index / total) * 45), 95);
234
+ statusText.innerText = `${desc} (مرحله ${index} از ${total} ${unit})`;
235
+ progressBar.style.width = `${percentage}%`;
236
+ } else {
237
+ statusText.innerText = "سیستم در حال آماده‌سازی و پردازش مدل در GPU است...";
238
+ progressBar.style.width = '60%';
239
+ }
240
+ }
241
+ else if (data.msg === 'process_generating') {
242
+ statusText.innerText = "پردازش نهایی و تولید خروجی...";
243
+ progressBar.style.width = '90%';
244
+ }
245
+ else if (data.msg === 'process_completed') {
246
+ eventSource.close();
247
+ progressBar.style.width = '100%';
248
+
249
+ if (data.success && data.output && data.output.data) {
250
+ const videoData = data.output.data[0];
251
+ // ویدیو در خروجی اول ذخیره می‌شود
252
+ if (videoData && videoData.url) {
253
+ statusText.innerText = "تولید با موفقیت انجام شد.";
254
+ outputVideo.src = videoData.url;
255
+ resultBox.classList.remove('hidden');
256
+ } else {
257
+ throw new Error('ویدیو تولید شد اما آدرس فایل یافت نشد.');
258
+ }
259
+ } else {
260
+ const errorMsg = data.output?.error || 'خطای نامشخص در حین پردازش مدل';
261
+ throw new Error(errorMsg);
262
+ }
263
+ submitBtn.disabled = false;
264
+ }
265
+ else if (data.msg === 'queue_full') {
266
+ eventSource.close();
267
+ throw new Error('صف سرور در حال حاضر پر است. مجدداً تلاش کنید.');
268
+ }
269
+ };
270
+
271
+ eventSource.onerror = (err) => {
272
+ eventSource.close();
273
+ throw new Error('ارتباط با سرور در صف قطع شد.');
274
+ };
275
+
276
+ } catch (error) {
277
+ console.error(error);
278
+ statusText.innerHTML = `<span class="text-red-600">خطا: ${error.message}</span>`;
279
+ progressBar.style.width = '0%';
280
+ submitBtn.disabled = false;
281
+ }
282
+ });
283
+ </script>
284
+ </body>
285
+ </html>