Spaces:

Opera8
/

Ahang

Sleeping

App Files Files Community

Opera8 commited on 28 days ago

Commit

7baa7eb

verified ·

1 Parent(s): 46da690

Update index.html

Browse files

Files changed (1) hide show

index.html +341 -326

index.html CHANGED Viewed

@@ -1,55 +1,55 @@
-<!DOCTYPE html>
-<html lang="fa" dir="rtl">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>استودیو موزیک آلفا (Alpha)</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: #F8F9FC;
-            --panel-bg: #FFFFFF;
-            --panel-border: #EAEFF7;
-            --input-bg: #F6F8FB;
-            --input-border: #E1E7EF;
-            --text-primary: #1A202C;
-            --text-secondary: #626F86;
-            --accent-primary: #4A6CFA;
             --accent-secondary: #9F7AEA;
-            --accent-glow: rgba(74, 108, 250, 0.2);
             --success-color: #38A169;
-            --danger-color: #e53e3e;
             --premium-gold: #FFC107;
             --premium-gradient: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
-            --radius-card: 20px;
-            --radius-btn: 14px;
-        }
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
-        body {
-            font-family: var(--app-font);
-            background-color: var(--app-bg);
-            color: var(--text-primary);
-            margin: 0;
-            padding: 20px 15px;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
-        }
-        .container { max-width: 650px; width: 100%; z-index: 2; position: relative; }
-        #music-canvas {
-            position: fixed; top: 0; left: 0; width: 100%; height: 400px;
             z-index: 0; opacity: 0.5; pointer-events: none;
             mask-image: linear-gradient(to bottom, black, transparent);
             -webkit-mask-image: linear-gradient(to bottom, black, transparent);
         }
-        header { text-align: center; margin-bottom: 2rem; position: relative; }
         .logo-box {
             width: 80px; height: 80px; margin: 0 auto 15px;
@@ -59,12 +59,12 @@
             color: var(--accent-primary);
         }
-        h1 {
-            font-size: 1.8rem; font-weight: 800; margin: 0;
-            background: linear-gradient(90deg, #2d3748, #4A6CFA);
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-        }
-        .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;
@@ -74,40 +74,46 @@
         }
         .status-badge.visible { opacity: 1; transform: translateY(0); }
         .badge-free { background: #E2E8F0; color: #64748b; }
-        .badge-premium {
-            background: var(--premium-gradient); color: #fff;
             box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
             text-shadow: 0 1px 2px rgba(0,0,0,0.1);
         }
-        .card {
-            background: var(--panel-bg);
-            border-radius: var(--radius-card);
-            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
-            border: 1px solid var(--panel-border);
             padding: 25px; margin-bottom: 20px;
         }
         .form-label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; color: #2d3748; }
         .form-label svg { color: var(--accent-primary); width: 20px; }
-        textarea, input, select {
-            width: 100%; background: var(--input-bg);
-            border: 2px solid var(--input-border);
-            border-radius: 12px; padding: 15px;
             font-family: inherit; font-size: 1rem; color: #2d3748;
             outline: none; transition: border-color 0.3s;
         }
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
         @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));
             background-size: 200% 100%;
-            color: #fff; border: none; border-radius: var(--radius-btn);
-            font-size: 1.1rem; font-weight: 700; cursor: pointer;
             display: flex; justify-content: center; align-items: center; gap: 10px;
             transition: all 0.3s ease-out; position: relative; z-index: 1;
         }
@@ -143,13 +149,6 @@
         .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 {
@@ -162,22 +161,18 @@
         .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;
-            text-align: center; border: 1px solid var(--input-border); margin-top: 15px;
-        }
-        .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; }
@@ -201,8 +196,10 @@
         .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;
             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);
         }
@@ -235,11 +232,12 @@
         .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; 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); }
@@ -247,19 +245,19 @@
         .modal-overlay.open { display: flex; opacity: 1; }
         .modal-overlay.open .modal-box { transform: scale(1); }
     </style>
-</head>
-<body>
     <canvas id="music-canvas"></canvas>
     <div class="container">
-        <header>
             <div class="logo-box">
                 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
             </div>
-            <h1>استودیو موزیک آلفا</h1>
             <p class="subtitle">ساخت آهنگ حرفه‌ای با هوش مصنوعی</p>
             <div id="statusBadge" class="status-badge">نسخه رایگان</div>
-        </header>
         <div id="step1" class="card">
             <div class="form-label">
@@ -275,24 +273,13 @@
                     <div class="settings-group"><label>تعداد خروجی (آهنگ):</label><input type="number" id="batch_size" value="1" min="1" max="4"></div>
                     <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="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>
-                <!-- چک‌باکس جدید بی‌کلام -->
                 <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>
@@ -309,7 +296,7 @@
                 <button id="mainDownloadBtn" class="download-btn-style">دانلود آهنگ 📥</button>
             </div>
             <div id="playerWrapper"></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>
@@ -325,14 +312,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>
             <div class="modal-actions">
                 <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">انصراف</button>
                 <button class="btn-modal btn-confirm" onclick="confirmDelete()">بله، حذف شود</button>
@@ -343,8 +330,8 @@
     <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>
             <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>
@@ -355,12 +342,15 @@
     <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/...'; //
         let db;
         let songToDeleteId = null;
         let userSubscriptionStatus = 'free';
-        // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
@@ -369,6 +359,7 @@
         const finalResult = document.getElementById('finalResult');
         const playerWrapper = document.getElementById('playerWrapper');
         const finalLyricsBox = document.getElementById('finalLyricsBox');
         const mainDownloadBtn = document.getElementById('mainDownloadBtn');
         const historyList = document.getElementById('historyList');
         const historySection = document.getElementById('historySection');
@@ -377,25 +368,20 @@
         const statusBadge = document.getElementById('statusBadge');
         const upgradeModalTitle = document.getElementById('upgradeModalTitle');
         const upgradeModalText = document.getElementById('upgradeModalText');
-        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);
         const getChk = (id) => document.getElementById(id).checked;
-        const acc = document.getElementsByClassName("accordion");
-        for (let i = 0; i < acc.length; i++) {
-            acc[i].addEventListener("click", function() {
-                this.classList.toggle("active");
-                const panel = this.nextElementSibling;
-                panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px";
-            });
-        }
         function getFingerprint() {
             let fp = localStorage.getItem('user_fingerprint');
             if (!fp) {
@@ -405,129 +391,150 @@
             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 updateSubscriptionUI(status) {
-            if (status === 'paid') {
-                statusBadge.textContent = 'نسخه نامحدود';
-                statusBadge.className = 'status-badge visible badge-premium';
-            } else {
-                statusBadge.textContent = 'نسخه رایگان';
-                statusBadge.className = 'status-badge visible badge-free';
-            }
         }
         window.addEventListener('message', (event) => {
             if (event.data && event.data.type === 'USER_STATUS_RESPONSE') {
-                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 = "برای دانلود آهنگ‌ها با کیفیت اصلی، لطفا حساب خود را به نسخه نامحدود ارتقا دهید.";
                 upgradeModal.classList.add('open');
             } else {
                 parent.postMessage({ type: 'INITIATE_DOWNLOAD_FROM_URL', payload: { audioUrl: 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 = (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, vttUrl) {
             try {
                 const response = await fetch(audioUrl);
                 const audioBlob = await response.blob();
-                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);
-                transaction.oncomplete = () => loadHistory();
             } catch (error) { console.error("Error saving:", error); }
         }
         function loadHistory() {
             if (!db) return;
-            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 = (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 confirmDelete() {
             if (songToDeleteId && db) {
-                const transaction = db.transaction(["songs"], "readwrite");
-                transaction.objectStore("songs").delete(songToDeleteId);
-                transaction.oncomplete = () => { loadHistory(); closeDeleteModal(); };
             }
         }
         function openHistoryItem(item) {
-            step1.style.display = 'none'; historySection.style.display = 'none';
             const audioURL = URL.createObjectURL(item.audioBlob);
             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);
-            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();
-        // --- مدیریت آپلود و حالت بی‌کلام ---
-        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 ? 'توضیحات آهنگ بی‌کلام (مثال: آرامش‌بخش، پیانو و ویولن)' : 'مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد...';
-        });
-        // --- فرآیند اصلی ---
         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 () => {
@@ -538,55 +545,46 @@
             historySection.style.display = 'none';
             loader.style.display = 'block';
-            let audioConditionObj = null;
-            let lyrics = "";
-            let musicPrompt = "";
             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" }
-                    };
                 }
-                // مرحله ۲: آماده‌سازی متن و شعر
-                const isInstrumental = instrumentalCheckbox.checked;
-                if (isInstrumental) {
-                    lyrics = ""; // برای بی‌کلام، شعر خالی است
-                    musicPrompt = ideaInput.value + " ,instrumental"; // اضافه کردن کلمه بی‌کلام به پرامپت
-                } else {
-                    loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
-                    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 (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;
                 }
-                // مرحله ۳: ارسال درخواست اصلی ساخت آهنگ
                 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, "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85,
@@ -594,10 +592,10 @@
                 ];
                 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('خطا در اتصال به سرور موزیک');
-                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 = "هوش مصنوعی در حال خواندن...";
@@ -611,127 +609,144 @@
             } catch (e) {
                 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 traverse(obj) {
-                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);
-            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';
             }
         }
-        // --- توابع کارائوکه ---
-        function timeToSeconds(timeStr) {
-            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 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);
-            });
-            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;
-                    }
                 }
-                if (!found && currentLine) {
-                    currentLine.classList.remove('active');
-                    currentLine = null;
                 }
             });
         }
         const canvas = document.getElementById('music-canvas');
         const ctx = canvas.getContext('2d');
         let t = 0;
@@ -753,5 +768,5 @@
         }
         anim();
     </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>استودیو موزیک آلفا (Alpha)</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --app-font: 'Vazirmatn', sans-serif;
+            --app-bg: #F8F9FC;
+            --panel-bg: #FFFFFF;
+            --panel-border: #EAEFF7;
+            --input-bg: #F6F8FB;
+            --input-border: #E1E7EF;
+            --text-primary: #1A202C;
+            --text-secondary: #626F86;
+            --accent-primary: #4A6CFA;
             --accent-secondary: #9F7AEA;
+            --accent-glow: rgba(74, 108, 250, 0.2);
             --success-color: #38A169;
+            --danger-color: #e53e3e;
             --premium-gold: #FFC107;
             --premium-gradient: linear-gradient(135deg, #FFC107 0%, #FF9800 100%);
+            --radius-card: 20px;
+            --radius-btn: 14px;
+        }
         * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+        body {
+            font-family: var(--app-font);
+            background-color: var(--app-bg);
+            color: var(--text-primary);
+            margin: 0;
+            padding: 20px 15px;
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
+        }
+        .container { max-width: 650px; width: 100%; z-index: 2; position: relative; }
+        #music-canvas {
+            position: fixed; top: 0; left: 0; width: 100%; height: 400px;
             z-index: 0; opacity: 0.5; pointer-events: none;
             mask-image: linear-gradient(to bottom, black, transparent);
             -webkit-mask-image: linear-gradient(to bottom, black, transparent);
         }
+        header { text-align: center; margin-bottom: 2rem; position: relative; }
         .logo-box {
             width: 80px; height: 80px; margin: 0 auto 15px;
             color: var(--accent-primary);
         }
+        h1 {
+            font-size: 1.8rem; font-weight: 800; margin: 0;
+            background: linear-gradient(90deg, #2d3748, #4A6CFA);
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+        }
+        .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;
         }
         .status-badge.visible { opacity: 1; transform: translateY(0); }
         .badge-free { background: #E2E8F0; color: #64748b; }
+        .badge-premium {
+            background: var(--premium-gradient); color: #fff;
             box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
             text-shadow: 0 1px 2px rgba(0,0,0,0.1);
         }
+        .card {
+            background: var(--panel-bg);
+            border-radius: var(--radius-card);
+            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
+            border: 1px solid var(--panel-border);
             padding: 25px; margin-bottom: 20px;
         }
         .form-label { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; color: #2d3748; }
         .form-label svg { color: var(--accent-primary); width: 20px; }
+        textarea, input, select {
+            width: 100%; background: var(--input-bg);
+            border: 2px solid var(--input-border);
+            border-radius: 12px; padding: 15px;
             font-family: inherit; font-size: 1rem; color: #2d3748;
             outline: none; transition: border-color 0.3s;
         }
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
+        input[type="file"] { padding: 12px; }
+        input[type="file"]::file-selector-button {
+            background: var(--accent-primary); color: white; border: none; padding: 8px 12px;
+            border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.2s;
+        }
+        input[type="file"]::file-selector-button:hover { background: var(--accent-secondary); }
         @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));
             background-size: 200% 100%;
+            color: #fff; border: none; border-radius: var(--radius-btn);
+            font-size: 1.1rem; font-weight: 700; cursor: pointer;
             display: flex; justify-content: center; align-items: center; gap: 10px;
             transition: all 0.3s ease-out; position: relative; z-index: 1;
         }
         .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; }
         .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 {
         .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.2; font-size: 1.1rem; color: #69768a; text-align: center; border: 1px solid var(--input-border); margin-top: 15px;
+            scroll-behavior: smooth;
         }
+        .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; }
+        .lyrics-line { display: block; transition: all 0.3s ease; transform-origin: center; }
         .lyrics-line.active {
+            color: var(--text-primary);
+            font-weight: 800;
+            transform: scale(1.1);
         }
         #loader { display: none; text-align: center; padding: 20px; }
         .wave-bars { display: flex; justify-content: center; gap: 4px; height: 30px; align-items: flex-end; }
         .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;
             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);
         }
         .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;
+            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); }
         .modal-overlay.open { display: flex; opacity: 1; }
         .modal-overlay.open .modal-box { transform: scale(1); }
     </style>
+</head>
+<body>
     <canvas id="music-canvas"></canvas>
     <div class="container">
+        <header>
             <div class="logo-box">
                 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
             </div>
+            <h1>استودیو موزیک آلفا</h1>
             <p class="subtitle">ساخت آهنگ حرفه‌ای با هوش مصنوعی</p>
             <div id="statusBadge" class="status-badge">نسخه رایگان</div>
+        </header>
         <div id="step1" class="card">
             <div class="form-label">
                     <div class="settings-group"><label>تعداد خروجی (آهنگ):</label><input type="number" id="batch_size" value="1" min="1" max="4"></div>
                     <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" style="grid-column: 1 / -1;"><label>نمونه صوتی (اختیاری):</label><input type="file" id="audioConditionInput" accept="audio/*"></div>
                 </div>
                 <div class="checkbox-wrapper">
+                    <input type="checkbox" id="instrumentalCheckbox"><label for="instrumentalCheckbox" style="font-size: 0.9rem; cursor: pointer;"><b>فقط آهنگ بی‌کلام (Instrumental)</b></label>
                 </div>
                 <div class="checkbox-wrapper" style="border-top: none; padding-top: 0;">
+                    <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>
             <button id="processBtn" class="btn-main" style="margin-top: 15px;"><div class="btn-main-content">ساخت آهنگ <span>🎵</span></div></button>
                 <button id="mainDownloadBtn" class="download-btn-style">دانلود آهنگ 📥</button>
             </div>
             <div id="playerWrapper"></div>
+            <div id="lyricsWrapper" style="display: none;">
                 <div class="form-label" style="margin-top: 20px; justify-content: center; color: #718096;">متن آهنگ</div>
                 <div class="lyrics-container" id="finalLyricsBox"></div>
             </div>
         </div>
     </div>
+    <!-- Modals -->
     <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>
             <div class="modal-actions">
                 <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">انصراف</button>
                 <button class="btn-modal btn-confirm" onclick="confirmDelete()">بله، حذف شود</button>
     <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>
             <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>
     <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';
         let db;
         let songToDeleteId = null;
         let userSubscriptionStatus = 'free';
+        let timedLyrics = [];
+        let currentAudioElement = null;
+        // Elements
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
         const finalResult = document.getElementById('finalResult');
         const playerWrapper = document.getElementById('playerWrapper');
         const finalLyricsBox = document.getElementById('finalLyricsBox');
+        const lyricsWrapper = document.getElementById('lyricsWrapper');
         const mainDownloadBtn = document.getElementById('mainDownloadBtn');
         const historyList = document.getElementById('historyList');
         const historySection = document.getElementById('historySection');
         const statusBadge = document.getElementById('statusBadge');
         const upgradeModalTitle = document.getElementById('upgradeModalTitle');
         const upgradeModalText = document.getElementById('upgradeModalText');
+        const audioConditionInput = document.getElementById('audioConditionInput');
         const getVal = (id) => document.getElementById(id).value;
         const getNum = (id) => Number(document.getElementById(id).value);
         const getChk = (id) => document.getElementById(id).checked;
+        const acc = document.getElementsByClassName("accordion")[0];
+        acc.addEventListener("click", function() {
+            this.classList.toggle("active");
+            const panel = this.nextElementSibling;
+            panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px";
+        });
+        // --- Fingerprinting & Subscription ---
         function getFingerprint() {
             let fp = localStorage.getItem('user_fingerprint');
             if (!fp) {
             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 updateSubscriptionUI(status) {
+            statusBadge.className = 'status-badge visible ' + (status === 'paid' ? 'badge-premium' : 'badge-free');
+            statusBadge.textContent = status === 'paid' ? 'نسخه نامحدود' : 'نسخه رایگان';
         }
         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';
+                }
                 updateSubscriptionUI(userSubscriptionStatus);
             }
         });
         parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*');
+        // --- Modals and Download Logic ---
         function handleSecureDownload(url, e) {
             if (e) e.preventDefault();
             if (userSubscriptionStatus === 'free') {
                 upgradeModalTitle.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 } }, '*');
+        });
         function closeUpgradeModal() { upgradeModal.classList.remove('open'); }
         function closeDeleteModal() { deleteModal.classList.remove('open'); songToDeleteId = null; }
+        [deleteModal, upgradeModal].forEach(modal => {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) modal.classList.remove('open');
+            });
+        });
+        // --- IndexedDB History ---
         function initDB() {
             const request = indexedDB.open("alphaMusicDB", 1);
+            request.onerror = (e) => console.error("IndexedDB 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) {
             try {
                 const response = await fetch(audioUrl);
                 const audioBlob = await response.blob();
+                const newItem = {
+                    id: Date.now(), idea, lyrics, audioBlob,
+                    date: new Date().toLocaleDateString('fa-IR', { hour: '2-digit', minute: '2-digit' })
+                };
+                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) => e.target.result?.delete(); };
+                tx.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 = 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); };
                     historyList.appendChild(div);
                 });
             };
         }
+        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(); };
             }
         }
         function openHistoryItem(item) {
+            step1.style.display = 'none';
+            historySection.style.display = 'none';
             const audioURL = URL.createObjectURL(item.audioBlob);
             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);
+            playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`;
+            setupLyrics(item.lyrics);
+            finalResult.style.display = 'block';
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         }
         initDB();
+        // --- Main Process ---
         async function uploadFile(file) {
+            const uploadId = "uid" + Math.random().toString(36).substring(2);
             const formData = new FormData();
             formData.append("files", file);
+            try {
+                const response = await fetch(`${ACE_SPACE_URL}upload?upload_id=${uploadId}`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) throw new Error('File upload failed');
+                const result = await response.json();
+                return result[0]; // Returns the server path of the file
+            } catch (error) {
+                console.error("Upload error:", error);
+                alert("خطا در آپلود فایل نمونه. لطفا دوباره تلاش کنید.");
+                return null;
+            }
         }
         processBtn.addEventListener('click', async () => {
             historySection.style.display = 'none';
             loader.style.display = 'block';
             try {
+                let conditioningAudioPath = null;
+                const audioFile = audioConditionInput.files[0];
+                if (audioFile) {
+                    loaderText.innerText = "در حال آپلود فایل نمونه صوتی...";
+                    conditioningAudioPath = await uploadFile(audioFile);
+                    if (!conditioningAudioPath) throw new Error("File upload was cancelled or failed.");
                 }
+                const isInstrumental = getChk('instrumentalCheckbox');
+                loaderText.innerText = isInstrumental ? "در حال آماده‌سازی ملودی..." : "در حال نوشتن شعر و ملودی...";
+                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'
+                    })
+                });
+                if (response.status === 429) {
+                    upgradeModalTitle.innerText = "محدودیت ساخت روزانه";
+                    upgradeModalText.innerText = "شما به سقف ۵ آهنگ رایگان در روز رسیده‌اید. برای ساخت آهنگ‌های بیشتر، لطفا حساب خود را ارتقا دهید.";
+                    upgradeModal.classList.add('open');
+                    throw new Error("Daily limit reached");
                 }
+                const data = await response.json();
+                if (data.error) throw new Error(data.error);
+                const lyrics = isInstrumental ? "" : data.lyrics;
+                const { musicPrompt } = data;
                 loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
                 const payload = [
+                    getVal('model_select'), "custom", conditioningAudioPath, "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, "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85,
                 ];
                 const session_hash = Math.random().toString(36).substring(2);
+                const joinResp = await fetch(`${ACE_SPACE_URL}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('خطا در اتصال به سرور موزیک');
+                const eventSource = new EventSource(`${ACE_SPACE_URL}queue/data?session_hash=${session_hash}`);
                 eventSource.onmessage = (event) => {
                     const msg = JSON.parse(event.data);
                     if (msg.msg === 'process_starts') loaderText.innerText = "هوش مصنوعی در حال خواندن...";
             } catch (e) {
                 alert("خطا: " + e.message);
+                loader.style.display = 'none';
+                step1.style.display = 'block';
+                historySection.style.display = 'block';
+                processBtn.disabled = false;
             }
         });
+        // --- Result Handling & Karaoke ---
+        function handleAudioOutput(data, lyrics, idea) {
             let audioUrl = null;
             let vttUrl = null;
+            function findUrls(obj) {
+                if (typeof obj === 'string' && obj.includes('/file=')) {
+                    if (obj.endsWith('.mp3')) audioUrl = obj;
+                    if (obj.endsWith('.vtt')) vttUrl = obj;
                 } else if (obj && typeof obj === 'object') {
+                    if (obj.url) {
+                        if (obj.url.endsWith('.mp3')) audioUrl = obj.url;
+                        if (obj.url.endsWith('.vtt')) vttUrl = obj.url;
                     }
+                    Object.values(obj).forEach(findUrls);
                 }
             }
+            findUrls(data);
+            if (audioUrl) {
+                const fullAudioUrl = audioUrl.startsWith('http') ? audioUrl : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
                 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.style.display = 'inline-flex';
+                mainDownloadBtn.onclick = (e) => handleSecureDownload(fullAudioUrl, e);
+                playerWrapper.innerHTML = `<audio controls autoplay src="${fullAudioUrl}"></audio>`;
+                if (lyrics) saveToHistory(idea, lyrics, fullAudioUrl);
+                const fullVttUrl = vttUrl ? (vttUrl.startsWith('http') ? vttUrl : ACE_SPACE_URL.replace(/\/$/, '') + vttUrl) : null;
+                setupLyrics(lyrics, fullVttUrl);
                 finalResult.style.display = 'block';
                 window.scrollTo({ top: 0, behavior: 'smooth' });
             } else {
                 alert("فایل صوتی یافت نشد!");
+                location.reload();
             }
         }
+        async function setupLyrics(lyricsText, vttUrl) {
+            if (!lyricsText || lyricsText.trim() === '') {
+                lyricsWrapper.style.display = 'none';
+                return;
+            }
+            lyricsWrapper.style.display = 'block';
+            timedLyrics = []; // Reset
+            if (vttUrl) {
+                try {
+                    const response = await fetch(vttUrl);
+                    const vttContent = await response.text();
+                    timedLyrics = parseVTT(vttContent);
+                } catch (e) {
+                    console.error("Could not fetch or parse VTT file.", e);
+                    timedLyrics = []; // Fallback to non-timed
+                }
+            }
+            if (timedLyrics.length > 0) {
+                finalLyricsBox.innerHTML = timedLyrics.map((line, index) => `<span class="lyrics-line" data-index="${index}">${line.text}</span>`).join('');
+                currentAudioElement = playerWrapper.querySelector('audio');
+                if(currentAudioElement) {
+                    currentAudioElement.addEventListener('timeupdate', updateLyricsHighlight);
+                }
+            } else {
+                // Fallback for non-timed lyrics
+                finalLyricsBox.innerHTML = lyricsText.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
+            }
         }
         function parseVTT(vttContent) {
             const lines = vttContent.split('\n');
+            const cues = [];
+            let currentCue = null;
+            function timeToSeconds(timeStr) {
+                const parts = timeStr.split(/[:.]/);
+                return parseInt(parts[0], 10) * 3600 + parseInt(parts[1], 10) * 60 + parseInt(parts[2], 10) + parseInt(parts[3], 10) / 1000;
+            }
+            for (const line of lines) {
+                const timeMatch = line.match(/(\d{2}:\d{2}:\d{2}\.\d{3}) --> (\d{2}:\d{2}:\d{2}\.\d{3})/);
+                if (timeMatch) {
+                    currentCue = {
+                        startTime: timeToSeconds(timeMatch[1]),
+                        endTime: timeToSeconds(timeMatch[2]),
+                        text: ''
+                    };
+                } else if (currentCue && line.trim() !== '' && !/^\d+$/.test(line.trim())) {
+                    currentCue.text += (currentCue.text ? '\n' : '') + line;
+                } else if (currentCue && line.trim() === '' && currentCue.text) {
+                    cues.push(currentCue);
+                    currentCue = null;
                 }
             }
+            if(currentCue && currentCue.text) cues.push(currentCue);
+            return cues;
+        }
+        function updateLyricsHighlight() {
+            if (!currentAudioElement || timedLyrics.length === 0) return;
+            const currentTime = currentAudioElement.currentTime;
+            let activeIndex = -1;
+            for (let i = 0; i < timedLyrics.length; i++) {
+                if (currentTime >= timedLyrics[i].startTime && currentTime <= timedLyrics[i].endTime) {
+                    activeIndex = i;
+                    break;
                 }
+            }
+            const lyricLines = finalLyricsBox.querySelectorAll('.lyrics-line');
+            lyricLines.forEach((line, index) => {
+                if (index === activeIndex) {
+                    if (!line.classList.contains('active')) {
+                        line.classList.add('active');
+                        // Scroll the active line into view
+                        line.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    }
+                } else {
+                    line.classList.remove('active');
                 }
             });
         }
+        // --- Background Animation ---
         const canvas = document.getElementById('music-canvas');
         const ctx = canvas.getContext('2d');
         let t = 0;
         }
         anim();
     </script>
+</body>
 </html>