Spaces:

Opera8
/

Ahang

Sleeping

App Files Files Community

Opera8 commited on 28 days ago

Commit

f28c827

verified ·

1 Parent(s): 3d39211

Update index.html

Browse files

Files changed (1) hide show

index.html +271 -221

index.html CHANGED Viewed

@@ -2,9 +2,9 @@
 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>استودیو موزیک آلفا</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
             --app-font: 'Vazirmatn', sans-serif;
@@ -16,215 +16,216 @@
             --text-primary: #1A202C;
             --text-secondary: #626F86;
             --accent-primary: #4A6CFA;
-            --accent-glow: rgba(74, 108, 250, 0.3);
-            --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
-            --radius-card: 24px;
-            --radius-input: 16px;
         }
-        body { font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); margin: 0; padding: 2rem 1rem; display: flex; justify-content: center; min-height: 100vh; }
-        .container { max-width: 600px; width: 100%; position: relative; z-index: 2; }
-        /* هدر */
-        header { text-align: center; margin-bottom: 2.5rem; }
-        h1 {
-            font-size: 2.2rem; font-weight: 900; margin: 0;
-            background: linear-gradient(135deg, #1A202C 0%, #4A6CFA 100%);
-            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-            letter-spacing: -1px;
-        }
-        .alpha-badge {
-            background: rgba(74, 108, 250, 0.1); color: var(--accent-primary);
-            padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700;
-            display: inline-block; margin-bottom: 10px;
-        }
-        /* کارت اصلی */
-        .main-card {
-            background: var(--panel-bg); border-radius: var(--radius-card);
-            box-shadow: var(--shadow-card); border: 1px solid var(--panel-border);
-            padding: 2rem; position: relative; overflow: hidden;
-            transition: transform 0.3s ease;
         }
-        textarea {
-            width: 100%; background: var(--input-bg); border: 2px solid var(--input-border);
-            border-radius: var(--radius-input); padding: 1.2rem;
-            font-family: inherit; font-size: 1rem; color: var(--text-primary);
-            min-height: 140px; resize: none; outline: none; transition: all 0.3s;
-        }
-        textarea:focus { border-color: var(--accent-primary); background: #fff; box-shadow: 0 0 0 4px var(--accent-glow); }
-        /* تنظیمات پیشرفته (کشویی) */
-        .settings-toggle {
-            display: flex; align-items: center; gap: 8px; cursor: pointer;
-            color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;
-            margin-top: 1rem; padding: 10px; border-radius: 10px;
-            transition: background 0.2s; user-select: none;
         }
-        .settings-toggle:hover { background: var(--input-bg); color: var(--accent-primary); }
-        .settings-toggle svg { transition: transform 0.3s; }
-        .settings-toggle.open svg { transform: rotate(180deg); }
-        .settings-panel {
-            max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
-            background: var(--input-bg); border-radius: var(--radius-input); margin-top: 5px;
         }
-        .settings-panel.open { max-height: 300px; border: 1px solid var(--input-border); }
-        .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px; }
-        .setting-item label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 5px; }
-        .setting-item input, .setting-item select {
-            width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--input-border);
-            background: #fff; font-family: inherit; font-size: 0.9rem; outline: none;
         }
-        /* دکمه اصلی */
-        .btn-alpha {
-            width: 100%; padding: 18px; margin-top: 2rem;
-            background: linear-gradient(135deg, var(--accent-primary), #2563EB);
-            color: #fff; border: none; border-radius: var(--radius-input);
             font-size: 1.1rem; font-weight: 700; cursor: pointer;
             display: flex; justify-content: center; align-items: center; gap: 10px;
-            box-shadow: 0 10px 25px -5px var(--accent-glow);
-            transition: all 0.3s; position: relative; overflow: hidden;
-        }
-        .btn-alpha:hover { transform: translateY(-3px); box-shadow: 0 15px 30px -5px var(--accent-glow); }
-        .btn-alpha:active { transform: scale(0.98); }
-        /* لودر خفن (Cyberpunk Style) */
-        #loaderOverlay {
-            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(255, 255, 255, 0.95); z-index: 100;
-            flex-direction: column; justify-content: center; align-items: center;
-            backdrop-filter: blur(10px);
         }
-        .scanner {
-            position: relative; width: 200px; height: 200px;
-            background: radial-gradient(circle, rgba(74, 108, 250, 0.1) 0%, transparent 70%);
-            border-radius: 50%; display: flex; justify-content: center; align-items: center;
-        }
-        .scanner::before, .scanner::after {
-            content: ''; position: absolute; border-radius: 50%;
-            border: 2px solid transparent; border-top-color: var(--accent-primary); border-bottom-color: var(--accent-primary);
-            animation: spin 3s linear infinite;
         }
-        .scanner::before { width: 100%; height: 100%; opacity: 0.7; }
-        .scanner::after { width: 70%; height: 70%; animation-direction: reverse; animation-duration: 2s; }
-        .core-pulse {
-            width: 40px; height: 40px; background: var(--accent-primary); border-radius: 50%;
-            box-shadow: 0 0 30px var(--accent-primary);
-            animation: pulse 1.5s ease-in-out infinite alternate;
         }
-        .loading-text {
-            margin-top: 30px; font-size: 1.2rem; font-weight: 700; color: var(--text-primary);
-            animation: fadeText 2s infinite;
         }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        @keyframes pulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.2); opacity: 1; } }
-        @keyframes fadeText { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
-        /* نتیجه نهایی */
-        #resultCard { display: none; animation: slideUp 0.8s cubic-bezier(0.2, 1, 0.2, 1); }
-        .result-header { text-align: center; margin-bottom: 20px; }
-        .result-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
-        .player-container {
-            background: #F1F5F9; padding: 20px; border-radius: 20px; margin-bottom: 20px;
-            display: flex; align-items: center; justify-content: center;
         }
-        audio { width: 100%; height: 45px; border-radius: 30px; }
-        .lyrics-box {
-            background: #fff; border: 1px solid var(--panel-border); border-radius: 16px;
-            padding: 25px; max-height: 400px; overflow-y: auto;
-            text-align: center; line-height: 2.4; font-size: 1.05rem; color: #4a5568;
-            white-space: pre-wrap;
-        }
-        .tag { color: var(--accent-primary); font-weight: 900; display: block; margin-top: 15px; font-size: 0.85em; letter-spacing: 1px; }
-        @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
     </style>
 </head>
 <body>
     <div class="container">
-        <header>
-            <span class="alpha-badge">نسخه هوشمند</span>
-            <h1>استودیو موزیک آلفا</h1>
         </header>
-        <!-- بخش ورودی و تنظیمات -->
-        <div id="inputSection" class="main-card">
-            <textarea id="ideaInput" placeholder="توضیحات آهنگ رو اینجا بنویس... (مثال: یه آهنگ رپ گنگ در مورد موفقیت با بیت سنگین)"></textarea>
-            <!-- دکمه تنظیمات -->
-            <div class="settings-toggle" onclick="toggleSettings()">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                تنظیمات پیشرفته
             </div>
-            <!-- پنل تنظیمات مخفی -->
-            <div class="settings-panel" id="settingsPanel">
-                <div class="settings-grid">
-                    <div class="setting-item">
-                        <label>مدل هوش مصنوعی</label>
-                        <select id="modelSelector">
-                            <option value="acestep-v15-turbo">Alpha Turbo (سریع)</option>
-                            <option value="acestep-v15-turbo-shift3">Alpha Pro (دقیق)</option>
-                        </select>
-                    </div>
-                    <div class="setting-item">
-                        <label>کیفیت (Steps)</label>
-                        <input type="number" id="steps" value="8" min="4" max="20">
-                    </div>
-                    <div class="setting-item">
-                        <label>مدت زمان (ثانیه)</label>
-                        <input type="number" id="duration" value="60" disabled style="opacity: 0.6; cursor: not-allowed;" title="توسط هوش مصنوعی تعیین می‌شود">
-                    </div>
-                    <div class="setting-item">
-                        <label>تنوع (Seed)</label>
-                        <input type="text" id="seed" value="-1" placeholder="-1 تصادفی">
-                    </div>
-                </div>
             </div>
-            <button id="generateBtn" class="btn-alpha">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
-                ساخت آهنگ هوشمند
             </button>
         </div>
-        <!-- نتیجه نهایی -->
-        <div id="resultCard" class="main-card" style="display:none; margin-top: 20px;">
-            <div class="result-header">
-                <div class="result-title">آهنگ شما آماده است 🎵</div>
-                <a id="downloadLink" href="#" style="color: var(--accent-primary); font-weight: 700; text-decoration: none; display: block; margin-top: 5px;">دانلود فایل با کیفیت بالا</a>
             </div>
-            <div class="player-container" id="playerWrapper">
-                <!-- پلیر اینجا قرار می‌گیرد -->
-            </div>
-            <div style="text-align: center; margin-bottom: 10px; color: var(--text-secondary); font-size: 0.9rem;">متن آهنگ</div>
-            <div class="lyrics-box" id="finalLyrics"></div>
-            <button onclick="location.reload()" class="btn-alpha" style="background: var(--input-bg); color: var(--text-primary); margin-top: 15px;">ساخت یک آهنگ دیگر</button>
-        </div>
-    </div>
-    <!-- انیمیشن لودینگ خفن -->
-    <div id="loaderOverlay">
-        <div class="scanner">
-            <div class="core-pulse"></div>
         </div>
-        <div class="loading-text" id="loadingStatus">در حال آنالیز ایده...</div>
     </div>
     <script>
@@ -232,56 +233,73 @@
         // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
-        const generateBtn = document.getElementById('generateBtn');
-        const inputSection = document.getElementById('inputSection');
-        const loader = document.getElementById('loaderOverlay');
-        const loadingStatus = document.getElementById('loadingStatus');
-        const resultCard = document.getElementById('resultCard');
         const playerWrapper = document.getElementById('playerWrapper');
-        const finalLyrics = document.getElementById('finalLyrics');
         const downloadLink = document.getElementById('downloadLink');
-        // باز و بسته کردن تنظیمات
-        function toggleSettings() {
-            document.querySelector('.settings-toggle').classList.toggle('open');
-            document.getElementById('settingsPanel').classList.toggle('open');
-        }
-        generateBtn.addEventListener('click', async () => {
-            if (!ideaInput.value.trim()) return alert("لطفا ایده آهنگ را بنویسید");
-            // شروع فرآیند
-            inputSection.style.display = 'none';
-            loader.style.display = 'flex';
-            loadingStatus.innerText = "هوش مصنوعی آلفا در حال نوشتن شعر...";
             try {
-                // 1. دریافت متن و پرامپت از جمینای
-                const refineResponse = await fetch('/api/refine', {
                     method: 'POST',
                     headers: {'Content-Type': 'application/json'},
                     body: JSON.stringify({ idea: ideaInput.value })
                 });
-                const data = await refineResponse.json();
                 if (data.error) throw new Error(data.error);
-                const lyrics = data.lyrics;
-                const prompt = data.music_prompt;
-                // 2. شروع ساخت آهنگ بلافاصله
-                loadingStatus.innerText = "در حال ضبط در استودیو آلفا (زمان تقریبی: 1 دقیقه)...";
-                // تنظیمات
-                const model = document.getElementById('modelSelector').value;
-                const steps = parseInt(document.getElementById('steps').value);
-                const seed = document.getElementById('seed').value;
                 const payload = [
-                    model, "custom", null, "unknown",
-                    prompt, lyrics,
                     0, "", "", "unknown",
-                    steps, 7, true, seed, null, -1, 1, null, null, 0, -1,
                     "Fill the audio semantic mask based on the given conditions:",
                     1, "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85,
                     true, 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
@@ -295,34 +313,34 @@
                     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') {
-                        loadingStatus.innerText = "آلفا در حال تنظیم ملودی...";
                     } else if (msg.msg === 'process_completed') {
                         eventSource.close();
                         loader.style.display = 'none';
-                        showResult(msg.output, lyrics);
                     }
                 };
                 eventSource.onerror = () => {
-                    throw new Error('قطع ارتباط.');
                 };
             } catch (e) {
-                alert("خطا: " + e.message);
                 loader.style.display = 'none';
-                inputSection.style.display = 'block';
             }
         });
-        function showResult(outputData, lyricsText) {
             let audioUrl = null;
             function traverse(obj) {
                 if (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) {
@@ -332,7 +350,7 @@
                     Object.values(obj).forEach(traverse);
                 }
             }
-            traverse(outputData);
             if (audioUrl) {
                 const fullUrl = audioUrl.startsWith('http') ? audioUrl : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
@@ -340,16 +358,48 @@
                 playerWrapper.innerHTML = `<audio controls autoplay src="${fullUrl}"></audio>`;
                 downloadLink.href = fullUrl;
-                // فرمت کردن متن شعر (رنگ کردن تگ‌ها)
-                const formattedLyrics = lyricsText.replace(/\[(.*?)\]/g, '<span class="tag">[$1]</span>');
-                finalLyrics.innerHTML = formattedLyrics;
-                resultCard.style.display = 'block';
             } else {
-                alert("مشکلی در تولید فایل صوتی پیش آمد.");
-                inputSection.style.display = 'block';
             }
         }
     </script>
 </body>
 </html>

 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>استودیو موزیک ACE-Step</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
             --app-font: 'Vazirmatn', sans-serif;
             --text-primary: #1A202C;
             --text-secondary: #626F86;
             --accent-primary: #4A6CFA;
+            --accent-glow: rgba(74, 108, 250, 0.2);
+            --success-color: #38A169;
+            --radius-card: 20px;
+            --radius-btn: 14px;
         }
+        * { 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;
+        }
+        .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);
         }
+        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);
         }
+        h1 {
+            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;
+            transition: transform 0.3s ease;
         }
+        .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 {
+            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;
+            min-height: 120px; resize: vertical; outline: none;
+            transition: border-color 0.3s;
+        }
+        textarea:focus { border-color: var(--accent-primary); background: #fff; }
+        /* دکمه‌ها */
+        .btn-main {
+            width: 100%; padding: 16px;
+            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;
+            box-shadow: 0 5px 15px var(--accent-glow);
+            transition: transform 0.2s;
         }
+        .btn-main:active { transform: scale(0.98); }
+        .btn-main:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(1); }
+        .btn-outline {
+            background: transparent; border: 2px solid var(--input-border);
+            color: var(--text-secondary); margin-top: 10px;
         }
+        .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); }
+        /* بخش نتیجه نهایی */
+        #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);
         }
+        audio { width: 100%; height: 40px; border-radius: 20px; }
+        .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%; } }
+        @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+        /* مخفی کردن المان‌های تکنیکال */
+        .hidden { display: none; }
     </style>
 </head>
 <body>
+    <canvas id="music-canvas"></canvas>
     <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>استودیو موزیک ACE</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>
+            <textarea id="ideaInput" placeholder="مثال: آهنگ تولد برای سمیرا، شاد و پرانرژی..."></textarea>
+            <button id="processBtn" class="btn-main" style="margin-top: 15px;">
+                <span>نوشتن متن و آهنگسازی</span>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"></polyline></svg>
+            </button>
+        </div>
+        <!-- لودر -->
+        <div id="loader">
+            <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 style="color: #718096; font-size: 0.9rem; margin-top: 10px;" id="loaderText">در حال پردازش...</p>
+        </div>
+        <!-- مرحله ۲: نمایش متن و ساخت آهنگ (مخفی) -->
+        <!-- ما این مرحله را اتوماتیک رد می‌کنیم یا به کاربر اجازه ویرایش می‌دهیم -->
+        <div id="step2" class="card hidden">
+            <div class="form-label">متن آماده شده (قابل ویرایش)</div>
+            <textarea id="generatedLyrics" style="height: 200px;"></textarea>
+            <textarea id="generatedPrompt" class="hidden"></textarea> <!-- پرامپت انگلیسی مخفی -->
+            <button id="generateAudioBtn" class="btn-main" style="margin-top: 15px;">
+                <span>ساخت نهایی آهنگ</span>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
             </button>
         </div>
+        <!-- مرحله ۳: نتیجه نهایی -->
+        <div id="finalResult" class="card">
+            <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="downloadLink" href="#" style="color: var(--accent-primary); text-decoration: none; font-size: 0.9rem; font-weight: 600;">دانلود</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>
     </div>
     <script>
         // المان‌ها
         const ideaInput = document.getElementById('ideaInput');
+        const processBtn = document.getElementById('processBtn');
+        const step1 = document.getElementById('step1');
+        const step2 = document.getElementById('step2');
+        const loader = document.getElementById('loader');
+        const loaderText = document.getElementById('loaderText');
+        const generatedLyrics = document.getElementById('generatedLyrics');
+        const generatedPrompt = document.getElementById('generatedPrompt');
+        const generateAudioBtn = document.getElementById('generateAudioBtn');
+        const finalResult = document.getElementById('finalResult');
         const playerWrapper = document.getElementById('playerWrapper');
+        const finalLyricsBox = document.getElementById('finalLyricsBox');
         const downloadLink = document.getElementById('downloadLink');
+        // مرحله ۱: تولید متن با جمینای
+        processBtn.addEventListener('click', async () => {
+            if (!ideaInput.value.trim()) return alert("لطفا موضوع آهنگ را بنویسید");
+            // انیمیشن UI
+            processBtn.disabled = true;
+            loader.style.display = 'block';
+            loaderText.innerText = "هوش مصنوعی در حال سرودن شعر و تنظیم آهنگ...";
+            step1.style.display = 'none';
             try {
+                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);
+                generatedLyrics.value = data.lyrics;
+                generatedPrompt.value = data.music_prompt;
+                // نمایش مرحله ۲ (ویرایش متن)
+                loader.style.display = 'none';
+                step2.style.display = 'block';
+                step2.classList.remove('hidden');
+            } catch (e) {
+                alert("خطا: " + e.message);
+                step1.style.display = 'block';
+                loader.style.display = 'none';
+                processBtn.disabled = false;
+            }
+        });
+        // مرحله ۲: ساخت آهنگ با ACE-Step
+        generateAudioBtn.addEventListener('click', async () => {
+            generateAudioBtn.disabled = true;
+            step2.style.display = 'none';
+            loader.style.display = 'block';
+            loaderText.innerText = "در حال ضبط استودیویی (ممکن است ۱ تا ۲ دقیقه طول بکشد)...";
+            try {
+                // فرمت کردن متن شعر برای نمایش زیباتر (هایلایت کردن تگ ها)
+                formatLyricsForDisplay(generatedLyrics.value);
                 const payload = [
+                    "acestep-v15-turbo", "custom", null, "unknown",
+                    generatedPrompt.value, // Prompt English
+                    generatedLyrics.value, // Lyrics Persian
                     0, "", "", "unknown",
+                    8, // Steps
+                    7, true, -1, null, -1, 1, null, null, 0, -1,
                     "Fill the audio semantic mask based on the given conditions:",
                     1, "text2music", false, 0, 1, 3, "ode", "", "mp3", 0.85,
                     true, 2, 0, 0.9, "NO USER INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
                     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 = "خواننده شروع به خواندن کرد...";
                     } else if (msg.msg === 'process_completed') {
                         eventSource.close();
                         loader.style.display = 'none';
+                        handleAudioOutput(msg.output);
                     }
                 };
                 eventSource.onerror = () => {
+                    throw new Error('قطع ارتباط با سرور.');
                 };
             } catch (e) {
+                alert(e.message);
                 loader.style.display = 'none';
+                step2.style.display = 'block';
+                generateAudioBtn.disabled = false;
             }
         });
+        function handleAudioOutput(data) {
             let audioUrl = null;
             function traverse(obj) {
                 if (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) {
                     Object.values(obj).forEach(traverse);
                 }
             }
+            traverse(data);
             if (audioUrl) {
                 const fullUrl = audioUrl.startsWith('http') ? audioUrl : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
                 playerWrapper.innerHTML = `<audio controls autoplay src="${fullUrl}"></audio>`;
                 downloadLink.href = fullUrl;
+                finalResult.style.display = 'block';
+                // اسکرول نرم به بالا
+                window.scrollTo({ top: 0, behavior: 'smooth' });
             } else {
+                alert("فایل صوتی یافت نشد!");
+                step2.style.display = 'block';
+            }
+        }
+        function formatLyricsForDisplay(text) {
+            // این تابع تگ‌های [Intro] و غیره را پیدا کرده و استایل می‌دهد
+            let formatted = text.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
+            finalLyricsBox.innerHTML = formatted;
+        }
+        // انیمیشن ساده پس زمینه
+        const canvas = document.getElementById('music-canvas');
+        const ctx = canvas.getContext('2d');
+        let t = 0;
+        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(74, 108, 250, 0.1)";
+            ctx.lineWidth = 2;
+            for(let i=0; i<canvas.width; i+=20) {
+                ctx.moveTo(i, 0);
+                ctx.lineTo(i, Math.sin(i * 0.01 + t) * 50 + 100);
             }
+            ctx.stroke();
+            t += 0.02;
+            requestAnimationFrame(anim);
         }
+        anim();
     </script>
 </body>
 </html>