Spaces:

Opera8
/

Ahang

Sleeping

App Files Files Community

Opera8 commited on Feb 16

Commit

19708db

verified ·

1 Parent(s): 7baa7eb

Update index.html

Browse files

Files changed (1) hide show

index.html +266 -306

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,13 +59,14 @@
             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;
             font-size: 0.85rem; font-weight: 700; margin-top: 5px;
@@ -74,46 +75,45 @@
         }
         .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;
         }
@@ -128,9 +128,13 @@
         .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:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
         .accordion {
             background-color: var(--input-bg); color: var(--text-primary); cursor: pointer; padding: 15px; width: 100%; border: none;
             text-align: right; outline: none; font-size: 0.95rem; font-weight: 600; border-radius: 12px;
@@ -149,8 +153,10 @@
         .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 {
             background-color: rgba(74, 108, 250, 0.1); color: var(--accent-primary); text-decoration: none; font-size: 0.9rem;
             font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: 0.2s; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: none;
@@ -163,17 +169,11 @@
         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; }
         .bar { width: 5px; background: var(--accent-primary); animation: jump 1s infinite; border-radius: 2px; }
@@ -182,6 +182,7 @@
         .bar:nth-child(4) { animation-delay: 0.3s; height: 50%; }
         @keyframes jump { 0%, 100% { height: 20%; } 50% { height: 100%; } }
         #historySection { margin-top: 30px; width: 100%; }
         .history-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
         .history-list { display: grid; gap: 12px; }
@@ -196,7 +197,7 @@
         .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;
@@ -206,6 +207,7 @@
         .history-card:hover .h-delete { opacity: 1; transform: scale(1); }
         .h-delete:hover { background: var(--danger-color); color: white; transform: scale(1.1); }
         .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
             background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
@@ -231,33 +233,40 @@
         .btn-confirm { background: var(--danger-color); color: white; box-shadow: 0 5px 15px rgba(229, 62, 62, 0.3); }
         .btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4); }
         @keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }
-        .upgrade-icon {
-            width: 70px; height: 70px;
             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">
@@ -273,14 +282,9 @@
                     <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>
         </div>
@@ -296,10 +300,8 @@
                 <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>
             <button onclick="location.reload()" class="btn-main btn-outline">برگشت و ساخت آهنگ جدید</button>
         </div>
@@ -312,7 +314,7 @@
         </div>
     </div>
-    <!-- Modals -->
     <div class="modal-overlay" id="deleteConfirmModal">
         <div class="modal-box">
             <div class="modal-icon-warn">
@@ -327,6 +329,7 @@
         </div>
     </div>
     <div class="modal-overlay" id="upgradeModal">
         <div class="modal-box">
             <div class="upgrade-icon">👑</div>
@@ -341,16 +344,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/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');
@@ -359,7 +361,6 @@
         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');
@@ -368,29 +369,32 @@
         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) {
                 fp = 'user_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
                 localStorage.setItem('user_fingerprint', fp);
             }
             return fp;
         }
         function isUserPaid(userObject) {
             return userObject && userObject.isLogin && userObject.accessible_pages &&
                    (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) ||
@@ -398,10 +402,17 @@
         }
         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 {
@@ -413,59 +424,74 @@
                 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); }
         }
@@ -474,41 +500,85 @@
             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' });
@@ -516,27 +586,7 @@
         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 () => {
             if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
@@ -546,45 +596,41 @@
             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,
@@ -592,10 +638,10 @@
                 ];
                 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 = "هوش مصنوعی در حال خواندن...";
@@ -616,137 +662,51 @@
             }
         });
-        // --- 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;
@@ -768,5 +728,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;
             font-size: 0.85rem; font-weight: 700; margin-top: 5px;
         }
         .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;
         }
         .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:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
+        /* تنظیمات پیشرفته */
         .accordion {
             background-color: var(--input-bg); color: var(--text-primary); cursor: pointer; padding: 15px; width: 100%; border: none;
             text-align: right; outline: none; font-size: 0.95rem; font-weight: 600; border-radius: 12px;
         .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 {
             background-color: rgba(74, 108, 250, 0.1); color: var(--accent-primary); text-decoration: none; font-size: 0.9rem;
             font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: 0.2s; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: none;
         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;
         }
         .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; }
+        /* لودر */
         #loader { display: none; text-align: center; padding: 20px; }
         .wave-bars { display: flex; justify-content: center; gap: 4px; height: 30px; align-items: flex-end; }
         .bar { width: 5px; background: var(--accent-primary); animation: jump 1s infinite; border-radius: 2px; }
         .bar:nth-child(4) { animation-delay: 0.3s; height: 50%; }
         @keyframes jump { 0%, 100% { height: 20%; } 50% { height: 100%; } }
+        /* --- استایل‌های تاریخچه و حذف --- */
         #historySection { margin-top: 30px; width: 100%; }
         .history-title { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
         .history-list { display: grid; gap: 12px; }
         .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;
         .history-card:hover .h-delete { opacity: 1; transform: scale(1); }
         .h-delete:hover { background: var(--danger-color); color: white; transform: scale(1.1); }
+        /* مودال‌ها */
         .modal-overlay {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
             background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);
         .btn-confirm { background: var(--danger-color); color: white; box-shadow: 0 5px 15px rgba(229, 62, 62, 0.3); }
         .btn-confirm:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(229, 62, 62, 0.4); }
+        /* مودال ارتقا */
         @keyframes pulse-gold { 0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 193, 7, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); } }
+        .upgrade-icon {
+            width: 70px; height: 70px;
             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"><label>مقیاس هدایت (CFG):</label><input type="number" id="cfg_input" value="7.0" step="0.5"></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>
             <button id="processBtn" class="btn-main" style="margin-top: 15px;"><div class="btn-main-content">ساخت آهنگ <span>🎵</span></div></button>
         </div>
                 <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>
             <button onclick="location.reload()" class="btn-main btn-outline">برگشت و ساخت آهنگ جدید</button>
         </div>
         </div>
     </div>
+    <!-- مودال تایید حذف -->
     <div class="modal-overlay" id="deleteConfirmModal">
         <div class="modal-box">
             <div class="modal-icon-warn">
         </div>
     </div>
+    <!-- مودال ارتقا به نسخه کامل -->
     <div class="modal-overlay" id="upgradeModal">
         <div class="modal-box">
             <div class="upgrade-icon">👑</div>
     <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'; // پیش‌فرض رایگان
+        // المان‌ها
         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 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 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";
+            });
+        }
+        // --- مدیریت اثر انگشت (Fingerprint) ---
         function getFingerprint() {
             let fp = localStorage.getItem('user_fingerprint');
             if (!fp) {
+                // تولید یک شناسه تصادفی و ذخیره آن
                 fp = 'user_' + Math.random().toString(36).substr(2, 9) + Date.now().toString(36);
                 localStorage.setItem('user_fingerprint', fp);
             }
             return fp;
         }
+        // --- مدیریت اشتراک و ارتباط با آیفریم مادر ---
         function isUserPaid(userObject) {
             return userObject && userObject.isLogin && userObject.accessible_pages &&
                    (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) ||
         }
         function updateSubscriptionUI(status) {
+            if (status === 'paid') {
+                statusBadge.textContent = 'نسخه نامحدود';
+                statusBadge.className = 'status-badge visible badge-premium';
+                mainDownloadBtn.classList.remove('locked');
+            } else {
+                statusBadge.textContent = 'نسخه رایگان';
+                statusBadge.className = 'status-badge visible badge-free';
+            }
         }
+        // شنونده پیام از آیفریم مادر
         window.addEventListener('message', (event) => {
             if (event.data && event.data.type === 'USER_STATUS_RESPONSE') {
                 try {
                 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 }
+                }, '*');
+                // تغییر موقت متن دکمه برای فیدبک
                 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 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" }); };
         }
         async function saveToHistory(idea, lyrics, audioUrl) {
             try {
+                // برای ذخیره در DB باید فایل را فچ کنیم
                 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 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(); };
+                };
+                transaction.oncomplete = () => loadHistory();
             } catch (error) { console.error("Error saving:", error); }
         }
             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) => {
                     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 closeDeleteModal() {
+            deleteModal.classList.remove('open');
+            songToDeleteId = null;
+        }
         function confirmDelete() {
             if (songToDeleteId && db) {
+                const transaction = db.transaction(["songs"], "readwrite");
+                const store = transaction.objectStore("songs");
+                store.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';
             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';
             mainDownloadBtn.onclick = (e) => handleSecureDownload(audioURL, e);
             playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`;
+            finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
             finalResult.style.display = 'block';
             window.scrollTo({ top: 0, behavior: 'smooth' });
         initDB();
+        // --- فرآیند اصلی ---
         processBtn.addEventListener('click', async () => {
             if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
             loader.style.display = 'block';
             try {
+                loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
+                // ارسال درخواست به سرور با فینگرپرینت و وضعیت اشتراک
+                const response = await fetch('/api/refine', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
                         idea: ideaInput.value,
                         fingerprint: getFingerprint(),
                         is_premium: userSubscriptionStatus === 'paid'
+                    })
                 });
+                // بررسی خطای محدودیت روزانه (429)
                 if (response.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 response.json();
                 if (data.error) throw new Error(data.error);
+                const { lyrics, musicPrompt } = data;
                 loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
                 const payload = [
+                    getVal('model_select'), "custom", null, "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}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 = "هوش مصنوعی در حال خواندن...";
             }
         });
         function handleAudioOutput(data, lyrics, idea) {
+            const processedUrls = new Set();
+            let hasResult = false;
+            function addAudio(url) {
+                const fullUrl = url.startsWith('http') ? url : ACE_SPACE_URL.replace(/\/$/, '') + url;
+                if (processedUrls.has(fullUrl)) return;
+                processedUrls.add(fullUrl);
+                hasResult = true;
+                if (processedUrls.size === 1) {
+                    // تنظیم دکمه دانلود اصلی
+                    mainDownloadBtn.style.display = 'inline-flex';
+                    mainDownloadBtn.onclick = (e) => handleSecureDownload(fullUrl, e);
+                    saveToHistory(idea, lyrics, fullUrl);
                 }
+                playerWrapper.innerHTML += `<div class="audio-item"><audio controls autoplay src="${fullUrl}"></audio></div>`;
             }
+            function traverse(obj) {
+                if (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) addAudio(obj);
+                else if (obj && typeof obj === 'object') {
+                    if (obj.url && obj.url.endsWith('.mp3')) addAudio(obj.url);
+                    Object.values(obj).forEach(traverse);
                 }
             }
+            traverse(data);
+            if (hasResult) {
+                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';
+                finalLyricsBox.innerHTML = formatLyrics(lyrics);
+                window.scrollTo({ top: 0, behavior: 'smooth' });
             } else {
+                alert("فایل صوتی یافت نشد!");
+                step1.style.display = 'block';
+                historySection.style.display = 'block';
             }
         }
+        function formatLyrics(text) { return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>'); }
         const canvas = document.getElementById('music-canvas');
         const ctx = canvas.getContext('2d');
         let t = 0;
         }
         anim();
     </script>
+</body>
 </html>