Spaces:

Opera8
/

tast

Running

App Files Files Community

Opera8 commited on May 28

Commit

3a0ef3e

verified ·

1 Parent(s): 4741934

Update index.html

Browse files

Files changed (1) hide show

index.html +62 -86

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>استودیو پیشرفته کلونینگ صدا | AI Alpha</title>
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -35,102 +35,81 @@
 </head>
 <body class="text-slate-100 min-h-screen flex items-center justify-center p-4 md:p-8">
-<div class="w-full max-w-4xl glass-panel rounded-3xl p-6 md:p-10 shadow-2xl relative overflow-hidden">
     <div class="absolute -top-24 -left-24 w-48 h-48 bg-indigo-500/10 rounded-full blur-3xl"></div>
     <div class="absolute -bottom-24 -right-24 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl"></div>
-    <div class="flex flex-col md:flex-row justify-between items-center border-b border-slate-700/50 pb-6 mb-8 gap-4">
-        <div class="flex items-center gap-4 text-center md:text-right">
-            <div class="w-12 h-12 bg-indigo-600/20 border border-indigo-500/30 rounded-2xl flex items-center justify-center text-indigo-400 text-2xl shadow-inner">
                 <i class="fa-solid fa-fingerprint"></i>
             </div>
             <div>
-                <h1 class="text-xl md:text-2xl font-extrabold bg-gradient-to-l from-indigo-200 to-indigo-400 bg-clip-text text-transparent">استودیو حرفه‌ای شبیه‌سازی صدا</h1>
-                <p class="text-xs text-slate-400 mt-1">پلتفرم فوق‌پیشرفته ساخت شناسنامه صوتی و متن به صدا</p>
             </div>
         </div>
-        <div class="bg-slate-800/80 border border-slate-700/60 px-4 py-1.5 rounded-full text-xs text-indigo-300 flex items-center gap-2">
-            <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
-            موتور هوشمند تشخیص خودکار زبان (Auto-Detect)
-        </div>
     </div>
-    <div class="grid grid-cols-1 md:grid-cols-12 gap-8">
-        <div class="md:col-span-7 flex flex-col gap-5">
-            <div>
-                <label class="block text-sm font-semibold text-slate-300 mb-2"><i class="fa-solid fa-file-lines text-indigo-400 ml-2"></i>متن هدف برای خوانش صوتی:</label>
-                <textarea id="text" class="w-full h-32 bg-slate-900/60 border border-slate-700/50 rounded-xl p-4 text-slate-200 placeholder-slate-500 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all resize-none text-sm leading-relaxed" placeholder="متنی که می‌خواهید مدل با صدای کلون شده بخواند را وارد کنید..."></textarea>
-            </div>
-            <div>
-                <label class="block text-sm font-semibold text-slate-300 mb-2"><i class="fa-solid fa-microphone-lines text-indigo-400 ml-2"></i>بارگذاری نمونه صدای مرجع (Reference Audio):</label>
-                <div id="drop-zone" class="border-2 border-dashed border-slate-700 hover:border-indigo-500/50 bg-slate-900/30 rounded-xl p-6 text-center cursor-pointer transition-all relative group">
-                    <input type="file" id="ref_audio" accept="audio/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
-                    <div class="text-indigo-400 text-3xl mb-2 group-hover:scale-110 transition-transform"><i class="fa-solid fa-cloud-arrow-up"></i></div>
-                    <p id="file-info" class="text-xs text-slate-400">فایل صوتی گوینده را بکشید و اینجا رها کنید یا <span class="text-indigo-400 font-medium">کلیک کنید</span></p>
-                    <p class="text-[10px] text-slate-500 mt-1">فرمت‌های مجاز: MP3, WAV, M4A (حداقل ۵ ثانیه برای کیفیت برتر)</p>
-                </div>
-            </div>
-            <div>
-                <label class="block text-sm font-semibold text-slate-300 mb-2"><i class="fa-solid fa-quote-right text-indigo-400 ml-2"></i>متن خوانده شده در فایل نمونه (اختیاری):</label>
-                <input type="text" id="ref_text" class="w-full bg-slate-900/60 border border-slate-700/50 rounded-xl p-3 text-slate-200 placeholder-slate-500 focus:border-indigo-500 outline-none text-xs" placeholder="گوینده در فایل صوتی بالا دقیقاً چه جمله‌ای می‌گوید؟">
             </div>
         </div>
-        <div class="md:col-span-5 flex flex-col justify-between gap-6">
-            <div class="flex flex-col gap-5">
-                <div>
-                    <label class="block text-sm font-semibold text-slate-300 mb-2"><i class="fa-solid fa-wand-magic-sparkles text-indigo-400 ml-2"></i>تنظیم دستور احساس و لحن صوتی (Instruct):</label>
-                    <input type="text" id="instruct" class="w-full bg-slate-900/60 border border-slate-700/50 rounded-xl p-3 text-slate-200 placeholder-slate-500 focus:border-indigo-500 outline-none text-xs" placeholder="مثلا: whisper یا female, high pitch">
-                    <div class="flex flex-wrap gap-1.5 mt-2">
-                        <span onclick="setInstruct('whisper')" class="bg-slate-800 hover:bg-indigo-900/40 border border-slate-700/60 text-[10px] text-slate-300 px-2.5 py-1 rounded-md cursor-pointer transition-all">پچ‌پچ 🤫</span>
-                        <span onclick="setInstruct('male, low pitch')" class="bg-slate-800 hover:bg-indigo-900/40 border border-slate-700/60 text-[10px] text-slate-300 px-2.5 py-1 rounded-md cursor-pointer transition-all">مردانه بم 🧔</span>
-                        <span onclick="setInstruct('female, high pitch')" class="bg-slate-800 hover:bg-indigo-900/40 border border-slate-700/60 text-[10px] text-slate-300 px-2.5 py-1 rounded-md cursor-pointer transition-all">زنانه نازک 👩</span>
-                        <span onclick="setInstruct('young adult')" class="bg-slate-800 hover:bg-indigo-900/40 border border-slate-700/60 text-[10px] text-slate-300 px-2.5 py-1 rounded-md cursor-pointer transition-all">جوان ⚡</span>
-                    </div>
-                </div>
-                <div class="grid grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">سرعت خروجی:</label>
-                        <select id="speed" class="w-full bg-slate-900/60 border border-slate-700/50 rounded-xl p-2.5 text-slate-200 text-xs outline-none focus:border-indigo-500">
-                            <option value="1.0">1.0 (معمولی)</option>
-                            <option value="0.85">0.85 (کمی آرام)</option>
-                            <option value="1.15">1.15 (کمی سریع)</option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="block text-xs font-semibold text-slate-400 mb-1.5">کیفیت پردازش (Steps):</label>
-                        <input type="text" id="steps" class="w-full bg-slate-900/60 border border-slate-700/50 rounded-xl p-2.5 text-slate-200 text-xs outline-none text-center focus:border-indigo-500" value="32">
-                    </div>
                 </div>
             </div>
-            <div class="bg-slate-900/40 border border-slate-800 rounded-2xl p-4 flex flex-col gap-4">
-                <button id="submit-btn" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3.5 px-4 rounded-xl cursor-pointer glow-button flex items-center justify-center gap-2 transition-all text-sm">
-                    <i class="fa-solid fa-bolt"></i>
-                    <span>تولید فرکانس و کلون‌سازی صدا</span>
-                </button>
-                <div id="status-container" class="hidden flex flex-col items-center justify-center py-2 text-center">
-                    <div class="flex items-end gap-1 h-8 mb-2">
-                        <div class="w-1 bg-indigo-500 rounded-full wave-bar" style="animation-delay: 0.1s"></div>
-                        <div class="w-1 bg-purple-500 rounded-full wave-bar" style="animation-delay: 0.3s"></div>
-                        <div class="w-1 bg-pink-500 rounded-full wave-bar" style="animation-delay: 0.5s"></div>
-                        <div class="w-1 bg-indigo-400 rounded-full wave-bar" style="animation-delay: 0.2s"></div>
-                    </div>
-                    <div id="status" class="text-xs text-slate-400 font-medium">در انتظار دستور...</div>
-                </div>
-                <div id="player-container" class="hidden border-t border-slate-800/80 pt-2">
-                    <audio id="audio-output" controls class="w-full h-10 rounded-lg outline-none bg-slate-900"></audio>
-                </div>
             </div>
         </div>
     </div>
 </div>
@@ -153,10 +132,6 @@
         }
     });
-    function setInstruct(val) {
-        document.getElementById('instruct').value = val;
-    }
     function generateSessionHash() {
         return Math.random().toString(36).substring(2, 13);
     }
@@ -168,7 +143,7 @@
         view.setUint32(4, 36 + pcmArray.length * 2, true);
         view.setUint32(8, 0x45564157, true);
         view.setUint32(12, 0x20746d66, true);
-        view.setUint32(16, 16, true);
         view.setUint16(20, 1, true);
         view.setUint16(22, 1, true);
         view.setUint32(24, samplingRate, true);
@@ -212,17 +187,18 @@
             statusDiv.innerText = 'اتصال به صف پردازش گرافیکی مانیتورینگ سرور...';
             const sessionHash = generateSessionHash();
             const queuePayload = {
                 "data": [
                     text,                                                       // 0: متن اصلی
                     "Auto",                                                     // 1: زبان خودکار
                     uploadedFileData,                                           // 2: فایل صوتی کلوین
-                    document.getElementById('ref_text').value.trim() || null,   // 3: متن فایل کلون
-                    document.getElementById('instruct').value.trim() || "",     // 4: دستور لحن صوتی
-                    parseInt(document.getElementById('steps').value) || 32,    // 5: تعداد استپس کیفیت
-                    3.0,                                                        // 6: guidance_scale (اصلاح شد: روی 3.0 ست شد که کمتر از حداکثر مجاز 4.0 سرور است)
                     true,                                                       // 7: denoise
-                    parseFloat(document.getElementById('speed').value),        // 8: سرعت صدا
                     1.0,                                                        // 9: مدت زمان ثابت بهینه کلون
                     true,                                                       // 10: پیش‌پردازش
                     true,                                                       // 11: پس‌پردازش

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>استودیو ساده کلونینگ صدا | AI Alpha</title>
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
 </head>
 <body class="text-slate-100 min-h-screen flex items-center justify-center p-4 md:p-8">
+<div class="w-full max-w-2xl glass-panel rounded-3xl p-6 md:p-8 shadow-2xl relative overflow-hidden">
     <div class="absolute -top-24 -left-24 w-48 h-48 bg-indigo-500/10 rounded-full blur-3xl"></div>
     <div class="absolute -bottom-24 -right-24 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl"></div>
+    <!-- هدر -->
+    <div class="flex flex-col sm:flex-row justify-between items-center border-b border-slate-700/50 pb-5 mb-6 gap-4">
+        <div class="flex items-center gap-3.5 text-center sm:text-right">
+            <div class="w-10 h-10 bg-indigo-600/20 border border-indigo-500/30 rounded-xl flex items-center justify-center text-indigo-400 text-xl shadow-inner">
                 <i class="fa-solid fa-fingerprint"></i>
             </div>
             <div>
+                <h1 class="text-lg md:text-xl font-extrabold bg-gradient-to-l from-indigo-200 to-indigo-400 bg-clip-text text-transparent">شبیه‌سازی ساده صدا</h1>
+                <p class="text-[10px] text-slate-400 mt-0.5">تبدیل سریع متن به صدا با نمونه صدای دلخواه</p>
             </div>
         </div>
     </div>
+    <!-- فرم اصلی -->
+    <div class="flex flex-col gap-5">
+        <!-- متن هدف -->
+        <div>
+            <label class="block text-xs md:text-sm font-semibold text-slate-300 mb-2">
+                <i class="fa-solid fa-file-lines text-indigo-400 ml-1.5"></i>متن هدف برای خوانش صوتی:
+            </label>
+            <textarea id="text" class="w-full h-28 bg-slate-900/60 border border-slate-700/50 rounded-xl p-3.5 text-slate-200 placeholder-slate-500 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none transition-all resize-none text-xs md:text-sm leading-relaxed" placeholder="متنی که می‌خواهید با صدای شبیه‌سازی‌شده خوانده شود را بنویسید..."></textarea>
+        </div>
+        <!-- بارگذاری نمونه صدا -->
+        <div>
+            <label class="block text-xs md:text-sm font-semibold text-slate-300 mb-2">
+                <i class="fa-solid fa-microphone-lines text-indigo-400 ml-1.5"></i>بارگذاری نمونه صدای مرجع:
+            </label>
+            <div id="drop-zone" class="border-2 border-dashed border-slate-700 hover:border-indigo-500/50 bg-slate-900/30 rounded-xl p-5 text-center cursor-pointer transition-all relative group">
+                <input type="file" id="ref_audio" accept="audio/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
+                <div class="text-indigo-400 text-2xl mb-1.5 group-hover:scale-110 transition-transform"><i class="fa-solid fa-cloud-arrow-up"></i></div>
+                <p id="file-info" class="text-xs text-slate-400">فایل صوتی گوینده را بکشید و اینجا رها کنید یا <span class="text-indigo-400 font-medium">کلیک کنید</span></p>
+                <p class="text-[10px] text-slate-500 mt-1">فرمت‌های مجاز: MP3, WAV, M4A</p>
             </div>
         </div>
+        <!-- تنظیم سرعت خروجی -->
+        <div>
+            <label class="block text-xs md:text-sm font-semibold text-slate-300 mb-2">
+                <i class="fa-solid fa-gauge-high text-indigo-400 ml-1.5"></i>سرعت خروجی صدا:
+            </label>
+            <select id="speed" class="w-full bg-slate-900/60 border border-slate-700/50 rounded-xl p-2.5 text-slate-200 text-xs outline-none focus:border-indigo-500">
+                <option value="1.0">1.0 (معمولی و استاندارد)</option>
+                <option value="0.85">0.85 (کمی آرام‌تر)</option>
+                <option value="1.15">1.15 (کمی سریع‌تر)</option>
+            </select>
+        </div>
+        <!-- بخش عملیات و پخش‌کننده -->
+        <div class="bg-slate-900/40 border border-slate-800 rounded-2xl p-4 flex flex-col gap-4 mt-2">
+            <button id="submit-btn" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-bold py-3 px-4 rounded-xl cursor-pointer glow-button flex items-center justify-center gap-2 transition-all text-xs md:text-sm">
+                <i class="fa-solid fa-bolt"></i>
+                <span>شروع کلون‌سازی و تولید صدا</span>
+            </button>
+            <div id="status-container" class="hidden flex flex-col items-center justify-center py-2 text-center">
+                <div class="flex items-end gap-1 h-8 mb-2">
+                    <div class="w-1 bg-indigo-500 rounded-full wave-bar" style="animation-delay: 0.1s"></div>
+                    <div class="w-1 bg-purple-500 rounded-full wave-bar" style="animation-delay: 0.3s"></div>
+                    <div class="w-1 bg-pink-500 rounded-full wave-bar" style="animation-delay: 0.5s"></div>
+                    <div class="w-1 bg-indigo-400 rounded-full wave-bar" style="animation-delay: 0.2s"></div>
                 </div>
+                <div id="status" class="text-[11px] text-slate-400 font-medium">در انتظار دستور...</div>
             </div>
+            <div id="player-container" class="hidden border-t border-slate-800/80 pt-2">
+                <audio id="audio-output" controls class="w-full h-10 rounded-lg outline-none bg-slate-900"></audio>
             </div>
         </div>
     </div>
 </div>
         }
     });
     function generateSessionHash() {
         return Math.random().toString(36).substring(2, 13);
     }
         view.setUint32(4, 36 + pcmArray.length * 2, true);
         view.setUint32(8, 0x45564157, true);
         view.setUint32(12, 0x20746d66, true);
+        view.setUint16(16, 16, true);
         view.setUint16(20, 1, true);
         view.setUint16(22, 1, true);
         view.setUint32(24, samplingRate, true);
             statusDiv.innerText = 'اتصال به صف پردازش گرافیکی مانیتورینگ سرور...';
             const sessionHash = generateSessionHash();
+            // در این بخش پارامترهای اختیاریِ حذف شده از ظاهر، به صورت پیش‌فرض تنظیم شده‌اند.
             const queuePayload = {
                 "data": [
                     text,                                                       // 0: متن اصلی
                     "Auto",                                                     // 1: زبان خودکار
                     uploadedFileData,                                           // 2: فایل صوتی کلوین
+                    null,                                                       // 3: متن فایل کلون (بدون تغییر)
+                    "",                                                         // 4: دستور لحن صوتی (پیش‌فرض بدون تغییر)
+                    32,                                                         // 5: تعداد استپس کیفیت (پیش‌فرض 32)
+                    3.0,                                                        // 6: guidance_scale
                     true,                                                       // 7: denoise
+                    parseFloat(document.getElementById('speed').value),         // 8: سرعت صدا (از انتخاب کاربر)
                     1.0,                                                        // 9: مدت زمان ثابت بهینه کلون
                     true,                                                       // 10: پیش‌پردازش
                     true,                                                       // 11: پس‌پردازش