vidpro2ta

Paused

App Files Files Community

Ezmary commited on Sep 9, 2025

Commit

3972ff8

verified ·

1 Parent(s): 3407a5d

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +61 -3

templates/index.html CHANGED Viewed

@@ -1,3 +1,21 @@
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
@@ -653,6 +671,39 @@
             btnRestart.addEventListener('click', initializeForm);
             const proceedWithVideoGeneration = async () => {
                 const persianPrompt = promptInput.value.trim();
@@ -696,7 +747,8 @@
                     const uploadFile = async (file, name) => {
                         const formData = new FormData();
                         formData.append('files', file);
-                        const response = await fetch(`${VIDEO_SPACE_URL}gradio_api/upload`, { method: 'POST', body: formData });
                         if (!response.ok) throw new Error(`خطا در آپلود ${name}: ${response.statusText}`);
                         return (await response.json())[0];
                     };
@@ -721,7 +773,8 @@
                         ],
                         "fn_index": VIDEO_FN_INDEX, "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}`);
@@ -788,7 +841,12 @@
                     };
                 } catch (errorCaught) {
-                    showCriticalError(`خطای اولیه: ${errorCaught.message}`);
                     generateButton.disabled = false;
                 }
             };

+با توجه به توضیحات شما، مشکل "Failed to fetch" به احتمال زیاد به دلیل یک مشکل ارتباطی موقتی با سرور پس از بروز خطای قبلی یا ناپایداری لحظه‌ای در اتصال اینترنت شما رخ می‌دهد. برای مقاوم‌سازی کد و ارائه بازخورد بهتر به کاربر، تغییرات زیر را در کد شما اعمال کرده‌ام:
+۱. پیاده‌سازی مکانیزم تلاش مجدد خودکار (Retry Mechanism): یک تابع جدید به نام fetchWithRetry اضافه شده است. این تابع در صورت بروز خطای "Failed to fetch"، به طور خودکار تا ۳ بار دیگر با فاصله زمانی فزاینده برای برقراری ارتباط تلاش می‌کند. این کار مقاومت کد را در برابر مشکلات لحظه‌ای شبکه به شدت افزایش می‌دهد.
+۲. بهبود پیام خطا: بلوک catch اصلی در کد اصلاح شده است تا به طور مشخص خطای "Failed to fetch" را شناسایی کند. در صورت بروز این خطا، به جای نمایش پیام فنی، یک پیام واضح و کاربردی به زبان فارسی نمایش داده می‌شود که از کاربر می‌خواهد اتصال اینترنت خود را بررسی کرده و مجدداً تلاش کند.
+۳. به‌کارگیری مکانیزم تلاش مجدد: تمام درخواست‌های کلیدی شبکه در فرآیند ساخت ویدیو (آپلود فایل‌ها و ارسال درخواست به صف پردازش) اکنون از تابع fetchWithRetry استفاده می‌کنند تا از قابلیت تلاش مجدد خودکار بهره‌مند شوند.
+این تغییرات باعث می‌شود که برنامه شما تجربه کاربری بهتری داشته باشد، کمتر با خطاهای ارتباطی مواجه شود و در صورت بروز مشکل، راهنمایی واضح‌تری به کاربر ارائه دهد.
+در ادامه کد اصلاح‌شده را مشاهده می‌کنید:
+code
+Html
+download
+content_copy
+expand_less
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
             btnRestart.addEventListener('click', initializeForm);
+            // --- START: NEW AND IMPROVED CODE ---
+            /**
+             * Attempts to fetch a resource with automatic retries on network errors.
+             * @param {string} url - The URL to fetch.
+             * @param {object} options - Fetch options.
+             * @param {number} retries - The number of times to retry.
+             * @param {number} delay - The initial delay between retries in ms.
+             * @param {number} backoff - The multiplier for the delay.
+             * @returns {Promise<Response>}
+             */
+            async function fetchWithRetry(url, options, retries = 3, delay = 1000, backoff = 2) {
+                let lastError;
+                for (let i = 0; i < retries; i++) {
+                    try {
+                        return await fetch(url, options);
+                    } catch (error) {
+                        lastError = error;
+                        // Only retry on specific, recoverable network errors
+                        if (error instanceof TypeError && error.message.includes('Failed to fetch')) {
+                            if (i < retries - 1) { // Don't wait on the last attempt
+                                await new Promise(resolve => setTimeout(resolve, delay));
+                                delay *= backoff; // Exponential backoff
+                            }
+                        } else {
+                            // Don't retry for other errors (e.g., HTTP 4xx/5xx). Throw immediately.
+                            throw error;
+                        }
+                    }
+                }
+                throw lastError; // If all retries fail, throw the last captured error.
+            }
+            // --- END: NEW AND IMPROVED CODE ---
             const proceedWithVideoGeneration = async () => {
                 const persianPrompt = promptInput.value.trim();
                     const uploadFile = async (file, name) => {
                         const formData = new FormData();
                         formData.append('files', file);
+                        // --- MODIFIED: Use fetchWithRetry instead of fetch ---
+                        const response = await fetchWithRetry(`${VIDEO_SPACE_URL}gradio_api/upload`, { method: 'POST', body: formData });
                         if (!response.ok) throw new Error(`خطا در آپلود ${name}: ${response.statusText}`);
                         return (await response.json())[0];
                     };
                         ],
                         "fn_index": VIDEO_FN_INDEX, "session_hash": sessionHash
                     };
+                    // --- MODIFIED: Use fetchWithRetry instead of fetch ---
+                    const joinResponse = await fetchWithRetry(`${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}`);
                     };
                 } catch (errorCaught) {
+                    // --- MODIFIED: Improved error handling for fetch failures ---
+                    if (errorCaught instanceof TypeError && errorCaught.message.includes('Failed to fetch')) {
+                        showCriticalError("خطا در ارتباط با سرور رخ داد. لطفاً اتصال اینترنت خود را بررسی کرده و مجدداً تلاش کنید. این مشکل معمولاً موقتی است.");
+                    } else {
+                        showCriticalError(`خطای اولیه: ${errorCaught.message}`);
+                    }
                     generateButton.disabled = false;
                 }
             };