Update index.html

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>رابط عمومی سخنگو - OmniVoice API</title>
-    <!-- استفاده از Tailwind CSS برای طراحی زیبا و مدرن -->
+    <!-- استفاده از Tailwind CSS برای طراحی زیبا -->
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700;900&display=swap" rel="stylesheet">
     <style>
@@ -28,7 +28,7 @@
                 <!-- متن ورودی -->
                 <div>
                     <label class="block text-sm font-bold text-slate-300 mb-2">متن مورد نظر برای تبدیل به گفتار:</label>
-                    <textarea id="inputText" rows="4" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="متن خود را اینجا بنویسید... (پشتیبانی از زبان‌های مختلف)"></textarea>
+                    <textarea id="inputText" rows="4" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="متن خود را اینجا بنویسید..."></textarea>
                 </div>
 
                 <!-- انتخاب حالت -->
@@ -127,20 +127,19 @@
                 <div class="bg-slate-900/30 border border-slate-700 rounded-xl p-4">
                     <label class="block text-xs font-bold text-slate-300 mb-1">توکن Hugging Face (اختیاری):</label>
                     <input type="password" id="hfToken" class="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs text-white focus:outline-none focus:ring-1 focus:ring-teal-500" placeholder="Bearer hf_...">
-                    <p class="text-[10px] text-slate-500 mt-1">در صورت سنگین بودن ترافیک سرور یا داشتن اکانت اختصاصی، وارد کردن توکن الزامی است.</p>
                 </div>
 
                 <!-- بخش خروجی و لاگ و دکمه‌ها -->
                 <div class="space-y-4">
-                    <button id="btnGenerate" onclick="generateSpeech()" class="w-full bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white font-bold py-3 px-6 rounded-xl transition duration-300 shadow-lg transform hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center space-x-2 space-x-reverse">
+                    <button id="btnGenerate" onclick="generateSpeech()" class="w-full bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white font-bold py-3 px-6 rounded-xl transition duration-300 shadow-lg transform hover:-translate-y-0.5 active:translate-y-0 flex items-center justify-center">
                         <span id="btnText">تولید صدا (Synthesize)</span>
                     </button>
 
-                    <!-- لاگ وضعیت و پیشرفت -->
-                    <div id="statusBox" class="hidden bg-slate-900 p-3 rounded-lg border border-slate-800 text-xs space-y-1 max-h-24 overflow-y-auto">
+                    <!-- لاگ وضعیت زنده صف -->
+                    <div id="statusBox" class="hidden bg-slate-900 p-3 rounded-lg border border-slate-800 text-xs">
                         <div class="flex items-center space-x-2 space-x-reverse text-slate-400">
-                            <span class="animate-pulse block w-2 h-2 rounded-full bg-amber-500"></span>
-                            <span id="statusMessage">در حال اتصال به API...</span>
+                            <span class="animate-pulse block w-2.5 h-2.5 rounded-full bg-amber-500" id="statusDot"></span>
+                            <span id="statusMessage">در حال اتصال...</span>
                         </div>
                     </div>
 
@@ -157,11 +156,10 @@
         </div>
     </div>
 
-    <!-- بارگذاری کلاینت رسمی گرادیو از CDN به عنوان ماژول مروگر -->
+    <!-- بارگذاری کلاینت رسمی گرادیو از CDN -->
     <script type="module">
         import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
-        // مدیریت تغییر ظاهر فیلدها متناسب با حالت کاری منتخب
         window.toggleModeFields = function() {
             const selectedMode = document.querySelector('input[name="mode"]:checked').value;
             const cloneFields = document.getElementById("cloneFields");
@@ -176,12 +174,12 @@
             }
         }
 
-        // عملکرد اصلی دکمه ساخت صدا
         window.generateSpeech = async function() {
             const btn = document.getElementById("btnGenerate");
             const btnText = document.getElementById("btnText");
             const statusBox = document.getElementById("statusBox");
             const statusMessage = document.getElementById("statusMessage");
+            const statusDot = document.getElementById("statusDot");
             const resultContainer = document.getElementById("resultContainer");
             const audioPlayer = document.getElementById("audioPlayer");
             const btnDownload = document.getElementById("btnDownload");
@@ -200,84 +198,127 @@
             const hfToken = document.getElementById("hfToken").value.trim();
 
             if (!text) {
-                alert("لطفاً متن مورد نظر خود را وارد کنید.");
+                alert("لطفاً ابتدا متن مورد نظر خود را وارد کنید.");
                 return;
             }
 
-            // غیرفعال کردن دکمه و نمایش وضعیت پردازش
             btn.disabled = true;
-            btnText.innerText = "در حال پردازش...";
+            btnText.innerText = "منتظر بمانید...";
             statusBox.classList.remove("hidden");
             resultContainer.classList.add("hidden");
-            statusMessage.innerText = "در حال ایجاد اتصال به فضای OmniVoice...";
+            statusDot.className = "animate-pulse block w-2.5 h-2.5 rounded-full bg-amber-500";
+            statusMessage.innerText = "در حال اتصال به سرور هوش مصنوعی...";
 
             try {
-                // اتصال به مدل Hugging Face
+                // اتصال به فضای کاری گرادیو
                 const app = await Client.connect("k2-fsa/OmniVoice", {
                     token: hfToken ? `Bearer ${hfToken}` : undefined
                 });
 
-                // پردازش فایل صوتی در حالت Clone
-                let refAudioPayload = null;
-                let refTextVal = null;
+                let endpoint = null;
+                let payload = [];
+
                 if (mode === "clone") {
+                    // برای حالت شبیه‌سازی صدا به دنبال اندپوینت با ۱۲ ورودی می‌گردد
+                    const cloneDep = app.config.dependencies.find(dep => dep.inputs && dep.inputs.length === 12);
+                    if (!cloneDep) {
+                        throw new Error("اندپوینت متناسب با شبیه‌سازی صدا در سرور یافت نشد.");
+                    }
+                    endpoint = cloneDep.api_name ? `/${cloneDep.api_name}` : cloneDep.id;
+
                     const refAudioFile = document.getElementById("refAudio").files[0];
                     if (!refAudioFile) {
-                        throw new Error("برای شبیه‌سازی صدا، لطفاً یک فایل صوتی آپلود کنید.");
+                        throw new Error("برای شبیه‌سازی، آپلود یک فایل صوتی مرجع الزامی است.");
                     }
-                    statusMessage.innerText = "در حال آپلود فایل صوتی مرجع...";
-                    refAudioPayload = handle_file(refAudioFile);
-                    refTextVal = document.getElementById("refText").value.trim() || null;
-                }
+                    
+                    statusMessage.innerText = "در حال آپلود و پردازش فایل صوتی مرجع...";
+                    const refAudioPayload = handle_file(refAudioFile);
+                    const refTextVal = document.getElementById("refText").value.trim() || null;
 
-                statusMessage.innerText = "در حال ارسال درخواست به صف پردازش مدل...";
+                    // ۱۲ پارامتر ساختار فرعی شبیه‌سازی صدا
+                    payload = [
+                        text,
+                        language,
+                        refAudioPayload,
+                        refTextVal,
+                        instruct,
+                        steps,
+                        guidance,
+                        denoise,
+                        speed,
+                        duration,
+                        preprocess,
+                        postprocess
+                    ];
+                } else {
+                    // برای طراحی صدا به دنبال اندپوینت با ورودی‌های بیشتر می‌گردد
+                    const designDep = app.config.dependencies.find(dep => dep.inputs && dep.inputs.length > 12);
+                    if (!designDep) {
+                        throw new Error("اندپوینت متناسب با طراحی صدا یافت نشد.");
+                    }
+                    endpoint = designDep.api_name ? `/${designDep.api_name}` : designDep.id;
+                    const expectedLength = designDep.inputs.length;
+
+                    // ساختار پایه‌ای تابع طراحی صدا در دمو
+                    payload = [
+                        text,
+                        language,
+                        steps,
+                        guidance,
+                        denoise,
+                        speed,
+                        duration,
+                        preprocess,
+                        postprocess
+                    ];
 
-                // تشخیص خودکار اندپوینت API بر اساس تعداد آرگومان‌های ورودی تابع اصلی مدل
-                let endpointIndex = "/predict";
-                try {
-                    const mainDep = app.config.dependencies.find(dep => dep.inputs && dep.inputs.length === 13);
-                    if (mainDep) {
-                        endpointIndex = mainDep.api_name ? `/${mainDep.api_name}` : mainDep.id;
+                    // مابقی پارامترها مربوط به دراپ‌داون‌های دمو هستند که با "Auto" مقداردهی می‌شوند
+                    while (payload.length < expectedLength) {
+                        payload.push("Auto");
                     }
-                } catch(e) {
-                    console.warn("خطا در سیستم خودیاب پویای اندپوینت، استفاده از حالت پیش‌فرض:", e);
                 }
 
-                // ارسال اطلاعات به صف و انتظار برای نتیجه
-                const result = await app.predict(endpointIndex, [
-                    text,                 // 1. Text
-                    language,             // 2. Language
-                    refAudioPayload,      // 3. Reference Audio
-                    instruct,             // 4. Instruct
-                    steps,                // 5. Steps (num_step)
-                    guidance,             // 6. Guidance scale
-                    denoise,              // 7. Denoise
-                    speed,                // 8. Speed
-                    duration,             // 9. Duration
-                    preprocess,           // 10. Preprocess prompt
-                    postprocess,          // 11. Postprocess output
-                    mode,                 // 12. Mode ("clone" or "design")
-                    refTextVal            // 13. Reference text (ref_text)
-                ]);
+                statusMessage.innerText = "در حال ورود به صف پردازش مدل...";
 
-                // بررسی صحت داده‌های دریافتی
-                if (result && result.data && result.data[0]) {
-                    const audioUrl = result.data[0].url;
-                    
-                    statusMessage.innerText = "پایان پردازش! صدا با موفقیت ساخته شد.";
-                    audioPlayer.src = audioUrl;
-                    btnDownload.href = audioUrl;
-                    
-                    resultContainer.classList.remove("hidden");
-                } else {
-                    throw new Error(result.data[1] || "خطایی از سمت سرور رخ داد اما خطای دقیقی گزارش نشد.");
-                }
+                // استفاده از submit به جای predict جهت مانیتورینگ زنده موقعیت در صف پردازش کارت گرافیک
+                const job = app.submit(endpoint, payload);
+
+                job.on("status", (status) => {
+                    if (status.stage === "pending") {
+                        const queuePos = status.position !== undefined ? status.position : "در حال تخمین";
+                        const eta = status.eta !== undefined ? `${Math.round(status.eta)} ثانیه` : "نامشخص";
+                        statusMessage.innerText = `در صف انتظار سیستم. موقعیت شما در صف: ${queuePos} | زمان تخمینی: ${eta}`;
+                    } else if (status.stage === "processing") {
+                        statusDot.className = "animate-pulse block w-2.5 h-2.5 rounded-full bg-teal-500";
+                        statusMessage.innerText = "نوبت شما فرا رسید! کارت گرافیک (ZeroGPU) در حال تولید صدا است...";
+                    }
+                });
+
+                job.on("data", (event) => {
+                    const result = event.data;
+                    if (result && result[0]) {
+                        const audioUrl = result[0].url;
+                        audioPlayer.src = audioUrl;
+                        btnDownload.href = audioUrl;
+                        
+                        statusDot.className = "block w-2.5 h-2.5 rounded-full bg-emerald-500";
+                        statusMessage.innerText = "صدا با موفقیت ایجاد شد!";
+                        resultContainer.classList.remove("hidden");
+                    } else {
+                        throw new Error("داده‌ای از سمت سرور بازگردانده نشد.");
+                    }
+                });
+
+                job.on("error", (err) => {
+                    statusDot.className = "block w-2.5 h-2.5 rounded-full bg-red-500";
+                    statusMessage.innerText = `خطای پردازش: ${err.message || err}`;
+                    btn.disabled = false;
+                    btnText.innerText = "تولید صدا (Synthesize)";
+                });
 
             } catch (error) {
-                console.error(error);
-                statusMessage.innerText = `خطا: ${error.message || error}`;
-            } finally {
-                // فعال‌سازی مجدد دکمه
+                statusDot.className = "block w-2.5 h-2.5 rounded-full bg-red-500";
+                statusMessage.innerText = `خطا در برقراری ارتباط: ${error.message || error}`;
                 btn.disabled = false;
                 btnText.innerText = "تولید صدا (Synthesize)";
             }