Update templates/index.html

templates/index.html

@@ -88,90 +88,18 @@
         textarea { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); min-height: 120px; resize: vertical; }
         textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
 
-        .slider-group {
-            margin-top: 2rem;
-            margin-bottom: 1.5rem;
-        }
-        .slider-label-container {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-        }
-        .slider-label {
-            font-weight: 600;
-            color: var(--text-secondary);
-            font-size: 0.95rem;
-        }
-        .slider-value {
-            font-weight: 700;
-            font-size: 1rem;
-            color: var(--accent-primary);
-            background-color: var(--input-bg);
-            padding: 0.25rem 0.75rem;
-            border-radius: 8px;
-            border: 1px solid var(--input-border);
-            min-width: 80px;
-            text-align: center;
-        }
-        .slider-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-        }
-        .slider-icon {
-            width: 22px;
-            height: 22px;
-            color: var(--text-tertiary);
-            flex-shrink: 0;
-            opacity: 0.8;
-        }
-        input[type="range"] {
-            -webkit-appearance: none;
-            appearance: none;
-            flex-grow: 1;
-            width: 100%;
-            height: 12px;
-            background: var(--input-bg);
-            border-radius: var(--radius-input);
-            outline: none;
-            cursor: pointer;
-            direction: rtl;
-            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
-            transition: var(--transition-smooth);
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 24px;
-            height: 24px;
-            background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
-            border-radius: 50%;
-            border: 3px solid white;
-            box-shadow: var(--shadow-md);
-            transition: all 0.2s ease-in-out;
-            margin-top: -6px; 
-        }
-        input[type="range"]::-moz-range-thumb {
-            width: 24px;
-            height: 24px;
-            background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary));
-            border-radius: 50%;
-            border: 3px solid white;
-            box-shadow: var(--shadow-md);
-            transition: all 0.2s ease-in-out;
-        }
-        input[type="range"]:hover {
-            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 4px var(--accent-primary-glow);
-        }
-        input[type="range"]:hover::-webkit-slider-thumb {
-             box-shadow: 0 0 0 10px var(--accent-primary-glow), var(--shadow-md);
-             transform: scale(1.1);
-        }
-        input[type="range"]:active::-webkit-slider-thumb {
-             transform: scale(1.2);
-             box-shadow: 0 0 0 12px var(--accent-primary-glow), var(--shadow-md);
-        }
+        .slider-group { margin-top: 2rem; margin-bottom: 1.5rem; }
+        .slider-label-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
+        .slider-label { font-weight: 600; color: var(--text-secondary); font-size: 0.95rem; }
+        .slider-value { font-weight: 700; font-size: 1rem; color: var(--accent-primary); background-color: var(--input-bg); padding: 0.25rem 0.75rem; border-radius: 8px; border: 1px solid var(--input-border); min-width: 80px; text-align: center; }
+        .slider-wrapper { display: flex; align-items: center; gap: 1rem; }
+        .slider-icon { width: 22px; height: 22px; color: var(--text-tertiary); flex-shrink: 0; opacity: 0.8; }
+        input[type="range"] { -webkit-appearance: none; appearance: none; flex-grow: 1; width: 100%; height: 12px; background: var(--input-bg); border-radius: var(--radius-input); outline: none; cursor: pointer; direction: rtl; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); transition: var(--transition-smooth); }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary)); border-radius: 50%; border: 3px solid white; box-shadow: var(--shadow-md); transition: all 0.2s ease-in-out; margin-top: -6px; }
+        input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary)); border-radius: 50%; border: 3px solid white; box-shadow: var(--shadow-md); transition: all 0.2s ease-in-out; }
+        input[type="range"]:hover { box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 4px var(--accent-primary-glow); }
+        input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 10px var(--accent-primary-glow), var(--shadow-md); transform: scale(1.1); }
+        input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: 0 0 0 12px var(--accent-primary-glow), var(--shadow-md); }
 
         #generateButton { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.1rem; font-size: 1.2rem; font-weight: 700; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px rgba(15, 212, 168, 0.25); margin-top: 1rem; }
         #generateButton svg { width: 24px; height: 24px; margin-left: 4px; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
@@ -190,7 +118,8 @@
         .generator-container { position: relative; width: 400px; max-width: 100%; height: 300px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse-loader 5s infinite cubic-bezier(0.4, 0, 0.6, 1); background-color: #161b22; color: #f0f6fc; }
         @keyframes pulse-loader { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); } 100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } }
         .noise-layer, .sketch-layer, .building-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
-        .noise-layer { background: url('data:image/svg+xml;utf8,<svg xmlns="http="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; }
+        /* FIX xmlns در SVG اینجا اعمال شده */
+        .noise-layer { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="none"/><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.5" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.6"/></svg>') repeat; opacity: 1; animation: fade-noise 7s infinite ease-in-out; }
         @keyframes fade-noise { 0% { opacity: 1; filter: blur(5px); } 30% { opacity: 0.8; filter: blur(2px); } 100% { opacity: 0; filter: blur(0px); } }
         .sketch-layer { filter: grayscale(1) contrast(1.5) blur(3px); opacity: 0; animation: reveal-sketch 7s infinite ease-in-out; }
         @keyframes reveal-sketch { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: 0.5; } 100% { opacity: 0; } }
@@ -220,12 +149,8 @@
         .gpu-error-message-container .error-content ul { list-style-type: "▫️ "; padding-right: 20px; margin-top: 10px; }
         .gpu-error-message-container .error-content li { margin-bottom: 6px; }
         .gpu-error-actions { display: flex; gap: 15px; margin-top: 25px; }
-        .gpu-error-actions .action-button { padding: 12px 20px; border: none; border-radius: var(--igadlm-alpha-border-radius-md); font-size: 0.95em; font-weight: 600; cursor: pointer; font-family: inherit; width: 100%; box-shadow: var(--shadow-md); transition: var(--transition-smooth); text-transform: none; letter-spacing: normal; }
-        .gpu-error-actions .action-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
         .gpu-error-actions .action-button.back-button { background-color: var(--panel-bg); color: var(--text-tertiary); border: 1px solid var(--panel-border); flex-grow: 0.45; }
-        .gpu-error-actions .action-button.back-button:hover:not(:disabled) { background-color: var(--input-bg); }
         .gpu-error-actions .action-button.retry-button { background: linear-gradient(60deg, var(--igadlm-alpha-color-primary) 0%, var(--igadlm-alpha-color-secondary) 100%); color: white; flex-grow: 1; }
-        .gpu-error-actions .action-button.retry-button:hover:not(:disabled) { background: linear-gradient(60deg, var(--igadlm-alpha-color-primary-darker) 0%, var(--igadlm-alpha-color-secondary-darker) 100%); }
         
         #subscription-status-badge { display: none; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1.25rem; letter-spacing: 0.5px; animation: badge-fade-in 0.6s 0.5s ease-out backwards; }
         #subscription-status-badge.free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); }
@@ -493,18 +418,22 @@
             const durationSlider = document.getElementById('durationSlider');
             const durationValueDisplay = document.getElementById('durationValue');
     
+            // ====== تنظیمات مدل‌ها ======
             const VIDEO_SPACE_NAME = "mrbui1990/wan2-2-fp8da-aoti-faster";
-            const TRANSLATOR_SPACE_URL_BASE = "https://hamed744-translate-tts-aloha.hf.space/gradio_api";
+
+            // مترجم: به‌جای SSE از Gradio Client استفاده می‌کنیم (پایدار روی موبایل)
+            const TRANSLATOR_SPACE_NAME = "hamed744/translate-tts-aloha";
             const FN_INDEX_TRANSLATE_SPEAK = 1;
             const DEFAULT_TTS_VOICE_TRANSLATOR = "انگلیسی (آمریکا) - جنی (زن)";
+
             const DEFAULT_NEGATIVE_PROMPT = "色调艳丽, 过曝, 静态, 细节模糊不清, 字幕, 风格, 作品, 画作, 画面, 静止, 整体发灰, 最差质量, 低质量, JPEG压缩残留, 丑陋的, 残缺的, 多余的手指, 画得不好的手部, 画得不好的脸部, 畸形的, 毁容的, 形态畸形的肢体, 手指融合, 静止不动的画面, 杂乱的背景, 三条腿, 背景人很多, 倒着走";
             const DEFAULT_PROMPT_TEXT = "";
             const TRANSPARENT_PIXEL_SRC = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
             const DEFAULT_VIDEO_DURATION = 4.3;
-            // --- START: TIMEOUT LOGIC ---
-            // زمان وقفه به میلی‌ثانیه: 2.5 دقیقه
-            const GENERATION_TIMEOUT = 150000; 
-            // --- END: TIMEOUT LOGIC ---
+
+            // --- TIMEOUTS ---
+            const GENERATION_TIMEOUT = 150000; // 2.5 دقیقه برای ساخت ویدیو
+            const TRANSLATION_TIMEOUT = 20000; // 20 ثانیه برای ترجمه
 
             let lastAttemptedVideoPayload = null;
     
@@ -596,34 +525,34 @@
                 updateSliderStyle(durationSlider);
                 updateUIForSubscriptionStatus(userSubscriptionStatus);
             }
-    
-            async function translatePersianToEnglish(persianText) {
-                let currentTranslatorSessionHash = generateRandomHash();
-                const payload = { data: [persianText, DEFAULT_TTS_VOICE_TRANSLATOR, 0, 0, 0], fn_index: FN_INDEX_TRANSLATE_SPEAK, session_hash: currentTranslatorSessionHash };
+
+            // ==== نسخه جدید مترجم با Gradio Client + تایم‌اوت ====
+            async function translatePersianToEnglish(persianText, { timeoutMs = TRANSLATION_TIMEOUT } = {}) {
+                if (!persianText?.trim()) throw new Error("متن ترجمه خالی است.");
+
                 if (aiLoader.style.display !== 'none') setAiLoaderText("در حال ترجمه دستور شما...");
-                try {
-                    await fetch(`${TRANSLATOR_SPACE_URL_BASE}/queue/join?`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
-                    return new Promise((resolve, reject) => {
-                        const eventSource = new EventSource(`${TRANSLATOR_SPACE_URL_BASE}/queue/data?session_hash=${currentTranslatorSessionHash}`);
-                        eventSource.onmessage = function(event) {
-                            const data = JSON.parse(event.data);
-                            if (data.msg === "process_completed") {
-                                eventSource.close();
-                                if (data.success && data.output?.data?.[0]) {
-                                    resolve(data.output.data[0]);
-                                } else {
-                                    reject(new Error(data.output?.error || "ترجمه ناموفق بود."));
-                                }
-                            }
-                        };
-                        eventSource.onerror = () => { eventSource.close(); reject(new Error("خطا در ارتباط با سرور مترجم.")); };
-                    });
-                } catch (error) { throw error; }
+                const translator = await Client.connect(TRANSLATOR_SPACE_NAME);
+
+                const predictPromise = translator.predict(FN_INDEX_TRANSLATE_SPEAK, [
+                    persianText,
+                    DEFAULT_TTS_VOICE_TRANSLATOR,
+                    0, 0, 0
+                ]);
+
+                const timeoutPromise = new Promise((_, reject) =>
+                    setTimeout(() => reject(new Error("مهلت ترجمه به پایان رسید.")), timeoutMs)
+                );
+
+                const resp = await Promise.race([predictPromise, timeoutPromise]);
+
+                const english = resp?.data?.[0];
+                if (!english) throw new Error("ترجمه نامعتبر بود.");
+                return english;
             }
             
             async function handleSuccessfulVideoGeneration(result) {
                 aiLoader.style.display = 'none';
-                if (!result.data?.[0]?.video?.url) {
+                if (!result?.data?.[0]?.video?.url) {
                     showCriticalError('پاسخ دریافتی از سرور ویدیو معتبر نیست.');
                     return;
                 }
@@ -722,44 +651,43 @@
 
                 lastAttemptedVideoPayload = { persianPrompt, imageSourceFile: imageFile, duration };
     
+                // ---- مرحله ترجمه با فالبک ----
+                let promptForVideo = persianPrompt;
                 try {
-                    const englishPrompt = await translatePersianToEnglish(persianPrompt);
+                    const englishPrompt = await translatePersianToEnglish(persianPrompt, { timeoutMs: TRANSLATION_TIMEOUT });
                     addStatusMessage(`ترجمه: ${englishPrompt}`, 'info');
+                    promptForVideo = englishPrompt;
+                } catch (e) {
+                    addStatusMessage('ترجمه به انگلیسی ناموفق/کند بود؛ با همان متن فارسی ادامه می‌دهیم.', 'error');
+                }
+
+                try {
                     setAiLoaderText("در حال ساخت ویدیو...");
-                    
                     const client = await Client.connect(VIDEO_SPACE_NAME);
 
-                    // --- START: TIMEOUT LOGIC ---
-                    // ایجاد یک پرامیس که پس از زمان مشخص شده، با خطا رد می‌شود
-                    const timeoutPromise = new Promise((_, reject) => {
-                        setTimeout(() => {
-                            reject(new Error('پردازش ویدیو بیش از 2.5 دقیقه طول کشید. لطفاً مجدداً تلاش کنید. ممکن است سرور شلوغ باشد.'));
-                        }, GENERATION_TIMEOUT);
-                    });
+                    const timeoutPromise = new Promise((_, reject) =>
+                        setTimeout(() => reject(new Error('پردازش ویدیو بیش از 2.5 دقیقه طول کشید.')), GENERATION_TIMEOUT)
+                    );
 
-                    // ایجاد پرامیس اصلی برای ساخت ویدیو
                     const videoGenerationPromise = client.predict(0, [
-                        imageFile,              // 0: input_image
-                        englishPrompt,          // 1: prompt
-                        6,                      // 2: steps
-                        DEFAULT_NEGATIVE_PROMPT,// 3: negative_prompt
-                        duration,               // 4: duration_seconds
-                        1,                      // 5: guidance_scale
-                        1,                      // 6: guidance_scale_2
-                        0,                      // 7: seed (0 for random)
-                        true                    // 8: randomize_seed
+                        imageFile,               // 0: input_image
+                        promptForVideo,          // 1: prompt
+                        6,                       // 2: steps
+                        DEFAULT_NEGATIVE_PROMPT, // 3: negative_prompt
+                        duration,                // 4: duration_seconds
+                        1,                       // 5: guidance_scale
+                        1,                       // 6: guidance_scale_2
+                        0,                       // 7: seed (0 = random)
+                        true                     // 8: randomize_seed
                     ]);
-                    
-                    // رقابت بین پرامیس ویدیو و پرامیس تایم‌اوت
-                    // هر کدام زودتر تمام شود، نتیجه آن برگردانده می‌شود
-                    const result = await Promise.race([videoGenerationPromise, timeoutPromise]);
-                    // --- END: TIMEOUT LOGIC ---
 
+                    const result = await Promise.race([videoGenerationPromise, timeoutPromise]);
                     await handleSuccessfulVideoGeneration(result);
 
                 } catch (errorCaught) {
-                    const isTranslationErr = errorCaught.message.toLowerCase().includes("مترجم");
-                    showCriticalError(`خطا: ${errorCaught.message}`, isTranslationErr);
+                    showCriticalError(`خطا: ${errorCaught.message}`);
+                } finally {
+                    generateButton.disabled = false;
                 }
             };