Spaces:

Opera8
/

Ahang

Sleeping

App Files Files Community

Opera8 commited on 28 days ago

Commit

9a53dab

verified ·

1 Parent(s): 573d3ae

Update index.html

Browse files

Files changed (1) hide show

index.html +320 -264

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>استودیو هوشمند ACE-Step</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;
@@ -15,335 +15,391 @@
             --input-border: #E1E7EF;
             --text-primary: #1A202C;
             --text-secondary: #626F86;
-            --text-tertiary: #8A94A6;
             --accent-primary: #4A6CFA;
-            --accent-secondary: #0FD4A8;
             --success-color: #38A169;
-            --danger-color: #e53e3e;
-            --radius-card: 24px;
             --radius-btn: 14px;
-            --radius-input: 12px;
-            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-            --accent-primary-glow: rgba(74, 108, 250, 0.25);
         }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes pulse-loader { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 60px rgba(56, 189, 248, 0.7); } 100% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } }
-        body { font-family: var(--app-font); background-color: var(--app-bg); color: var(--text-primary); margin: 0; padding: 2.5rem 1rem; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
-        .container { max-width: 820px; width: 100%; }
-        header { position: relative; text-align: center; margin-bottom: 2.5rem; padding: 2rem 0; animation: fadeIn 0.8s 0.1s ease-out backwards; overflow: hidden; }
-        #music-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; }
-        .header-content { position: relative; z-index: 2; }
-        .ai-synapse-container { width: 100px; height: 100px; margin: 0 auto 1.5rem; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); border-radius: 50%; box-shadow: 0 0 30px var(--accent-primary-glow); }
-        .music-icon { width: 60px; height: 60px; color: var(--accent-primary); filter: drop-shadow(0 0 5px var(--accent-primary)); }
-        h1 { font-size: 2.8rem; font-weight: 800; margin: 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; }
-        .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.5rem; }
-        main { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: 0 20px 25px -5px rgba(26, 32, 44, 0.07); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.3s ease-out backwards; }
-        .form-group { margin-bottom: 2.5rem; }
-        .form-label { display: flex; align-items: center; gap: 0.75rem; font-weight: 700; color: var(--text-primary); font-size: 1.2em; margin-bottom: 1.2rem; }
-        .form-label svg { width: 24px; height: 24px; color: var(--accent-primary); }
-        .text-input-container { background-color: var(--input-bg); border: 2px solid var(--input-border); border-radius: var(--radius-input); padding: 1rem; transition: var(--transition-smooth); }
-        .text-input-container:focus-within { border-color: var(--accent-primary); background-color: #fff; box-shadow: 0 0 15px var(--accent-primary-glow); }
-        textarea, input, select { width: 100%; border: none; background: transparent; font-family: var(--app-font); font-size: 1rem; color: var(--text-primary); outline: none; resize: vertical; }
-        textarea { min-height: 100px; line-height: 1.6; }
-        .btn-magic { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 24px; border-radius: var(--radius-btn); cursor: pointer; font-family: var(--app-font); font-weight: 600; display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; margin-top: 10px; transition: transform 0.2s; }
-        .btn-magic:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(118, 75, 162, 0.3); }
-        .btn-magic:disabled { opacity: 0.7; cursor: wait; }
-        #generateButton { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 1.1rem; font-size: 1.2rem; font-weight: 700; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 12px -3px var(--accent-primary-glow); margin-top: 2.5rem; }
-        #generateButton:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); }
-        #generateButton:disabled { background: var(--text-tertiary); cursor: not-allowed; }
-        /* Result Area */
-        #result-container { margin-top: 2rem; display: none; flex-direction: column; align-items: center; }
-        #result-container.active { display: flex; animation: fadeIn 0.5s; }
-        .status-message { width: 100%; padding: 0.8rem 1rem; margin-bottom: 0.5rem; border-radius: var(--radius-input); font-size: 0.95rem; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-secondary); text-align: center; }
-        /* Loader */
-        #aiLoader { width: 100%; display: none; justify-content: center; margin-bottom: 2rem; }
-        .generator-container { position: relative; width: 100%; max-width: 400px; height: 120px; border: 2px solid #38bdf8; border-radius: 20px; overflow: hidden; box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); animation: pulse-loader 2s infinite ease-in-out; background-color: #161b22; color: #f0f6fc; display: flex; align-items: center; justify-content: center; }
-        .waveform-visualizer { display: flex; align-items: center; gap: 4px; height: 60px; }
-        .bar { width: 6px; background: var(--accent-secondary); border-radius: 3px; animation: waveform-bounce 1s infinite ease-in-out; }
-        .bar:nth-child(odd) { background: var(--accent-primary); animation-duration: 0.8s; }
-        .bar:nth-child(2) { animation-delay: 0.1s; } .bar:nth-child(3) { animation-delay: 0.2s; } .bar:nth-child(4) { animation-delay: 0.3s; }
-        @keyframes waveform-bounce { 0%, 100% { height: 10px; } 50% { height: 50px; } }
-        .audio-card { width: 100%; background: #fff; border: 1px solid var(--input-border); border-radius: var(--radius-input); padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-top: 1rem; border-right: 5px solid var(--success-color); }
-        audio { width: 100%; margin-top: 10px; border-radius: 30px; }
-        /* Grid for settings */
-        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-        details { background: var(--input-bg); border-radius: var(--radius-input); padding: 0.5rem; margin-bottom: 2rem; }
-        summary { cursor: pointer; padding: 0.5rem; font-weight: 600; color: var(--text-secondary); }
     </style>
 </head>
 <body>
-    <div class="container">
         <header>
-            <canvas id="music-canvas"></canvas>
-            <div class="header-content">
-                <div class="ai-synapse-container">
-                    <svg class="music-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
-                    </svg>
-                </div>
-                <h1>استودیو هوشمند ACE-Step</h1>
-                <p class="subtitle">تبدیل ایده به موسیقی با هوش مصنوعی جمینای</p>
-            </div>
         </header>
-    <main>
-        <!-- Step 1: Idea Input -->
-        <div class="form-group">
             <div class="form-label">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-                ۱. ایده اولیه آهنگ
             </div>
-            <div class="text-input-container">
-                <textarea id="ideaInput" placeholder="مثال: یک آهنگ شاد تولد برای پسرم آرش به سبک پاپ ایرانی..."></textarea>
             </div>
-            <button id="refineBtn" class="btn-magic">
-                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>
-                پردازش متن توسط هوش مصنوعی
             </button>
         </div>
-        <!-- Step 2: Generated Prompt & Lyrics -->
-        <div class="form-group">
-            <div class="form-label">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" /></svg>
-                ۲. پرامپت و شعر (تولید شده)
-            </div>
-            <div class="grid-2">
-                <div class="text-input-container">
-                    <label style="font-size:0.8rem; color:var(--text-tertiary);">توصیف انگلیسی آهنگ</label>
-                    <textarea id="captions" rows="4"></textarea>
-                </div>
-                <div class="text-input-container">
-                    <label style="font-size:0.8rem; color:var(--text-tertiary);">متن شعر (با اعراب)</label>
-                    <textarea id="lyrics" rows="4" dir="rtl"></textarea>
-                </div>
             </div>
-        </div>
-        <!-- Hidden Configs -->
-        <details>
-            <summary>تنظیمات پیشرفته (مدل و زمان)</summary>
-            <div class="grid-2" style="margin-top:10px;">
-                <select id="config_path" class="text-input-container">
-                    <option value="acestep-v15-turbo" selected>Turbo Model</option>
-                    <option value="acestep-v15-turbo-shift3">Shift3 Model</option>
-                </select>
-                <input type="number" id="audio_duration" value="30" class="text-input-container" placeholder="زمان (ثانیه)">
-                <input type="number" id="inference_steps" value="8" class="text-input-container" placeholder="Steps">
-                <input type="text" id="seed" value="-1" class="text-input-container" placeholder="Seed">
             </div>
-        </details>
-        <!-- Step 3: Generate Audio -->
-        <button id="generateButton">
-            <svg xmlns="http://www.w3.org/2000/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="5 3 19 12 5 21 5 3"></polygon></svg>
-            <span>ساخت نهایی آهنگ</span>
-        </button>
-        <div id="result-container">
-            <div id="statusMessages"></div>
-            <div id="aiLoader">
-                <div class="generator-container">
-                    <div class="waveform-visualizer">
-                        <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                    </div>
-                    <div style="margin-right:15px; font-weight:bold;">در حال آهنگسازی...</div>
-                </div>
-            </div>
-            <div id="outputArea" style="width: 100%;"></div>
-        </div>
-    </main>
-    </div>
-    <script>
-    (function() {
-        // --- 1. Logic for Gemini (Refine Text) ---
-        const refineBtn = document.getElementById('refineBtn');
-        const ideaInput = document.getElementById('ideaInput');
-        const captionsBox = document.getElementById('captions');
-        const lyricsBox = document.getElementById('lyrics');
-        refineBtn.addEventListener('click', async () => {
-            const idea = ideaInput.value;
-            if(!idea) { alert('لطفا ایده خود را بنویسید'); return; }
-            refineBtn.disabled = true;
-            refineBtn.innerHTML = 'در حال تفکر...';
             try {
-                const res = await fetch('/api/refine', {
                     method: 'POST',
                     headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({ idea: idea })
                 });
-                const data = await res.json();
-                if(data.error) throw new Error(data.error);
-                captionsBox.value = data.music_prompt;
-                lyricsBox.value = data.lyrics;
-                // Animation effect
-                captionsBox.style.backgroundColor = '#e6fffa';
-                setTimeout(() => captionsBox.style.backgroundColor = 'transparent', 1000);
-            } catch(e) {
-                alert('خطا در ارتباط با هوش مصنوعی: ' + e.message);
-            } finally {
-                refineBtn.disabled = false;
-                refineBtn.innerHTML = `
-                <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" /></svg>
-                پردازش متن توسط هوش مصنوعی`;
-            }
-        });
-        // --- 2. Logic for Music Generation (ACE-Step) ---
-        const SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
-        const GENERATE_FN_INDEX = 77;
-        let processedUrls = new Set();
-        const generateBtn = document.getElementById('generateButton');
-        const statusDiv = document.getElementById('statusMessages');
-        const loader = document.getElementById('aiLoader');
-        const outputArea = document.getElementById('outputArea');
-        const resultContainer = document.getElementById('result-container');
-        const val = (id) => document.getElementById(id).value;
-        const num = (id) => Number(document.getElementById(id).value);
-        function setStatus(msg) {
-            resultContainer.classList.add('active');
-            statusDiv.innerHTML = `<div class="status-message">${msg}</div>`;
-        }
-        function addAudio(url) {
-            if (processedUrls.has(url)) return;
-            processedUrls.add(url);
-            const fullUrl = url.startsWith('http') ? url : SPACE_URL.replace(/\/$/, '') + url;
-            const card = document.createElement('div');
-            card.className = 'audio-card';
-            card.innerHTML = `
-                <div style="display:flex; justify-content:space-between; align-items:center;">
-                    <strong>🎵 آهنگ نهایی شما</strong>
-                    <a href="${fullUrl}" target="_blank" style="color:#4A6CFA;text-decoration:none;">دانلود</a>
-                </div>
-                <audio controls src="${fullUrl}"></audio>
-            `;
-            outputArea.prepend(card);
-        }
-        function scanForAudios(data) {
-            function traverse(obj) {
-                if (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) {
-                    addAudio(obj);
-                } else if (obj && typeof obj === 'object') {
-                    if (obj.url && obj.url.endsWith('.mp3')) addAudio(obj.url);
-                    Object.values(obj).forEach(traverse);
-                }
-            }
-            traverse(data);
-        }
-        generateBtn.addEventListener('click', async () => {
-            if(!val('captions') || !val('lyrics')) {
-                alert('لطفا ابتدا متن و پرامپت را بسازید یا وارد کنید.');
-                return;
             }
-            generateBtn.disabled = true;
-            generateBtn.innerHTML = 'در حال ارسال به سرور...';
-            loader.style.display = 'flex';
-            statusDiv.innerHTML = '';
-            outputArea.innerHTML = '';
-            processedUrls.clear();
             try {
-                // Payload structure for ACE-Step
                 const payload = [
-                    val('config_path'), "custom", null, "unknown",
-                    val('captions'), val('lyrics'),
-                    0, "", "", "unknown", num('inference_steps'), 7, true,
-                    val('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
                 ];
                 const session_hash = Math.random().toString(36).substring(2);
-                setStatus('در حال اتصال به صف پردازش...');
-                const joinResp = await fetch(`${SPACE_URL}gradio_api/queue/join`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ data: payload, fn_index: GENERATE_FN_INDEX, session_hash })
                 });
-                if (!joinResp.ok) throw new Error('خطا در اتصال به صف');
-                const eventSource = new EventSource(`${SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`);
                 eventSource.onmessage = (event) => {
                     const msg = JSON.parse(event.data);
-                    if (msg.msg === 'estimation') setStatus(`در صف انتظار: نفر ${msg.rank + 1}`);
-                    else if (msg.msg === 'process_starts') setStatus('موتور هوش مصنوعی شروع به کار کرد...');
-                    else if (msg.msg === 'process_generating' || msg.msg === 'process_completed') {
-                        scanForAudios(msg.output);
-                        if (msg.msg === 'process_completed') {
-                            eventSource.close();
-                            loader.style.display = 'none';
-                            generateBtn.disabled = false;
-                            generateBtn.innerHTML = 'ساخت مجدد';
-                            setStatus('پایان پردازش.');
-                        }
                     }
                 };
             } catch (e) {
-                setStatus('خطا: ' + e.message);
                 loader.style.display = 'none';
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = 'تلاش مجدد';
             }
         });
-        // Canvas Animation
-        const canvas = document.getElementById('music-canvas');
-        if(canvas) {
-            const ctx = canvas.getContext('2d');
-            let time = 0;
-            function resize() { canvas.width = canvas.parentElement.clientWidth; canvas.height = canvas.parentElement.clientHeight; }
-            window.addEventListener('resize', resize); resize();
-            function animate() {
-                ctx.clearRect(0, 0, canvas.width, canvas.height);
-                ctx.beginPath();
-                for (let x = 0; x < canvas.width; x++) {
-                    const y = canvas.height / 2 + Math.sin(x * 0.01 + time) * 30;
-                    ctx.lineTo(x, y);
                 }
-                ctx.strokeStyle = 'rgba(74, 108, 250, 0.2)';
-                ctx.stroke();
-                time += 0.05;
-                requestAnimationFrame(animate);
             }
-            animate();
         }
-    })();
     </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;
             --input-border: #E1E7EF;
             --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 ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
+        // المان‌ها
+        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
                 ];
                 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('خطا در اتصال به سرور موزیک');
+                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')) {
+                    audioUrl = obj;
+                } else if (obj && typeof obj === 'object') {
+                    if (obj.url && obj.url.endsWith('.mp3')) audioUrl = obj.url;
+                    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>