Update index.html

index.html

@@ -11,32 +11,50 @@
         .card { margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
         .loader { border: 4px solid #f3f3f3; border-top: 4px solid #0d6efd; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; display: none; margin-bottom: 10px; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        #videoResult { width: 100%; max-width: 600px; border-radius: 8px; margin-top: 15px; display: none; }
+        #videoResult { width: 100%; max-width: 100%; border-radius: 8px; margin-top: 15px; display: none; }
         .form-label { font-weight: bold; font-size: 0.9em; margin-top: 10px; }
+        
+        /* استایل ترمینال برای لاگ‌های زنده */
+        #liveLogs {
+            background-color: #1e1e1e;
+            color: #00ff00;
+            font-family: Consolas, monospace;
+            font-size: 0.8em;
+            padding: 10px;
+            border-radius: 5px;
+            height: 250px;
+            overflow-y: auto;
+            text-align: left;
+            direction: ltr;
+            margin-top: 15px;
+            display: none; /* تا وقتی پردازش شروع نشده مخفی بماند */
+        }
     </style>
 </head>
 <body>
 
-<div class="container">
+<div class="container-fluid">
     <h2 class="text-center mb-4 text-primary">LTX 2.3 10Eros - تبدیل تصویر به ویدیو</h2>
-    <p class="text-center text-muted">این پنل از طریق API مستقیماً به سرورهای Hugging Face متصل می‌شود.</p>
+    <p class="text-center text-muted">اتصال مستقیم به API با امکان مانیتورینگ زنده (Live Logs)</p>
 
     <div class="row">
         <!-- ستون تنظیمات -->
-        <div class="col-lg-8">
+        <div class="col-lg-7">
             <div class="card p-4">
                 <h5 class="mb-3">تنظیمات اصلی و API</h5>
                 
                 <label class="form-label">Hugging Face Token (الزامی برای جلوگیری از خطا)</label>
                 <input type="text" id="hf_token" class="form-control" placeholder="hf_...">
 
-                <label class="form-label">تصویر اصلی (الزامی) [image_path]</label>
+                <label class="form-label mt-3">تصویر اصلی (الزامی) [image_path]</label>
                 <input type="file" id="image_path" class="form-control" accept="image/*">
 
-                <label class="form-label">پرامپت اصلی (الزامی) [prompt]</label>
-                <textarea id="prompt" class="form-control" rows="2" placeholder="مفهوم و توضیح ویدیو..."></textarea>
+                <label class="form-label mt-3">پرامپت اصلی (الزامی) [prompt]</label>
+                <textarea id="prompt" class="form-control" rows="3" placeholder="مفهوم و توضیح ویدیو..."></textarea>
+                
+                <button id="enhanceBtn" class="btn btn-outline-primary btn-sm mt-2">✨ بهینه‌سازی خودکار پرامپت (Enhance)</button>
 
-                <label class="form-label">پرامپت منفی [negative_prompt]</label>
+                <label class="form-label mt-3">پرامپت منفی [negative_prompt]</label>
                 <textarea id="negative_prompt" class="form-control" rows="2">captions, music, transition, VR, bad quality, subtitles, text, watermark, overlay effects, cartoon, childish, ugly, text, blur, logo, static, low quality, noise, mutant, horror, film grain</textarea>
 
                 <div class="row mt-3">
@@ -61,18 +79,21 @@
             </div>
         </div>
 
-        <!-- ستون خروجی -->
-        <div class="col-lg-4">
+        <!-- ستون خروجی و لاگ -->
+        <div class="col-lg-5">
             <div class="card p-4 text-center sticky-top" style="top: 20px;">
                 <h5 class="mb-3">تولید ویدیو</h5>
                 <button id="generateBtn" class="btn btn-success w-100 py-3 mb-3 text-white fw-bold">شروع تولید (Generate)</button>
                 
                 <div class="d-flex justify-content-center"><div id="loader" class="loader"></div></div>
-                <div id="statusText" class="text-secondary small mb-2">آماده دریافت فرمان...</div>
+                <div id="statusText" class="text-secondary small fw-bold">آماده دریافت فرمان...</div>
                 
+                <!-- ویدیوی خروجی -->
                 <video id="videoResult" controls></video>
-                
                 <div id="seedResult" class="mt-3 text-info small"></div>
+
+                <!-- ترمینال لاگ‌های زنده -->
+                <pre id="liveLogs"></pre>
             </div>
         </div>
     </div>
@@ -83,13 +104,14 @@
 <script type="module">
     import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
-    // تعریف تمامی پارامترهای باقی‌مانده (۸۸ پارامتر مستند شده در API)
+    // فرمت‌بندی تمامی پارامترها به همراه castTo برای تبدیل نوع داده‌ها هنگام ارسال
     const formSchema = [
         // گروه: Resolution
         { group: "رزولوشن و ابعاد", id: "max_width", type: "number", val: 1120 },
         { group: "رزولوشن و ابعاد", id: "max_height", type: "number", val: 1344 },
         { group: "رزولوشن و ابعاد", id: "target_mp", type: "number", val: 1.15, step: 0.05 },
-        { group: "رزولوشن و ابعاد", id: "snap_multiple", type: "select", options: ["32", "64"], val: "64" },
+        // توجه: castTo="number" اضافه شد تا "64" به عدد صحیح 64 تبدیل شود
+        { group: "رزولوشن و ابعاد", id: "snap_multiple", type: "select", options: ["32", "64"], val: "64", castTo: "number" },
         { group: "رزولوشن و ابعاد", id: "custom_res_enabled", type: "checkbox", val: false },
         
         // گروه: Targeting (شخصیت و صورت)
@@ -142,6 +164,7 @@
         { 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: "" },
 
         // گروه: MSR (چند تصویره)
@@ -150,7 +173,8 @@
         { group: "حالت چند مرجعی (MSR)", id: "msr_ref3", type: "file", val: null },
         { group: "حالت چند مرجعی (MSR)", id: "msr_ref4", type: "file", val: null },
         { group: "حالت چند مرجعی (MSR)", id: "msr_background", type: "file", val: null },
-        { group: "حالت چند مرجعی (MSR)", id: "msr_frame_count", type: "select", options: ["17", "25", "33", "41"], val: "41" },
+        // توجه: castTo="number" اضافه شد
+        { group: "حالت چند مرجعی (MSR)", id: "msr_frame_count", type: "select", options: ["17", "25", "33", "41"], val: "41", castTo: "number" },
         { group: "حالت چند مرجعی (MSR)", id: "msr_guide_strength", type: "number", val: 1.0, step: 0.05 },
         { group: "حالت چند مرجعی (MSR)", id: "msr_lora_strength", type: "number", val: 0.7, step: 0.05 },
 
@@ -240,7 +264,61 @@
         index++;
     }
 
-    // منطق اتصال و ارسال (Submit)
+    // لاگر سفارشی برای ثبت گزارشات زنده
+    const liveLogs = document.getElementById("liveLogs");
+    const appendLog = (msg) => {
+        liveLogs.style.display = "block";
+        const time = new Date().toLocaleTimeString();
+        liveLogs.innerHTML += `[${time}] ${msg}\n`;
+        liveLogs.scrollTop = liveLogs.scrollHeight; // اسکرول به پایین
+    };
+
+    // --- تابع بهینه‌سازی پرامپت (Enhance Prompt) ---
+    document.getElementById("enhanceBtn").addEventListener("click", async () => {
+        const hfToken = document.getElementById("hf_token").value.trim();
+        const imgInput = document.getElementById("image_path");
+        const promptInput = document.getElementById("prompt");
+        const enhanceBtn = document.getElementById("enhanceBtn");
+        
+        if (!imgInput.files.length) return alert("ابتدا باید یک تصویر اصلی انتخاب کنید!");
+        if (!promptInput.value.trim()) return alert("ابتدا یک پرامپت کوتاه برای ایده اولیه بنویسید!");
+
+        enhanceBtn.innerText = "⏳ در حال بهینه‌سازی...";
+        enhanceBtn.disabled = true;
+
+        try {
+            const client = await Client.connect("Fighterdan/LTX-2.3-10Eros_I2V", { hf_token: hfToken });
+            
+            // گرفتن فایل‌های MSR در صورت وجود، یا رد کردن مقدار null
+            const getFile = (id) => document.getElementById(id) && document.getElementById(id).files.length ? document.getElementById(id).files[0] : null;
+
+            const enhanceParams = {
+                image_path: imgInput.files[0],
+                prompt: promptInput.value,
+                enhance_budget: Number(document.getElementById("enhance_budget")?.value || 80),
+                msr_ref2_path: getFile("msr_ref2"),
+                msr_ref3_path: getFile("msr_ref3"),
+                msr_ref4_path: getFile("msr_ref4"),
+                msr_bg_path: getFile("msr_background")
+            };
+
+            const result = await client.predict("/enhance_prompt", enhanceParams);
+            
+            if (result.data && result.data[0]) {
+                promptInput.value = result.data[0];
+                alert("پرامپت با موفقیت بهینه‌سازی شد!");
+            }
+
+        } catch (error) {
+            console.error(error);
+            alert("خطا در بهینه‌سازی پرامپت: " + error.message);
+        } finally {
+            enhanceBtn.innerText = "✨ بهینه‌سازی خودکار پرامپت (Enhance)";
+            enhanceBtn.disabled = false;
+        }
+    });
+
+    // --- منطق تولید اصلی (Generate) ---
     document.getElementById("generateBtn").addEventListener("click", async () => {
         const hfToken = document.getElementById("hf_token").value.trim();
         const btn = document.getElementById("generateBtn");
@@ -249,19 +327,21 @@
         const videoRes = document.getElementById("videoResult");
         const seedRes = document.getElementById("seedResult");
 
-        // اعتبارسنجی
         const imgInput = document.getElementById("image_path");
         const promptInput = document.getElementById("prompt").value;
+        
         if (!imgInput.files.length) return alert("لطفاً تصویر اصلی را آپلود کنید.");
         if (!promptInput) return alert("لطفاً پرامپت را وارد کنید.");
 
         btn.disabled = true;
         loader.style.display = "block";
         videoRes.style.display = "none";
-        statusText.innerText = "در حال اتصال به سرور (ممکن است مدتی طول بکشد)...";
+        liveLogs.innerHTML = ""; // پاک کردن لاگ‌های قبلی
+        statusText.innerText = "در حال اتصال...";
+        appendLog("شروع فرآیند اتصال به سرور...");
 
         try {
-            // ساختن شیء پارامترها با خواندن از DOM
+            // خواندن پارامترها و کست کردن مقادیر رشته‌ای به عددی (در صورت نیاز)
             const params = {
                 image_path: imgInput.files[0],
                 prompt: promptInput,
@@ -270,7 +350,6 @@
                 seconds: parseFloat(document.getElementById("seconds").value),
             };
 
-            // خواندن فیلدهای اتوماتیک
             formSchema.forEach(field => {
                 const el = document.getElementById(field.id);
                 if (field.type === "checkbox") {
@@ -281,37 +360,79 @@
                     if (el.files.length > 0) {
                         params[field.id] = el.files[0];
                     }
-                    // در کلاینت JS، فیلدهای فایل در صورت خالی بودن نادیده گرفته می‌شوند تا دیفالت سرور اعمال شود.
+                } else if (field.type === "select") {
+                    // تبدیل نوع دراپ‌داون‌هایی که نیاز به عدد دارند
+                    params[field.id] = field.castTo === "number" ? Number(el.value) : el.value;
                 } else {
                     params[field.id] = el.value;
                 }
             });
 
-            // اتصال به Space 
+            appendLog("پارامترها آماده شد. اتصال به کلاینت Gradio...");
             const client = await Client.connect("Fighterdan/LTX-2.3-10Eros_I2V", { hf_token: hfToken });
             
-            statusText.innerText = "متصل شد. در حال تولید ویدیو (منتظر بمانید)...";
-
-            // درخواست تولید
-            const result = await client.predict("/generate", params);
+            appendLog("متصل شد! ارسال درخواست تولید ویدیو (submit)...");
             
-            // نمایش خروجی
-            console.log("پاسخ سرور:", result.data);
-            if (result.data && result.data[0] && result.data[0].url) {
-                videoRes.src = result.data[0].url;
-                videoRes.style.display = "block";
-                statusText.innerText = result.data[1] || "تولید با موفقیت به پایان رسید!";
-                seedRes.innerText = "Seed استفاده شده: " + result.data[2];
-            } else {
-                statusText.innerText = "خطا: ویدیو در پاسخ یافت نشد.";
-            }
+            // استفاده از Submit به جای Predict برای دریافت رویدادهای زنده (لاگ و وضعیت)
+            const job = client.submit("/generate", params);
+            
+            // گرفتن رویدادهای وضعیت (در صف، در حال اجرا و غیره)
+            job.on("status", (status) => {
+                if (status.stage === "pending") {
+                    const queueInfo = status.queue_position !== undefined ? ` (جایگاه در صف: ${status.queue_position})` : "";
+                    statusText.innerText = "در صف انتظار..." + queueInfo;
+                    appendLog("وضعیت: در صف انتظار... " + queueInfo);
+                } else if (status.stage === "generating") {
+                    statusText.innerText = "در حال پردازش در GPU (لطفا شکیبا باشید)...";
+                    appendLog("وضعیت: تولید ویدیو در حال انجام است...");
+                } else if (status.stage === "complete") {
+                    statusText.innerText = "پردازش تکمیل شد.";
+                    appendLog("وضعیت: پایان موفقیت‌آمیز.");
+                } else if (status.stage === "error") {
+                    statusText.innerText = "خطا در پردازش!";
+                    appendLog("خطا (Error): " + (status.message || "نامشخص"));
+                }
+            });
+
+            // گرفتن لاگ‌های زنده که توسط سرور چاپ می‌شود (مثل خطاهای ComfyUI)
+            job.on("log", (logData) => {
+                appendLog("[سرور]: " + logData.log);
+            });
+
+            // گرفتن خروجی نهایی
+            job.on("data", (result) => {
+                appendLog("پاسخ نهایی دریافت شد.");
+                const data = result.data;
+                if (data && data[0] && data[0].url) {
+                    videoRes.src = data[0].url;
+                    videoRes.style.display = "block";
+                    statusText.innerText = data[1] || "تولید با موفقیت به پایان رسید!";
+                    seedRes.innerText = "Seed استفاده شده: " + data[2];
+                    appendLog("ویدیو با موفقیت بارگذاری شد.");
+                } else {
+                    statusText.innerText = "خطا: ویدیو در پاسخ یافت نشد.";
+                    appendLog("خطای منطقی: فایل ویدیو در خروجی Gradio قرار نگرفت.");
+                }
+            });
+
+            // در صورت بروز خطا در ارسال درخواست
+            job.on("error", (error) => {
+                console.error(error);
+                statusText.innerText = "خطای کلاینت: " + error.message;
+                appendLog("استثنا/خطا: " + error.message);
+            });
 
         } catch (error) {
             console.error(error);
-            statusText.innerText = "خطا در پردازش: " + error.message;
+            statusText.innerText = "خطا در برقراری ارتباط اولیه: " + error.message;
+            appendLog("استثنای اتصال: " + error.message);
         } finally {
-            btn.disabled = false;
-            loader.style.display = "none";
+            // از آنجایی که job ناهمگام (Event-based) است، دکمه را در زمان پایان (داخل status) یا همینجا با تایمر موقت آزاد می‌کنیم.
+            // به صورت اصولی دکمه باید وقتی stage === complete شد فعال شود، اما برای اطمینان این تنظیمات را اینجا می‌گذاریم.
+            setTimeout(() => {
+                btn.disabled = false;
+                loader.style.display = "none";
+            }, 3000); // فقط برای بازگرداندن وضعیت دکمه
         }
     });
 </script>