Update index.html

index.html

@@ -15,8 +15,8 @@
             --input-border: #E1E7EF;  
             --text-primary: #1A202C;  
             --text-secondary: #626F86;  
-            --accent-primary: #D53F8C; /* رنگ جدید برای برند آلفا (صورتی/بنفش جذاب) */
-            --accent-glow: rgba(213, 63, 140, 0.2);  
+            --accent-primary: #4A6CFA;  
+            --accent-glow: rgba(74, 108, 250, 0.2);  
             --success-color: #38A169;  
             --radius-card: 20px;  
             --radius-btn: 14px;  
@@ -57,7 +57,7 @@
         
         h1 { 
             font-size: 1.8rem; font-weight: 800; margin: 0; 
-            background: linear-gradient(90deg, #2d3748, var(--accent-primary)); 
+            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; }  
@@ -89,10 +89,10 @@
         textarea { min-height: 120px; resize: vertical; }
         textarea:focus, input:focus, select:focus { border-color: var(--accent-primary); background: #fff; }
 
-        /* استایل دکمه‌ها */
+        /* دکمه‌ها */
         .btn-main { 
             width: 100%; padding: 16px; 
-            background: linear-gradient(135deg, var(--accent-primary), #9F7AEA); 
+            background: linear-gradient(135deg, var(--accent-primary), #3b5bdb); 
             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;
@@ -108,7 +108,7 @@
         }
         .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
 
-        /* استایل آکاردئون تنظیمات */
+        /* تنظیمات پیشرفته */
         .accordion {
             background-color: var(--input-bg);
             color: var(--text-primary);
@@ -152,18 +152,14 @@
         .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; }
 
-        /* بخش نتیجه */
-        #finalResult { display: none; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
-        
+        /* پلیر و متن */
         .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(213, 63, 140, 0.1);
+            background-color: rgba(74, 108, 250, 0.1);
             color: var(--accent-primary);
             text-decoration: none;
             font-size: 0.9rem;
@@ -173,11 +169,9 @@
             transition: 0.2s;
             display: none;
         }
-        #mainDownloadLink:hover { background-color: rgba(213, 63, 140, 0.2); }
-
+        #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;
@@ -192,17 +186,7 @@
             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;
-        }
+        .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; }
@@ -213,6 +197,54 @@
         .bar:nth-child(4) { animation-delay: 0.3s; height: 50%; }
         @keyframes jump { 0%, 100% { height: 20%; } 50% { height: 100%; } }
 
+        /* استایل بخش تاریخچه (History) */
+        .history-section {
+            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; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); 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 cubic-bezier(0.25, 0.8, 0.25, 1);
+            cursor: pointer;
+            position: relative; overflow: hidden;
+        }
+        .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); }
+
+        /* مودال (Modal) */
+        .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-content {
+            width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto;
+            background: white; border-radius: 20px; padding: 25px;
+            transform: scale(0.9); transition: transform 0.3s;
+            position: relative;
+        }
+        .modal-close {
+            position: absolute; top: 15px; left: 15px; background: #eee; border: none;
+            width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1.2rem;
+            display: flex; align-items: center; justify-content: center; color: #555;
+        }
+        .modal-overlay.open { display: flex; opacity: 1; }
+        .modal-overlay.open .modal-content { transform: scale(1); }
+
         .hidden { display: none; }
         @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
     </style>
@@ -223,14 +255,13 @@
     <div class="container">
         <header>  
             <div class="logo-box">
-                <!-- آیکون جدید موسیقی -->
                 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
             </div>
             <h1>استودیو موزیک آلفا</h1>  
             <p class="subtitle">ساخت آهنگ حرفه‌ای با هوش مصنوعی</p>  
         </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>
@@ -238,14 +269,13 @@
             </div>
             <textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، سبک پاپ شاد..."></textarea>
             
-            <!-- تنظیمات پیشرفته -->
-            <button class="accordion">تنظیمات پیشرفته (مدل، تعداد، کیفیت)</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-shift3" selected>Turbo-Shift3 (دقیق‌ترین)</option>
                             <option value="acestep-v15-turbo">Turbo (سریع‌ترین)</option>
                         </select>
                     </div>
@@ -288,36 +318,55 @@
             <p style="color: #718096; font-size: 0.9rem; margin-top: 10px;" id="loaderText">در حال پردازش...</p>
         </div>
 
-        <!-- مرحله نهایی: نمایش نتیجه -->
-        <div id="finalResult" class="card">
+        <!-- نتیجه نهایی (همچنین برای مودال استفاده می‌شود) -->
+        <div id="finalResult" class="card" style="display:none;">
             <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>
+                <a id="mainDownloadLink" href="#" target="_blank" download>دانلود آهنگ 📥</a>
             </div>
-
             <div id="playerWrapper"></div>
-
             <div class="form-label" style="margin-top: 20px; justify-content: center; color: #718096;">متن آهنگ</div>
             <div class="lyrics-container" id="finalLyricsBox"></div>
-            
             <button onclick="location.reload()" class="btn-main btn-outline">ساخت آهنگ جدید</button>
         </div>
+
+        <!-- بخش سوابق (History) -->
+        <div class="history-section">
+            <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 class="modal-overlay" id="historyModal">
+        <div class="modal-content">
+            <button class="modal-close" onclick="closeModal()">×</button>
+            <div class="player-header">
+                <div style="font-weight: 700; color: var(--accent-primary);">پخش آهنگ آرشیو شده</div>
+                <a id="modalDownloadLink" href="#" target="_blank" style="color:var(--accent-primary); font-weight:700; text-decoration:none;">دانلود 📥</a>
+            </div>
+            <div id="modalAudioWrapper" style="margin-bottom:15px;"></div>
+            <div class="form-label">متن آهنگ</div>
+            <div class="lyrics-container" id="modalLyricsBox"></div>
+        </div>
     </div>
 
     <script>
         const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
         
-        // --- توابع کمکی ---
+        // المان‌ها
         const getVal = (id) => document.getElementById(id).value;
         const getNum = (id) => Number(document.getElementById(id).value);
         const getChk = (id) => document.getElementById(id).checked;
 
-        // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
         const processBtn = document.getElementById('processBtn');
         const step1 = document.getElementById('step1');
@@ -327,32 +376,101 @@
         const playerWrapper = document.getElementById('playerWrapper');
         const finalLyricsBox = document.getElementById('finalLyricsBox');
         const mainDownloadLink = document.getElementById('mainDownloadLink');
+        const historyList = document.getElementById('historyList');
 
-        // فعال‌سازی آکاردئون
+        // آکاردئون
         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;
-                if (panel.style.maxHeight) {
-                    panel.style.maxHeight = null;
-                } else {
-                    panel.style.maxHeight = panel.scrollHeight + "px";
-                } 
+                panel.style.maxHeight = panel.style.maxHeight ? null : panel.scrollHeight + "px";
             });
         }
 
-        // --- فرآیند اصلی: ساخت یک‌مرحله‌ای ---
+        // --- مدیریت سوابق (History Manager) ---
+        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;
+            }
+
+            history.forEach((item, index) => {
+                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);
+            });
+        }
+
+        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' })
+            };
+
+            // اضافه کردن به اول لیست
+            history.unshift(newItem);
+
+            // اگر بیشتر از 10 تا شد، آخری را حذف کن
+            if (history.length > 10) {
+                history.pop();
+            }
+
+            localStorage.setItem('alphaHistory', JSON.stringify(history));
+            loadHistory();
+        }
+
+        function openHistoryItem(item) {
+            const modal = document.getElementById('historyModal');
+            document.getElementById('modalLyricsBox').innerHTML = formatLyrics(item.lyrics);
+            document.getElementById('modalAudioWrapper').innerHTML = `<audio controls autoplay src="${item.audioUrl}"></audio>`;
+            document.getElementById('modalDownloadLink').href = item.audioUrl;
+            
+            modal.classList.add('open');
+        }
+
+        function closeModal() {
+            const modal = document.getElementById('historyModal');
+            modal.classList.remove('open');
+            document.getElementById('modalAudioWrapper').innerHTML = ''; // توقف موزیک
+        }
+        
+        // بستن مودال با کلیک بیرون
+        document.getElementById('historyModal').addEventListener('click', (e) => {
+            if (e.target === document.getElementById('historyModal')) closeModal();
+        });
+
+        // لود کردن سوابق هنگام شروع
+        loadHistory();
+
+        // --- فرآیند اصلی ---
         processBtn.addEventListener('click', async () => {
             if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
             
-            // مخفی کردن فرم و نمایش لودر
             processBtn.disabled = true;
             step1.style.display = 'none';
             loader.style.display = 'block';
             
             try {
-                // 1. دریافت متن و پرامپت از Gemini
                 loaderText.innerText = "آلفا در حال نوشتن شعر و ملودی...";
                 
                 const response = await fetch('/api/refine', {
@@ -367,34 +485,25 @@
                 const lyrics = data.lyrics;
                 const musicPrompt = data.music_prompt;
 
-                // 2. ارسال مستقیم برای ساخت آهنگ (بدون توقف)
-                loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا (لطفاً صبر کنید)...";
+                loaderText.innerText = "در حال ضبط آهنگ در استودیو آلفا...";
                 
-                // آماده‌سازی محیط پخش
+                // آماده‌سازی نمایش نتیجه جاری
                 formatLyricsForDisplay(lyrics);
                 playerWrapper.innerHTML = ''; 
 
                 const payload = [
-                    getVal('model_select'), 
-                    "custom", null, "unknown",
-                    musicPrompt, 
-                    lyrics, 
+                    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,
+                    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
+                    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' },
@@ -412,37 +521,35 @@
                     } else if (msg.msg === 'process_completed') {
                         eventSource.close();
                         loader.style.display = 'none';
-                        handleAudioOutput(msg.output);
+                        handleAudioOutput(msg.output, lyrics, ideaInput.value);
                     }
                 };
-                
-                eventSource.onerror = () => {
-                    throw new Error('ارتباط با سرور قطع شد.');
-                };
+                eventSource.onerror = () => { throw new Error('ارتباط با سرور قطع شد.'); };
 
             } catch (e) {
                 alert("خطا: " + e.message);
                 loader.style.display = 'none';
-                step1.style.display = 'block'; // بازگشت به مرحله اول در صورت خطا
+                step1.style.display = 'block';
                 processBtn.disabled = false;
             }
         });
 
-        function handleAudioOutput(data) {
+        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) {
                     mainDownloadLink.href = fullUrl;
                     mainDownloadLink.style.display = 'inline-block';
+                    // ذخیره در سوابق
+                    saveToHistory(idea, lyrics, fullUrl);
                 }
 
                 const div = document.createElement('div');
@@ -470,26 +577,25 @@
             }
         }
 
+        function formatLyrics(text) {
+            return text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
+        }
+
         function formatLyricsForDisplay(text) {
-            let formatted = text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
-            finalLyricsBox.innerHTML = formatted;
+            finalLyricsBox.innerHTML = formatLyrics(text);
         }
 
+        // انیمیشن پس‌زمینه
         const canvas = document.getElementById('music-canvas');
         const ctx = canvas.getContext('2d');
         let t = 0;
-
-        function resize() {
-            canvas.width = window.innerWidth;
-            canvas.height = 400;
-        }
+        function resize() { canvas.width = window.innerWidth; canvas.height = 400; }
         window.addEventListener('resize', resize);
         resize();
-
         function anim() {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.beginPath();
-            ctx.strokeStyle = "rgba(213, 63, 140, 0.1)"; // رنگ متناسب با تم آلفا
+            ctx.strokeStyle = "rgba(74, 108, 250, 0.1)";
             ctx.lineWidth = 2;
             for(let i=0; i<canvas.width; i+=20) {
                 ctx.moveTo(i, 0);