Update templates/index.html

templates/index.html

@@ -351,7 +351,9 @@
 
         (function() {
             let isProcessing = false;
+            let currentJob = null; // --- NEW: To hold the current job for cancellation
 
+            // ... (بقیه کدهای کمکی مثل getBrowserFingerprint و مدیریت اعتبار اینجا بدون تغییر قرار می‌گیرند) ...
             let userSubscriptionStatus = 'free';
             let userFingerprint = null;
             let countdownInterval = null;
@@ -470,7 +472,6 @@
             document.getElementById('upgrade-button').addEventListener('click', () => {
                 parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*');
             });
-
             const resultContainer = document.getElementById('result-container');
             const imageFileInput = document.getElementById('imageFile');
             const imagePreview = document.getElementById('imagePreview');
@@ -499,8 +500,8 @@
             const DEFAULT_PROMPT_TEXT = "";
             const TRANSPARENT_PIXEL_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
             const DEFAULT_VIDEO_DURATION = 4.3;
-            const GLOBAL_TIMEOUT = 150000; // 2.5 دقیقه
-            const QUEUE_TIMEOUT = 45000; // 45 ثانیه
+            const GLOBAL_TIMEOUT = 150000;
+            const QUEUE_TIMEOUT = 45000;
 
             let lastAttemptedVideoPayload = null;
     
@@ -586,6 +587,10 @@
                 imageDropZone.classList.remove('has-image');
                 promptInput.value = DEFAULT_PROMPT_TEXT;
                 isProcessing = false;
+                if(currentJob) {
+                    currentJob.cancel();
+                    currentJob = null;
+                }
                 generateButton.disabled = false;
                 durationSlider.value = DEFAULT_VIDEO_DURATION;
                 durationValueDisplay.textContent = `${parseFloat(DEFAULT_VIDEO_DURATION).toFixed(1)} ثانیه`;
@@ -716,63 +721,68 @@
 
                 lastAttemptedVideoPayload = { persianPrompt, imageSourceFile: imageFile, duration };
                 
+                let globalTimeout;
+
                 try {
                     const englishPrompt = await translatePersianToEnglish(persianPrompt);
                     addStatusMessage(`ترجمه: ${englishPrompt}`, 'info');
                     
-                    // --- START: NEW ROBUST LOGIC ---
                     const client = await Client.connect(VIDEO_SPACE_NAME);
+                    currentJob = client.submit(0, [
+                        imageFile, englishPrompt, 6, DEFAULT_NEGATIVE_PROMPT,
+                        duration, 1, 1, 0, true
+                    ]);
                     
-                    const videoGenerationPromise = new Promise((resolve, reject) => {
+                    const videoGenerationPromise = (async () => {
                         let hasStartedProcessing = false;
-                        let job;
+                        let queueTimeout;
 
-                        const queueTimeout = setTimeout(() => {
+                        queueTimeout = setTimeout(() => {
                             if (!hasStartedProcessing) {
-                                job?.cancel();
-                                reject(new Error("Server is busy or no GPU available (Queue Timeout). لطفا مجددا تلاش کنید."));
+                                currentJob?.cancel();
+                                throw new Error("Server is busy or no GPU available (Queue Timeout). لطفا مجددا تلاش کنید.");
                             }
                         }, QUEUE_TIMEOUT);
                         
-                        job = client.submit(0, [
-                            imageFile, englishPrompt, 6, DEFAULT_NEGATIVE_PROMPT,
-                            duration, 1, 1, 0, true
-                        ]);
-
-                        job.on("status", (status) => {
-                            if (status.stage === "pending" || status.stage === "queued") {
-                                setAiLoaderText(`در صف پردازش... (نفر ${status.queue_position || '?'})`);
-                            } else if (status.stage === "generating" || status.stage === "iterating") {
-                                hasStartedProcessing = true;
-                                setAiLoaderText("در حال ساخت فریم‌های ویدیو...");
-                            } else if (status.stage === "error") {
-                                clearTimeout(queueTimeout);
-                                reject(new Error(status.message || "خطای نامشخص در سرور"));
+                        let finalResult = null;
+                        for await (const status of currentJob) {
+                            if (status.type === "status") {
+                                if (status.stage === "pending" || status.stage === "queued") {
+                                    setAiLoaderText(`در صف پردازش... (نفر ${status.queue_position || '?'})`);
+                                } else if (status.stage === "generating" || status.stage === "iterating") {
+                                    if (!hasStartedProcessing) {
+                                        hasStartedProcessing = true;
+                                        clearTimeout(queueTimeout);
+                                    }
+                                    setAiLoaderText("در حال ساخت فریم‌های ویدیو...");
+                                } else if (status.stage === "error") {
+                                    throw new Error(status.message || "خطای نامشخص در سرور");
+                                }
+                            } else if (status.type === "data") {
+                                finalResult = status;
                             }
-                        });
+                        }
+                        
+                        clearTimeout(queueTimeout);
+                        return finalResult;
+                    })();
 
-                        job.on("data", (data) => {
-                            clearTimeout(queueTimeout);
-                            resolve(data);
-                        });
-                    });
+                    globalTimeout = setTimeout(() => {
+                        currentJob?.cancel();
+                    }, GLOBAL_TIMEOUT);
 
-                    const globalTimeoutPromise = new Promise((_, reject) => {
-                        setTimeout(() => {
-                            reject(new Error('پردازش بیش از حد طولانی شد (Global Timeout).'));
-                        }, GLOBAL_TIMEOUT);
-                    });
+                    const result = await videoGenerationPromise;
+                    clearTimeout(globalTimeout);
 
-                    const result = await Promise.race([videoGenerationPromise, globalTimeoutPromise]);
-                    // --- END: NEW ROBUST LOGIC ---
-                    
                     await handleSuccessfulVideoGeneration(result);
 
                 } catch (errorCaught) {
+                    clearTimeout(globalTimeout);
                     const isTranslationErr = errorCaught.message.toLowerCase().includes("مترجم");
                     showCriticalError(`خطا: ${errorCaught.message}`, isTranslationErr);
                 } finally {
                     isProcessing = false;
+                    currentJob = null;
                     if (!document.getElementById('upgrade-button').style.display || document.getElementById('upgrade-button').style.display === 'none') {
                         generateButton.disabled = false;
                     }