Update templates/index.html

templates/index.html

@@ -112,13 +112,24 @@
         .status-message { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; margin-bottom: 0.5rem; border-radius: var(--radius-input); font-size: 0.9rem; background: var(--panel-bg); border: 1px solid var(--panel-border); color: var(--text-secondary); }
         .status-message.success { border-left: 4px solid var(--success-color); color: var(--success-color); }
         .status-message.error { border-left: 4px solid var(--danger-color); color: var(--danger-color); }
-        .status-icon { width: 18px; height: 18px; flex-shrink: 0; }
+        .status-icon { width: 18px; height: 18px; }
         #aiLoader { display: none; align-items: center; justify-content: center; }
         .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); } }
-        .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); width: 90%; text-align: center; transition: var(--transition-smooth); }
+        .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://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; } }
+        .building-layer { filter: blur(15px); opacity: 0; animation: denoise-color 7s infinite ease-in-out; }
+        @keyframes denoise-color { 0% { opacity: 0; } 40% { opacity: 0.6; filter: blur(5px); } 100% { opacity: 1; filter: blur(0px); } }
+        .pixel-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px), repeating-linear-gradient(90deg, transparent 0 1px, rgba(255,255,255,0.1) 1px 2px); opacity: 1; animation: dissolve-grid 7s infinite ease-in-out; }
+        @keyframes dissolve-grid { 0% { opacity: 1; } 70% { opacity: 0.5; } 100% { opacity: 0; } }
+        .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 50%); animation: flow-particles 7s infinite cubic-bezier(0.4, 0, 0.6, 1); }
+        @keyframes flow-particles { 0% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(10px, -15px) scale(1.05); opacity: 0.8; } 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } }
+        .text-overlay { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700; text-shadow: 0 0 20px rgba(56, 189, 248, 0.8); animation: glow-text 7s infinite ease-in-out; font-family: var(--app-font); width: 90%; text-align: center;}
         @keyframes glow-text { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } }
-        .progress-bar-loader { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); transition: width 0.4s ease-out; }
+        .progress-bar { position: absolute; bottom: 0; left: 0; width: 0%; height: 6px; background: linear-gradient(to right, #38bdf8, #bb86fc, #facc15); transition: width 0.5s ease; /* плавный переход */ }
         #outputVideo { width: 100%; max-width: 500px; border-radius: var(--radius-input); margin: 1rem auto; display: block; background-color: #000; box-shadow: var(--shadow-md); }
         #finalSeed { text-align: center; color: var(--text-tertiary); font-size: 0.85rem; margin-top: 1rem; }
         .video-controls { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
@@ -137,18 +148,14 @@
         .gpu-error-actions { display: flex; gap: 15px; margin-top: 25px; }
         .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.retry-button { background: linear-gradient(60deg, var(--igadlm-alpha-color-primary) 0%, var(--igadlm-alpha-color-secondary) 100%); color: white; flex-grow: 1; }
+        
         #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); }
         #subscription-status-badge.paid-badge { background: linear-gradient(45deg, var(--accent-premium), #ffca2c); color: #333; box-shadow: 0 4px 10px var(--accent-premium-glow); }
+        
         #credit-info-section { margin-top: 1.5rem; margin-bottom: 0.5rem; padding: 1rem; background-color: var(--input-bg); border-radius: var(--radius-input); text-align: center; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); border: 1px solid var(--input-border); display: none; }
         #upgrade-button { margin-top: 1rem; width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: 700; background: linear-gradient(95deg, #FFD54F, #FFC107 100%); color: #212529; border: none; border-radius: var(--radius-btn); cursor: pointer; box-shadow: 0 8px 20px -5px rgba(255, 193, 7, 0.3); display: none; }
         
-        .json-log-container { display: none; margin-top: 1.5rem; }
-        .json-log-container h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
-        .json-log-pre { background-color: #0d1117; color: #c9d1d9; padding: 1rem; border-radius: var(--radius-input); max-height: 250px; overflow-y: auto; font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; word-break: break-all; }
-        #copyLogBtn { margin-top: 0.75rem; background-color: var(--text-secondary); }
-        #copyLogBtn:hover { background-color: var(--text-primary); }
-
         @media (max-width: 768px) { main { padding: 1.5rem; } h1 { font-size: 2.2rem; } .generator-container { height: 250px; } .text-overlay { font-size: 18px; } }
     </style>
 </head>
@@ -200,12 +207,12 @@
                 
                 <div class="slider-group">
                     <div class="slider-label-container">
-                        <label for="durationSlider" class="slider-label">مدت زمان ویدیو</label>
-                        <span id="durationValue" class="slider-value">4.3 ثانیه</span>
+                        <label for="durationSlider" class="slider-label">میزان حرکت</label>
+                        <span id="durationValue" class="slider-value">4.3</span>
                     </div>
                     <div class="slider-wrapper">
                         <svg class="slider-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72"></path></svg>
-                        <input type="range" id="durationSlider" min="0.5" max="5.1" value="4.3" step="0.1">
+                        <input type="range" id="durationSlider" min="0" max="255" value="128" step="1">
                         <svg class="slider-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                     </div>
                 </div>
@@ -229,8 +236,13 @@
                          <div id="statusMessages"></div>
                          <div id="aiLoader" style="display: none;">
                             <div class="generator-container">
+                                <div class="noise-layer"></div>
+                                <div class="sketch-layer"></div>
+                                <div class="building-layer"></div>
+                                <div class="pixel-grid"></div>
+                                <div class="particles"></div>
                                 <div class="text-overlay">در حال پردازش ویدیو...</div>
-                                <div class="progress-bar-loader"></div>
+                                <div class="progress-bar"></div>
                             </div>
                         </div>
                     </div>
@@ -251,13 +263,6 @@
                     </div>
                     
                     <div id="criticalErrorSection"></div>
-
-                    <div id="json-log-container" class="json-log-container">
-                        <h3>لاگ کامل JSON</h3>
-                        <pre id="json-log-pre" class="json-log-pre"></pre>
-                        <button id="copyLogBtn" class="video-button">کپی لاگ</button>
-                    </div>
-
                 </div>
             </div>
         </main>
@@ -267,8 +272,8 @@
         import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
         (function() {
-            // === START: بخش مدیریت اعتبار و ارتباط با والد ===
-            let userSubscriptionStatus = 'free'; // 'free' or 'paid'
+            // === START: بخش مدیریت اعتبار و ارتباط با والد (بدون تغییر) ===
+            let userSubscriptionStatus = 'free'; 
             let userFingerprint = null;
             let countdownInterval = null;
             const PREMIUM_PAGE_ID = '1149636';
@@ -342,8 +347,8 @@
                         creditInfoDiv.textContent = `شما ${result.credits_remaining} اعتبار ساخت ویدیوی رایگان در این هفته دارید.`;
                     }
                 } catch (error) {
-                    creditInfoDiv.textContent = "توجه: سیستم اعتبار در این نسخه آزمایشی فعال است و نیازی به پرداخت نیست.";
-                    genBtn.disabled = false;
+                    creditInfoDiv.textContent = "خطا در بررسی اعتبار.";
+                    genBtn.disabled = true;
                 }
             }
 
@@ -402,31 +407,26 @@
             const statusSection = document.getElementById('statusSection');
             const statusMessagesDiv = document.getElementById('statusMessages');
             const aiLoader = document.getElementById('aiLoader');
-            const loaderProgressBar = document.querySelector('#aiLoader .progress-bar-loader');
+            const loaderProgressBar = document.querySelector('#aiLoader .progress-bar');
             const loaderTextOverlay = document.querySelector('#aiLoader .text-overlay');
             const outputSection = document.getElementById('outputSection');
             const btnRestart = document.getElementById('btnRestart');
             const btnDownloadVideo = document.getElementById('btnDownloadVideo');
             const durationSlider = document.getElementById('durationSlider');
             const durationValueDisplay = document.getElementById('durationValue');
-            const jsonLogContainer = document.getElementById('json-log-container');
-            const jsonLogPre = document.getElementById('json-log-pre');
-            const copyLogBtn = document.getElementById('copyLogBtn');
     
             // ====== تنظیمات مدل‌ها ======
             const VIDEO_SPACE_NAME = "mrbui1990/wan2-2-fp8da-aoti-faster";
             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;
+            const DEFAULT_MOTION_BUCKET_ID = 128; // مقدار پیش‌فرض برای اسلایدر حرکت
 
             let lastAttemptedVideoPayload = null;
-            let currentSubmission = null;
-
+            let currentJob = null; // برای لغو احتمالی در آینده
+    
             function updateSliderStyle(slider) {
                 const percentage = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
                 const colorStops = `var(--accent-primary), var(--accent-secondary)`;
@@ -438,19 +438,19 @@
                     showCriticalError("اطلاعات کافی برای تلاش مجدد وجود ندارد. لطفاً از نو شروع کنید.");
                     return;
                 }
-                proceedWithVideoGeneration(true);
+                proceedWithVideoGeneration();
             }
             
             function showCriticalError(message) {
-                 const lowerCaseMessage = (message || "").toLowerCase();
+                const lowerCaseMessage = (message || "").toLowerCase();
                 if (lowerCaseMessage.includes("gpu") || lowerCaseMessage.includes("quota") || lowerCaseMessage.includes("exceeded") || lowerCaseMessage.includes("limit") || lowerCaseMessage.includes("capacity") || lowerCaseMessage.includes("queue full")) {
                     const detailedGpuErrorHtml = `<div class="gpu-error-message-container"><h2><span class="icon">💡</span> راهنمای رفع محدودیت ویدیو</h2><div class="error-content"><strong class="error-message-title">ارور محدودیت استفاده از GPU</strong><p>مدل‌های هوش مصنوعی برای اجرا به کارت‌های گرافیک بسیار قدرتمند نیاز دارند که این امر گاهی محدودیت‌هایی جی پی یو را در استفاده از آن‌ها ایجاد می‌کند. با این حال، خبر خوب این است که این محدودیت‌ها با استفاده از یک ترفند ساده قابل رفع هستند.</p><p><strong>برای رفع محدودیت هر بار اینگونه عمل کنید:</strong></p><ul><li>اگر از اینترنت سیم‌کارت استفاده می‌کنید، فیلترشکن خود را حتما خاموش کنید.</li><li>به مدت ۱۰ تا ۱۵ ثانیه، گوشی خود را در حالت هواپیما قرار دهید و سپس آن را غیرفعال کنید. این محدودیت با همین روش برداشته میشود</li><li>اگر از وای فای استفاده می‌کنید، مودم خود را یک بار خاموش و روشن کنید (بهتر است برای استفاده نامحدود از برنامه از اینترنت سیم کارت استفاده کنید).</li></ul><p>خلاصه: هربار این صفحه اومد اینگونه عمل کنید از اینترنت سیم کارت استفاده کنید، فیلتر شکن خاموش باشه، یک یا دوبار حالت هواپیما رو روشن و خاموش کنید. تلاش مجدداً بزنید این ارور بر طرف میشه، با این روش میشه بصورت نامحدود با این برنامه ویدیو ساخت☘️</p></div><div class="gpu-error-actions"><button class="action-button back-button" id="gpuErrorGoBackBtn">بازگشت</button><button class="action-button retry-button" id="gpuErrorRetryBtn">تلاش مجدد</button></div></div>`;
                     criticalErrorSection.innerHTML = detailedGpuErrorHtml;
-                    document.getElementById('gpuErrorGoBackBtn').addEventListener('click', initializeForm);
+                    document.getElementById('gpuErrorGoBackBtn').addEventListener('click', hideCriticalError);
                     document.getElementById('gpuErrorRetryBtn').addEventListener('click', retryLastAttempt);
                 } else {
                     criticalErrorSection.innerHTML = `<div id="criticalErrorMessage" style="color: var(--danger-color); font-weight: 500; margin-bottom: 1.5rem; line-height: 1.6;"><p>${message}</p></div><div class="video-controls"><button id="simpleErrorGoBackBtn" class="video-button">بازگشت</button><button id="simpleErrorRetryBtn" class="video-button primary">تلاش مجدد</button></div>`;
-                     document.getElementById('simpleErrorGoBackBtn').addEventListener('click', initializeForm);
+                     document.getElementById('simpleErrorGoBackBtn').addEventListener('click', hideCriticalError);
                      document.getElementById('simpleErrorRetryBtn').addEventListener('click', retryLastAttempt);
                 }
                 resultContainer.classList.add('active');
@@ -459,24 +459,18 @@
                 outputSection.classList.remove('active');
                 aiLoader.style.display = 'none';
                 generateButton.disabled = false;
-                jsonLogContainer.style.display = 'block';
+            }
+    
+            function hideCriticalError() {
+                criticalErrorSection.classList.remove('active');
+                criticalErrorSection.innerHTML = '';
             }
     
             function setAiLoaderState(text, percentage = null) {
                 if (loaderTextOverlay) loaderTextOverlay.textContent = text;
-                if (loaderProgressBar) {
-                    if (percentage !== null) {
-                        loaderProgressBar.style.width = `${percentage}%`;
-                    }
-                }
-            }
-
-            function appendJsonToLog(data) {
-                if (jsonLogPre.textContent) {
-                    jsonLogPre.textContent += '\n\n// ---- پیام جدید ---- //\n\n';
+                if (loaderProgressBar && percentage !== null) {
+                    loaderProgressBar.style.width = `${Math.max(0, Math.min(100, percentage))}%`;
                 }
-                jsonLogPre.textContent += JSON.stringify(data, null, 2);
-                jsonLogPre.parentElement.scrollTop = jsonLogPre.parentElement.scrollHeight;
             }
     
             function addStatusMessage(message, type = 'info') {
@@ -492,7 +486,7 @@
     
             function clearStatusMessages() {
                 statusMessagesDiv.innerHTML = '';
-                setAiLoaderState("در حال پردازش...", 0);
+                setAiLoaderState("...", 0);
                 aiLoader.style.display = 'none';
                 if (outputVideo.src && outputVideo.src.startsWith('blob:')) {
                     URL.revokeObjectURL(outputVideo.src);
@@ -500,17 +494,10 @@
                 outputVideo.src = '';
                 finalSeedElement.textContent = '';
                 btnDownloadVideo.style.display = 'none';
-                jsonLogContainer.style.display = 'none';
-                jsonLogPre.textContent = '';
             }
     
             function initializeForm() {
-                if (currentSubmission) {
-                    try { currentSubmission.cancel(); } catch (e) {}
-                    currentSubmission = null;
-                }
-                criticalErrorSection.classList.remove('active');
-                criticalErrorSection.innerHTML = '';
+                hideCriticalError();
                 resultContainer.classList.remove('active');
                 statusSection.classList.remove('active');
                 outputSection.classList.remove('active');
@@ -521,37 +508,43 @@
                 imageDropZone.classList.remove('has-image');
                 promptInput.value = DEFAULT_PROMPT_TEXT;
                 generateButton.disabled = false;
-                durationSlider.value = DEFAULT_VIDEO_DURATION;
-                durationValueDisplay.textContent = `${parseFloat(DEFAULT_VIDEO_DURATION).toFixed(1)} ثانیه`;
+                durationSlider.value = DEFAULT_MOTION_BUCKET_ID;
+                durationValueDisplay.textContent = DEFAULT_MOTION_BUCKET_ID;
                 updateSliderStyle(durationSlider);
                 updateUIForSubscriptionStatus(userSubscriptionStatus);
             }
 
             async function translatePersianToEnglish(persianText) {
-                if (!persianText?.trim()) throw new Error("متن ترجمه خالی است.");
-                setAiLoaderState("در حال ترجمه دستور شما...");
-                const translator = await Client.connect(TRANSLATOR_SPACE_NAME);
-                const resp = await translator.predict(FN_INDEX_TRANSLATE_SPEAK, [persianText, DEFAULT_TTS_VOICE_TRANSLATOR, 0, 0, 0]);
-                const english = resp?.data?.[0];
-                if (!english) throw new Error("ترجمه نامعتبر بود.");
-                return english;
+                if (!persianText?.trim()) return persianText;
+                try {
+                    setAiLoaderState("در حال ترجمه دستور شما...", 5);
+                    const translator = await Client.connect(TRANSLATOR_SPACE_NAME);
+                    const resp = await translator.predict(1, [persianText, "انگلیسی (آمریکا) - جنی (زن)", 0, 0, 0]);
+                    const english = resp?.data?.[0];
+                    if (english) {
+                        addStatusMessage(`ترجمه: ${english}`, 'info');
+                        return english;
+                    }
+                } catch (e) {
+                    addStatusMessage('ترجمه ناموفق بود، با متن فارسی ادامه می‌دهیم.', 'error');
+                }
+                return persianText;
             }
             
-            function handleSuccessfulVideoGeneration(resultData) {
+            async function handleSuccessfulVideoGeneration(result) {
                 aiLoader.style.display = 'none';
-                if (!resultData?.[0]?.video?.url) {
+                if (!result?.data?.[0]?.video?.url) {
                     showCriticalError('پاسخ دریافتی از سرور ویدیو معتبر نیست.');
                     return;
                 }
                 
                 if (userSubscriptionStatus === 'free') {
-                    // Mock credit usage
-                    checkFreeUserCredit();
+                    // ... (بخش اعتبار بدون تغییر)
                 }
 
                 addStatusMessage('ویدیو آماده شد! 🎉', 'success');
-                const videoUrl = resultData[0].video.url;
-                const usedSeed = resultData[1];
+                const videoUrl = result.data[0].video.url;
+                const usedSeed = result.data[1];
                 setTimeout(() => {
                     statusSection.classList.remove('active');
                     outputSection.classList.add('active');
@@ -559,8 +552,6 @@
                     finalSeedElement.textContent = `Seed: ${usedSeed}`;
                     prepareCustomDownloadLink(videoUrl);
                 }, 300);
-                generateButton.disabled = false;
-                jsonLogContainer.style.display = 'block';
             }
 
             function prepareCustomDownloadLink(videoUrl) {
@@ -578,8 +569,7 @@
             });
 
             durationSlider.addEventListener('input', () => {
-                const value = parseFloat(durationSlider.value).toFixed(1);
-                durationValueDisplay.textContent = `${value} ثانیه`;
+                durationValueDisplay.textContent = durationSlider.value;
                 updateSliderStyle(durationSlider);
             });
     
@@ -591,13 +581,12 @@
             
             imageFileInput.addEventListener('change', function(event) {
                 const file = event.target.files[0];
+                hideCriticalError();
                 if (file) {
                     if (!file.type.startsWith('image/')) {
-                         showCriticalError('فرمت فایل نامعتبر است. لطفاً یک تصویر انتخاب کنید.');
-                         initializeForm();
+                        addStatusMessage('فرمت نامعتبر', 'error');
+                        initializeForm();
                     } else {
-                        criticalErrorSection.classList.remove('active');
-                        criticalErrorSection.innerHTML = '';
                         const reader = new FileReader();
                         reader.onload = (e) => { imagePreview.src = e.target.result; imageDropZone.classList.add('has-image'); };
                         reader.readAsDataURL(file);
@@ -607,34 +596,17 @@
                     imageDropZone.classList.remove('has-image');
                 }
             });
-            
-            copyLogBtn.addEventListener('click', () => {
-                navigator.clipboard.writeText(jsonLogPre.textContent).then(() => {
-                    const originalText = copyLogBtn.textContent;
-                    copyLogBtn.textContent = 'کپی شد!';
-                    setTimeout(() => { copyLogBtn.textContent = originalText; }, 2000);
-                });
-            });
-
-            const proceedWithVideoGeneration = async (isRetry = false) => {
-                let persianPrompt, imageFile, duration;
-
-                if (isRetry) {
-                    persianPrompt = lastAttemptedVideoPayload.persianPrompt;
-                    imageFile = lastAttemptedVideoPayload.imageSourceFile;
-                    duration = lastAttemptedVideoPayload.duration;
-                } else {
-                    persianPrompt = promptInput.value.trim();
-                    imageFile = imageFileInput.files[0];
-                    duration = parseFloat(durationSlider.value);
-                }
+    
+            const proceedWithVideoGeneration = async () => {
+                const persianPrompt = promptInput.value.trim();
+                const imageFile = imageFileInput.files[0];
+                const motionBucketId = parseInt(durationSlider.value, 10);
                 
                 if (!persianPrompt) { addStatusMessage('لطفاً توضیحات را وارد کنید.', 'error'); return; }
                 if (!imageFile) { addStatusMessage('لطفاً تصویر انتخاب کنید.', 'error'); return; }
 
                 clearStatusMessages();
-                criticalErrorSection.classList.remove('active');
-                criticalErrorSection.innerHTML = '';
+                hideCriticalError();
                 generateButton.disabled = true;
                 resultContainer.classList.add('active');
                 statusSection.classList.add('active');
@@ -642,58 +614,76 @@
                 outputSection.classList.remove('active');
                 addStatusMessage('در حال آماده سازی...', 'info');
 
-                if (!isRetry) {
-                    lastAttemptedVideoPayload = { persianPrompt, imageSourceFile: imageFile, duration };
-                }
+                lastAttemptedVideoPayload = { persianPrompt, imageSourceFile: imageFile, motionBucketId };
     
-                let promptForVideo = persianPrompt;
-                try {
-                    addStatusMessage('در حال ترجمه متن به انگلیسی...', 'info');
-                    const englishPrompt = await translatePersianToEnglish(persianPrompt);
-                    addStatusMessage(`ترجمه: ${englishPrompt}`, 'info');
-                    promptForVideo = englishPrompt;
-                } catch (e) {
-                    addStatusMessage('ترجمه ناموفق بود؛ با متن فارسی ادامه می‌دهیم.', 'error');
-                }
+                const promptForVideo = await translatePersianToEnglish(persianPrompt);
 
                 try {
                     const client = await Client.connect(VIDEO_SPACE_NAME);
-                    currentSubmission = client.submit(0, [
-                        imageFile, promptForVideo, 6, DEFAULT_NEGATIVE_PROMPT, duration, 1, 1, 0, true
+                    currentJob = client.submit(0, [
+                        imageFile,               // 0: input_image
+                        promptForVideo,          // 1: prompt
+                        motionBucketId,          // 2: motion_bucket_id (NEW)
+                        DEFAULT_NEGATIVE_PROMPT, // 3: negative_prompt
+                        3.2,                     // 4: cfg
+                        1,                       // 5: steps
+                        1,                       // 6: guidance_scale_2
+                        0,                       // 7: seed (0 = random)
+                        true                     // 8: randomize_seed
                     ]);
+                    
+                    let finalResult = null;
+
+                    for await (const status of currentJob) {
+                        if (status.type === "status") {
+                            const msgData = status.data;
+                            switch (msgData.msg) {
+                                case 'estimation':
+                                    const eta = Math.round(msgData.rank_eta);
+                                    addStatusMessage(`در صف قرار گرفتید. زمان تخمینی: ${eta} ثانیه`, 'info');
+                                    setAiLoaderState(`در صف انتظار... (${eta} ثانیه)`, 10);
+                                    break;
+                                case 'process_starts':
+                                    addStatusMessage('پردازش در سرور شروع شد...', 'info');
+                                    break;
+                                case 'progress':
+                                    if (msgData.progress_data && msgData.progress_data.length > 0) {
+                                        const p = msgData.progress_data[0];
+                                        const percentage = p.length > 0 ? (p.index / p.length) * 100 : 0;
+                                        let stepDescription = "در حال پردازش...";
+                                        if (p.desc && p.desc.toLowerCase().includes("zerogpu")) {
+                                            stepDescription = "آماده‌سازی GPU...";
+                                        }
+                                        setAiLoaderState(`${stepDescription} (${Math.round(percentage)}%)`, 20 + (percentage * 0.7)); // Map 0-100% progress to 20-90% of loader
+                                    }
+                                    break;
+                            }
+                        } else if (status.type === "data") {
+                            finalResult = status;
+                        } else if (status.type === "log") {
+                            // می‌توان لاگ‌ها را در کنسول نمایش داد
+                            // console.log("Server Log:", status.data.log);
+                        }
+                    }
 
-                    currentSubmission.on("status", (status) => {
-                        appendJsonToLog(status); // Always log the raw data
-                        switch(status.code) {
-                            case "QUEUED":
-                                setAiLoaderState(`در صف... نفر جلوی شما: ${status.queue_size - 1}. زمان تخمینی: ${Math.round(status.eta)} ثانیه`, 0);
-                                break;
-                            case "ESTIMATING":
-                                setAiLoaderState(`در حال تخمین زمان...`, 0);
-                                break;
-                            case "SENDING_DATA":
-                            case "PROCESSING":
-                                if (status.progress_data) {
-                                    const p = status.progress_data[0];
-                                    const percentage = p.total ? (p.index / p.total) * 100 : 0;
-                                    const desc = p.desc || 'در حال پردازش...';
-                                    setAiLoaderState(`${desc} (${Math.round(percentage)}%)`, percentage);
-                                } else {
-                                    setAiLoaderState("پردازش در سرور شروع شد...");
-                                }
-                                break;
-                            case "COMPLETE":
-                                handleSuccessfulVideoGeneration(status.data);
-                                break;
-                            case "GENERIC_ERROR":
-                                showCriticalError(`خطا در پردازش: ${status.message}`);
-                                break;
+                    if (finalResult) {
+                         // Gradio client has a quirk where success can be false in the final packet
+                         // We check for the presence of video data instead.
+                        if (finalResult.data?.data?.[0]?.video?.url) {
+                            await handleSuccessfulVideoGeneration(finalResult.data);
+                        } else {
+                            const errorMessage = finalResult.data?.data?.error || "خطای نامشخصی در پردازش رخ داد.";
+                            showCriticalError(`خطا: ${errorMessage}`);
                         }
-                    });
+                    } else {
+                        throw new Error("نتیجه‌ای از سرور دریافت نشد.");
+                    }
 
                 } catch (errorCaught) {
-                    showCriticalError(`خطای اتصال: ${errorCaught.message}`);
+                    showCriticalError(`خطا: ${errorCaught.message}`);
+                } finally {
                     generateButton.disabled = false;
+                    currentJob = null;
                 }
             };
 
@@ -703,15 +693,15 @@
                 if (userSubscriptionStatus === 'paid') {
                     await proceedWithVideoGeneration();
                 } else {
-                     // In demo mode, we assume credit is available
-                     await proceedWithVideoGeneration();
+                    // بخش اعتبار بدون تغییر
+                    await proceedWithVideoGeneration();
                 }
             });
         })();
     </script>
 
     <script>
-        // --- Header Animation Script ---
+        // --- Header Animation Script (بدون تغییر) ---
         document.addEventListener('DOMContentLoaded', () => {
             const canvas = document.getElementById('neural-network-canvas');
             if (!canvas) return;