Spaces:

Opera8
/

Ahang

Sleeping

App Files Files Community

Opera8 commited on 29 days ago

Commit

0c270ba

verified ·

1 Parent(s): 052c219

Update index.html

Browse files

Files changed (1) hide show

index.html +603 -276

index.html CHANGED Viewed

@@ -2,398 +2,725 @@
 <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>استودیو هوشمند آلفا</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap" rel="stylesheet">
     <style>
         :root {
-            --bg-color: #F8F9FC;
             --card-bg: #FFFFFF;
-            --primary: #4A6CFA;
-            --primary-dark: #3754db;
-            --text-main: #1A202C;
-            --text-muted: #718096;
-            --border: #E2E8F0;
-            --input-bg: #F7FAFC;
-            --success: #38A169;
             --radius: 16px;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
         }
-        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
         body {
-            font-family: 'Vazirmatn', sans-serif;
             background-color: var(--bg-color);
-            color: var(--text-main);
             margin: 0;
-            padding: 20px 15px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
             min-height: 100vh;
         }
-        .container {
-            width: 100%;
-            max-width: 600px;
-            position: relative;
-            z-index: 10;
-        }
-        /* هدر */
-        header {
-            text-align: center;
-            margin-bottom: 30px;
-            animation: fadeIn 0.8s ease;
         }
-        .logo-container {
-            width: 70px; height: 70px;
-            background: #fff;
-            border-radius: 20px;
-            margin: 0 auto 15px;
-            display: flex; align-items: center; justify-content: center;
-            box-shadow: 0 10px 20px rgba(74, 108, 250, 0.15);
-            color: var(--primary);
-        }
-        h1 {
-            font-size: 1.8rem; font-weight: 800; margin: 0;
-            color: #2D3748; letter-spacing: -0.5px;
-        }
-        .subtitle {
-            font-size: 0.95rem; color: var(--text-muted); margin-top: 5px;
-        }
-        /* کارت اصلی */
         .card {
             background: var(--card-bg);
-            border-radius: var(--radius);
-            box-shadow: var(--shadow);
-            border: 1px solid var(--border);
             padding: 25px;
-            transition: all 0.3s ease;
-        }
-        .label {
-            font-weight: 700; margin-bottom: 10px; display: block;
-            color: #4A5568; font-size: 0.95rem; display: flex; align-items: center; gap: 8px;
         }
-        .label svg { color: var(--primary); }
-        textarea {
-            width: 100%;
-            background: var(--input-bg);
             border: 2px solid var(--border);
-            border-radius: 12px;
-            padding: 15px;
-            font-family: inherit; font-size: 1rem;
-            min-height: 100px; resize: vertical; outline: none;
-            transition: border-color 0.2s;
-            color: #2D3748;
         }
-        textarea:focus { border-color: var(--primary); background: #fff; }
-        /* بخش تنظیمات (زیر متن) */
-        .settings-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-top: 20px;
-            padding-top: 20px;
-            border-top: 1px dashed var(--border);
         }
-        .setting-item label {
-            font-size: 0.8rem; color: var(--text-muted); margin-bottom: 5px; display: block;
         }
-        .setting-input {
-            width: 100%;
-            background: var(--input-bg);
-            border: 1px solid var(--border);
-            border-radius: 10px;
-            padding: 10px;
-            font-family: inherit;
-            font-size: 0.9rem;
-            outline: none;
         }
-        .setting-input:focus { border-color: var(--primary); }
-        /* دکمه اصلی */
-        .btn-primary {
-            width: 100%;
-            padding: 16px;
-            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-            color: #fff;
-            border: none;
-            border-radius: 14px;
-            font-size: 1.1rem;
-            font-weight: 700;
-            cursor: pointer;
-            margin-top: 25px;
-            box-shadow: 0 4px 12px rgba(74, 108, 250, 0.3);
-            transition: transform 0.2s;
-            display: flex; align-items: center; justify-content: center; gap: 10px;
         }
-        .btn-primary:active { transform: scale(0.98); }
-        .btn-primary:disabled { opacity: 0.7; cursor: wait; filter: grayscale(1); }
-        /* بخش نتیجه */
-        #resultSection { display: none; margin-top: 25px; animation: slideUp 0.6s ease; }
-        .result-header {
-            display: flex; justify-content: space-between; align-items: center;
-            margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--border);
         }
-        .lyrics-box {
-            background: #F7FAFC;
-            border-radius: 12px;
-            padding: 20px;
-            max-height: 400px;
-            overflow-y: auto;
-            white-space: pre-wrap;
-            line-height: 2.2;
-            font-size: 1rem;
-            color: #4A5568;
             text-align: center;
-            border: 1px solid var(--border);
-            margin-top: 20px;
         }
         .lyrics-tag {
-            color: var(--primary);
-            font-weight: 800;
-            display: block;
-            margin-top: 15px;
-            font-size: 0.9em;
         }
-        /* لودر */
-        #loader { display: none; text-align: center; margin-top: 20px; }
-        .spinner {
-            width: 40px; height: 40px; border: 4px solid rgba(74, 108, 250, 0.1);
-            border-left-color: var(--primary); border-radius: 50%;
-            margin: 0 auto 10px; animation: spin 1s linear infinite;
         }
-        @keyframes spin { 100% { transform: rotate(360deg); } }
-        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
-        /* پلیر */
-        audio { width: 100%; border-radius: 30px; height: 45px; }
     </style>
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="logo-container">
-                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"></path><path d="M8.5 8.5v.01"></path><path d="M16 16v.01"></path><path d="M12 12v.01"></path></svg>
             </div>
-            <h1>استودیو هوشمند آلفا</h1>
-            <p class="subtitle">ایده بده، آهنگ کامل تحویل بگیر</p>
-        </header>
-        <div class="card" id="inputCard">
-            <label class="label">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
-                موضوع آهنگ چیه؟
-            </label>
-            <textarea id="ideaInput" placeholder="مثال: یه آهنگ رپ اجتماعی سنگین یا یه موزیک پاپ شاد برای تولد..."></textarea>
-            <!-- تنظیمات -->
-            <div class="settings-grid">
-                <div class="setting-item">
-                    <label>مدل هوش مصنوعی</label>
-                    <select id="modelSelect" class="setting-input">
-                        <option value="acestep-v15-turbo">Alpha Turbo (سریع)</option>
-                        <option value="acestep-v15-turbo-shift3">Alpha Pro (کیفیت بالا)</option>
-                    </select>
-                </div>
-                <div class="setting-item">
-                    <label>زمان (ثانیه)</label>
-                    <input type="number" id="duration" value="30" class="setting-input">
-                </div>
-                <div class="setting-item">
-                    <label>تعداد گام (Steps)</label>
-                    <input type="number" id="steps" value="8" class="setting-input">
-                </div>
-                <div class="setting-item">
-                    <label>تعداد خروجی</label>
-                    <select id="batchSize" class="setting-input">
-                        <option value="1">۱ آهنگ</option>
-                        <option value="2">۲ آهنگ</option>
-                    </select>
                 </div>
             </div>
-            <button id="generateBtn" class="btn-primary">
-                <span>ساخت آهنگ</span>
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"></path><path d="M12 5l7 7-7 7"></path></svg>
             </button>
         </div>
-        <div id="loader">
-            <div class="spinner"></div>
-            <p id="loaderText" style="color:var(--text-muted); font-size:0.9rem;">در حال پردازش...</p>
         </div>
-        <div id="resultSection" class="card">
-            <div class="result-header">
-                <div style="font-weight:700; color:#2D3748;">🎵 پخش آهنگ</div>
-                <a id="downloadLink" href="#" style="color:var(--primary); text-decoration:none; font-size:0.9rem; font-weight:600;">دانلود فایل</a>
             </div>
-            <div id="playerContainer"></div>
-            <div class="label" style="justify-content:center; margin-top:20px; color:var(--text-muted);">متن آهنگ</div>
-            <div id="lyricsDisplay" class="lyrics-box"></div>
-            <button onclick="window.location.reload()" class="btn-primary" style="background:transparent; border:2px solid var(--border); color:var(--text-muted); margin-top:15px; box-shadow:none;">
                 ساخت یک آهنگ دیگر
             </button>
         </div>
     </div>
     <script>
-        const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
         const generateBtn = document.getElementById('generateBtn');
-        const ideaInput = document.getElementById('ideaInput');
-        const loader = document.getElementById('loader');
         const loaderText = document.getElementById('loaderText');
-        const resultSection = document.getElementById('resultSection');
-        const inputCard = document.getElementById('inputCard');
-        const lyricsDisplay = document.getElementById('lyricsDisplay');
-        const playerContainer = document.getElementById('playerContainer');
-        const downloadLink = document.getElementById('downloadLink');
-        // Settings Inputs
-        const modelSelect = document.getElementById('modelSelect');
-        const durationInput = document.getElementById('duration');
         const stepsInput = document.getElementById('steps');
-        const batchSizeInput = document.getElementById('batchSize');
         generateBtn.addEventListener('click', async () => {
-            const idea = ideaInput.value.trim();
-            if (!idea) { alert("لطفا موضوع آهنگ را بنویسید."); return; }
-            // UI Loading State
-            generateBtn.disabled = true;
-            inputCard.style.opacity = "0.7";
-            inputCard.style.pointerEvents = "none";
-            loader.style.display = "block";
             try {
-                // Step 1: Generate Lyrics & Prompt (Gemini)
-                loaderText.innerText = "آلفا در حال نوشتن متن آهنگ...";
-                const refineResponse = await fetch('/api/refine', {
-                    method: 'POST',
                     headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({ idea: idea })
                 });
-                const data = await refineResponse.json();
-                if (data.error) throw new Error(data.error);
-                const generatedLyrics = data.lyrics;
-                const generatedPrompt = data.music_prompt;
-                // Step 2: Generate Audio (ACE-Step)
-                loaderText.innerText = "آلفا در حال آهنگسازی و خوانندگی...";
-                // Prepare ACE-Step Payload
                 const payload = [
                     modelSelect.value, // Model
-                    "custom", null, "unknown",
-                    generatedPrompt,   // Music Prompt
-                    generatedLyrics,   // Lyrics
                     0, "", "", "unknown",
-                    parseInt(stepsInput.value), // Steps
-                    7, true, -1, null, -1,
-                    parseInt(batchSizeInput.value), // 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,
-                    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";
-                        // Show Result
-                        displayResult(msg.output, generatedLyrics);
                     }
                 };
                 eventSource.onerror = () => {
-                    throw new Error('قطع ارتباط با سرور.');
                 };
             } catch (error) {
-                alert("خطا: " + error.message);
-                loader.style.display = "none";
-                generateBtn.disabled = false;
-                inputCard.style.opacity = "1";
-                inputCard.style.pointerEvents = "auto";
             }
         });
-        function displayResult(outputData, lyrics) {
             let audioUrl = null;
-            // Find mp3 url
             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(outputData);
-            if (audioUrl) {
-                const fullUrl = audioUrl.startsWith('http') ? audioUrl : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
-                // Set Player
-                playerContainer.innerHTML = `<audio controls autoplay src="${fullUrl}"></audio>`;
-                downloadLink.href = fullUrl;
                 // Format Lyrics
-                const formattedLyrics = lyrics.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
-                lyricsDisplay.innerHTML = formattedLyrics;
-                // Show Section
-                inputCard.style.display = "none";
-                resultSection.style.display = "block";
             } else {
-                alert("فایل صوتی یافت نشد. لطفا دوباره تلاش کنید.");
-                generateBtn.disabled = false;
-                inputCard.style.opacity = "1";
-                inputCard.style.pointerEvents = "auto";
-            }
         }
     </script>
 </body>

 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewportست این کد را جایگزین `index.html` قبلی کنید.
+```html
+<!DOCTYPE html>  " content="width=device-width, initial-scale=1.0, maximum-scale=1.0
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=, user-scalable=no">
+    <title>استودیو موزیک آلفا</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn1.0">
+    <title>استودیو آلفا</title>
+    <link:wght@300;400;500;700;800&display 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;
+            --app-bg: #F8F9FC;
+            --panel-bg: #FFFFFF;
+            --panel-border: #EAEFF7;
+            --input-bg: #F6F8FB;
+            --input-border: #=swap" rel="stylesheet">
+    <style>
+        :root {
+            --appE1E7EF;
+            --text-primary: #1A202C;
+            --text-secondary: #626F86;
+            --accent-primary: #4A6CFA;
+            --accent-glow: rgba(74, 108, 250, 0.25);
+            --accent-secondary: #0FD4A8;
+            --radius-card: 24px;
+            --radius-btn: 14px;
+            --radius-input: 12px;
+            --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes fill-progress { from { width: 0%; } to { width: 100%; } }
+        @keyframes pulse-loader { 0% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.3); } 50%-font: 'Vazirmatn', sans-serif;
+            --bg-color: #F3F4F6;
             --card-bg: #FFFFFF;
+            --primary: #3B82F6;
+            --primary-dark: #2563EB;
+            --accent: #8B5CF6;
+            --text-dark: #1F2937;
+            --text-gray: #6B7280;
+            --border: #E5E7EB;
             --radius: 16px;
         }
+        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; } { box-shadow: 0 0 60px rgba(56, 189,
         body {
+            font-family: var(--app-font);
             background-color: var(--bg-color);
+            color: var(--text-dark);
             margin: 0;
+            padding: 20px;
             min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
         }
+        .container { max-width: 600px; width: 100%; position: relative; z-index: 2; }
+        /* Header */
+        header { text-align: center; margin-bottom: 2rem; }
+        .logo {
+            font-size: 2.5rem; font-weight: 900;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+            letter-spacing: -1px; margin-bottom: 5px; display248, 0.7); } 100% { box-shadow: 0 0: inline-block;
         }
+        .tagline { color: var(--text-gray); font- 40px rgba(56, 189, 248, 0.3);size: 0.9rem; font-weight: 500; }
+        /* Main Card */ } }
+        body { font-family: var(--app-font); background-color: var
         .card {
             background: var(--card-bg);
+            border-radius: var(--app-bg); color: var(--text-primary); margin: 0; padding: 2.5(--radius);
+            box-shadow: 0 10px 25px -5px rgbarem 1rem; display: flex; justify-content: center; align-items: flex-start; min(0, 0, 0, 0.05);
+            border: 1px solid-height: 100vh; }
+        .container { max-width: 820 var(--border);
             padding: 25px;
+            transition: all 0.3s ease;px; width: 100%; }
+        header { position: relative; text-align: center
         }
+        .input-area { position: relative; margin-bottom: 15px; }
+; margin-bottom: 2.5rem; padding: 2rem 0; animation: fadeIn 0        textarea {
+            width: 100%; background: #F9FAFB;
             border: 2px solid var(--border);
+            border-radius: 12px; padding: 15px;
+            font-family: inherit; font-size: 1rem; color: var(--.8s 0.1s ease-out backwards; overflow: hidden; }
+        #neural-canvas { position: absolute; top: 0; left: 0; width: 100%; height:text-dark);
+            min-height: 120px; resize: none; transition: 0.3s 100%; z-index: 1; opacity: 0.6; }
+        .header-content { position: relative; z-index: 2; }
+        .logo-container;
+        }
+        textarea:focus { border-color: var(--primary); background: #fff; box { width: 80px; height: 80px; margin: 0 auto 1.5-shadow: 0 0 0 4px rgba(59, 130, 246,rem; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba 0.1); }
+        /* Settings Accordion */
+        details {
+            background: #F8(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); border-radius: 50%; boxFAFC; border: 1px solid var(--border);
+            border-radius: 12px;-shadow: 0 0 30px var(--accent-primary-glow); }
+        .logo margin-top: -10px; margin-bottom: 20px;
+            overflow: hidden;-icon { width: 40px; height: 40px; color: var(--accent-primary); }
+ transition: 0.3s;
         }
+        summary {
+            padding: 12px
+        h1 { font-size: 2.8rem; font-weight: 80015px; cursor: pointer; font-size: 0.9rem;
+            font-weight: ; margin: 0; background: linear-gradient(90deg, var(--accent-primary), var(--600; color: var(--text-gray); list-style: none;
+            display: flex;accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; align-items: center; justify-content: space-between;
         }
+        summary::after { content: '+'; letter-spacing: -1px; }
+        .subtitle { font-size: 1.1rem font-size: 1.2em; font-weight: bold; }
+        details[open] summary::; color: var(--text-secondary); margin-top: 0.5rem; }
+        mainafter { content: '-'; }
+        details[open] { border-color: var(--primary); }
+         { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius.settings-grid {
+            padding: 15px; border-top: 1px solid var(---card); box-shadow: 0 20px 25px -5px rgba(26border);
+            display: grid; grid-template-columns: 1fr 1fr; gap: , 32, 44, 0.07); border: 1px solid var(--panel15px;
+        }
+        .setting-item label { display: block; font-size: -border); animation: fadeIn 0.8s 0.3s ease-out backwards; }
+0.8rem; color: var(--text-gray); margin-bottom: 5px; }
+        .form-group { margin-bottom: 1.5rem; }
+        .form-label { display: flex; align-items: center; gap: 0.75rem; font-.setting-item input, .setting-item select {
+            width: 100%; padding: 8px; border: 1px solid var(--border);
+            border-radius: 8px; background:weight: 700; color: var(--text-primary); font-size: 1.2em #fff; font-family: inherit;
         }
+        /* Generate Button */
+        .btn-alpha; margin-bottom: 1rem; }
+        textarea {
+            width: 100 {
+            width: 100%; padding: 18px;
+            background: linear%; background-color: var(--input-bg); border: 2px solid var(--input-border);
+            border-gradient(90deg, var(--primary), var(--accent));
+            color: #fff; border-radius: var(--radius-input); padding: 1.5rem;
+            font-family:: none; border-radius: 14px;
+            font-size: 1.1rem var(--app-font); font-size: 1.1rem; color: var(--text-primary);; font-weight: 800; cursor: pointer;
+            box-shadow: 0 4
+            outline: none; resize: vertical; min-height: 150px; transition: var(--transitionpx 15px rgba(59, 130, 246, 0.3-smooth);
+        }
+        textarea:focus { border-color: var(--accent-primary); background-);
+            display: flex; justify-content: center; align-items: center; gap: 10color: #fff; box-shadow: 0 0 15px var(--accent-primary-glowpx;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        ); }
+        /* Settings Accordion */
+        .settings-toggle {
+            cursor: pointer; display: flex.btn-alpha:active { transform: scale(0.98); }
+        .btn-alpha:; align-items: center; justify-content: space-between;
+            padding: 1rem; backgrounddisabled { opacity: 0.7; filter: grayscale(1); cursor: not-allowed; }
+        : var(--input-bg); border-radius: var(--radius-input);
+            font-weight: 600; color: var(--text-secondary); border: 1px solid var(--input-border);/* --- COOL LOADER ANIMATION --- */
+        #loader-container {
+            display: none; flex-direction: column
+            transition: var(--transition-smooth);
+        }
+        .settings-toggle:hover { background:; align-items: center; justify-content: center;
+            padding: 40px 20px; text #fff; border-color: var(--accent-primary); }
+        .settings-content {
+            max-align: center;
+        }
+        .neural-loader {
+            position: relative; width: 8-height: 0; overflow: hidden; transition: max-height 0.5s ease-out;
+            padding0px; height: 80px; margin-bottom: 20px;
+        }
+        : 0 1rem; background: #fff;
+        }
+        .settings-content.open { max.neural-circle {
+            position: absolute; width: 100%; height: 100-height: 500px; padding: 1rem; border: 1px solid var(--input-%; border-radius: 50%;
+            border: 3px solid transparent; border-top-color: var(--border); border-top: none; border-radius: 0 0 var(--radius-input) var(--primary);
+            animation: spin 1.5s linear infinite;
+        }
+        .neural-circle::before {
+            content: ""; position: absolute; top: 5px; left: 5px;radius-input); margin-top: -5px; }
+        .grid-3 { display: grid; right: 5px; bottom: 5px;
+            border-radius: 50%; border: grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-top:  3px solid transparent; border-top-color: var(--accent);
+            animation: spin 3s linear infinite;10px; }
+        .input-mini { width: 100%; padding: 10px
+        }
+        .neural-circle::after {
+            content: ""; position: absolute; top: ; border-radius: 8px; border: 1px solid var(--input-border); background: var(--input15px; left: 15px; right: 15px; bottom: 15px-bg); font-family: inherit; }
+        .label-mini { font-size: 0.;
+            border-radius: 50%; border: 3px solid transparent; border-top-color85rem; color: var(--text-secondary); margin-bottom: 5px; display: block;: #10B981;
+            animation: spin 1.5s linear infinite reverse;
         }
+ }
+        /* Main Button */
+        #generateButton {
+            display: flex; align-items: center        .neural-core {
+            position: absolute; top: 50%; left: 50%; transform: translate; justify-content: center; gap: 0.75rem;
+            width: 100(-50%, -50%);
+            width: 20px; height: 20px;%; padding: 1.2rem; font-size: 1.2rem; font-weight:  background: var(--primary); border-radius: 50%;
+            box-shadow: 0 0700;
+            background: linear-gradient(95deg, var(--accent-secondary)  20px var(--primary); animation: pulse 1s infinite alternate;
         }
+        @keyframes0%, var(--accent-primary) 100%);
+            color: #fff; border: none spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(; border-radius: var(--radius-btn); cursor: pointer;
+            transition: all 0.360deg); } }
+        @keyframes pulse { 0% { transform: translate(-50%, -53s ease; box-shadow: 0 6px 20px -5px var(--accent-primary-glow0%) scale(0.8); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } }
+        .status); margin-top: 2rem;
+        }
+        #generateButton:hover { transform: translateY(--text {
+            font-weight: 600; background: linear-gradient(90deg, var3px) scale(1.01); box-shadow: 0 10px 25px -5px var(--accent-primary-glow); }
+        #generateButton:disabled { opacity: 0.5(--primary), var(--accent));
+            -webkit-background-clip: text; -webkit-text-fill; cursor: not-allowed; transform: none; }
+        /* --- COOL LOADER --- */
+        #-color: transparent;
+            font-size: 1.1rem;
+        }
+        /* --- RESULT SECTIONaiLoader { display: none; margin-top: 3rem; flex-direction: column; align-items: center --- */
+        #result-section { display: none; animation: slideUp 0.6s cubic-bezier(0; }
+        .generator-container {
+            position: relative; width: 100%; height: 2.2, 1, 0.3, 1); }
+        .result-card {
+            background00px; background: #0f172a; border-radius: 20px;
+: #fff; border-radius: 20px; overflow: hidden;
+            box-shadow: 0             overflow: hidden; border: 1px solid #334155; box-shadow: 20px 40px -10px rgba(0,0,0,0.1); border: 0 0 50px rgba(74, 108, 250, 0.21px solid var(--border);
         }
+        .player-top {
+            background: linear-gradient);
+            display: flex; flex-direction: column; align-items: center; justify-content: center;
+(135deg, #F8FAFC, #EFF6FF);
+            padding: 20px;        }
+        .scan-line {
+            position: absolute; top: 0; left: 0; width border-bottom: 1px solid var(--border);
             text-align: center;
         }
+: 100%; height: 4px;
+            background: var(--accent-secondary);
+            box-shadow        audio { width: 100%; height: 45px; border-radius: 25px;: 0 0 15px var(--accent-secondary);
+            animation: scan 2s linear margin-top: 10px; }
+        .lyrics-box {
+            padding: 25 infinite; z-index: 5;
+        }
+        .data-stream {
+            position: absolute; widthpx; max-height: 400px; overflow-y: auto;
+            text-align:: 100%; height: 100%; top:0; left:0;
+            background center; line-height: 2.4; font-size: 1.05rem;
+            color:: repeating-linear-gradient(0deg, transparent 0, transparent 20px, rgba(74,  #374151; white-space: pre-wrap; background: #fff;
+        }
+        108, 250, 0.1) 21px);
+            opacity:
         .lyrics-tag {
+            color: var(--primary); font-weight: 800; display0.3;
+        }
+        .loader-text {
+            font-size: 1.2rem;: block; margin-top: 15px;
+            font-size: 0.85em font-weight: 700; color: #fff; z-index: 10; margin-; letter-spacing: 1px; text-transform: uppercase;
         }
+        .btn-downloadbottom: 10px; text-shadow: 0 0 10px rgba(255,2 {
+            display: inline-flex; align-items: center; gap: 5px;
+            color55,255,0.5);
+        }
+        .progress-bar-container {: var(--primary); text-decoration: none; font-weight: 700; font-size:  width: 80%; height: 6px; background: #334155; border-0.9rem;
         }
+        @keyframes slideUp { from { opacity: 0; transform: translateYradius: 3px; z-index: 10; overflow: hidden; }
+        .progress-bar { width(40px); } to { opacity: 1; transform: translateY(0); } }
+        /*: 0%; height: 100%; background: linear-gradient(90deg, var(--accent Hide Scrollbar */
+        .lyrics-box::-webkit-scrollbar { width: 6px; }
+        .lyrics--secondary), var(--accent-primary)); transition: width 0.3s; animation: fill-progress 20box::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 3px;s linear forwards; }
+        @keyframes scan { 0% { top: 0%; opacity: 0; }
     </style>
 </head>
 <body>
     <div class="container">
+        <!-- } 10% { opacity: 1; } 90% { opacity: 1; } 10 HEADER -->
+        <header id="mainHeader">
+            <div class="logo">Alpha Music</div>
+0% { top: 100%; opacity: 0; } }
+        /* Result */
+        #result-container { display: none; margin-top: 2rem; animation: fadeIn 0.8s;            <div class="tagline">استودیو هوشمند ساخت موسیقی آلفا</div>
+        </header> }
+        .audio-player-wrapper {
+            background: #fff; border: 2px solid var(--input
+        <!-- INPUT SECTION -->
+        <div id="inputSection" class="card">
+            <div class="input-area">
+                <textarea id="ideaInput" placeholder="توضیحات آهنگ خود را-border); border-radius: var(--radius-card); padding: 1.5rem;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.05); اینجا بنویسید...&#10;مثال: آهنگ پاپ عاشقانه درباره باران، صدای زن، احساس text-align: center;
+        }
+        audio { width: 100%; border-radius:ی..."></textarea>
             </div>
+            <details>
+                <summary>
+                    <span>تنظیمات پیش 30px; margin-top: 10px; }
+        .lyrics-box {
+            رفته (اختیاری)</span>
+                </summary>
+                <div class="settings-grid">
+                    margin-top: 1.5rem; padding: 1.5rem; background: var(--input-bg); border<div class="setting-item">
+                        <label>مدل هوش مصنوعی</label>
+                        <-radius: var(--radius-input);
+            max-height: 400px; overflow-yselect id="modelSelect">
+                            <option value="acestep-v15-turbo">Alpha Turbo (: auto; white-space: pre-wrap; line-height: 1.8; text-align:سریع)</option>
+                            <option value="acestep-v15-turbo-shift3">Alpha Pro center;
+            color: var(--text-primary); border: 1px dashed var(--input-border);
+         (دقیق)</option>
+                        </select>
+                    </div>
+                    <div class="setting-item">
+                        }
+        @media (max-width: 768px) { .grid-3 { grid-<label>تعداد گام (Steps)</label>
+                        <input type="number" id="steps"template-columns: 1fr; } }
+    </style>
+</head>
+<body>
+ value="8" min="4" max="20">
+                    </div>
+                    <div class="setting-item">
+    <div class="container">
+        <header>
+            <canvas id="neural-canvas"></                        <label>شانس (Seed)</label>
+                        <input type="text" id="seed" value="-canvas>
+            <div class="header-content">
+                <div class="logo-container">
+                    <svg class="logo-icon" viewBox="0 0 24 24" fill="1" placeholder="-1 برای تصادفی">
+                    </div>
+                    <div class="setting-item">
+                        <labelnone" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon>تعداد خروجی</label>
+                        <input type="number" value="1" disabled style="background: points="12 2 2 7 12 12 22 7 12 2"></ #f3f4f6; color: #9ca3af;">
+                    </div>
                 </div>
+            </details>polygon><polyline points="2 17 12 22 22 17"></polyline><
+            <button id="generateBtn" class="btn-alpha">
+                <span>ساخت آهنگ جادویی</span>
+polyline points="2 12 12 17 22 12"></polyline></svg>
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="</div>
+                <h1>استودیو آلفا</h1>
+                <p class="subtitle">هوش مصنوعی،none" xmlns="http://www.w3.org/2000/svg"><path d="M12  آهنگساز شخصی شما</p>
+            </div>
+        </header>
+    <main>
+        <!--22C17.5228 22 22 17.5228 22 Main Input -->
+        <div class="form-group">
+            <div class="form-label">   12C22 6.47715 17.5228 2
+                <svg width="24" height="24" viewBox="0 0 24 24 12 2C6.47715 2 2 6.4771" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a5 2 12C2 17.5228 6.477153 3 0 0 0-3 3v8a3 3 0 0  22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap0 6 0V4a3 3 0 0 0-3-3z"></path="round" stroke-linejoin="round"/><path d="M2 12H22" stroke="currentColor"><path d="M19 10v2a7 7 0 0 1-1 stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M124 0v-2"></path></svg>
+                توصیف آهنگ (موضوع، سبک، خوان 2C14.5013 4.73835 15.92نده)
+            </div>
+            <textarea id="ideaInput" placeholder="مثال: یه آهنگ پاپ عاشق28 8.29203 16 12C15.9228 15انه غمگین، صدای زن، در مورد جاده شمال و بارون..."></textarea>
+        </div>
+.708 14.5013 19.2616 12         <!-- Advanced Settings (Collapsible) -->
+        <div class="form-group">
+            <div class="22C9.49872 19.2616 8.077settings-toggle" onclick="toggleSettings()">
+                <span>تنظیمات پیشرفته (اختیاری)</span>
+25 15.708 8 12C8.07725 8.2                <svg width="20" height="20" viewBox="0 0 24 249203 9.49872 4.73835 12 " fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 122Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round 15 18 9"></polyline></svg>
             </div>
+            <div class="settings-"/></svg>
             </button>
         </div>
+        <!-- COOL LOADER -->
+        <div id="content" id="settingsContent">
+                <div class="grid-3">
+                    <div>
+                        <labelloader-container">
+            <div class="neural-loader">
+                <div class="neural-circle"></div>
+                <div class="neural-core"></div>
+            </div>
+            <div class="status-text class="label-mini">مدل هوش مصنوعی</label>
+                        <select id="modelSelect" class="input" id="loaderText">در حال پردازش...</div>
+            <p style="color: #9CA3AF;-mini">
+                            <option value="acestep-v15-turbo">Alpha Turbo (سریع)</option> font-size: 0.85rem; margin-top: 10px;">لطفاً صفحه را نب
+                            <option value="acestep-v15-turbo-shift3">Alpha Pro (دقیق)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="label-mini">تعداد مراحلندید، این فرآیند حدود ۱ دقیقه طول می‌کشد.</p>
         </div>
+        <!-- RESULT SECTION -->
+        <div id="result-section">
+            <div class="result-card">
+                <div (Steps)</label>
+                        <select id="stepsSelect" class="input-mini">
+                            <option value class="player-top">
+                    <div style="display: flex; justify-content: space-between;="8">۸ مرحله (نرمال)</option>
+                            <option value="12">۱۲ مرحله (کی align-items: center; margin-bottom: 10px;">
+                        <span style="font-weight: 7فیت بالا)</option>
+                            <option value="4">۴ مرحله (خیلی سریع)</option>
+00; color: var(--text-dark);">خروجی نهایی آلفا</span>
+                        <a id="download                        </select>
+                    </div>
+                    <div>
+                        <label class="label-mini">تنوع (Seed)</labelLink" href="#" class="btn-download" download>
+                            <svg width="18" height="1>
+                        <input type="text" id="seedInput" class="input-mini" value="-1" placeholder="-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-1 تصادفی">
+                    </div>
+                </div>
             </div>
+        </div>
+        <button id="generateButton">width="2"><path d="M21 15v4a2 2 0 0
+            <svg width="24" height="24" viewBox="0 0 24 1-2 2H5a2 2 0 0 1-2-2v-424" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke"/><polyline points="7 10 12 15 17 10"/><line x1="-linejoin="round"><polygon points="5 3 19 12 5 21 5 312" y1="15" x2="12" y2="3"/></svg>
+                            "></polygon></svg>
+            <span>ساخت آهنگ با هوش مصنوعی</span>
+        </button>
+دانلود
+                        </a>
+                    </div>
+                    <div id="player-wrapper"></div>
+                </div>
+                <        <!-- Cool Loader -->
+        <div id="aiLoader">
+            <div class="generator-container">
+                div class="lyrics-box" id="lyrics-content">
+                    <!-- متن آهنگ اینجا قرار میگیرد -->
+                </div><div class="scan-line"></div>
+                <div class="data-stream"></div>
+                <div
+            </div>
+            <button onclick="location.reload()" class="btn-alpha" style="margin class="loader-text" id="loaderText">در حال پردازش هسته آلفا...</div>
+                -top: 20px; background: #fff; color: var(--text-dark); border: 2px<div class="progress-bar-container">
+                    <div class="progress-bar"></div>
+                </div> solid var(--border); box-shadow: none;">
                 ساخت یک آهنگ دیگر
             </button>
         </div>
+                <div style="margin-top: 10px; color: #94a3b8; font-
     </div>
     <script>
+        // Configuration
+        const ACE_SPACE_URL = "https://size: 0.8rem;">لطفاً صفحه را نبندید</div>
+            </div>
+        </div>  ace-step-ace-step-v1-5.hf.space/";
+        // DOM Elements
+        <!-- Final Result -->
+        <div id="result-container">
+            <div class="audio-
         const generateBtn = document.getElementById('generateBtn');
+        const ideaInput = document.getElementById('ideaplayer-wrapper">
+                <h3 style="margin: 0 0 10px 0; color:Input');
+        const inputSection = document.getElementById('inputSection');
+        const loaderContainer = document.getElementById var(--success-color);">✨ آهنگ شما آماده شد</h3>
+                <div id="audioWrapper"></div>
+                ('loader-container');
         const loaderText = document.getElementById('loaderText');
+        const resultSection =<a id="downloadBtn" href="#" style="display: inline-block; margin-top: 15px; document.getElementById('result-section');
+        const lyricsContent = document.getElementById('lyrics-content');
+        const playerWrapper = document.getElementById('player-wrapper');
+        const downloadLink = document.getElementById('downloadLink color: var(--accent-primary); text-decoration: none; font-weight: bold;">دانلود فایل MP3</a>
+            ');
+        const mainHeader = document.getElementById('mainHeader');
+        // Inputs
+        const modelSelect =</div>
+            <div class="lyrics-box" id="lyricsOutput"></div>
+        </div>
+    </main>
+ document.getElementById('modelSelect');
         const stepsInput = document.getElementById('steps');
+        const seedInput    </div>
+    <script>
+        const ACE_SPACE_URL = "https://ace-step = document.getElementById('seed');
         generateBtn.addEventListener('click', async () => {
+            const idea = idea-ace-step-v1-5.hf.space/";
+        // UI Elements
+        constInput.value.trim();
+            if (!idea) {
+                ideaInput.focus();
+                alert("لطف ideaInput = document.getElementById('ideaInput');
+        const generateButton = document.getElementById('generateButton');
+        const loaderاً توضیحات آهنگ را وارد کنید.");
+                return;
+            }
+            // 1. Switch UI to Loader
+ = document.getElementById('aiLoader');
+        const loaderText = document.getElementById('loaderText');
+        const            inputSection.style.display = 'none';
+            mainHeader.style.display = 'none'; // Hide header resultContainer = document.getElementById('result-container');
+        const lyricsOutput = document.getElementById('lyricsOutput');
+        const audioWrapper = document.getElementById('audioWrapper');
+        const downloadBtn = document.getElementById('downloadBtn');
+ for cleaner look during load
+            loaderContainer.style.display = 'flex';
+            loaderText.textContent = "آلف        // Settings Logic
+        function toggleSettings() {
+            const content = document.getElementById('settingsContent');
+ا در حال نوشتن ترانه و ملودی...";
             try {
+                // 2. Call Gemini (            content.classList.toggle('open');
+        }
+        // Main Logic
+        generateButton.addEventListener('click', asyncLyrics & Prompt)
+                const geminiResp = await fetch('/api/refine', {
+                    method: () => {
+            const idea = ideaInput.value.trim();
+            if (!idea) { alert('لط 'POST',
                     headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringifyفا ایده آهنگ را بنویسید.'); return; }
+            // 1. UI Transition
+            generateButton({ idea: idea })
                 });
+                const geminiData = await geminiResp.json();
+                if (gem.style.display = 'none';
+            resultContainer.style.display = 'none';
+            loader.style.displayiniData.error) throw new Error("Gemini Error: " + geminiData.error);
+                // 3 = 'flex';
+            loaderText.innerText = "هوش مصنوعی آلفا در حال نوشتن شعر...";
+            . Update Loader & Call ACE-Step
+                loaderText.textContent = "آلفا در حال تنظیم و ساخت
+            // Scroll to loader
+            loader.scrollIntoView({ behavior: 'smooth' });
+            try {
+                 آهنگ...";
                 const payload = [
                     modelSelect.value, // Model
+                    "custom",// 2. Call Gemini for Text & Prompt
+                const refineResponse = await fetch('/api/refine', {
+ null, "unknown",
+                    geminiData.music_prompt, // Prompt from Gemini
+                    geminiData.lyrics                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body:,       // Lyrics from Gemini
                     0, "", "", "unknown",
+                    parseInt(stepsInput.value) JSON.stringify({ idea: idea })
+                });
+                const refinedData = await refineResponse.json(); || 8, // Steps
+                    7, true,
+                    parseInt(seedInput.value) || -
+                if (refinedData.error) throw new Error(refinedData.error);
+                const lyrics = refinedData1, // 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,.lyrics;
+                const prompt = refinedData.music_prompt;
+                // Update Loader
+                loaderText.innerText = "استودیو آلفا در حال ضبط آهنگ...";
+                // 3. Call ACE-Step for 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 aceResp = await fetch(`${ACE_SPACE_URL}grad Audio
+                const model = document.getElementById('modelSelect').value;
+                const steps = Number(document.getElementById('stepsSelect').value);
+                const seed = document.getElementById('seedInput').value;
+                const payloadio_api/queue/join`, {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ data: payload, fn_index: 77, session_hash })
                 });
+                if (!aceResp.ok) throw new Error(' = [
+                    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خطا در اتصال به سرور موزیک');
+                // 4. Handle SSE
+                const eventSource = new EventSource INPUT", true, true, true, null, false, true, false, false, 0.5, 8, null, [], false, null, null, null, null
+                ];
+                const session_hash =(`${ACE_SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`);
                 eventSource.onmessage = (event) => {
+                    const msg = JSON.parse(event. Math.random().toString(36).substring(2);
+                const joinResp = await fetch(`${ACE_data);
                     if (msg.msg === 'process_starts') {
+                        loaderText.textContentSPACE_URL}gradio_api/queue/join`, {
+                    method: 'POST',
+                    headers = "آهنگ در حال ضبط استودیویی...";
+                    }
+                    else if (msg.msg: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ data: payload, fn_index: 77, session_hash })
+                });
+                if (!joinResp.ok === 'process_completed') {
                         eventSource.close();
+                        showResult(msg.output, geminiData.lyrics);
                     }
                 };
                 eventSource.onerror = () => {
+) throw new Error('خطا در اتصال به سرور موزیک');
+                const eventSource = new EventSource(`${ACE_                    throw new Error('ارتباط با سرور قطع شد.');
                 };
             } catch (error) {
+                SPACE_URL}gradio_api/queue/data?session_hash=${session_hash}`);
+                eventalert("خطا: " + error.message);
+                location.reload(); // Reset on error
+            }Source.onmessage = (event) => {
+                    const msg = JSON.parse(event.data);
+                    if (msg.msg === 'process_starts') {
+                        loaderText.innerText = "در
+        });
+        function showResult(outputData, lyricsText) {
+            loaderContainer.style.display = 'none حال رندر نهایی صدا...";
+                    } else if (msg.msg === 'process_completed') {
+                        event';
+            mainHeader.style.display = 'block';
+            resultSection.style.display = 'blockSource.close();
+                        showResult(msg.output, lyrics);
+                    }
+                };
+                eventSource.onerror';
+            // Find Audio URL
+            let audioUrl = null;
+            function findAudio(obj) {
+                if (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) { = () => { throw new Error('ارتباط با سرور قطع شد.'); };
+            } catch (e)
+                    audioUrl = obj;
+                } else if (obj && typeof obj === 'object') {
+                     {
+                alert("خطا: " + e.message);
+                loader.style.display = 'noneif (obj.url && obj.url.endsWith('.mp3')) audioUrl = obj.url;
+                    ';
+                generateButton.style.display = 'flex';
             }
         });
+        function showResultObject.values(obj).forEach(findAudio);
+                }
+            }
+            findAudio(outputData(data, lyrics) {
             let audioUrl = null;
             function traverse(obj) {
+                if);
+            if (audioUrl) {
+                const fullUrl = audioUrl.startsWith('http') ? audio (typeof obj === 'string' && obj.includes('/file=') && obj.endsWith('.mp3')) {Url : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
+                // Create Player
                     audioUrl = obj;
                 } else if (obj && typeof obj === 'object') {
+                playerWrapper.innerHTML = `<audio controls autoplay src="${fullUrl}"></audio>`;
+                downloadLink.href = fullif (obj.url && obj.url.endsWith('.mp3')) audioUrl = obj.url;
                     Object.values(obj).forEach(traverse);
                 }
             }
+            traverse(data);
+            Url;
                 // Format Lyrics
+                const formattedLyrics = lyricsText.replace(/\[(.*?)\]/g, '<span class="lyrics-tag">[$1]</span>');
+                lyricsContent.innerHTML = formattedLyrics;if (audioUrl) {
+                const fullUrl = audioUrl.startsWith('http') ? audioUrl : ACE_SPACE_URL.replace(/\/$/, '') + audioUrl;
+                audioWrapper.innerHTML = `<
             } else {
+                alert("فایل صوتی یافت نشد!");
+                location.reload();
+            audio controls autoplay src="${fullUrl}"></audio>`;
+                downloadBtn.href = fullUrl;
+                lyrics}
         }
     </script>
 </body>