Update index.html

index.html

@@ -97,7 +97,11 @@
             font-size: 1.1rem; font-weight: 700; cursor: pointer; 
             display: flex; justify-content: center; align-items: center; gap: 10px;
             box-shadow: 0 5px 15px var(--accent-glow);
-            transition: transform 0.2s;
+            transition: all 0.2s ease-out;
+        }
+        .btn-main:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px var(--accent-glow);
         }
         .btn-main:active { transform: scale(0.98); }
         .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); }
@@ -205,7 +209,7 @@
             <button id="processBtn" class="btn-main" style="margin-top: 15px;"><span>ساخت آهنگ 🎵</span></button>
         </div>
 
-        <div id="loader">
+        <div id="loader" style="display: none;">
             <div class="wave-bars"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>
             <p id="loaderText">در حال پردازش...</p>
         </div>
@@ -218,7 +222,7 @@
             <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>
+            <button onclick="location.reload()" class="btn-main btn-outline">برگشت و ساخت آهنگ جدید</button>
         </div>
 
         <div id="historySection">
@@ -232,7 +236,8 @@
 
     <script>
         const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
-        
+        let db; // متغیر برای نگهداری اتصال به پایگاه داده
+
         // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
@@ -260,70 +265,114 @@
             });
         }
 
-        // --- مدیریت سوابق ---
-        function loadHistory() {
-            const history = JSON.parse(localStorage.getItem('alphaHistory')) || [];
-            historyList.innerHTML = '';
-            
-            if (history.length === 0) {
-                historyList.innerHTML = '<div style="text-align:center; color:#999; padding:20px;">هنوز آهنگی نساخته‌اید</div>';
-                return;
-            }
+        // --- مدیریت پایگاه داده IndexedDB ---
+        function initDB() {
+            const request = indexedDB.open("alphaMusicDB", 1);
 
-            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);
-                historyList.appendChild(div);
-            });
+            request.onerror = (event) => console.error("خطای IndexedDB:", event);
+            request.onsuccess = (event) => {
+                db = event.target.result;
+                loadHistory(); // بارگذاری سوابق پس از اتصال موفق
+            };
+            request.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                db.createObjectStore("songs", { keyPath: "id" });
+            };
         }
 
-        function saveToHistory(idea, lyrics, audioUrl) {
-            let history = JSON.parse(localStorage.getItem('alphaHistory')) || [];
-            const newItem = {
-                id: Date.now(), idea: idea, lyrics: lyrics, audioUrl: audioUrl,
-                date: new Date().toLocaleDateString('fa-IR', { hour: '2-digit', minute: '2-digit' })
+        async function saveToHistory(idea, lyrics, audioUrl) {
+            try {
+                // دریافت فایل صوتی به صورت Blob
+                const response = await fetch(audioUrl);
+                const audioBlob = await response.blob();
+                
+                const newItem = {
+                    id: Date.now(), idea: idea, lyrics: lyrics, audioBlob: 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);
+
+                // مدیریت محدودیت 10 آیتم
+                const countReq = store.count();
+                countReq.onsuccess = () => {
+                    if (countReq.result > 10) {
+                        const cursorReq = store.openCursor(); // قدیمی‌ترین اولین است
+                        cursorReq.onsuccess = (e) => {
+                            const cursor = e.target.result;
+                            if (cursor) {
+                                cursor.delete();
+                            }
+                        };
+                    }
+                };
+
+                transaction.oncomplete = () => loadHistory();
+
+            } catch (error) {
+                console.error("خطا در ذخیره آهنگ:", error);
+                alert("خطایی در ذخیره آهنگ در مرورگر رخ داد. ممکن است لینک موقتی باشد.");
+            }
+        }
+
+        function loadHistory() {
+            if (!db) return;
+            const transaction = db.transaction(["songs"], "readonly");
+            const store = transaction.objectStore("songs");
+            const allReq = store.getAll();
+
+            allReq.onsuccess = () => {
+                const history = allReq.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-play">▶ نمایش</div>
+                    `;
+                    div.onclick = () => openHistoryItem(item);
+                    historyList.appendChild(div);
+                });
             };
-            history.unshift(newItem);
-            if (history.length > 10) history.pop();
-            localStorage.setItem('alphaHistory', JSON.stringify(history));
-            loadHistory();
         }
 
         function openHistoryItem(item) {
-            // مخفی کردن صفحه اصلی
             step1.style.display = 'none';
             historySection.style.display = 'none';
+            
+            // تبدیل Blob به URL قابل پخش
+            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.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 = item.audioUrl;
+            mainDownloadLink.href = audioURL;
             mainDownloadLink.style.display = 'inline-block';
-            playerWrapper.innerHTML = `<audio controls autoplay src="${item.audioUrl}"></audio>`;
+            playerWrapper.innerHTML = `<audio controls autoplay src="${audioURL}"></audio>`;
             finalLyricsBox.innerHTML = formatLyrics(item.lyrics);
             
-            // نمایش صفحه نتیجه
             finalResult.style.display = 'block';
             window.scrollTo({ top: 0, behavior: 'smooth' });
         }
         
-        loadHistory();
+        // شروع به کار پایگاه داده
+        initDB();
 
         // --- فرآیند اصلی ساخت آهنگ ---
         processBtn.addEventListener('click', async () => {
@@ -331,29 +380,18 @@
             
             processBtn.disabled = true;
             step1.style.display = 'none';
-            historySection.style.display = 'none'; // مخفی کردن سابقه
+            historySection.style.display = 'none';
             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 })
-                });
-                
+                const response = await fetch('/api/refine', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ idea: ideaInput.value }) });
                 const data = await response.json();
                 if (data.error) throw new Error(data.error);
 
-                const lyrics = data.lyrics;
-                const musicPrompt = data.music_prompt;
-
+                const { lyrics, musicPrompt } = data;
                 loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
                 
-                formatLyricsForDisplay(lyrics);
-                playerWrapper.innerHTML = ''; 
-
                 const payload = [
                     getVal('model_select'), "custom", null, "unknown", musicPrompt, lyrics, 0, "", "", "unknown", 
                     getNum('steps_input'), getNum('cfg_input'), true, getNum('seed_input'), null, -1, 
@@ -363,16 +401,10 @@
                 ];
 
                 const session_hash = Math.random().toString(36).substring(2);
-                const joinResp = await fetch(`${ACE_SPACE_URL}gradio_api/queue/join`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ data: payload, fn_index: 77, session_hash })
-                });
-
+                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 = "هوش مصنوعی در حال خواندن...";
@@ -388,7 +420,7 @@
                 alert("خطا: " + e.message);
                 loader.style.display = 'none';
                 step1.style.display = 'block';
-                historySection.style.display = 'block'; // نمایش مجدد سابقه در صورت خطا
+                historySection.style.display = 'block';
                 processBtn.disabled = false;
             }
         });
@@ -406,9 +438,8 @@
                 if (processedUrls.size === 1) {
                     mainDownloadLink.href = fullUrl;
                     mainDownloadLink.style.display = 'inline-block';
-                    saveToHistory(idea, lyrics, fullUrl);
+                    saveToHistory(idea, lyrics, fullUrl); // ذخیره سازی در IndexedDB
                 }
-
                 playerWrapper.innerHTML += `<div class="audio-item"><audio controls src="${fullUrl}"></audio></div>`;
             }
 
@@ -423,12 +454,10 @@
 
             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.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("فایل صوتی یافت نشد!");
@@ -438,7 +467,6 @@
         }
 
         function formatLyrics(text) { return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>'); }
-        function formatLyricsForDisplay(text) { finalLyricsBox.innerHTML = formatLyrics(text); }
 
         const canvas = document.getElementById('music-canvas');
         const ctx = canvas.getContext('2d');