| <!DOCTYPE html> |
| <html lang="fa" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>تولیدکننده ویدیو LongCat-Video-Avatar 1.5</title> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700&display=swap'); |
| body { |
| font-family: 'Vazirmatn', sans-serif; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen p-4 md:p-8"> |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> |
| <h1 class="text-2xl font-bold text-center text-gray-800 mb-6">اتصال به API ابزار LongCat-Video-Avatar 1.5</h1> |
| |
| <form id="generator-form" class="space-y-6"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">تصویر مرجع (Image)</label> |
| <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" /> |
| </div> |
| |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">فایل صوتی (Audio)</label> |
| <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" /> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">پرامپت متنی (Prompt)</label> |
| <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> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">رزولوشن (Resolution)</label> |
| <select id="resolution-input" class="w-full p-2 border border-gray-300 rounded-md"> |
| <option value="480p" selected>480p</option> |
| <option value="720p">720p</option> |
| </select> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">سید (Seed)</label> |
| <input type="number" id="seed-input" value="42" class="w-full p-2 border border-gray-300 rounded-md" /> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">پیش‌پردازش صدا</label> |
| <select id="vocal-mode-input" class="w-full p-2 border border-gray-300 rounded-md"> |
| <option value="Clean speech (fast)" selected>Clean speech (fast)</option> |
| <option value="Isolate vocals (quality)">Isolate vocals (quality)</option> |
| </select> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-2">شتاب‌دهنده شبیه‌ساز (Acceleration)</label> |
| <select id="acceleration-input" class="w-full p-2 border border-gray-300 rounded-md"> |
| <option value="DBCache faster" selected>DBCache faster</option> |
| <option value="DBCache fast">DBCache fast</option> |
| <option value="Exact 8-step">Exact 8-step</option> |
| </select> |
| </div> |
|
|
| |
| <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"> |
| تولید ویدیو (Generate) |
| </button> |
| </form> |
|
|
| |
| <div class="mt-8 border-t pt-6"> |
| <h2 class="text-lg font-bold text-gray-800 mb-4">وضعیت پردازش و خروجی</h2> |
| |
| <div id="status-box" class="hidden p-4 rounded-md mb-4 bg-gray-100 text-sm text-gray-700 space-y-1"> |
| <p id="status-text" class="font-semibold"></p> |
| <div class="w-full bg-gray-300 rounded-full h-2.5 mt-2 overflow-hidden"> |
| <div id="progress-bar" class="bg-orange-600 h-2.5" style="width: 0%"></div> |
| </div> |
| </div> |
|
|
| <div id="result-box" class="hidden space-y-4"> |
| <p class="text-green-600 font-bold">ویدیو با موفقیت ساخته شد!</p> |
| <video id="output-video" controls class="w-full rounded-md border shadow"></video> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const BASE_SPACE_URL = "https://velocityaipartners-longcat-video-avatar-1-5-2nd.hf.space"; |
| |
| const form = document.getElementById('generator-form'); |
| const submitBtn = document.getElementById('submit-btn'); |
| const statusBox = document.getElementById('status-box'); |
| const statusText = document.getElementById('status-text'); |
| const progressBar = document.getElementById('progress-bar'); |
| const resultBox = document.getElementById('result-box'); |
| const outputVideo = document.getElementById('output-video'); |
| |
| |
| function generateSessionHash() { |
| return Math.random().toString(36).substring(2, 13); |
| } |
| |
| |
| async function uploadFile(file) { |
| const formData = new FormData(); |
| formData.append('files', file); |
| |
| const response = await fetch(`${BASE_SPACE_URL}/gradio_api/upload`, { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (!response.ok) { |
| throw new Error('خطا در آپلود فایل'); |
| } |
| |
| const result = await response.json(); |
| return { |
| path: result[0], |
| meta: { _type: "gradio.FileData" }, |
| orig_name: file.name |
| }; |
| } |
| |
| |
| async function getFnIndex() { |
| try { |
| const response = await fetch(`${BASE_SPACE_URL}/config`); |
| const config = await response.json(); |
| |
| const dependency = config.dependencies.find(dep => dep.inputs && dep.inputs.length === 7); |
| return dependency ? dependency.id : 2; |
| } catch (e) { |
| console.warn("خطا در خواندن خودکار کانفیگ، استفاده از پیش‌فرض ۲", e); |
| return 2; |
| } |
| } |
| |
| form.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| submitBtn.disabled = true; |
| statusBox.classList.remove('hidden'); |
| resultBox.classList.add('hidden'); |
| progressBar.style.width = '0%'; |
| |
| const imageFile = document.getElementById('image-input').files[0]; |
| const audioFile = document.getElementById('audio-input').files[0]; |
| const prompt = document.getElementById('prompt-input').value; |
| const resolution = document.getElementById('resolution-input').value; |
| const seed = parseInt(document.getElementById('seed-input').value); |
| const vocalMode = document.getElementById('vocal-mode-input').value; |
| const acceleration = document.getElementById('acceleration-input').value; |
| |
| try { |
| |
| statusText.innerText = "در حال آپلود تصویر مرجع..."; |
| progressBar.style.width = '10%'; |
| const uploadedImage = await uploadFile(imageFile); |
| |
| |
| statusText.innerText = "در حال آپلود فایل صوتی..."; |
| progressBar.style.width = '20%'; |
| const uploadedAudio = await uploadFile(audioFile); |
| |
| |
| statusText.innerText = "در حال اتصال به سرور اسپیس..."; |
| progressBar.style.width = '30%'; |
| const fnIndex = await getFnIndex(); |
| |
| |
| statusText.innerText = "در حال پیوستن به صف پردازش..."; |
| progressBar.style.width = '40%'; |
| const sessionHash = generateSessionHash(); |
| |
| const payload = { |
| data: [ |
| uploadedImage, |
| uploadedAudio, |
| prompt, |
| resolution, |
| seed, |
| vocalMode, |
| acceleration |
| ], |
| fn_index: fnIndex, |
| session_hash: sessionHash |
| }; |
| |
| const joinResponse = await fetch(`${BASE_SPACE_URL}/gradio_api/queue/join`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify(payload) |
| }); |
| |
| if (!joinResponse.ok) { |
| throw new Error('خطا در الحاق به صف پردازش'); |
| } |
| |
| |
| const eventSource = new EventSource(`${BASE_SPACE_URL}/gradio_api/queue/data?session_hash=${sessionHash}`); |
| |
| eventSource.onmessage = (event) => { |
| const data = JSON.parse(event.data); |
| |
| if (data.msg === 'estimation') { |
| const queueSize = data.queue_size || 0; |
| const rank = data.rank !== undefined ? data.rank : '?'; |
| statusText.innerText = `در صف انتظار. رتبه شما در صف: ${rank} (تعداد کل صف: ${queueSize})`; |
| progressBar.style.width = '50%'; |
| } |
| else if (data.msg === 'progress') { |
| if (data.progress_data && data.progress_data.length > 0) { |
| const prog = data.progress_data[0]; |
| const unit = prog.unit || ''; |
| const desc = prog.desc || 'در حال پردازش نسل ویدیو'; |
| const index = prog.index || 0; |
| const total = prog.length || 8; |
| const percentage = Math.min(50 + Math.round((index / total) * 45), 95); |
| statusText.innerText = `${desc} (مرحله ${index} از ${total} ${unit})`; |
| progressBar.style.width = `${percentage}%`; |
| } else { |
| statusText.innerText = "سیستم در حال آماده‌سازی و پردازش مدل در GPU است..."; |
| progressBar.style.width = '60%'; |
| } |
| } |
| else if (data.msg === 'process_generating') { |
| statusText.innerText = "پردازش نهایی و تولید خروجی..."; |
| progressBar.style.width = '90%'; |
| } |
| else if (data.msg === 'process_completed') { |
| eventSource.close(); |
| progressBar.style.width = '100%'; |
| |
| if (data.success && data.output && data.output.data) { |
| const videoData = data.output.data[0]; |
| |
| if (videoData && videoData.url) { |
| statusText.innerText = "تولید با موفقیت انجام شد."; |
| outputVideo.src = videoData.url; |
| resultBox.classList.remove('hidden'); |
| } else { |
| throw new Error('ویدیو تولید شد اما آدرس فایل یافت نشد.'); |
| } |
| } else { |
| const errorMsg = data.output?.error || 'خطای نامشخص در حین پردازش مدل'; |
| throw new Error(errorMsg); |
| } |
| submitBtn.disabled = false; |
| } |
| else if (data.msg === 'queue_full') { |
| eventSource.close(); |
| throw new Error('صف سرور در حال حاضر پر است. مجدداً تلاش کنید.'); |
| } |
| }; |
| |
| eventSource.onerror = (err) => { |
| eventSource.close(); |
| throw new Error('ارتباط با سرور در صف قطع شد.'); |
| }; |
| |
| } catch (error) { |
| console.error(error); |
| statusText.innerHTML = `<span class="text-red-600">خطا: ${error.message}</span>`; |
| progressBar.style.width = '0%'; |
| submitBtn.disabled = false; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
