Update index.html

index.html

@@ -19,6 +19,8 @@
             --accent-secondary: #9F7AEA; /* رنگ دوم برای گرادینت */
             --accent-glow: rgba(74, 108, 250, 0.2);  
             --success-color: #38A169;  
+            --danger-color: #e53e3e;
+            --danger-glow: rgba(229, 62, 62, 0.25);
             --radius-card: 20px;  
             --radius-btn: 14px;  
         }  
@@ -26,123 +28,60 @@
         * { 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;
+            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);
+            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;
-            background: #fff; border-radius: 50%;
-            display: flex; align-items: center; justify-content: center;
-            box-shadow: 0 10px 25px var(--accent-glow);
-            color: var(--accent-primary);
+            width: 80px; height: 80px; margin: 0 auto 15px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
+            box-shadow: 0 10px 25px var(--accent-glow); color: var(--accent-primary);
         }
-        
         h1 { 
-            font-size: 1.8rem; font-weight: 800; margin: 0; 
-            background: linear-gradient(90deg, #2d3748, #4A6CFA); 
+            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; }  
 
-        .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;
-        }
+        .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;
+            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; }
 
-        /* --- START: دکمه اصلی کاملاً جدید و خفن --- */
-        @keyframes move-gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-
+        @keyframes move-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
         .btn-main { 
-            width: 100%; padding: 16px; 
-            background: linear-gradient(110deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary));
-            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;
+            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-content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            transition: transform 0.3s ease;
-        }
-        .btn-main:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 12px 28px -5px rgba(124, 93, 250, 0.4);
-        }
-        .btn-main:hover .btn-main-content {
-            transform: scale(1.05);
-        }
-        .btn-main::before { /* لایه زیرین برای افکت حاشیه */
-            content: '';
-            position: absolute;
-            top: -2px; left: -2px; right: -2px; bottom: -2px;
+        .btn-main-content { display: flex; align-items: center; justify-content: center; gap: 10px; transition: transform 0.3s ease; }
+        .btn-main:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -5px rgba(124, 93, 250, 0.4); }
+        .btn-main:hover .btn-main-content { transform: scale(1.05); }
+        .btn-main::before { 
+            content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
             background: linear-gradient(110deg, var(--accent-secondary), var(--accent-primary), var(--accent-secondary));
-            background-size: 400%;
-            border-radius: 16px;
-            z-index: -1;
-            opacity: 0;
-            transition: opacity 0.4s ease-out;
-        }
-        .btn-main:hover::before {
-            opacity: 1;
-            animation: move-gradient 4s linear infinite;
+            background-size: 400%; border-radius: 16px; z-index: -1; opacity: 0; transition: opacity 0.4s ease-out;
         }
+        .btn-main:hover::before { opacity: 1; animation: move-gradient 4s linear infinite; }
         .btn-main:active { transform: scale(0.98); }
         .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); }
-        /* --- END: دکمه اصلی کاملاً جدید --- */
-
-        .btn-outline {
-            background: transparent; border: 2px solid var(--input-border);
-            color: var(--text-secondary); margin-top: 10px;
-            transition: all 0.2s;
-        }
+        .btn-outline { background: transparent; border: 2px solid var(--input-border); color: var(--text-secondary); margin-top: 10px; transition: all 0.2s; }
         .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
 
-        /* تنظیمات پیشرفته */
         .accordion {
             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;
@@ -153,55 +92,59 @@
         .accordion.active { border-radius: 12px 12px 0 0; border-bottom: none; }
         .accordion.active:after { content: '🔼'; }
         
-        .panel {
-            padding: 0 15px; background-color: var(--input-bg); max-height: 0; overflow: hidden;
-            transition: max-height 0.3s ease-out; border-radius: 0 0 12px 12px;
-            margin-bottom: 0; border: 1px solid var(--input-border); border-top: none;
-        }
+        .panel { padding: 0 15px; background-color: var(--input-bg); max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; border-radius: 0 0 12px 12px; 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; }
         .settings-group label { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 6px; font-weight: 500; }
         .checkbox-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 5px; padding-bottom: 15px; border-top: 1px solid #e2e8f0; padding-top: 15px; }
         .checkbox-wrapper input { width: 20px; height: 20px; cursor: pointer; }
 
-        /* پلیر و متن */
         .player-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--panel-border); }
-        #mainDownloadLink {
-            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: none;
-        }
+        #mainDownloadLink { 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: none; }
         #mainDownloadLink:hover { background-color: rgba(74, 108, 250, 0.2); }
-        .audio-item { margin-bottom: 10px; }
         audio { width: 100%; height: 45px; border-radius: 20px; margin-top: 5px; }
-        .lyrics-container {
-            background: var(--input-bg); border-radius: 16px; padding: 20px; max-height: 350px; overflow-y: auto;
-            white-space: pre-wrap; line-height: 2; font-size: 1rem; color: #4a5568; text-align: center; border: 1px solid var(--input-border); margin-top: 15px;
-        }
+        .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(2) { animation-delay: 0.1s; height: 60%; }
-        .bar:nth-child(3) { animation-delay: 0.2s; height: 80%; }
-        .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; }
-        .history-card {
-            background: white; border-radius: 16px; padding: 15px; display: flex; align-items: center; justify-content: space-between;
-            border: 1px solid var(--panel-border); transition: all 0.3s; cursor: pointer;
-        }
+        .history-card { background: white; border-radius: 16px; padding: 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--panel-border); transition: all 0.3s; cursor: pointer; position: relative; }
         .history-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(74, 108, 250, 0.15); border-color: var(--accent-primary); }
         .h-info { display: flex; align-items: center; gap: 15px; }
         .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-play { color: var(--accent-primary); opacity: 0; transition: 0.3s; transform: scale(0.8); }
-        .history-card:hover .h-play { opacity: 1; transform: scale(1); }
+        
+        .h-action { position: absolute; right: 15px; top: 15px; bottom: 15px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; transform: scale(0.8); pointer-events: none; }
+        .history-card:hover .h-action.play, .history-card.show-delete .h-action.delete { opacity: 1; transform: scale(1); pointer-events: auto; }
+        .action-btn { font-weight: 600; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; }
+        .play-btn { color: var(--accent-primary); background-color: rgba(74, 108, 250, 0.1); }
+        .delete-btn { color: var(--danger-color); background-color: rgba(229, 62, 62, 0.1); }
+        
+        /* مودال حذف */
+        .modal-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
+            z-index: 1000; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s;
+        }
+        .modal-overlay.open { display: flex; opacity: 1; }
+        .modal-content {
+            background: white; border-radius: 20px; padding: 25px; transform: scale(0.9); transition: transform 0.3s;
+            width: 90%; max-width: 400px; text-align: center;
+        }
+        .modal-overlay.open .modal-content { transform: scale(1); }
+        .modal-content h3 { font-size: 1.3rem; margin-top: 10px; margin-bottom: 10px; color: var(--text-primary); }
+        .modal-content p { color: var(--text-secondary); margin-bottom: 25px; line-height: 1.6; }
+        .modal-actions { display: flex; gap: 15px; }
+        .modal-btn { flex: 1; padding: 12px; border: none; border-radius: var(--radius-btn); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
+        .modal-btn-confirm { background-color: var(--danger-color); color: white; box-shadow: 0 4px 15px var(--danger-glow); }
+        .modal-btn-confirm:hover { background-color: #c53030; transform: translateY(-2px); box-shadow: 0 6px 20px var(--danger-glow); }
+        .modal-btn-cancel { background-color: var(--input-bg); color: var(--text-secondary); border: 1px solid var(--input-border); }
+        .modal-btn-cancel:hover { background-color: var(--panel-border); color: var(--text-primary); }
 
         @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
     </style>
@@ -211,20 +154,14 @@
 
     <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>
+            <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>  
         </header>  
 
         <div id="step1" class="card">
-            <div class="form-label">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>
-                موضوع آهنگ چیه؟
-            </div>
+            <div class="form-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path></svg>موضوع آهنگ چیه؟</div>
             <textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد..."></textarea>
-            
             <button class="accordion">تنظیمات پیشرفته</button>
             <div class="panel">
                 <div class="settings-grid">
@@ -256,17 +193,26 @@
         </div>
 
         <div id="historySection">
-            <div class="history-title">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
-                آخرین آهنگ‌های ساخته شده
-            </div>
+            <div class="history-title"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>آخرین آهنگ‌های ساخته شده</div>
             <div class="history-list" id="historyList"></div>
         </div>
     </div>
 
+    <!-- مودال تایید حذف -->
+    <div id="deleteModal" class="modal-overlay">
+        <div class="modal-content">
+            <h3>تایید حذف</h3>
+            <p>آیا از حذف این آهنگ از سابقه خود مطمئن هستید؟ این عمل غیرقابل بازگشت است.</p>
+            <div class="modal-actions">
+                <button id="cancelDeleteBtn" class="modal-btn modal-btn-cancel">انصراف</button>
+                <button id="confirmDeleteBtn" class="modal-btn modal-btn-confirm">بله، حذف کن</button>
+            </div>
+        </div>
+    </div>
+
     <script>
         const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
-        let db;
+        let db, songIdToDelete = null;
 
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
@@ -279,6 +225,9 @@
         const mainDownloadLink = document.getElementById('mainDownloadLink');
         const historyList = document.getElementById('historyList');
         const historySection = document.getElementById('historySection');
+        const deleteModal = document.getElementById('deleteModal');
+        const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
+        const cancelDeleteBtn = document.getElementById('cancelDeleteBtn');
 
         const getVal = (id) => document.getElementById(id).value;
         const getNum = (id) => Number(document.getElementById(id).value);
@@ -286,41 +235,27 @@
 
         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";
-            });
+            acc[i].addEventListener("click", function() { this.classList.toggle("active"); const panel = this.nextElementSibling; panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px"; });
         }
 
         function initDB() {
             const request = indexedDB.open("alphaMusicDB", 1);
-            request.onerror = (event) => console.error("IndexedDB error:", event);
-            request.onsuccess = (event) => { db = event.target.result; loadHistory(); };
-            request.onupgradeneeded = (event) => {
-                event.target.result.createObjectStore("songs", { keyPath: "id" });
-            };
+            request.onerror = (e) => console.error("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 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) => {
-                            const cursor = e.target.result;
-                            if (cursor) cursor.delete();
-                        };
+                store.count().onsuccess = (e) => {
+                    if (e.target.result > 10) {
+                        store.openCursor().onsuccess = (ev) => { const cursor = ev.target.result; if (cursor) cursor.delete(); };
                     }
                 };
                 transaction.oncomplete = () => loadHistory();
@@ -340,27 +275,53 @@
                 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-play">▶ نمایش</div>`;
-                    div.onclick = () => openHistoryItem(item);
+                    div.innerHTML = `<div class="h-info"><div class="h-icon">🎵</div><div class="h-details"><h4>${item.idea.substring(0, 30)}${item.idea.length > 30 ? '...' : ''}</h4><span>${item.date}</span></div></div>
+                        <div class="h-action play"><button class="action-btn play-btn">▶ نمایش</button></div>
+                        <div class="h-action delete"><button class="action-btn delete-btn" onclick="event.stopPropagation(); openDeleteModal(${item.id})">🗑️ حذف</button></div>`;
+                    
+                    div.onclick = () => { if (!div.classList.contains('show-delete')) openHistoryItem(item); };
+                    div.oncontextmenu = (ev) => {
+                        ev.preventDefault();
+                        document.querySelectorAll('.history-card.show-delete').forEach(c => c.classList.remove('show-delete'));
+                        div.classList.add('show-delete');
+                    };
                     historyList.appendChild(div);
                 });
             };
         }
+        
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.history-card.show-delete')) {
+                document.querySelectorAll('.history-card.show-delete').forEach(c => c.classList.remove('show-delete'));
+            }
+        }, true);
+        
+        function openDeleteModal(id) { songIdToDelete = id; deleteModal.classList.add('open'); }
+        function closeDeleteModal() { deleteModal.classList.remove('open'); songIdToDelete = null; }
+        
+        function deleteSongFromDB() {
+            if (!songIdToDelete) return;
+            const transaction = db.transaction(["songs"], "readwrite");
+            const store = transaction.objectStore("songs");
+            store.delete(songIdToDelete);
+            transaction.oncomplete = () => { closeDeleteModal(); loadHistory(); };
+        }
+
+        cancelDeleteBtn.addEventListener('click', closeDeleteModal);
+        deleteModal.addEventListener('click', (e) => { if (e.target === deleteModal) closeDeleteModal(); });
+        confirmDeleteBtn.addEventListener('click', deleteSongFromDB);
 
         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)';
-
             mainDownloadLink.href = audioURL;
             mainDownloadLink.style.display = 'inline-block';
             playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`;
             finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
-            
             finalResult.style.display = 'block';
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
@@ -369,7 +330,6 @@
 
         processBtn.addEventListener('click', async () => {
             if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
-            
             processBtn.disabled = true;
             step1.style.display = 'none';
             historySection.style.display = 'none';
@@ -384,14 +344,7 @@
                 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, 
-                    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 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, 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('خطا در اتصال به سرور موزیک');
@@ -407,7 +360,6 @@
                     }
                 };
                 eventSource.onerror = () => { throw new Error('ارتباط با سرور قطع شد.'); };
-
             } catch (e) {
                 alert("خطا: " + e.message);
                 loader.style.display = 'none';
@@ -426,13 +378,11 @@
                 if (processedUrls.has(fullUrl)) return;
                 processedUrls.add(fullUrl);
                 hasResult = true;
-
                 if (processedUrls.size === 1) {
                     mainDownloadLink.href = fullUrl;
                     mainDownloadLink.style.display = 'inline-block';
                     saveToHistory(idea, lyrics, fullUrl);
                 }
-                
                 playerWrapper.innerHTML += `<div class="audio-item"><audio controls autoplay src="${fullUrl}"></audio></div>`;
             }