Update index.html

index.html

@@ -19,7 +19,7 @@
 
 <div class="container-fluid">
     <h2 class="text-center mb-4 text-primary">LTX 2.3 10Eros - تبدیل تصویر به ویدیو</h2>
-    <p class="text-center text-muted">اتصال مستقیم و پایدار (نسخه نهایی با پشتیبانی از ساختار ویدیوی Gradio)</p>
+    <p class="text-center text-muted">اتصال مستقیم با قابلیت نمایش وضعیت صف و جلوگیری از فریز شدن</p>
 
     <div class="row">
         <!-- ستون تنظیمات -->
@@ -141,7 +141,6 @@
         { group: "مصرف منابع و Seed", id: "seed", type: "number", val: -1 },
         { group: "مصرف منابع و Seed", id: "randomize_seed", type: "checkbox", val: true },
         { group: "مصرف منابع و Seed", id: "gen_budget", type: "number", val: 0 },
-        { group: "مصرف منابع و Seed", id: "enhance_budget", type: "number", val: 80 },
         { group: "مصرف منابع و Seed", id: "profile_name", type: "text", val: "" },
 
         { group: "حالت چند مرجعی (MSR)", id: "input_mode", type: "select", options: ["single image (i2v)", "multi-reference (MSR)", "multi-reference (original)"], val: "single image (i2v)" },
@@ -235,7 +234,6 @@
         index++;
     }
 
-
     document.getElementById("enhanceBtn").addEventListener("click", async () => {
         const hfToken = document.getElementById("hf_token").value.trim();
         const imgInput = document.getElementById("image_path");
@@ -255,7 +253,7 @@
             const enhanceParams = {
                 image_path: imgInput.files[0],
                 prompt: promptInput.value,
-                enhance_budget: Number(document.getElementById("enhance_budget")?.value || 80),
+                enhance_budget: 80, // مقدار ثابت برای جلوگیری از ارسال پارامتر اضافه به فرم
                 msr_ref2_path: getFile("msr_ref2"),
                 msr_ref3_path: getFile("msr_ref3"),
                 msr_ref4_path: getFile("msr_ref4"),
@@ -263,7 +261,6 @@
             };
 
             const result = await client.predict("/enhance_prompt", enhanceParams);
-            
             if (result.data && result.data[0]) {
                 promptInput.value = result.data[0];
                 alert("پرامپت با موفقیت بهینه‌سازی شد!");
@@ -298,7 +295,7 @@
         videoRes.style.display = "none";
         errorBox.style.display = "none";
         statusText.style.display = "block";
-        statusText.innerText = "در حال تولید ویدیو (بسته به شلوغی سرور ممکن است چند دقیقه طول بکشد)...";
+        statusText.innerText = "در حال اتصال به سرور...";
 
         try {
             const params = {
@@ -326,46 +323,45 @@
                 }
             });
 
-            delete params.enhance_budget;
-
+            // اتصال به کلاینت (یک بار)
             const client = await Client.connect("Fighterdan/LTX-2.3-10Eros_I2V", { hf_token: hfToken });
             
-            const result = await client.predict("/generate", params);
-            const data = result.data;
-            
-            // ========================================================
-            // بخش هوشمند استخراج آدرس ویدیو بر اساس ساختار تو در تو
-            // ========================================================
-            let videoUrl = "";
-            if (data && data[0]) {
-                // در نسخه‌های جدید Gradio داده ویدیو در key به نام "video" قرار دارد
-                let fileData = data[0].video ? data[0].video : data[0];
-
-                if (fileData instanceof Blob) {
-                    videoUrl = URL.createObjectURL(fileData);
-                } else if (typeof fileData === "string") {
-                    videoUrl = fileData;
-                } else if (typeof fileData === "object") {
-                    // استخراج URL یا ساخته شدن مسیر پایه
-                    videoUrl = fileData.url || (fileData.path ? `https://fighterdan-ltx-2-3-10eros-i2v.hf.space/file=${fileData.path}` : "");
-                }
-            }
+            // استفاده از submit به همراه for await برای مدیریت استریم و جلوگیری از فریز شدن
+            const job = client.submit("/generate", params);
+
+            for await (const msg of job) {
+                if (msg.type === "status") {
+                    if (msg.stage === "pending") {
+                        const q = msg.queue_position !== undefined ? msg.queue_position : "نامشخص";
+                        statusText.innerText = `در صف انتظار... (جایگاه شما: ${q})`;
+                    } else if (msg.stage === "generating") {
+                        statusText.innerText = "در حال پردازش گرافیکی (لطفاً منتظر بمانید)...";
+                    } else if (msg.stage === "error") {
+                        throw new Error(msg.message || "ظرفیت رایگان (ZeroGPU Quota) شما تمام شده یا ارتباط با سرور قطع شد.");
+                    }
+                } else if (msg.type === "data") {
+                    const data = msg.data;
+                    let videoUrl = "";
+                    
+                    if (data && data[0]) {
+                        let fileData = data[0].video ? data[0].video : data[0];
+                        if (fileData instanceof Blob) {
+                            videoUrl = URL.createObjectURL(fileData);
+                        } else if (typeof fileData === "string") {
+                            videoUrl = fileData;
+                        } else if (typeof fileData === "object") {
+                            videoUrl = fileData.url || (fileData.path ? `https://fighterdan-ltx-2-3-10eros-i2v.hf.space/file=${fileData.path}` : "");
+                        }
+                    }
 
-            if (videoUrl) {
-                // موفقیت کامل
-                videoRes.src = videoUrl;
-                videoRes.style.display = "block";
-                statusText.innerText = "تولید با موفقیت به پایان رسید!";
-                // data[1] همان گزارش موفقیت (مثل 1024x1152, 25 frames) است
-                seedRes.innerText = "گزارش خروجی: " + (data[1] || "") + " | Seed: " + (data[2] || "");
-            } else {
-                // اگر ویدیویی یافت نشد، یعنی واقعا در پایتون اکسپشن رخ داده
-                statusText.style.display = "none";
-                errorBox.style.display = "block";
-                if (data && data[1]) {
-                    errorBox.innerHTML = `<strong>خطای سرور:</strong><br><br>${data[1].replace(/\n/g, '<br>')}`;
-                } else {
-                    errorBox.innerText = "خطا: ارتباط موفق بود اما ویدیویی برگشت داده نشد.";
+                    if (videoUrl) {
+                        videoRes.src = videoUrl;
+                        videoRes.style.display = "block";
+                        statusText.innerText = "تولید با موفقیت به پایان رسید!";
+                        seedRes.innerText = "گزارش خروجی: " + (data[1] || "") + " | Seed: " + (data[2] || "");
+                    } else {
+                        throw new Error("پردازش با موفقیت تمام شد اما لینک ویدیو یافت نشد.");
+                    }
                 }
             }
 
@@ -373,7 +369,8 @@
             console.error(error);
             statusText.style.display = "none";
             errorBox.style.display = "block";
-            errorBox.innerText = "خطای کلاینت/شبکه: " + error.message;
+            // نمایش واضح ارور به جای فریز شدن
+            errorBox.innerHTML = `<strong>خطا در پردازش:</strong><br><br>${error.message.replace(/\n/g, '<br>')}<br><br><span style="color:#666;">نکته: اگر خطای "Quota Exceeded" یا "Capacity" دریافت کردید، یعنی محدودیت حساب شما در Hugging Face تمام شده است و باید Token دیگری استفاده کنید.</span>`;
         } finally {
             btn.disabled = false;
             loader.style.display = "none";