Update index.html

index.html

@@ -66,6 +66,7 @@
         }  
         .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;
@@ -101,23 +102,7 @@
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
 
-        /* فایل آپلود */
-        .file-upload-box {
-            position: relative;
-            border: 2px dashed var(--input-border);
-            border-radius: 12px;
-            padding: 20px;
-            text-align: center;
-            background: var(--input-bg);
-            cursor: pointer;
-            transition: 0.3s;
-        }
-        .file-upload-box:hover { border-color: var(--accent-primary); background: #fff; }
-        .file-upload-box input {
-            position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer;
-        }
-        .file-info-text { font-size: 0.85rem; color: var(--text-secondary); pointer-events: none; }
-
+        /* دکمه اصلی */
         @keyframes move-gradient {
             0% { background-position: 0% 50%; }
             50% { background-position: 100% 50%; }
@@ -149,6 +134,7 @@
         }
         .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;
@@ -164,10 +150,13 @@
             margin-bottom: 0; border: 1px solid var(--input-border); border-top: none;
         }
         .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px 0; }
-        .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding: 10px 0; border-top: 1px solid #e2e8f0; }
+        .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;
@@ -184,6 +173,7 @@
         }
         .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; }
@@ -192,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; }
@@ -204,16 +195,19 @@
         .h-icon { width: 45px; height: 45px; background: var(--input-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent-primary); font-size: 1.2rem; }
         .h-details h4 { margin: 0; font-size: 1rem; color: var(--text-primary); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
         .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; z-index: 10;
+            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);
         }
         .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);
@@ -223,18 +217,39 @@
         .modal-box {
             background: white; width: 90%; max-width: 400px;
             border-radius: 24px; padding: 30px; text-align: center;
-            transform: scale(0.9); transition: transform 0.3s;
+            transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             box-shadow: 0 20px 60px rgba(0,0,0,0.2);
         }
-        .modal-icon-warn { width: 60px; height: 60px; background: #fee2e2; color: var(--danger-color); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
+        .modal-icon-warn {
+            width: 60px; height: 60px; background: #fee2e2; color: var(--danger-color);
+            border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
+        }
         .modal-box h3 { margin: 0 0 10px; color: var(--text-primary); }
         .modal-box p { color: var(--text-secondary); margin: 0 0 25px; font-size: 0.95rem; }
         .modal-actions { display: flex; gap: 10px; justify-content: center; }
         .btn-modal { padding: 12px 24px; border-radius: 12px; font-weight: 700; border: none; cursor: pointer; flex: 1; font-size: 1rem; transition: 0.2s; }
         .btn-cancel { background: var(--input-bg); color: var(--text-secondary); }
-        .btn-confirm { background: var(--danger-color); color: white; }
-        .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; }
-        .btn-upgrade { background: var(--premium-gradient); color: #333; box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3); }
+        .btn-cancel:hover { background: #e2e8f0; }
+        .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); }
@@ -260,32 +275,29 @@
             </div>
             <textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد..."></textarea>
             
-            <button class="accordion">تنظیمات پیشرفته (Audio & Mode)</button>
+            <button class="accordion">تنظیمات پیشرفته</button>
             <div class="panel">
                 <div class="settings-grid">
-                    <div class="settings-group"><label>مدل هوش مصنوعی:</label><select id="model_select"><option value="acestep-v15-turbo-shift3" selected>Turbo-Shift3 (دقیق)</option><option value="acestep-v15-turbo">Turbo (سریع)</option></select></div>
-                    <div class="settings-group"><label>مدت زمان (تخمینی):</label><select id="duration_select"><option value="short">کوتاه (۱-۲ دقیقه)</option><option value="standard" selected>استاندارد (۳ دقیقه)</option></select></div>
+                    <div class="settings-group"><label>مدل هوش مصنوعی:</label><select id="model_select"><option value="acestep-v15-turbo-shift3" selected>Turbo-Shift3 (دقیق‌ترین)</option><option value="acestep-v15-turbo">Turbo (سریع‌ترین)</option></select></div>
+                    <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="settings-group" style="margin-top: 10px; margin-bottom: 15px;">
+
+                <!-- بخش اضافه شده: آپلود فایل نمونه -->
+                <div class="settings-group" style="border-top: 1px solid #e2e8f0; padding-top: 15px; margin-bottom: 10px;">
                     <label>آپلود آهنگ نمونه (Audio Conditioning):</label>
-                    <div class="file-upload-box" onclick="document.getElementById('audio_file').click()">
-                        <input type="file" id="audio_file" accept="audio/*" onchange="handleFileSelect(this)">
-                        <div id="file_label" class="file-info-text">برای آپلود کلیک کنید یا فایل را اینجا رها کنید</div>
-                    </div>
+                    <input type="file" id="audio_reference" accept="audio/*" style="padding: 10px;">
                 </div>
 
-                <!-- چک‌باکس‌ها -->
+                <!-- بخش اضافه شده: چک‌باکس بی‌کلام -->
                 <div class="checkbox-wrapper">
                     <input type="checkbox" id="instrumental_chk">
-                    <label for="instrumental_chk" style="cursor: pointer;"><b>حالت بی‌کلام (Instrumental)</b><br><span style="font-size: 0.8rem; color: #666;">بدون خواننده، فقط موسیقی</span></label>
+                    <label for="instrumental_chk" style="font-size: 0.9rem; cursor: pointer;"><b>حالت بی‌کلام (Instrumental)</b><br><span style="font-size: 0.8rem; color: #666;">بدون خواننده، فقط موسیقی</span></label>
                 </div>
 
-                <div class="settings-grid">
-                    <div class="settings-group"><label>تعداد خروجی:</label><input type="number" id="batch_size" value="1" min="1" max="2"></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>
@@ -301,10 +313,8 @@
                 <button id="mainDownloadBtn" class="download-btn-style">دانلود آهنگ 📥</button>
             </div>
             <div id="playerWrapper"></div>
-            <div id="lyricsSection">
-                <div class="form-label" style="margin-top: 20px; justify-content: center; color: #718096;">متن آهنگ</div>
-                <div class="lyrics-container" id="finalLyricsBox"></div>
-            </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>
 
@@ -317,12 +327,14 @@
         </div>
     </div>
 
-    <!-- مودال‌ها -->
+    <!-- مودال تایید حذف -->
     <div class="modal-overlay" id="deleteConfirmModal">
         <div class="modal-box">
-            <div class="modal-icon-warn">🗑️</div>
+            <div class="modal-icon-warn">
+                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path></svg>
+            </div>
             <h3>آیا مطمئن هستید؟</h3>
-            <p>این آهنگ برای همیشه حذف خواهد شد.</p>
+            <p>این آهنگ برای همیشه از سوابق شما حذف خواهد شد و قابل بازگشت نیست.</p>
             <div class="modal-actions">
                 <button class="btn-modal btn-cancel" onclick="closeDeleteModal()">انصراف</button>
                 <button class="btn-modal btn-confirm" onclick="confirmDelete()">بله، حذف شود</button>
@@ -330,11 +342,12 @@
         </div>
     </div>
 
+    <!-- مودال ارتقا به نسخه کامل -->
     <div class="modal-overlay" id="upgradeModal">
         <div class="modal-box">
             <div class="upgrade-icon">👑</div>
-            <h3 id="upgradeModalTitle">دانلود مخصوص اعضای ویژه</h3>
-            <p id="upgradeModalText">برای دانلود با کیفیت اصلی، حساب خود را ارتقا دهید.</p>
+            <h3 style="font-weight: 800; color: #333;" id="upgradeModalTitle">دانلود مخصوص اعضای ویژه</h3>
+            <p style="margin-bottom: 25px; line-height: 1.6;" id="upgradeModalText">برای دانلود آهنگ‌های ساخته شده با کیفیت اصلی و بدون محدودیت، لطفا حساب کاربری خود را به نسخه نامحدود ارتقا دهید.</p>
             <div class="modal-actions" style="flex-direction: column;">
                 <button class="btn-modal btn-upgrade" id="btnGoPremium">⭐️ ارتقا به نسخه کامل</button>
                 <button class="btn-modal btn-cancel" onclick="closeUpgradeModal()" style="width: 100%;">فعلاً نه</button>
@@ -344,13 +357,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/...'; 
+        const PREMIUM_URL = '#/nav/online/news/getSingle/1149636/eyJpdiI6InZSVUdlLzBlR0FzOHZJdXFZeWhER0E9PSIsInZhbHVlIjoiWFhqRXBLc29vSFpHdk9nYmRjZGVuWHRHRHVSZHRlTG1BUENLaE5mNXBNVVRGWFg3ZWN0djJ5K1dIY1RqTHJGaCIsIm1hYyI6IjIzYzFlZTMwYmVmMTdkYjQ0YTQ4YWMxNmFhN2RmNWQ2OTU0MjI0ZWVlZGI3ZjJjMjhkNmQxNjM4MDFlZTIxNmUiLCJ0YWciOiIifQ==/20934991';
 
         let db;
         let songToDeleteId = null;
-        let userSubscriptionStatus = 'free';
+        let userSubscriptionStatus = 'free'; // پیش‌فرض رایگان
 
+        // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
@@ -359,16 +374,19 @@
         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 deleteModal = document.getElementById('deleteConfirmModal');
         const upgradeModal = document.getElementById('upgradeModal');
+        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() {
@@ -378,154 +396,239 @@
             });
         }
 
-        // نمایش نام فایل انتخاب شده
-        function handleFileSelect(input) {
-            const label = document.getElementById('file_label');
-            if (input.files && input.files[0]) {
-                label.innerText = "✅ " + input.files[0].name;
-                label.style.color = "var(--success-color)";
-            } else {
-                label.innerText = "برای آپلود کلیک کنید یا فایل را اینجا رها کنید";
-                label.style.color = "var(--text-secondary)";
-            }
-        }
-
-        // آپلود فایل به سرور Gradio
-        async function uploadToGradio(file) {
-            const formData = new FormData();
-            formData.append('files', file);
-            
-            try {
-                const response = await fetch(`${ACE_SPACE_URL}gradio_api/upload`, {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                // گرادیو معمولاً لیستی از فایل‌ها برمی‌گرداند. ما اولی را می‌خواهیم.
-                if (data && data[0]) {
-                    // برای Gradio Client باید آبجکت کامل فایل را بفرستیم
-                    // لاگ‌ها نشان می‌دهند که سرور `gradio_api/upload` فقط مسیر فایل را برمی‌گرداند (در نسخه قدیمی)
-                    // اما در نسخه جدیدتر ممکن است آبجکت کامل بدهد.
-                    // بر اساس لاگ شما: response -> ["/tmp/gradio/..."]
-                    // ما باید آبجکت FileData را دستی بسازیم
-                    return {
-                        "path": data[0],
-                        "url": `${ACE_SPACE_URL}gradio_api/file=${data[0]}`,
-                        "orig_name": file.name,
-                        "size": file.size,
-                        "mime_type": file.type,
-                        "meta": {"_type": "gradio.FileData"}
-                    };
-                }
-                return null;
-            } catch (e) {
-                console.error("Upload Error:", e);
-                alert("خطا در آپلود فایل صوتی");
-                return null;
-            }
-        }
-
-        // مدیریت اشتراک (مانند قبل)
+        // --- مدیریت اثر انگشت (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) || 
+                    userObject.accessible_pages.includes(parseInt(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 {
                     const userObject = JSON.parse(event.data.payload);
-                    userSubscriptionStatus = (userObject && userObject.isLogin && userObject.accessible_pages && 
-                           (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) || 
-                            userObject.accessible_pages.includes(parseInt(PREMIUM_PAGE_ID)))) ? 'paid' : 'free';
-                } catch (e) { userSubscriptionStatus = 'free'; }
+                    userSubscriptionStatus = isUserPaid(userObject) ? 'paid' : 'free';
+                } catch (e) {
+                    userSubscriptionStatus = 'free';
+                }
                 updateSubscriptionUI(userSubscriptionStatus);
             }
         });
+
+        // درخواست وضعیت کاربر در شروع برنامه
         parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*');
 
-        function updateSubscriptionUI(status) {
-            if (status === 'paid') {
-                statusBadge.textContent = 'نسخه نامحدود';
-                statusBadge.className = 'status-badge visible badge-premium';
+        // مدیریت کلیک دکمه دانلود (تابع امنیتی)
+        function handleSecureDownload(url, e) {
+            if (e) e.preventDefault();
+            
+            if (userSubscriptionStatus === 'free') {
+                // تنظیم متن مودال برای دانلود
+                upgradeModalTitle.innerText = "دانلود مخصوص اعضای ویژه";
+                upgradeModalText.innerText = "برای دانلود آهنگ‌های ساخته شده با کیفیت اصلی و بدون محدودیت، لطفا حساب کاربری خود را به نسخه نامحدود ارتقا دهید.";
+                upgradeModal.classList.add('open');
             } else {
-                statusBadge.textContent = 'نسخه رایگان';
-                statusBadge.className = 'status-badge visible badge-free';
+                // ارسال درخواست دانلود به آیفریم مادر
+                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);
+                }
             }
         }
 
-        // دیتابیس و تاریخچه (خلاصه شده برای اختصار - همان کد قبلی)
-        function initDB() { 
+        // دکمه ارتقا در مودال
+        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.onupgradeneeded = (e) => e.target.result.createObjectStore("songs", { keyPath: "id" });
-            request.onsuccess = (e) => { db = e.target.result; loadHistory(); };
+            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) {
-             const response = await fetch(audioUrl);
-             const audioBlob = await response.blob();
-             const transaction = db.transaction(["songs"], "readwrite");
-             transaction.objectStore("songs").add({
-                 id: Date.now(), idea, lyrics, audioBlob,
-                 date: new Date().toLocaleDateString('fa-IR', { hour: '2-digit', minute: '2-digit' })
-             });
-             transaction.oncomplete = () => loadHistory();
+            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); }
         }
+
         function loadHistory() {
+            if (!db) return;
             const store = db.transaction(["songs"], "readonly").objectStore("songs");
             store.getAll().onsuccess = (e) => {
                 const history = e.target.result.sort((a, b) => b.id - a.id);
                 historyList.innerHTML = '';
+                if (history.length === 0) {
+                    historyList.innerHTML = '<div style="text-align:center; color:#999; padding:20px;">هنوز آهنگی نساخته‌اید</div>';
+                    return;
+                }
                 history.forEach((item) => {
                     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)}...</h4><span>${item.date}</span></div></div>`;
-                    div.onclick = () => {
-                         const audioURL = URL.createObjectURL(item.audioBlob);
-                         playResult(audioURL, item.lyrics, true);
+                    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);
                 });
             };
         }
-        initDB();
 
-        function playResult(audioUrl, lyrics, isArchive) {
+        // --- توابع حذف ---
+        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';
-            finalResult.style.display = 'block';
-            playerWrapper.innerHTML = `<audio controls autoplay src="${audioUrl}" style="width:100%"></audio>`;
             
-            if (lyrics && lyrics.trim() !== "") {
-                finalLyricsBox.innerHTML = lyrics.replace(/\n/g, '<br>');
-                document.getElementById('lyricsSection').style.display = 'block';
-            } else {
-                document.getElementById('lyricsSection').style.display = 'none';
-            }
-
+            const audioURL = URL.createObjectURL(item.audioBlob);
             const headerText = document.getElementById('resultHeaderText');
-            headerText.innerHTML = isArchive ? "آرشیو آهنگ‌ها" : "آهنگ جدید آماده شد";
+            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);
             
-            const btn = document.getElementById('mainDownloadBtn');
-            btn.onclick = () => {
-                 if(userSubscriptionStatus === 'free') {
-                     document.getElementById('upgradeModal').classList.add('open');
-                 } else {
-                     parent.postMessage({ type: 'INITIATE_DOWNLOAD_FROM_URL', payload: { audioUrl } }, '*');
-                 }
-            };
-            window.scrollTo(0,0);
+            finalResult.style.display = 'block';
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         }
+        
+        initDB();
 
-        function closeUpgradeModal() { document.getElementById('upgradeModal').classList.remove('open'); }
-        document.getElementById('btnGoPremium').addEventListener('click', () => {
-            parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM', payload: { url: PREMIUM_URL } }, '*');
-        });
+        // --- تابع آپلود فایل صوتی به Gradio ---
+        async function uploadAudioFile(file) {
+            const formData = new FormData();
+            formData.append("files", file);
+            try {
+                const response = await fetch(`${ACE_SPACE_URL}gradio_api/upload`, {
+                    method: "POST",
+                    body: formData
+                });
+                const data = await response.json();
+                if (data && data.length > 0) {
+                    // ساختن آبجکت مورد نیاز Gradio Client
+                    // طبق لاگ‌ها، response یک آرایه از مسیرهاست: ["/tmp/gradio/..."]
+                    return {
+                        "path": data[0],
+                        "url": `${ACE_SPACE_URL}gradio_api/file=${data[0]}`,
+                        "orig_name": file.name,
+                        "size": file.size,
+                        "mime_type": file.type,
+                        "meta": {"_type": "gradio.FileData"}
+                    };
+                }
+                return null;
+            } catch (error) {
+                console.error("Upload failed:", error);
+                return null;
+            }
+        }
 
-        // --- پردازش اصلی ---
+        // --- فرآیند اصلی ---
         processBtn.addEventListener('click', async () => {
             if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
             
@@ -535,18 +638,19 @@
             loader.style.display = 'block';
             
             try {
-                // 1. آپلود فایل صوتی (اگر وجود داشت)
-                let audioInputObj = null;
-                const fileInput = document.getElementById('audio_file');
-                if (fileInput.files.length > 0) {
-                    loaderText.innerText = "در حال آپلود فایل صوتی...";
-                    audioInputObj = await uploadToGradio(fileInput.files[0]);
+                // 1. آپلود فایل صوتی اگر انتخاب شده باشد
+                const audioInput = document.getElementById('audio_reference');
+                let uploadedAudioObj = null;
+                if (audioInput.files.length > 0) {
+                    loaderText.innerText = "در حال آپلود فایل نمونه...";
+                    uploadedAudioObj = await uploadAudioFile(audioInput.files[0]);
                 }
 
-                // 2. دریافت متن/پرامپت از بک‌اند
-                loaderText.innerText = "آلفا در حال تفکر...";
+                // 2. درخواست متن و پرامپت از بک‌اند
+                loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
                 const isInstrumental = getChk('instrumental_chk');
                 
+                // ارسال درخواست به سرور با فینگرپرینت و وضعیت اشتراک
                 const response = await fetch('/api/refine', { 
                     method: 'POST', 
                     headers: {'Content-Type': 'application/json'}, 
@@ -554,57 +658,54 @@
                         idea: ideaInput.value,
                         fingerprint: getFingerprint(),
                         is_premium: userSubscriptionStatus === 'paid',
-                        is_instrumental: isInstrumental
+                        is_instrumental: isInstrumental // ارسال وضعیت بی‌کلام
                     }) 
                 });
 
-                if (response.status === 429) { throw new Error("محدودیت استفاده روزانه"); }
+                // بررسی خطای محدودیت روزانه (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 = "در حال ساخت آهنگ در استودیو...";
-
-                // 3. ارسال به Gradio
-                // ساختار دقیق Payload بر اساس لاگ‌های کاربر و ساختار ACE-Step
-                // Index 2 = Audio Input (File Object or null)
-                // Index 5 = Lyrics (Empty string if instrumental)
+                loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
                 
+                // اگر بی‌کلام انتخاب شده، متن خالی ارسال می‌شود (ایندکس 5)
                 const finalLyrics = isInstrumental ? "" : lyrics;
 
+                // ایندکس 2: فایل آپلود شده (null یا آبجکت فایل)
                 const payload = [
-                    getVal('model_select'), // 0: Model
-                    "custom",               // 1: Mode
-                    audioInputObj,          // 2: Audio Input (Conditioning) - NEW
-                    "unknown",              // 3: Sound Duration (custom handling)
-                    musicPrompt,            // 4: Prompt
-                    finalLyrics,            // 5: Lyrics
-                    0, "", "", "unknown",   // 6-9
-                    20, getNum('cfg_input'), true, -1, null, -1, // 10-15 (Steps, CFG, Seed)
-                    getNum('batch_size'), null, null, 0, -1, // 16-20 (Batch size)
-                    "Fill the audio semantic mask based on the given conditions:", 
+                    getVal('model_select'), "custom", uploadedAudioObj, "unknown", musicPrompt, finalLyrics, 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, 
-                    false, 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
+                    getChk('think_checkbox'), 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
                 ];
 
                 const 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 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 = isInstrumental ? "در حال تنظیم ملودی..." : "در حال خواندن...";
+                    if (msg.msg === 'process_starts') loaderText.innerText = "هوش مصنوعی در حال خواندن...";
                     else if (msg.msg === 'process_completed') {
                         eventSource.close();
                         loader.style.display = 'none';
-                        handleAudioOutput(msg.output, finalLyrics);
+                        handleAudioOutput(msg.output, lyrics, ideaInput.value);
                     }
                 };
                 eventSource.onerror = () => { throw new Error('ارتباط با سرور قطع شد.'); };
@@ -613,33 +714,56 @@
                 alert("خطا: " + e.message);
                 loader.style.display = 'none';
                 step1.style.display = 'block';
+                historySection.style.display = 'block';
                 processBtn.disabled = false;
             }
         });
 
-        function handleAudioOutput(data, lyrics) {
-            // پیدا کردن URL فایل MP3 از خروجی Gradio
-            let audioUrl = null;
+        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')) audioUrl = 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')) audioUrl = obj.url;
+                    if (obj.url && obj.url.endsWith('.mp3')) addAudio(obj.url);
                     Object.values(obj).forEach(traverse);
                 }
             }
             traverse(data);
 
-            if (audioUrl) {
-                const fullUrl = audioUrl.startsWith('http') ? audioUrl : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
-                saveToHistory(ideaInput.value, lyrics, fullUrl);
-                playResult(fullUrl, lyrics, false);
+            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("فایل صوتی یافت نشد!");
-                location.reload();
+                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;