Update index.html

index.html

@@ -161,9 +161,22 @@
             border-bottom: 1px solid var(--panel-border);
         }
         
-        .audio-item { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--panel-border); }
-        .audio-item:last-child { border-bottom: none; margin-bottom: 0; }
-        audio { width: 100%; height: 40px; border-radius: 20px; margin-top: 5px; }
+        /* استایل دکمه دانلود در هدر */
+        #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);
@@ -294,8 +307,12 @@
             <div class="player-header">
                 <div style="font-weight: 700; color: var(--success-color); display: flex; align-items: center; gap: 5px;">
                     <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>
-                    آهنگ‌ها آماده شدند
+                    آهنگ آماده شد
                 </div>
+                <!-- دکمه دانلود اینجا قرار گرفت -->
+                <a id="mainDownloadLink" href="#" target="_blank" download>
+                    دانلود آهنگ 📥
+                </a>
             </div>
 
             <div id="playerWrapper"></div>
@@ -328,6 +345,7 @@
         const finalResult = document.getElementById('finalResult');
         const playerWrapper = document.getElementById('playerWrapper');
         const finalLyricsBox = document.getElementById('finalLyricsBox');
+        const mainDownloadLink = document.getElementById('mainDownloadLink');
 
         // فعال‌سازی آکاردئون
         const acc = document.getElementsByClassName("accordion");
@@ -384,7 +402,7 @@
             }
         });
 
-        // مرحله ۲: ساخت آهنگ (اتصال به تنظیمات پیشرفته)
+        // مرحله ۲: ساخت آهنگ
         generateAudioBtn.addEventListener('click', async () => {
             generateAudioBtn.disabled = true;
             step2.style.display = 'none';
@@ -393,25 +411,24 @@
 
             try {
                 formatLyricsForDisplay(generatedLyrics.value);
-                playerWrapper.innerHTML = ''; // پاک کردن نتایج قبلی
+                playerWrapper.innerHTML = ''; 
 
-                // ساخت Payload با تمام تنظیمات کاربر
                 const payload = [
-                    getVal('model_select'), // 0: مدل
+                    getVal('model_select'), 
                     "custom", null, "unknown",
-                    generatedPrompt.value, // 4: پرامپت
-                    generatedLyrics.value, // 5: متن شعر
+                    generatedPrompt.value, 
+                    generatedLyrics.value, 
                     0, "", "", "unknown", 
-                    getNum('steps_input'), // 10: تعداد گام
-                    getNum('cfg_input'),   // 11: CFG
+                    getNum('steps_input'), 
+                    getNum('cfg_input'),   
                     true, 
-                    getNum('seed_input'),  // 13: سید
+                    getNum('seed_input'),  
                     null, -1, 
-                    getNum('batch_size'),  // 16: تعداد خروجی (Batch Size)
+                    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'), // 32: حالت تفکر
+                    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
                 ];
 
@@ -451,21 +468,30 @@
         });
 
         function handleAudioOutput(data) {
-            let found = false;
+            // استفاده از Set برای جلوگیری از تکرار فایل یکسان
+            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) {
+                    mainDownloadLink.href = fullUrl;
+                    mainDownloadLink.style.display = 'inline-block';
+                }
+
+                // ساخت پلیر
                 const div = document.createElement('div');
                 div.className = 'audio-item';
-                div.innerHTML = `
-                    <div style="font-size:0.9em; margin-bottom:5px; color:#555;">🎵 خروجی آهنگ</div>
-                    <audio controls src="${fullUrl}"></audio>
-                    <div style="text-align:left; margin-top:5px;">
-                        <a href="${fullUrl}" target="_blank" style="color:var(--accent-primary); font-size:0.9em;">دانلود فایل</a>
-                    </div>
-                `;
+                div.innerHTML = `<audio controls src="${fullUrl}"></audio>`;
                 playerWrapper.appendChild(div);
-                found = true;
             }
 
             function traverse(obj) {
@@ -478,7 +504,7 @@
             }
             traverse(data);
 
-            if (found) {
+            if (hasResult) {
                 finalResult.style.display = 'block';
                 window.scrollTo({ top: 0, behavior: 'smooth' });
             } else {
@@ -492,7 +518,6 @@
             finalLyricsBox.innerHTML = formatted;
         }
 
-        // انیمیشن پس‌زمینه
         const canvas = document.getElementById('music-canvas');
         const ctx = canvas.getContext('2d');
         let t = 0;