Spaces:

Opera8
/

Ahang

Sleeping

App Files Files Community

Opera8 commited on 30 days ago

Commit

fd5019d

verified ·

1 Parent(s): b23be79

Update index.html

Browse files

Files changed (1) hide show

index.html +220 -585

index.html CHANGED Viewed

@@ -1,12 +1,10 @@
-<!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;
@@ -14,706 +12,343 @@
             --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>

+<!DOCTYPE html>
 <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;
             --panel-bg: #FFFFFF;
             --panel-border: #EAEFF7;
             --input-bg: #F6F8FB;
+            --input-border: #E1E7EF;
             --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>
+        const ACE_SPACE_URL = "https://ace-step-ace-step-v1-5.hf.space/";
+        // المان‌ها
+        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
                 ];
+                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') {
+                        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')) {
                     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;
+                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>