Update index.html

index.html

@@ -100,14 +100,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%; }
-            100% { background-position: 0% 50%; }
-        }
+        @keyframes move-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
         .btn-main { 
             width: 100%; padding: 16px; 
             background: linear-gradient(110deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary));
@@ -128,10 +122,7 @@
         .btn-main:hover::before { opacity: 1; animation: move-gradient 4s linear infinite; }
         .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); }
 
-        .btn-outline {
-            background: transparent; border: 2px solid var(--input-border);
-            color: var(--text-secondary); margin-top: 10px; transition: all 0.2s;
-        }
+        .btn-outline { background: transparent; border: 2px solid var(--input-border); color: var(--text-secondary); margin-top: 10px; transition: all 0.2s; }
         .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
 
         .accordion {
@@ -149,10 +140,16 @@
             margin-bottom: 0; border: 1px solid var(--input-border); border-top: none;
         }
         .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px 0; }
-        .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
-        .checkbox-wrapper:last-child { border-bottom: none; }
+        .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding-bottom: 15px; border-top: 1px solid #e2e8f0; padding-top: 15px; }
         .settings-group label { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 6px; font-weight: 500; }
 
+        /* استایل آپلود فایل */
+        .file-input-wrapper { display: flex; align-items: center; gap: 10px; width: 100%; }
+        .btn-file-upload { background: #fff; border: 1px solid var(--input-border); border-radius: 10px; padding: 10px 15px; font-size: 0.9rem; cursor: pointer; transition: 0.2s; flex-shrink: 0; }
+        .btn-file-upload:hover { background: #f0f4ff; border-color: var(--accent-primary); color: var(--accent-primary); }
+        #file-name-display { flex-grow: 1; text-align: right; font-size: 0.85rem; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        #clear-file-btn { background: #fee2e2; color: var(--danger-color); border: none; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-weight: bold; flex-shrink: 0; }
+        
         .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 {
@@ -163,23 +160,24 @@
         .download-btn-style.locked { background-color: #f1f5f9; color: #94a3b8; }
         .download-btn-style.locked:hover { background-color: #e2e8f0; }
 
-        audio { width: 100%; height: 50px; border-radius: 25px; margin-top: 5px; }
-        
-        /* استایل باکس لیریک (برگشت به حالت اول) */
+        .audio-item { margin-bottom: 10px; }
+        audio { width: 100%; height: 45px; border-radius: 20px; margin-top: 5px; }
+
+        /* استایل متن آهنگ کارائوکه */
         .lyrics-container {
             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;
+            text-align: center; border: 1px solid var(--input-border); margin-top: 15px;
         }
-        
-        /* استایل تگ‌های انگلیسی */
-        .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;
+        .lyrics-line {
+            font-size: 1.1rem; line-height: 1.8; color: #626F86;
+            transition: all 0.3s ease; padding: 8px 12px; border-radius: 10px;
+            opacity: 0.6; cursor: default;
+        }
+        .lyrics-line.active {
+            background-color: var(--accent-glow); color: var(--accent-primary);
+            transform: scale(1.05); font-weight: 800; opacity: 1;
         }
+        .lyrics-tag { color: var(--accent-secondary); font-weight: 700; display: block; margin-top: 15px; font-size: 0.8em; }
 
         #loader { display: none; text-align: center; padding: 20px; }
         .wave-bars { display: flex; justify-content: center; gap: 4px; height: 30px; align-items: flex-end; }
@@ -203,10 +201,8 @@
         .h-details span { font-size: 0.8rem; color: var(--text-secondary); }
         
         .h-delete {
-            position: absolute; left: 15px; 
-            background: #fee2e2; color: var(--danger-color);
-            width: 38px; height: 38px; border-radius: 50%;
-            display: flex; align-items: center; justify-content: center;
+            position: absolute; left: 15px; background: #fee2e2; color: var(--danger-color);
+            width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             opacity: 0; transform: scale(0.8); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             z-index: 10; box-shadow: 0 4px 10px rgba(229, 62, 62, 0.2);
         }
@@ -240,20 +236,13 @@
 
         @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; 
-            background: var(--premium-gradient);
+            width: 70px; height: 70px; background: var(--premium-gradient);
             border-radius: 50%; color: white; margin: 0 auto 20px; 
             display: flex; align-items: center; justify-content: center; 
             font-size: 2rem; animation: pulse-gold 2s infinite; 
         }
-        .btn-upgrade { 
-            background: var(--premium-gradient); color: #333; 
-            box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3); 
-        }
-        .btn-upgrade:hover { 
-            transform: translateY(-2px); 
-            box-shadow: 0 8px 25px rgba(255, 193, 7, 0.5); 
-        }
+        .btn-upgrade { background: var(--premium-gradient); color: #333; box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3); }
+        .btn-upgrade:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 193, 7, 0.5); }
 
         .modal-overlay.open { display: flex; opacity: 1; }
         .modal-overlay.open .modal-box { transform: scale(1); }
@@ -287,22 +276,23 @@
                     <div class="settings-group"><label>تعداد گام (Steps):</label><input type="number" id="steps_input" value="20" min="4" max="50"></div>
                     <div class="settings-group"><label>سید (Seed) تصادفی=-1:</label><input type="number" id="seed_input" value="-1"></div>
                     <div class="settings-group"><label>مقیاس هدایت (CFG):</label><input type="number" id="cfg_input" value="7.0" step="0.5"></div>
+                    <!-- المان جدید آپلود فایل -->
+                    <div class="settings-group" style="grid-column: 1 / -1;">
+                        <label>آهنگ نمونه (برای الهام گرفتن مدل):</label>
+                        <div class="file-input-wrapper">
+                            <input type="file" id="audio_condition_input" accept="audio/*" style="display:none;">
+                            <button type="button" class="btn-file-upload" onclick="document.getElementById('audio_condition_input').click();">انتخاب فایل صوتی</button>
+                            <span id="file-name-display">فایلی انتخاب نشده</span>
+                            <button id="clear-file-btn" style="display:none;">&times;</button>
+                        </div>
+                    </div>
                 </div>
-
-                <div class="settings-group" style="margin-bottom: 15px;">
-                    <label>نمونه صدا (Audio Conditioning):</label>
-                    <input type="file" id="audioInput" accept="audio/*">
-                    <div style="font-size: 0.75rem; color: #666; margin-top: 4px;">آپلود یک فایل صوتی برای الهام گرفتن ریتم و ملودی (اختیاری)</div>
-                </div>
-
                 <div class="checkbox-wrapper">
-                    <input type="checkbox" id="instrumental_chk">
-                    <label for="instrumental_chk" style="font-size: 0.9rem; cursor: pointer;"><b>آهنگ بی‌کلام (Instrumental)</b><br><span style="font-size: 0.8rem; color: #666;">بدون خواننده، فقط موسیقی</span></label>
+                    <input type="checkbox" id="think_checkbox" checked><label for="think_checkbox" style="font-size: 0.9rem; cursor: pointer;"><b>فعال‌سازی تفکر مدل</b><br><span style="font-size: 0.8rem; color: #666;">افزایش کیفیت آهنگ</span></label>
                 </div>
-
-                <div class="checkbox-wrapper">
-                    <input type="checkbox" id="think_checkbox" checked>
-                    <label for="think_checkbox" style="font-size: 0.9rem; cursor: pointer;"><b>فعال‌سازی تفکر مدل</b><br><span style="font-size: 0.8rem; color: #666;">افزایش کیفیت آهنگ</span></label>
+                <!-- چک‌باکس جدید بی‌کلام -->
+                <div class="checkbox-wrapper" style="border-top: none; padding-top: 0;">
+                    <input type="checkbox" id="instrumental_checkbox"><label for="instrumental_checkbox" style="font-size: 0.9rem; cursor: pointer;"><b>ساخت آهنگ بی‌کلام (Instrumental)</b><br><span style="font-size: 0.8rem; color: #666;">شعر ساخته نخواهد شد</span></label>
                 </div>
             </div>
             <button id="processBtn" class="btn-main" style="margin-top: 15px;"><div class="btn-main-content">ساخت آهنگ <span>🎵</span></div></button>
@@ -319,8 +309,10 @@
                 <button id="mainDownloadBtn" class="download-btn-style">دانلود آهنگ 📥</button>
             </div>
             <div id="playerWrapper"></div>
-            <div class="form-label" style="margin-top: 20px; justify-content: center; color: #718096;">متن آهنگ</div>
-            <div class="lyrics-container" id="finalLyricsBox"></div>
+            <div id="lyricsSection" style="display: block;">
+                <div class="form-label" style="margin-top: 20px; justify-content: center; color: #718096;">متن آهنگ</div>
+                <div class="lyrics-container" id="finalLyricsBox"></div>
+            </div>
             <button onclick="location.reload()" class="btn-main btn-outline">برگشت و ساخت آهنگ جدید</button>
         </div>
 
@@ -333,14 +325,14 @@
         </div>
     </div>
 
-    <!-- مودال تایید حذف -->
+    <!-- مودال‌ها -->
     <div class="modal-overlay" id="deleteConfirmModal">
         <div class="modal-box">
             <div class="modal-icon-warn">
                 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
             </div>
             <h3>آیا مطمئن هستید؟</h3>
-            <p>این آهنگ برای همیشه از سوابق شما حذف خواهد شد و قابل بازگشت نیست.</p>
+            <p>این آهنگ برای همیشه از سوابق شما حذف خواهد شد.</p>
             <div class="modal-actions">
                 <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">انصراف</button>
                 <button class="btn-modal btn-confirm" onclick="confirmDelete()">بله، حذف شود</button>
@@ -348,12 +340,11 @@
         </div>
     </div>
 
-    <!-- مودال ارتقا به نسخه کامل -->
     <div class="modal-overlay" id="upgradeModal">
         <div class="modal-box">
             <div class="upgrade-icon">👑</div>
-            <h3 style="font-weight: 800; color: #333;" id="upgradeModalTitle">دانلود مخصوص اعضای ویژه</h3>
-            <p style="margin-bottom: 25px; line-height: 1.6;" id="upgradeModalText">برای دانلود آهنگ‌های ساخته شده با کیفیت اصلی و بدون محدودیت، لطفا حساب کاربری خود را به نسخه نامحدود ارتقا دهید.</p>
+            <h3 style="font-weight: 800; color: #333;" id="upgradeModalTitle">ارتقا به نسخه کامل</h3>
+            <p style="margin-bottom: 25px; line-height: 1.6;" id="upgradeModalText">برای استفاده نامحدود و دانلود با کیفیت اصلی، حساب خود را ارتقا دهید.</p>
             <div class="modal-actions" style="flex-direction: column;">
                 <button class="btn-modal btn-upgrade" id="btnGoPremium">⭐️ ارتقا به نسخه کامل</button>
                 <button class="btn-modal btn-cancel" onclick="closeUpgradeModal()" style="width: 100%;">فعلاً نه</button>
@@ -364,12 +355,12 @@
     <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';
-
+        const PREMIUM_URL = '#/nav/online/news/getSingle/1149636/...'; //
         let db;
         let songToDeleteId = null;
-        let userSubscriptionStatus = 'free'; 
+        let userSubscriptionStatus = 'free';
 
+        // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
@@ -386,8 +377,11 @@
         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');
+        const audioConditionInput = document.getElementById('audio_condition_input');
+        const fileNameDisplay = document.getElementById('file-name-display');
+        const clearFileBtn = document.getElementById('clear-file-btn');
+        const instrumentalCheckbox = document.getElementById('instrumental_checkbox');
+        const lyricsSection = document.getElementById('lyricsSection');
 
         const getVal = (id) => document.getElementById(id).value;
         const getNum = (id) => Number(document.getElementById(id).value);
@@ -401,7 +395,7 @@
                 panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px";
             });
         }
-
+        
         function getFingerprint() {
             let fp = localStorage.getItem('user_fingerprint');
             if (!fp) {
@@ -411,12 +405,8 @@
             return fp;
         }
 
-        function isUserPaid(userObject) {
-            return userObject && userObject.isLogin && userObject.accessible_pages && 
-                   (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) || 
-                    userObject.accessible_pages.includes(parseInt(PREMIUM_PAGE_ID)));
-        }
-
+        // --- مدیریت اشتراک ---
+        function isUserPaid(userObject) { return userObject && userObject.isLogin && userObject.accessible_pages && (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) || userObject.accessible_pages.includes(parseInt(PREMIUM_PAGE_ID))); }
         function updateSubscriptionUI(status) {
             if (status === 'paid') {
                 statusBadge.textContent = 'نسخه نامحدود';
@@ -426,192 +416,118 @@
                 statusBadge.className = 'status-badge visible badge-free';
             }
         }
-
         window.addEventListener('message', (event) => {
             if (event.data && event.data.type === 'USER_STATUS_RESPONSE') {
-                try {
-                    const userObject = JSON.parse(event.data.payload);
-                    userSubscriptionStatus = isUserPaid(userObject) ? 'paid' : 'free';
-                } catch (e) {
-                    userSubscriptionStatus = 'free';
-                }
+                userSubscriptionStatus = isUserPaid(JSON.parse(event.data.payload)) ? 'paid' : 'free';
                 updateSubscriptionUI(userSubscriptionStatus);
             }
         });
-
         parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*');
-
+        
+        // --- مدیریت مودال‌ها و دانلود ---
         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 } }, '*');
-                const btn = e ? e.target.closest('button') : null;
-                if(btn) {
-                    const originalText = btn.innerHTML;
-                    btn.innerHTML = 'در حال ارسال... ⏳';
-                    setTimeout(() => { btn.innerHTML = originalText; }, 2000);
-                }
             }
         }
-
-        document.getElementById('btnGoPremium').addEventListener('click', () => {
-            parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM', payload: { url: PREMIUM_URL } }, '*');
-        });
-
+        document.getElementById('btnGoPremium').addEventListener('click', () => { parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM', payload: { url: PREMIUM_URL } }, '*'); });
         function closeUpgradeModal() { upgradeModal.classList.remove('open'); }
-
+        function closeDeleteModal() { deleteModal.classList.remove('open'); songToDeleteId = null; }
+        deleteModal.addEventListener('click', (e) => { if (e.target === deleteModal) closeDeleteModal(); });
+        upgradeModal.addEventListener('click', (e) => { if (e.target === upgradeModal) closeUpgradeModal(); });
+        
+        // --- مدیریت دیتابیس IndexedDB ---
         function initDB() {
             const request = indexedDB.open("alphaMusicDB", 1);
-            request.onerror = (event) => console.error("IndexedDB error:", event);
-            request.onsuccess = (event) => { db = event.target.result; loadHistory(); };
-            request.onupgradeneeded = (event) => { event.target.result.createObjectStore("songs", { keyPath: "id" }); };
+            request.onerror = (e) => console.error("DB error:", e);
+            request.onsuccess = (e) => { db = e.target.result; loadHistory(); };
+            request.onupgradeneeded = (e) => { e.target.result.createObjectStore("songs", { keyPath: "id" }); };
         }
-
-        async function saveToHistory(idea, lyrics, audioUrl, lrcData = null) {
+        async function saveToHistory(idea, lyrics, audioUrl, vttUrl) {
             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 tx = db.transaction(["songs"], "readwrite");
-                const store = tx.objectStore("songs");
+                let vttContent = "";
+                if (vttUrl) {
+                    const vttResponse = await fetch(vttUrl);
+                    vttContent = await vttResponse.text();
+                }
+                const newItem = { id: Date.now(), idea, lyrics, audioBlob, vttContent, date: new Date().toLocaleDateString('fa-IR', { hour: '2-digit', minute: '2-digit' }) };
+                const transaction = db.transaction(["songs"], "readwrite");
+                const store = transaction.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(); };
-                };
-                tx.oncomplete = () => loadHistory();
+                transaction.oncomplete = () => loadHistory();
             } catch (error) { console.error("Error saving:", error); }
         }
-
         function loadHistory() {
             if (!db) return;
-            const store = db.transaction(["songs"], "readonly").objectStore("songs");
-            store.getAll().onsuccess = (e) => {
-                const history = e.target.result.sort((a, b) => b.id - a.id);
-                historyList.innerHTML = '';
-                if (history.length === 0) {
-                    historyList.innerHTML = '<div style="text-align:center; color:#999; padding:20px;">هنوز آهنگی نساخته‌اید</div>';
-                    return;
-                }
-                history.forEach((item) => {
+            db.transaction(["songs"],"readonly").objectStore("songs").getAll().onsuccess = (e) => {
+                const history = e.target.result.sort((a,b) => b.id - a.id);
+                historyList.innerHTML = history.length === 0 ? '<div style="text-align:center; color:#999; padding:20px;">هنوز آهنگی نساخته‌اید</div>' : '';
+                history.forEach(item => {
                     const div = document.createElement('div');
                     div.className = 'history-card';
-                    div.innerHTML = `
-                        <div class="h-info">
-                            <div class="h-icon">🎵</div>
-                            <div class="h-details">
-                                <h4>${item.idea.substring(0, 30)}${item.idea.length > 30 ? '...' : ''}</h4>
-                                <span>${item.date}</span>
-                            </div>
-                        </div>
-                        <div class="h-delete" onclick="askToDelete(event, ${item.id})">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
-                        </div>
-                    `;
-                    div.onclick = (e) => {
-                        if (!e.target.closest('.h-delete')) {
-                            openHistoryItem(item);
-                        }
-                    };
+                    div.innerHTML = `<div class="h-info"><div class="h-icon">🎵</div><div class="h-details"><h4>${item.idea.substring(0, 30)}${item.idea.length > 30 ? '...' : ''}</h4><span>${item.date}</span></div></div><div class="h-delete" onclick="askToDelete(event, ${item.id})"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg></div>`;
+                    div.onclick = (ev) => { if (!ev.target.closest('.h-delete')) openHistoryItem(item); };
                     historyList.appendChild(div);
                 });
             };
         }
-
-        function askToDelete(event, id) {
-            event.stopPropagation();
-            songToDeleteId = id;
-            deleteModal.classList.add('open');
-        }
-
-        function closeDeleteModal() {
-            deleteModal.classList.remove('open');
-            songToDeleteId = null;
-        }
-
+        function askToDelete(event, id) { event.stopPropagation(); songToDeleteId = id; deleteModal.classList.add('open'); }
         function confirmDelete() {
             if (songToDeleteId && db) {
-                const tx = db.transaction(["songs"], "readwrite");
-                tx.objectStore("songs").delete(songToDeleteId);
-                tx.oncomplete = () => {
-                    loadHistory();
-                    closeDeleteModal();
-                };
+                const transaction = db.transaction(["songs"], "readwrite");
+                transaction.objectStore("songs").delete(songToDeleteId);
+                transaction.oncomplete = () => { loadHistory(); closeDeleteModal(); };
             }
         }
-
-        deleteModal.addEventListener('click', (e) => { if (e.target === deleteModal) closeDeleteModal(); });
-        upgradeModal.addEventListener('click', (e) => { if (e.target === upgradeModal) closeUpgradeModal(); });
-
         function openHistoryItem(item) {
-            step1.style.display = 'none';
-            historySection.style.display = 'none';
-            
+            step1.style.display = 'none'; historySection.style.display = 'none';
             const audioURL = URL.createObjectURL(item.audioBlob);
-            const headerText = document.getElementById('resultHeaderText');
-            headerText.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> آهنگ آرشیو شده`;
-            headerText.style.color = 'var(--accent-primary)';
-
-            mainDownloadBtn.style.display = 'inline-flex';
+            document.getElementById('resultHeaderText').innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> آهنگ آرشیو شده`;
             mainDownloadBtn.onclick = (e) => handleSecureDownload(audioURL, e);
-
-            setupPlayerWithLyrics(audioURL, item.lrcData || null, item.lyrics);
-            
-            finalResult.style.display = 'block';
-            window.scrollTo({ top: 0, behavior: 'smooth' });
+            const audioEl = document.createElement('audio');
+            audioEl.controls = true; audioEl.autoplay = true; audioEl.src = audioURL;
+            playerWrapper.innerHTML = ''; playerWrapper.appendChild(audioEl);
+            if (item.vttContent) {
+                lyricsSection.style.display = 'block';
+                displayKaraokeLyrics(item.vttContent, audioEl);
+            } else {
+                lyricsSection.style.display = 'none';
+            }
+            finalResult.style.display = 'block'; window.scrollTo({ top: 0, behavior: 'smooth' });
         }
-        
         initDB();
 
-        async function uploadFileToGradio(file) {
-            const formData = new FormData();
-            formData.append('files', file);
-            
-            const response = await fetch(`${ACE_SPACE_URL}gradio_api/upload`, {
-                method: 'POST',
-                body: formData
-            });
-            
-            if (!response.ok) throw new Error("Upload failed");
-            const data = await response.json();
-            return data[0]; 
-        }
-
-        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 }) 
-            });
-
-            if (!joinResp.ok) throw new Error(`Gradio Call Failed: ${fnIndex}`);
+        // --- مدیریت آپلود و حالت بی‌کلام ---
+        audioConditionInput.addEventListener('change', () => {
+            if (audioConditionInput.files.length > 0) {
+                fileNameDisplay.textContent = audioConditionInput.files[0].name;
+                clearFileBtn.style.display = 'inline-block';
+            }
+        });
+        clearFileBtn.addEventListener('click', () => {
+            audioConditionInput.value = '';
+            fileNameDisplay.textContent = 'فایلی انتخاب نشده';
+            clearFileBtn.style.display = 'none';
+        });
+        instrumentalCheckbox.addEventListener('change', (e) => {
+            ideaInput.placeholder = e.target.checked ? 'توضیحات آهنگ بی‌کلام (مثال: آرامش‌بخش، پیانو و ویولن)' : 'مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد...';
+        });
 
-            return new Promise((resolve, reject) => {
-                const eventSource = new EventSource(`${ACE_SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`);
-                
-                eventSource.onmessage = (event) => {
-                    const msg = JSON.parse(event.data);
-                    if (msg.msg === 'process_completed') {
-                        eventSource.close();
-                        resolve(msg.output);
-                    }
-                };
-                
-                eventSource.onerror = (err) => {
-                    eventSource.close();
-                    reject(new Error("Connection error during prediction"));
-                };
-            });
+        // --- فرآیند اصلی ---
+        async function uploadFile(file) {
+            const formData = new FormData();
+            formData.append("files", file);
+            const response = await fetch(`${ACE_SPACE_URL}gradio_api/upload`, { method: 'POST', body: formData });
+            if (!response.ok) throw new Error('خطا در آپلود فایل نمونه');
+            const result = await response.json();
+            return result[0]; // [ "/tmp/gradio/.../file.wav" ]
         }
 
         processBtn.addEventListener('click', async () => {
@@ -622,198 +538,198 @@
             historySection.style.display = 'none';
             loader.style.display = 'block';
             
-            try {
-                let uploadedAudioPath = null;
-                const isInstrumental = instrumentalChk.checked;
+            let audioConditionObj = null;
+            let lyrics = "";
+            let musicPrompt = "";
 
-                if (audioInput.files.length > 0) {
-                    loaderText.innerText = "در حال آپلود فایل نمونه...";
-                    uploadedAudioPath = await uploadFileToGradio(audioInput.files[0]);
+            try {
+                // مرحله ۱: آپلود فایل نمونه (در صورت وجود)
+                if (audioConditionInput.files.length > 0) {
+                    loaderText.innerText = "در حال آپلود آهنگ نمونه...";
+                    const file = audioConditionInput.files[0];
+                    const serverPath = await uploadFile(file);
+                    audioConditionObj = {
+                        path: serverPath,
+                        url: ACE_SPACE_URL + 'gradio_api/file=' + serverPath,
+                        orig_name: file.name,
+                        size: file.size,
+                        mime_type: file.type,
+                        meta: { _type: "gradio.FileData" }
+                    };
                 }
 
-                let lyrics = "";
-                let musicPrompt = ideaInput.value;
-
-                if (!isInstrumental) {
+                // مرحله ۲: آماده‌سازی متن و شعر
+                const isInstrumental = instrumentalCheckbox.checked;
+                if (isInstrumental) {
+                    lyrics = ""; // برای بی‌کلام، شعر خالی است
+                    musicPrompt = ideaInput.value + " ,instrumental"; // اضافه کردن کلمه بی‌کلام به پرامپت
+                } else {
                     loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
-                    
-                    const response = await fetch('/api/refine', { 
+                    const refineResponse = await fetch('/api/refine', { 
                         method: 'POST', 
                         headers: {'Content-Type': 'application/json'}, 
                         body: JSON.stringify({ idea: ideaInput.value, fingerprint: getFingerprint(), is_premium: userSubscriptionStatus === 'paid' }) 
                     });
 
-                    if (response.status === 429) throw { isLimit: true };
-                    const data = await response.json();
+                    if (refineResponse.status === 429) { // مدیریت محدودیت
+                         loader.style.display = 'none'; step1.style.display = 'block'; historySection.style.display = 'block'; processBtn.disabled = false;
+                         upgradeModalTitle.innerText = "محدودیت ساخت روزانه"; upgradeModalText.innerText = "شما به سقف ۵ آهنگ رایگان در روز رسیده‌اید. برای ساخت نامحدود، حساب خود را ارتقا دهید.";
+                         upgradeModal.classList.add('open');
+                         return;
+                    }
+                    const data = await refineResponse.json();
                     if (data.error) throw new Error(data.error);
                     lyrics = data.lyrics;
                     musicPrompt = data.music_prompt;
-                } else {
-                    lyrics = ""; 
                 }
-
-                loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
                 
-                const genPayload = [
-                    getVal('model_select'), "custom", uploadedAudioPath, "unknown", musicPrompt, lyrics, 0, "", "", "unknown", 
+                // مرحله ۳: ارسال درخواست اصلی ساخت آهنگ
+                loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
+                const payload = [
+                    getVal('model_select'), "custom", audioConditionObj, "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, "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
                 ];
 
-                const audioOutput = await runGradioFunction(77, genPayload);
-                const audioFileObj = findAudioFile(audioOutput);
-                
-                if(!audioFileObj) throw new Error("Audio generation failed");
-
-                let lrcData = null;
-                if (!isInstrumental) {
-                    loaderText.innerText = "در حال هماهنگ‌سازی متن و آهنگ...";
-                    try {
-                        const lrcOutput = await runGradioFunction(84, [audioFileObj]);
-                        if (lrcOutput && lrcOutput.data && lrcOutput.data[0] && lrcOutput.data[0].path) {
-                            const vttFile = lrcOutput.data[0];
-                            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);
-                    }
-                }
+                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: payload, fn_index: 77, session_hash }) });
+                if (!joinResp.ok) throw new Error('خطا در اتصال به سرور موزیک');
 
-                handleFinalResult(audioFileObj.url, lyrics, ideaInput.value, lrcData);
-                loader.style.display = 'none';
+                const eventSource = new EventSource(`${ACE_SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`);
+                eventSource.onmessage = (event) => {
+                    const msg = JSON.parse(event.data);
+                    if (msg.msg === 'process_starts') loaderText.innerText = "هوش مصنوعی در حال خواندن...";
+                    else if (msg.msg === 'process_completed') {
+                        eventSource.close();
+                        loader.style.display = 'none';
+                        handleAudioOutput(msg.output, lyrics, ideaInput.value);
+                    }
+                };
+                eventSource.onerror = () => { throw new Error('ارتباط با سرور قطع شد.'); };
 
             } catch (e) {
-                if (e.isLimit) {
-                    upgradeModalTitle.innerText = "محدودیت ساخت روزانه";
-                    upgradeModalText.innerText = "شما به سقف ۵ آهنگ رایگان در روز رسیده‌اید. برای ساخت نامحدود، حساب خود را ارتقا دهید.";
-                    upgradeModal.classList.add('open');
-                } else {
-                    alert("خطا: " + e.message);
-                }
-                loader.style.display = 'none';
-                step1.style.display = 'block';
-                historySection.style.display = 'block';
-                processBtn.disabled = false;
+                alert("خطا: " + e.message);
+                loader.style.display = 'none'; step1.style.display = 'block'; historySection.style.display = 'block'; processBtn.disabled = false;
             }
         });
+        
+        async function handleAudioOutput(data, lyrics, idea) {
+            let hasResult = false;
+            let audioUrl = null;
+            let vttUrl = null;
 
-        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;
-                        return;
+                if (typeof obj === 'string') {
+                    if (obj.includes('/file=') && obj.endsWith('.mp3')) {
+                        hasResult = true;
+                        audioUrl = obj.startsWith('http') ? obj : ACE_SPACE_URL.replace(/\/$/, '') + obj;
+                    }
+                    if (obj.includes('/file=') && obj.endsWith('.vtt')) {
+                        vttUrl = obj.startsWith('http') ? obj : ACE_SPACE_URL.replace(/\/$/, '') + obj;
                     }
+                } else if (obj && typeof obj === 'object') {
+                    if (obj.url && obj.url.endsWith('.mp3')) {
+                        hasResult = true; audioUrl = obj.url;
+                    }
+                    if (obj.url && obj.url.endsWith('.vtt')) { vttUrl = obj.url; }
                     Object.values(obj).forEach(traverse);
                 }
             }
             traverse(data);
-            return found;
-        }
-
-        function handleFinalResult(audioUrl, lyrics, idea, lrcData) {
-            const fullAudioUrl = audioUrl.startsWith('http') ? audioUrl : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
-            
-            const headerText = document.getElementById('resultHeaderText');
-            headerText.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>آهنگ جدید آماده شد`;
-            headerText.style.color = 'var(--success-color)';
-            
-            finalResult.style.display = 'block';
-            mainDownloadBtn.style.display = 'inline-flex';
-            mainDownloadBtn.onclick = (e) => handleSecureDownload(fullAudioUrl, e);
-            
-            setupPlayerWithLyrics(fullAudioUrl, lrcData, lyrics);
-            saveToHistory(idea, lyrics, fullAudioUrl, lrcData);
-            
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-        
-        // --- توابع پردازش متن و زمانبندی ---
-        function formatLyricsHTML(text) {
-             return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
-        }
 
-        function parseVTT(vttText) {
-            const lines = [];
-            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) {
-                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 });
-                     }
+            if (hasResult) {
+                document.getElementById('resultHeaderText').innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>آهنگ جدید آماده شد`;
+                mainDownloadBtn.onclick = (e) => handleSecureDownload(audioUrl, e);
+                saveToHistory(idea, lyrics, audioUrl, vttUrl);
+                
+                const audioEl = document.createElement('audio');
+                audioEl.controls = true; audioEl.autoplay = true; audioEl.src = audioUrl;
+                playerWrapper.innerHTML = ''; playerWrapper.appendChild(audioEl);
+
+                if (vttUrl) {
+                    lyricsSection.style.display = 'block';
+                    const vttResponse = await fetch(vttUrl);
+                    const vttContent = await vttResponse.text();
+                    displayKaraokeLyrics(vttContent, audioEl);
+                } else {
+                    lyricsSection.style.display = 'none';
                 }
+                
+                finalResult.style.display = 'block';
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            } else {
+                alert("فایل صوتی یافت نشد!");
+                step1.style.display = 'block'; historySection.style.display = 'block';
             }
-            return lines;
         }
-
+        
+        // --- توابع کارائوکه ---
         function timeToSeconds(timeStr) {
-            const [h, m, s] = timeStr.split(':');
-            return parseFloat(h) * 3600 + parseFloat(m) * 60 + parseFloat(s);
+            const parts = timeStr.split(':');
+            const secondsAndMs = parts[2].split('.');
+            return parseInt(parts[0], 10) * 3600 + parseInt(parts[1], 10) * 60 + parseInt(secondsAndMs[0], 10) + parseInt(secondsAndMs[1], 10) / 1000;
+        }
+
+        function parseVTT(vttContent) {
+            const lines = vttContent.split('\n');
+            const lyricsData = [];
+            for (let i = 0; i < lines.length; i++) {
+                const match = lines[i].match(/(\d{2}:\d{2}:\d{2}\.\d{3}) --> (\d{2}:\d{2}:\d{2}\.\d{3})/);
+                if (match) {
+                    let text = '';
+                    let j = i + 1;
+                    while (j < lines.length && lines[j].trim() !== '') {
+                        text += lines[j] + '\n';
+                        j++;
+                    }
+                    lyricsData.push({
+                        start: timeToSeconds(match[1]),
+                        end: timeToSeconds(match[2]),
+                        text: text.trim().replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>')
+                    });
+                    i = j;
+                }
+            }
+            return lyricsData;
         }
 
-        function setupPlayerWithLyrics(audioSrc, lrcData, rawLyrics) {
-            playerWrapper.innerHTML = '';
+        function displayKaraokeLyrics(vttContent, audioEl) {
+            const lyricsData = parseVTT(vttContent);
             finalLyricsBox.innerHTML = '';
+            lyricsData.forEach(line => {
+                const p = document.createElement('p');
+                p.className = 'lyrics-line';
+                p.innerHTML = line.text;
+                p.dataset.start = line.start;
+                p.dataset.end = line.end;
+                finalLyricsBox.appendChild(p);
+            });
 
-            const audio = document.createElement('audio');
-            audio.controls = true;
-            audio.autoplay = true;
-            audio.src = audioSrc;
-            playerWrapper.appendChild(audio);
-
-            if (lrcData && typeof lrcData === 'string' && lrcData.includes('WEBVTT')) {
-                const parsedLyrics = parseVTT(lrcData);
-                
-                parsedLyrics.forEach((line, index) => {
-                    const p = document.createElement('div');
-                    p.className = 'lyric-line';
-                    p.id = `line-${index}`;
-                    p.innerHTML = formatLyricsHTML(line.text.replace(/\n/g, '<br>'));
-                    finalLyricsBox.appendChild(p);
-                });
-
-                audio.addEventListener('timeupdate', () => {
-                    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;
-                            break;
-                        }
-                    }
-
-                    document.querySelectorAll('.lyric-line.active').forEach(el => el.classList.remove('active'));
-
-                    if (activeIndex !== -1) {
-                        const activeEl = document.getElementById(`line-${activeIndex}`);
-                        if (activeEl) {
-                            activeEl.classList.add('active');
-                            activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            let currentLine = null;
+            audioEl.addEventListener('timeupdate', () => {
+                const currentTime = audioEl.currentTime;
+                const lines = finalLyricsBox.children;
+                let found = false;
+                for (let i = 0; i < lines.length; i++) {
+                    const line = lines[i];
+                    if (currentTime >= line.dataset.start && currentTime <= line.dataset.end) {
+                        if (line !== currentLine) {
+                            if (currentLine) currentLine.classList.remove('active');
+                            line.classList.add('active');
+                            currentLine = line;
+                            line.scrollIntoView({ behavior: 'smooth', block: 'center' });
                         }
+                        found = true;
+                        break;
                     }
-                });
-
-            } else {
-                if (rawLyrics) {
-                     finalLyricsBox.innerHTML = formatLyricsHTML(rawLyrics);
-                } else {
-                    finalLyricsBox.innerHTML = '<div style="color:#a0aec0; padding-top:100px;">(متن آهنگی موجود نیست)</div>';
                 }
-            }
+                if (!found && currentLine) {
+                    currentLine.classList.remove('active');
+                    currentLine = null;
+                }
+            });
         }
 
         const canvas = document.getElementById('music-canvas');