Update templates/index.html

templates/index.html

@@ -416,7 +416,7 @@
             const durationValueDisplay = document.getElementById('durationValue');
 
             // ====== تنظیمات مدل‌ها ======
-            const VIDEO_SPACE_NAME = "mrbui1990/wan2-2-fp8da-aoti-faster";
+            const VIDEO_SPACE_URL = "https://mrbui1990-wan2-2-fp8da-aoti-faster.hf.space/";
             const TRANSLATOR_SPACE_NAME = "hamed744/translate-tts-aloha";
             const FN_INDEX_TRANSLATE_SPEAK = 1;
             const DEFAULT_TTS_VOICE_TRANSLATOR = "انگلیسی (آمریکا) - جنی (زن)";
@@ -427,11 +427,13 @@
             const DEFAULT_VIDEO_DURATION = 4.3;
 
             // --- TIMEOUTS ---
-            const TRANSLATION_TIMEOUT = 20000; // 20 ثانیه برای ترجمه
+            const TRANSLATION_TIMEOUT = 20000;
 
             let lastAttemptedVideoPayload = null;
-            let videoGenerationJob = null; // برای نگهداری آبجکت جاب
+            let eventSource = null; // نگه داشتن رفرنس EventSource برای بستن آن
 
+            const generateSessionHash = () => Math.random().toString(36).substring(2, 13);
+            
             function updateSliderStyle(slider) {
                 const percentage = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
                 const colorStops = `var(--accent-primary), var(--accent-secondary)`;
@@ -504,9 +506,9 @@
             }
 
             function initializeForm() {
-                if (videoGenerationJob) {
-                    try { videoGenerationJob.cancel(); } catch(e) { console.warn("Could not cancel previous job:", e); }
-                    videoGenerationJob = null;
+                if (eventSource) {
+                    eventSource.close();
+                    eventSource = null;
                 }
                 hideCriticalError();
                 resultContainer.classList.remove('active');
@@ -527,7 +529,6 @@
 
             async function translatePersianToEnglish(persianText, { timeoutMs = TRANSLATION_TIMEOUT } = {}) {
                 if (!persianText?.trim()) {
-                    // اگر متن خالی باشد، یک پرامیس موفق با یک رشته خالی برمی‌گردانیم تا فرآیند متوقف نشود
                     return Promise.resolve("");
                 }
 
@@ -552,7 +553,7 @@
 
             async function handleSuccessfulVideoGeneration(output) {
                 aiLoader.style.display = 'none';
-                if (!output?.data?.[0]?.video?.url) {
+                if (!output?.data?.[0]?.video?.path) {
                     showCriticalError('پاسخ دریافتی از سرور ویدیو معتبر نیست.');
                     return;
                 }
@@ -572,8 +573,10 @@
                 }
 
                 addStatusMessage('ویدیو آماده شد! 🎉', 'success');
-                const videoUrl = output.data[0].video.url;
+                const videoPath = output.data[0].video.path;
+                const videoUrl = `${VIDEO_SPACE_URL}gradio_api/file=${videoPath}`;
                 const usedSeed = output.data[1];
+                
                 setTimeout(() => {
                     statusSection.classList.remove('active');
                     outputSection.classList.add('active');
@@ -648,92 +651,115 @@
 
                 lastAttemptedVideoPayload = { persianPrompt, imageSourceFile: imageFile, duration };
                 
-                // --- START: ROBUST TRANSLATION BLOCK ---
-                let promptForVideo = persianPrompt; // Default to Persian
+                let promptForVideo = persianPrompt;
                 try {
                     setAiLoaderText("در حال ترجمه دستور شما...");
                     const englishPrompt = await translatePersianToEnglish(persianPrompt);
                     if(englishPrompt){
                         addStatusMessage(`ترجمه: ${englishPrompt}`, 'info');
                         promptForVideo = englishPrompt;
-                    } else {
-                         addStatusMessage('دستور ساخت خالی بود، از متن فارسی استفاده می‌شود.', 'info');
                     }
                 } catch (e) {
-                    console.warn("Translation failed or timed out:", e.message);
+                    console.warn("Translation failed:", e.message);
                     addStatusMessage('ترجمه ناموفق بود. با متن فارسی ادامه می‌دهیم.', 'error');
-                    // promptForVideo is already set to persianPrompt, so we just continue.
                 }
-                // --- END: ROBUST TRANSLATION BLOCK ---
 
-                // **CRITICAL FIX**: Update UI to show progress AFTER translation attempt, regardless of outcome.
-                setAiLoaderText("اتصال به سرور ویدیو...");
+                // === START: ROBUST DIRECT API INTERACTION ===
+                const sessionHash = generateSessionHash();
 
                 try {
-                    const client = await Client.connect(VIDEO_SPACE_NAME);
-                    videoGenerationJob = client.submit(0, [
-                        imageFile,
-                        promptForVideo,
-                        6, // steps
-                        DEFAULT_NEGATIVE_PROMPT,
-                        duration,
-                        1, // guidance_scale
-                        1, // guidance_scale_2
-                        0, // seed (0 = random)
-                        true // randomize_seed
-                    ]);
+                    // Step 1: Upload File
+                    setAiLoaderText("۱/۳: در حال آپلود عکس...");
+                    const formData = new FormData();
+                    formData.append('files', imageFile);
+                    const uploadResponse = await fetch(`${VIDEO_SPACE_URL}gradio_api/upload`, { method: 'POST', body: formData });
+                    if (!uploadResponse.ok) throw new Error(`خطا در آپلود: ${uploadResponse.statusText}`);
+                    const uploadedFiles = await uploadResponse.json();
+                    const serverFilePath = uploadedFiles[0];
+
+                    // Step 2: Join Queue
+                    setAiLoaderText("۲/۳: ارسال درخواست به صف...");
+                    const joinPayload = {
+                        "data": [
+                            {"path": serverFilePath, "url": `${VIDEO_SPACE_URL}gradio_api/file=${serverFilePath}`},
+                            promptForVideo,
+                            6, // steps
+                            DEFAULT_NEGATIVE_PROMPT,
+                            duration,
+                            1, // guidance_scale
+                            1, // guidance_scale_2
+                            0, // seed (0 = random)
+                            true // randomize_seed
+                        ],
+                        "fn_index": 0, "session_hash": sessionHash
+                    };
+                    const joinResponse = await fetch(`${VIDEO_SPACE_URL}gradio_api/queue/join`, {
+                        method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(joinPayload)
+                    });
+                    if (!joinResponse.ok) throw new Error(`خطا در اتصال به صف: ${joinResponse.statusText}`);
+
+                    // Step 3: Listen for Data
+                    setAiLoaderText("۳/۳: منتظر دریافت نتیجه...");
+                    eventSource = new EventSource(`${VIDEO_SPACE_URL}gradio_api/queue/data?session_hash=${sessionHash}`);
                     
-                    for await (const status of videoGenerationJob) {
-                        console.log(status); // For debugging
-                        switch (status.type) {
-                            case "estimation":
-                                setAiLoaderText(`در صف قرار گرفتید... (نفر ${status.queue_position} از ${status.queue_size})`);
-                                addStatusMessage(`در صف انتظار... زمان تخمینی: ${Math.round(status.rank_eta)} ثانیه`);
-                                setProgressBar(2);
+                    eventSource.onmessage = (event) => {
+                        const data = JSON.parse(event.data);
+                        console.log(data); // For debugging
+                        
+                        switch (data.msg) {
+                            case 'estimation':
+                                addStatusMessage(`در صف انتظار... زمان تخمینی: ${Math.round(data.rank_eta)} ثانیه`);
+                                break;
+                            case 'process_starts':
+                                addStatusMessage('پردازش شروع شد...');
                                 break;
-                            case "progress":
-                                if (status.progress_data && status.progress_data.length > 0) {
-                                    const progressItem = status.progress_data[0];
+                            case 'progress':
+                                if (data.progress_data && data.progress_data.length > 0) {
+                                    const p = data.progress_data[0];
                                     let percentage = 0;
                                     let progressText = "در حال پردازش...";
 
-                                    if (progressItem.desc === "ZeroGPU init") {
-                                        percentage = (progressItem.index / progressItem.length) * 20;
+                                    if (p.desc === "ZeroGPU init") {
+                                        percentage = (p.index / p.length) * 20;
                                         progressText = `آماده‌سازی: ${Math.round(percentage)}%`;
-                                    } else if (progressItem.unit === "steps" && progressItem.desc === null) {
-                                        percentage = 20 + (progressItem.index / progressItem.length) * 80;
+                                    } else if (p.unit === "steps" && p.desc === null) {
+                                        percentage = 20 + (p.index / p.length) * 80;
                                         progressText = `ساخت ویدیو: ${Math.round(percentage)}%`;
                                     }
                                     setProgressBar(percentage);
                                     setAiLoaderText(progressText);
                                 }
                                 break;
-                            case "process_starts":
-                                addStatusMessage('پردازش شروع شد...');
-                                setAiLoaderText("در حال پردازش ویدیو...");
-                                break;
-                            case "process_completed":
-                                if (status.success) {
+                            case 'process_completed':
+                                if (data.success) {
                                     setProgressBar(100);
                                     setAiLoaderText("پردازش کامل شد!");
-                                    await handleSuccessfulVideoGeneration(status.output);
+                                    handleSuccessfulVideoGeneration(data.output);
                                 } else {
-                                    const errorMessage = status.output?.error || "یک خطای نامشخص رخ داد.";
+                                    const errorMessage = data.output?.error || "یک خطای نامشخص رخ داد.";
                                     const isGpuQuotaError = /exceeded your gpu quota/i.test(errorMessage);
                                     showCriticalError(errorMessage, isGpuQuotaError);
                                 }
-                                videoGenerationJob = null; // Clear the job after completion
-                                return; 
+                                eventSource.close();
+                                eventSource = null;
+                                break;
                         }
-                    }
+                    };
+
+                    eventSource.onerror = (error) => {
+                        console.error('EventSource failed:', error);
+                        showCriticalError("خطا در ارتباط با سرور. لطفاً اتصال اینترنت خود را بررسی کرده و مجدداً تلاش کنید.");
+                        eventSource.close();
+                        eventSource = null;
+                    };
 
                 } catch (errorCaught) {
                     showCriticalError(`خطای اولیه: ${errorCaught.message}`);
                     generateButton.disabled = false;
                 }
+                // === END: ROBUST DIRECT API INTERACTION ===
             };
 
-
             generateButton.addEventListener('click', async () => {
                 if (generateButton.disabled) return;