Update index.html

index.html

@@ -102,7 +102,8 @@
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
         
-        input[type="file"] { padding: 10px; background: #fff; font-size: 0.9rem; }
+        /* استایل اختصاصی فایل آپلود */
+        input[type="file"] { padding: 10px; font-size: 0.9rem; background: #fff; }
 
         /* دکمه اصلی */
         @keyframes move-gradient {
@@ -167,43 +168,43 @@
         .download-btn-style.locked { background-color: #f1f5f9; color: #94a3b8; }
         .download-btn-style.locked:hover { background-color: #e2e8f0; }
 
-        .audio-item { margin-bottom: 10px; }
+        .audio-item { margin-bottom: 10px; width: 100%; }
         audio { width: 100%; height: 50px; border-radius: 25px; margin-top: 5px; }
         
-        /* کانتینر لیریک هماهنگ */
+        /* استایل باکس لیریک (برگشت به حالت اول) */
         .lyrics-container {
-            background: var(--input-bg); border-radius: 16px; padding: 20px; 
-            height: 320px; overflow-y: auto; scroll-behavior: smooth;
-            border: 1px solid var(--input-border); margin-top: 15px;
-            text-align: center; position: relative;
-            /* افکت فید شدن بالا و پایین */
-            mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
-            -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
+            background: var(--input-bg); 
+            border-radius: 16px; 
+            padding: 20px; 
+            max-height: 350px; 
+            overflow-y: auto;
+            border: 1px solid var(--input-border); 
+            margin-top: 15px;
+            text-align: center;
+            scroll-behavior: smooth; /* اسکرول نرم */
         }
         
+        /* استایل خطوط متن */
         .lyric-line {
-            margin: 12px 0;
+            margin: 0;
+            padding: 8px 0;
             font-size: 1rem;
-            color: #718096;
-            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-            line-height: 1.8;
-            opacity: 0.5;
-            transform: scale(0.95);
+            color: #4a5568; /* رنگ خاکستری تیره اصلی */
+            transition: all 0.3s ease;
             cursor: default;
+            line-height: 1.8;
+            font-weight: 400;
         }
         
-        /* استایل خط فعال (خوانده شده) */
+        /* استایل خط فعال */
         .lyric-line.active {
-            color: var(--accent-primary);
-            font-weight: 800;
-            font-size: 1.15rem;
-            opacity: 1;
-            transform: scale(1.05);
-            text-shadow: 0 5px 15px rgba(74, 108, 250, 0.2);
+            color: var(--accent-primary); /* آبی اصلی */
+            font-weight: 800; /* بولد */
+            transform: scale(1.05); /* کمی بزرگتر */
+            background: rgba(74, 108, 250, 0.05); /* پس زمینه خیلی محو */
+            border-radius: 8px;
         }
 
-        .lyrics-tag { color: var(--accent-secondary); font-size: 0.8em; margin-top: 15px; display: block; font-weight: 700; }
-
         /* لودر */
         #loader { display: none; text-align: center; padding: 20px; }
         .wave-bars { display: flex; justify-content: center; gap: 4px; height: 30px; align-items: flex-end; }
@@ -608,7 +609,6 @@
             mainDownloadBtn.style.display = 'inline-flex';
             mainDownloadBtn.onclick = (e) => handleSecureDownload(audioURL, e);
 
-            // اگر دیتای LRC ذخیره شده باشد از آن استفاده می‌کنیم، وگرنه از متن ساده
             setupPlayerWithLyrics(audioURL, item.lrcData || null, item.lyrics);
             
             finalResult.style.display = 'block';
@@ -658,7 +658,6 @@
                         resolve(msg.output);
                     } else if (msg.msg === 'close') {
                          eventSource.close();
-                         // گاهی اوقات close میاد ولی دیتا در process_completed بوده
                     }
                 };
                 
@@ -743,17 +742,19 @@
                 
                 if(!audioFileObj) throw new Error("Audio generation failed");
 
-                // 4. دریافت LRC (سینک کردن) - فانکشن 85 طبق لاگ
+                // 4. دریافت LRC (سینک کردن) - فانکشن 84 طبق لاگ شما
+                // لاگ شما نشان داد فانکشن 84 فایل VTT تولید میکند
                 let lrcData = null;
                 if (!isInstrumental) {
                     loaderText.innerText = "در حال هماهنگ‌سازی متن و آهنگ...";
                     try {
-                        // طبق لاگ‌ها فانکشن 85 خروجی LRC متنی برمی‌گرداند [00:00.00]Text
-                        // ورودی احتمالا فایل صوتی است
-                        const lrcOutput = await runGradioFunction(85, [audioFileObj]);
-                        // خروجی فانکشن 85 معمولا یک لیست است که عنصر اولش متن LRC است
+                        const lrcOutput = await runGradioFunction(84, [audioFileObj]);
                         if (lrcOutput && lrcOutput.data && lrcOutput.data[0]) {
-                            lrcData = lrcOutput.data[0];
+                            // دریافت محتوای فایل VTT
+                            const vttFile = lrcOutput.data[0];
+                            const vttUrl = vttFile.url ? vttFile.url : `${ACE_SPACE_URL}gradio_api/file=${vttFile.path}`;
+                            const resp = await fetch(vttUrl);
+                            lrcData = await resp.text();
                         }
                     } catch (e) {
                         console.warn("LRC generation failed, using plain lyrics", e);
@@ -810,29 +811,32 @@
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
 
-        // --- پارسر LRC ---
-        function parseLRC(lrcText) {
+        // --- پارسر VTT ---
+        function parseVTT(vttText) {
             const lines = [];
-            // فرمت استاندارد LRC: [mm:ss.xx]Text
-            const regex = /\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/;
+            // Regex برای فرمت VTT: 00:00:16.320 --> 00:00:20.640
+            const regex = /(\d{2}:\d{2}:\d{2}\.\d{3})\s-->\s(\d{2}:\d{2}:\d{2}\.\d{3})\n(.*)/;
             
-            const rawLines = lrcText.split('\n');
-            for(let line of rawLines) {
-                const match = line.match(regex);
+            const blocks = vttText.split('\n\n');
+            for(let block of blocks) {
+                const match = block.match(regex);
                 if(match) {
-                    const minutes = parseInt(match[1]);
-                    const seconds = parseInt(match[2]);
-                    const milliseconds = parseInt(match[3]);
-                    const time = minutes * 60 + seconds + (milliseconds / 100);
-                    const text = match[4].trim();
-                    if(text) {
-                        lines.push({ time, text });
+                    const startTime = timeToSeconds(match[1]);
+                    const endTime = timeToSeconds(match[2]);
+                    const text = match[3].trim();
+                    if(text && text !== '[Intro]' && text !== '[Chorus]' && text !== '[Verse]') {
+                         lines.push({ startTime, endTime, text });
                     }
                 }
             }
             return lines;
         }
 
+        function timeToSeconds(timeStr) {
+            const [h, m, s] = timeStr.split(':');
+            return parseFloat(h) * 3600 + parseFloat(m) * 60 + parseFloat(s);
+        }
+
         function setupPlayerWithLyrics(audioSrc, lrcData, rawLyrics) {
             playerWrapper.innerHTML = '';
             finalLyricsBox.innerHTML = '';
@@ -843,9 +847,9 @@
             audio.src = audioSrc;
             playerWrapper.appendChild(audio);
 
-            // اگر دیتای LRC موجود باشد (سینک شده)
-            if (lrcData && typeof lrcData === 'string' && lrcData.includes('[')) {
-                const parsedLyrics = parseLRC(lrcData);
+            // اگر دیتای VTT موجود باشد (سینک شده)
+            if (lrcData && typeof lrcData === 'string' && lrcData.includes('WEBVTT')) {
+                const parsedLyrics = parseVTT(lrcData);
                 
                 parsedLyrics.forEach((line, index) => {
                     const p = document.createElement('p');
@@ -859,12 +863,11 @@
                     const currentTime = audio.currentTime;
                     let activeIndex = -1;
 
-                    // پیدا کردن خطی که زمانش رد شده اما خط بعدی هنوز نرسیده
+                    // پیدا کردن خطی که در بازه زمانی فعلی است
                     for (let i = 0; i < parsedLyrics.length; i++) {
-                        if (currentTime >= parsedLyrics[i].time) {
+                        if (currentTime >= parsedLyrics[i].startTime && currentTime < parsedLyrics[i].endTime) {
                             activeIndex = i;
-                        } else {
-                            break; 
+                            break;
                         }
                     }
 
@@ -882,16 +885,15 @@
             } else {
                 // حالت متن ساده (بدون سینک)
                 if (rawLyrics) {
-                     // نمایش با استایل خط به خط اما بدون اکتیو شدن
                      const lines = rawLyrics.split('\n').filter(l => l.trim() !== '');
                      lines.forEach(line => {
                         const p = document.createElement('p');
-                        p.className = 'lyric-line'; // همان استایل
+                        p.className = 'lyric-line'; 
                         p.innerText = line;
                         finalLyricsBox.appendChild(p);
                      });
                 } else {
-                    finalLyricsBox.innerHTML = '<span style="color:#cbd5e0; display:block; padding-top:100px;">(متن آهنگی موجود نیست یا آهنگ بی‌کلام است)</span>';
+                    finalLyricsBox.innerHTML = '<span style="color:#a0aec0; display:block; padding-top:100px;">(متن آهنگی موجود نیست یا آهنگ بی‌کلام است)</span>';
                 }
             }
         }