Update index.html

index.html

@@ -66,7 +66,6 @@
         }  
         .subtitle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 5px; margin-bottom: 10px; }  
 
-        /* استایل بج وضعیت اشتراک */
         .status-badge {
             display: inline-block; padding: 6px 16px; border-radius: 20px;
             font-size: 0.85rem; font-weight: 700; margin-top: 5px;
@@ -102,10 +101,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; font-size: 0.9rem; background: #fff; }
 
-        /* دکمه اصلی */
         @keyframes move-gradient {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
@@ -137,7 +134,6 @@
         }
         .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
 
-        /* تنظیمات پیشرفته */
         .accordion {
             background-color: var(--input-bg); color: var(--text-primary); cursor: pointer; padding: 15px; width: 100%; border: none;
             text-align: right; outline: none; font-size: 0.95rem; font-weight: 600; border-radius: 12px;
@@ -157,7 +153,6 @@
         .checkbox-wrapper:last-child { border-bottom: none; }
         .settings-group label { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 6px; font-weight: 500; }
 
-        /* پلیر و متن */
         .player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--panel-border); }
         
         .download-btn-style {
@@ -168,44 +163,24 @@
         .download-btn-style.locked { background-color: #f1f5f9; color: #94a3b8; }
         .download-btn-style.locked:hover { background-color: #e2e8f0; }
 
-        .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; 
-            max-height: 350px; 
-            overflow-y: auto;
-            border: 1px solid var(--input-border); 
-            margin-top: 15px;
-            text-align: center;
-            scroll-behavior: smooth; /* اسکرول نرم */
+            background: var(--input-bg); border-radius: 16px; padding: 20px; max-height: 350px; overflow-y: auto;
+            white-space: pre-wrap; line-height: 2; font-size: 1rem; color: #4a5568; text-align: center; border: 1px solid var(--input-border); margin-top: 15px;
+            scroll-behavior: smooth;
         }
         
-        /* استایل خطوط متن */
-        .lyric-line {
-            margin: 0;
-            padding: 8px 0;
-            font-size: 1rem;
-            color: #4a5568; /* رنگ خاکستری تیره اصلی */
-            transition: all 0.3s ease;
-            cursor: default;
-            line-height: 1.8;
-            font-weight: 400;
-        }
+        /* استایل تگ‌های انگلیسی */
+        .lyrics-tag { color: var(--accent-primary); font-weight: 800; display: block; margin-top: 20px; margin-bottom: 5px; font-size: 0.9em; letter-spacing: 1px; text-transform: uppercase; }
         
         /* استایل خط فعال */
         .lyric-line.active {
-            color: var(--accent-primary); /* آبی اصلی */
-            font-weight: 800; /* بولد */
-            transform: scale(1.05); /* کمی بزرگتر */
-            background: rgba(74, 108, 250, 0.05); /* پس زمینه خیلی محو */
-            border-radius: 8px;
+            color: var(--accent-primary);
+            font-weight: 800;
         }
 
-        /* لودر */
         #loader { display: none; text-align: center; padding: 20px; }
         .wave-bars { display: flex; justify-content: center; gap: 4px; height: 30px; align-items: flex-end; }
         .bar { width: 5px; background: var(--accent-primary); animation: jump 1s infinite; border-radius: 2px; }
@@ -214,7 +189,6 @@
         .bar:nth-child(4) { animation-delay: 0.3s; height: 50%; }
         @keyframes jump { 0%, 100% { height: 20%; } 50% { height: 100%; } }
 
-        /* --- استایل‌های تاریخچه و حذف --- */
         #historySection { margin-top: 30px; width: 100%; }
         .history-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
         .history-list { display: grid; gap: 12px; }
@@ -239,7 +213,6 @@
         .history-card:hover .h-delete { opacity: 1; transform: scale(1); }
         .h-delete:hover { background: var(--danger-color); color: white; transform: scale(1.1); }
 
-        /* مودال‌ها */
         .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
             background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
@@ -265,7 +238,6 @@
         .btn-confirm { background: var(--danger-color); color: white; box-shadow: 0 5px 15px rgba(229, 62, 62, 0.3); }
         .btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4); }
 
-        /* مودال ارتقا */
         @keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }
         .upgrade-icon { 
             width: 70px; height: 70px; 
@@ -391,7 +363,6 @@
 
     <script>
         const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
-        // مشخصات نسخه پولی
         const PREMIUM_PAGE_ID = '1149636';
         const PREMIUM_URL = '#/nav/online/news/getSingle/1149636/eyJpdiI6InZSVUdlLzBlR0FzOHZJdXFZeWhER0E9PSIsInZhbHVlIjoiWFhqRXBLc29vSFpHdk9nYmRjZGVuWHRHRHVSZHRlTG1BUENLaE5mNXBNVVRGWFg3ZWN0djJ5K1dIY1RqTHJGaCIsIm1hYyI6IjIzYzFlZTMwYmVmMTdkYjQ0YTQ4YWMxNmFhN2RmNWQ2OTU0MjI0ZWVlZGI3ZjJjMjhkNmQxNjM4MDFlZTIxNmUiLCJ0YWciOiIifQ==/20934991';
 
@@ -399,7 +370,6 @@
         let songToDeleteId = null;
         let userSubscriptionStatus = 'free'; 
 
-        // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
@@ -416,8 +386,6 @@
         const statusBadge = document.getElementById('statusBadge');
         const upgradeModalTitle = document.getElementById('upgradeModalTitle');
         const upgradeModalText = document.getElementById('upgradeModalText');
-        
-        // المان‌های جدید
         const audioInput = document.getElementById('audioInput');
         const instrumentalChk = document.getElementById('instrumental_chk');
 
@@ -453,7 +421,6 @@
             if (status === 'paid') {
                 statusBadge.textContent = 'نسخه نامحدود';
                 statusBadge.className = 'status-badge visible badge-premium';
-                mainDownloadBtn.classList.remove('locked');
             } else {
                 statusBadge.textContent = 'نسخه رایگان';
                 statusBadge.className = 'status-badge visible badge-free';
@@ -476,17 +443,12 @@
 
         function handleSecureDownload(url, e) {
             if (e) e.preventDefault();
-            
             if (userSubscriptionStatus === 'free') {
                 upgradeModalTitle.innerText = "دانلود مخصوص اعضای ویژه";
-                upgradeModalText.innerText = "برای دانلود آهنگ‌های ساخته شده با کیفیت اصلی و بدون محدودیت، لطفا حساب کاربری خود را به نسخه نامحدود ارتقا دهید.";
+                upgradeModalText.innerText = "برای دانلود آهنگ‌های ساخته شده با کیفیت اصلی، لطفا حساب خود را ارتقا دهید.";
                 upgradeModal.classList.add('open');
             } else {
-                parent.postMessage({ 
-                    type: 'INITIATE_DOWNLOAD_FROM_URL', 
-                    payload: { audioUrl: url } 
-                }, '*');
-                
+                parent.postMessage({ type: 'INITIATE_DOWNLOAD_FROM_URL', payload: { audioUrl: url } }, '*');
                 const btn = e ? e.target.closest('button') : null;
                 if(btn) {
                     const originalText = btn.innerHTML;
@@ -497,17 +459,11 @@
         }
 
         document.getElementById('btnGoPremium').addEventListener('click', () => {
-            parent.postMessage({ 
-                type: 'NAVIGATE_TO_PREMIUM', 
-                payload: { url: PREMIUM_URL } 
-            }, '*');
+            parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM', payload: { url: PREMIUM_URL } }, '*');
         });
 
-        function closeUpgradeModal() {
-            upgradeModal.classList.remove('open');
-        }
+        function closeUpgradeModal() { upgradeModal.classList.remove('open'); }
 
-        // --- مدیریت دیتابیس ---
         function initDB() {
             const request = indexedDB.open("alphaMusicDB", 1);
             request.onerror = (event) => console.error("IndexedDB error:", event);
@@ -519,20 +475,19 @@
             try {
                 const response = await fetch(audioUrl);
                 const audioBlob = await response.blob();
-                
                 const newItem = {
                     id: Date.now(), idea, lyrics, audioBlob, lrcData,
                     date: new Date().toLocaleDateString('fa-IR', { hour: '2-digit', minute: '2-digit' })
                 };
-                const transaction = db.transaction(["songs"], "readwrite");
-                const store = transaction.objectStore("songs");
+                const tx = db.transaction(["songs"], "readwrite");
+                const store = tx.objectStore("songs");
                 store.add(newItem);
                 
                 const countReq = store.count();
                 countReq.onsuccess = () => {
                     if (countReq.result > 10) store.openCursor().onsuccess = (e) => { if(e.target.result) e.target.result.delete(); };
                 };
-                transaction.oncomplete = () => loadHistory();
+                tx.oncomplete = () => loadHistory();
             } catch (error) { console.error("Error saving:", error); }
         }
 
@@ -584,10 +539,9 @@
 
         function confirmDelete() {
             if (songToDeleteId && db) {
-                const transaction = db.transaction(["songs"], "readwrite");
-                const store = transaction.objectStore("songs");
-                store.delete(songToDeleteId);
-                transaction.oncomplete = () => {
+                const tx = db.transaction(["songs"], "readwrite");
+                tx.objectStore("songs").delete(songToDeleteId);
+                tx.oncomplete = () => {
                     loadHistory();
                     closeDeleteModal();
                 };
@@ -617,7 +571,6 @@
         
         initDB();
 
-        // --- آپلود فایل به گرادیو ---
         async function uploadFileToGradio(file) {
             const formData = new FormData();
             formData.append('files', file);
@@ -632,18 +585,13 @@
             return data[0]; 
         }
 
-        // --- تابع کمکی برای درخواست به Gradio ---
         async function runGradioFunction(fnIndex, payloadData) {
             const session_hash = Math.random().toString(36).substring(2);
             
             const joinResp = await fetch(`${ACE_SPACE_URL}gradio_api/queue/join`, { 
                 method: 'POST', 
                 headers: { 'Content-Type': 'application/json' }, 
-                body: JSON.stringify({ 
-                    data: payloadData, 
-                    fn_index: fnIndex, 
-                    session_hash 
-                }) 
+                body: JSON.stringify({ data: payloadData, fn_index: fnIndex, session_hash }) 
             });
 
             if (!joinResp.ok) throw new Error(`Gradio Call Failed: ${fnIndex}`);
@@ -656,8 +604,6 @@
                     if (msg.msg === 'process_completed') {
                         eventSource.close();
                         resolve(msg.output);
-                    } else if (msg.msg === 'close') {
-                         eventSource.close();
                     }
                 };
                 
@@ -668,7 +614,6 @@
             });
         }
 
-        // --- فرآیند اصلی ---
         processBtn.addEventListener('click', async () => {
             if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
             
@@ -681,7 +626,6 @@
                 let uploadedAudioPath = null;
                 const isInstrumental = instrumentalChk.checked;
 
-                // 1. آپلود فایل در صورت وجود
                 if (audioInput.files.length > 0) {
                     loaderText.innerText = "در حال آپلود فایل نمونه...";
                     uploadedAudioPath = await uploadFileToGradio(audioInput.files[0]);
@@ -690,50 +634,31 @@
                 let lyrics = "";
                 let musicPrompt = ideaInput.value;
 
-                // 2. تولید متن و پرامپت (اگر بی‌کلام نباشد)
                 if (!isInstrumental) {
                     loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
                     
                     const response = await fetch('/api/refine', { 
                         method: 'POST', 
                         headers: {'Content-Type': 'application/json'}, 
-                        body: JSON.stringify({ 
-                            idea: ideaInput.value,
-                            fingerprint: getFingerprint(),
-                            is_premium: userSubscriptionStatus === 'paid'
-                        }) 
+                        body: JSON.stringify({ idea: ideaInput.value, fingerprint: getFingerprint(), is_premium: userSubscriptionStatus === 'paid' }) 
                     });
 
-                    if (response.status === 429) {
-                        throw { isLimit: true };
-                    }
-
+                    if (response.status === 429) throw { isLimit: true };
                     const data = await response.json();
                     if (data.error) throw new Error(data.error);
-
                     lyrics = data.lyrics;
                     musicPrompt = data.music_prompt;
                 } else {
-                    loaderText.innerText = "تنظیم آهنگ بی‌کلام...";
                     lyrics = ""; 
                 }
 
-                // 3. ساخت آهنگ (فانکشن 77)
                 loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
                 
                 const genPayload = [
-                    getVal('model_select'), 
-                    "custom", 
-                    uploadedAudioPath, 
-                    "unknown", 
-                    musicPrompt, 
-                    lyrics, 
-                    0, "", "", "unknown", 
+                    getVal('model_select'), "custom", uploadedAudioPath, "unknown", musicPrompt, lyrics, 0, "", "", "unknown", 
                     getNum('steps_input'), getNum('cfg_input'), true, getNum('seed_input'), null, -1, 
                     getNum('batch_size'), null, null, 0, -1, "Fill the audio semantic mask based on the given conditions:", 
-                    1, 
-                    uploadedAudioPath ? "audio2music" : "text2music", 
-                    false, 0, 1, 3, "ode", "", "mp3", 0.85, 
+                    1, uploadedAudioPath ? "audio2music" : "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85, 
                     getChk('think_checkbox'), 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
                 ];
 
@@ -742,22 +667,19 @@
                 
                 if(!audioFileObj) throw new Error("Audio generation failed");
 
-                // 4. دریافت LRC (سینک کردن) - فانکشن 84 طبق لاگ شما
-                // لاگ شما نشان داد فانکشن 84 فایل VTT تولید میکند
                 let lrcData = null;
                 if (!isInstrumental) {
                     loaderText.innerText = "در حال هماهنگ‌سازی متن و آهنگ...";
                     try {
                         const lrcOutput = await runGradioFunction(84, [audioFileObj]);
-                        if (lrcOutput && lrcOutput.data && lrcOutput.data[0]) {
-                            // دریافت محتوای فایل VTT
+                        if (lrcOutput && lrcOutput.data && lrcOutput.data[0] && lrcOutput.data[0].path) {
                             const vttFile = lrcOutput.data[0];
-                            const vttUrl = vttFile.url ? vttFile.url : `${ACE_SPACE_URL}gradio_api/file=${vttFile.path}`;
+                            const vttUrl = vttFile.url || `${ACE_SPACE_URL.replace(/\/$/,'')}/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);
+                        console.warn("LRC generation failed, using plain lyrics.", e);
                     }
                 }
 
@@ -767,7 +689,7 @@
             } catch (e) {
                 if (e.isLimit) {
                     upgradeModalTitle.innerText = "محدودیت ساخت روزانه";
-                    upgradeModalText.innerText = "شما به سقف ۵ آهنگ رایگان در روز رسیده‌اید. برای ساخت آهنگ‌های بیشتر و نامحدود، لطفا حساب خود را ارتقا دهید.";
+                    upgradeModalText.innerText = "شما به سقف ۵ آهنگ رایگان در روز رسیده‌اید. برای ساخت نامحدود، حساب خود را ارتقا دهید.";
                     upgradeModal.classList.add('open');
                 } else {
                     alert("خطا: " + e.message);
@@ -782,6 +704,7 @@
         function findAudioFile(data) {
             let found = null;
             function traverse(obj) {
+                if (found) return;
                 if (obj && typeof obj === 'object') {
                     if (obj.url && (obj.url.endsWith('.mp3') || obj.url.endsWith('.wav'))) {
                         found = obj;
@@ -810,23 +733,27 @@
             
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
+        
+        // --- توابع پردازش متن و زمانبندی ---
+        function formatLyricsHTML(text) {
+             return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
+        }
 
-        // --- پارسر VTT ---
         function parseVTT(vttText) {
             const lines = [];
-            // 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 regex = /(\d{2}:\d{2}:\d{2}\.\d{3})\s-->\s(\d{2}:\d{2}:\d{2}\.\d{3})((.|\n)*)/;
             
             const blocks = vttText.split('\n\n');
             for(let block of blocks) {
-                const match = block.match(regex);
-                if(match) {
-                    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 });
-                    }
+                if(block.includes('-->')) {
+                     const parts = block.split('\n');
+                     const timeMatch = parts[0].match(/(\d{2}:\d{2}:\d{2}\.\d{3})\s-->\s(\d{2}:\d{2}:\d{2}\.\d{3})/);
+                     if(timeMatch) {
+                        const startTime = timeToSeconds(timeMatch[1]);
+                        const endTime = timeToSeconds(timeMatch[2]);
+                        const text = parts.slice(1).join('\n').trim();
+                        if (text) lines.push({ startTime, endTime, text });
+                     }
                 }
             }
             return lines;
@@ -847,15 +774,14 @@
             audio.src = audioSrc;
             playerWrapper.appendChild(audio);
 
-            // اگر دیتای VTT موجود باشد (سینک شده)
             if (lrcData && typeof lrcData === 'string' && lrcData.includes('WEBVTT')) {
                 const parsedLyrics = parseVTT(lrcData);
                 
                 parsedLyrics.forEach((line, index) => {
-                    const p = document.createElement('p');
+                    const p = document.createElement('div');
                     p.className = 'lyric-line';
                     p.id = `line-${index}`;
-                    p.innerText = line.text;
+                    p.innerHTML = formatLyricsHTML(line.text.replace(/\n/g, '<br>'));
                     finalLyricsBox.appendChild(p);
                 });
 
@@ -863,7 +789,6 @@
                     const currentTime = audio.currentTime;
                     let activeIndex = -1;
 
-                    // پیدا کردن خطی که در بازه زمانی فعلی است
                     for (let i = 0; i < parsedLyrics.length; i++) {
                         if (currentTime >= parsedLyrics[i].startTime && currentTime < parsedLyrics[i].endTime) {
                             activeIndex = i;
@@ -883,17 +808,10 @@
                 });
 
             } 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.innerText = line;
-                        finalLyricsBox.appendChild(p);
-                     });
+                     finalLyricsBox.innerHTML = formatLyricsHTML(rawLyrics);
                 } else {
-                    finalLyricsBox.innerHTML = '<span style="color:#a0aec0; display:block; padding-top:100px;">(متن آهنگی موجود نیست یا آهنگ بی‌کلام است)</span>';
+                    finalLyricsBox.innerHTML = '<div style="color:#a0aec0; padding-top:100px;">(متن آهنگی موجود نیست)</div>';
                 }
             }
         }