Update index.html

index.html

@@ -8,10 +8,9 @@
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
         :root { --app-font: 'Vazirmatn', sans-serif; --app-bg: #F8F9FC; --panel-bg: #FFFFFF; --panel-border: #EAEFF7; --input-bg: #F6F8FB; --input-border: #E1E7EF; --text-primary: #1A202C; --text-secondary: #626F86; --text-tertiary: #8A94A6; --accent-primary: #4A6CFA; --accent-primary-hover: #3553D6; --accent-primary-glow: rgba(74, 108, 250, 0.25); --accent-secondary: #0FD4A8; --accent-secondary-hover: #0DA986; --accent-secondary-glow: rgba(15, 212, 168, 0.2); --accent-premium: #FFC107; --accent-premium-glow: rgba(255, 193, 7, 0.3); --waveform-color-active: var(--accent-primary); --waveform-color-inactive: #D0D9E6; --waveform-dashed-line-color: #E0E4E9; --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03); --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04); --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05); --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05); --radius-card: 24px; --radius-btn: 14px; --radius-input: 12px; --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); } @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalZoomIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } } @keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } } @keyframes satellite-pulse-3 { from { transform: scale(0.7) translateX(50%); opacity: 0.6; } to { transform: scale(1.1) translateX(50%); opacity: 1; } } @keyframes badge-fade-in { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .subscription-status-badge { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.9em; font-weight: 700; margin-top: 1rem; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.1); animation: badge-fade-in 0.6s 0.5s ease-out backwards; display: none; } .subscription-status-badge.free-badge { background: linear-gradient(45deg, #6c757d, #495057); color: white; box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3); } .subscription-status-badge.paid-badge { background: linear-gradient(45deg, var(--accent-premium), #ffca2c); color: #333; box-shadow: 0 4px 10px var(--accent-premium-glow); } html { scroll-behavior: smooth; } body { font-family: var(--app-font); direction: rtl; background-color: var(--app-bg); color: var(--text-primary); font-size: 16px; line-height: 1.8; margin: 0; padding: 2.5rem 0; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center; align-items: flex-start; overflow-x: hidden; background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px); background-size: 20px 20px; background-position: -10px -10px; } .app-container { max-width: 820px; width: 92%; margin: 0 auto; } .app-header { padding: 0.5rem 0 2.5rem 0; text-align: center; margin-bottom: 1.5rem; animation: fadeIn 0.8s 0.2s ease-out backwards; } .app-header h1 { font-size: 2.5em; font-weight: 900; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; } .app-header p { font-size: 1.05em; color: var(--text-secondary); margin-top: 0; opacity: 0.9; font-weight: 400; line-height: 1.7; } .main-content { position:relative; padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.4s ease-out backwards; } .form-group { margin-bottom: 2.2rem; } label { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; } textarea, input[type="text"] { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); } textarea:focus, input[type="text"]:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); } textarea { min-height: 120px; resize: vertical; } .slider-container { display: flex; align-items: center; gap: 1.5rem; } input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--input-border); border-radius: 3px; outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%); height: 6px; border-radius: 3px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #fff; border-radius: 50%; cursor: pointer; border: 4px solid var(--accent-primary); box-shadow: var(--shadow-md); margin-top: -9px; transition: var(--transition-fast); } input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 8px var(--accent-primary-glow); } .temperature-value { font-weight: 700; background-color: var(--input-bg); padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--input-border); min-width: 45px; text-align: center; color: var(--accent-primary); font-size: 1em; box-shadow: var(--shadow-sm); } .generate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 1.1rem 1.5rem; font-size: 1.25em; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); position: relative; overflow: hidden; letter-spacing: 0.5px; } .generate-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); } .generate-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; color: rgba(255,255,255,0.7); } .generate-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none;} .output-section { margin-top: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; position: relative; box-sizing: border-box; padding: 2rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); } .output-section.has-content { background-color: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); padding: 0; min-height: auto; } .status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; } .status-message.error { color: var(--text-primary); font-weight: 600; line-height: 1.9; } .loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; } .orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; } .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; } .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; } .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; } .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; } .orbit .satellite { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-primary); box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary); } .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; } .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; } .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;} .loading-text { font-size: 1.2em; font-weight: 700; color: var(--text-primary); text-align: center; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .audio-player-content { display: none; width: 100%; padding: 1.5rem; box-sizing: border-box; flex-direction: column; gap: 1.2rem; animation: fadeIn 0.5s ease-out; } .audio-waveform-container { display: flex; align-items: center; gap: 1rem; width: 100%; margin-bottom: 1rem; } .audio-time { font-size: 0.9em; color: var(--text-secondary); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; user-select: none; } .audio-waveform { flex-grow: 1; height: 60px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .audio-waveform-canvas { display: block; max-width: 100%; height: 100%; } .audio-waveform-dashed-line { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-image: linear-gradient(to right, var(--waveform-dashed-line-color) 33%, transparent 0%); background-position: center; background-size: 10px 1px; z-index: 1; } .audio-controls-group { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 1rem; } .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn { background: none; border: none; cursor: pointer; padding: 8px; transition: transform 0.2s, opacity 0.2s; color: var(--text-secondary); } .audio-skip-btn:hover, .audio-play-pause-btn-large:hover, .audio-volume-btn:hover { color: var(--accent-primary); opacity: 0.9; } .audio-skip-btn:active, .audio-play-pause-btn-large:active, .audio-volume-btn:active { transform: scale(0.9); } .audio-skip-btn svg { width: 28px; height: 28px; fill: currentColor; } .audio-play-pause-btn-large { padding: 0; width: 50px; height: 50px; } .audio-play-pause-btn-large svg { width: 38px; height: 38px; fill: currentColor; } .audio-utility-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; } .audio-volume-btn svg { width: 24px; height: 24px; fill: currentColor; } .audio-speed-btn { font-family: var(--app-font); font-size: 0.9em; font-weight: 600; background-color: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; min-width: 40px; text-align: center; color: var(--text-primary); box-shadow: var(--shadow-sm); } .audio-speed-btn:hover { background-color: var(--input-bg); } #standard-view .char-counter-wrapper { font-size: 0.85em; color: var(--text-tertiary); text-align: left; margin-top: 0.75rem; padding: 0 0.2rem; } #standard-view #char-count { font-weight: 600; color: var(--accent-primary); } #standard-view #selected-speaker-display { text-align: center; margin-top: 1.5rem; }
 
-        /* --- START: اصلاحیه نهایی و قطعی استایل کارت گوینده --- */
         #standard-view #selected-speaker-card {
             display: inline-flex;
-            width: 320px; /* عرض ثابت برای کارت */
+            width: 320px;
             max-width: 100%;
             box-sizing: border-box;
             align-items: center;
@@ -50,7 +49,6 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
-        /* --- END: اصلاحیه نهایی --- */
 
         #standard-view #selected-speaker-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-lg); border-color: var(--accent-primary); }
         #standard-view #selected-speaker-info h3 { margin: 0; font-size: 1.25em; font-weight: 800; }
@@ -102,7 +100,6 @@
         #upgrade-premium-btn { display: none; width: 100%; margin-top: 1.5rem; padding: 1rem; font-family: var(--app-font); font-size: 1.1em; font-weight: 800; color: #212529; background: linear-gradient(95deg, #FFD54F, var(--accent-premium) 100%); border: none; border-radius: var(--radius-btn); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 8px 20px -5px var(--accent-premium-glow); }
         #upgrade-premium-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 25px -5px rgba(255, 193, 7, 0.4); }
 
-        /* --- START: استایل‌های جدید برای کارت اختصاصی و دانلود --- */
         @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
         @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
         
@@ -187,7 +184,53 @@
             background-color: rgba(255, 255, 255, 0.3);
             transform: scale(1.05);
         }
-        /* --- END: استایل‌های جدید --- */
+
+        /* --- Custom History Section Styles --- */
+        .history-container {
+            margin-top: 3rem;
+            background-color: var(--panel-bg);
+            border-radius: var(--radius-card);
+            border: 1px solid var(--panel-border);
+            padding: 1.5rem;
+            box-shadow: var(--shadow-lg);
+            animation: fadeIn 0.5s ease-out;
+        }
+        .history-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+            border-bottom: 1px solid var(--panel-border);
+            padding-bottom: 1rem;
+        }
+        .history-header h3 { margin: 0; font-size: 1.2em; font-weight: 800; color: var(--text-primary); }
+        .history-list { max-height: 500px; overflow-y: auto; }
+        .history-item {
+            background: var(--input-bg);
+            border: 1px solid var(--input-border);
+            border-radius: 16px;
+            padding: 15px;
+            margin-bottom: 12px;
+            transition: var(--transition-fast);
+            position: relative;
+        }
+        .history-item:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
+        .history-item-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px; }
+        .history-item-id { font-weight: 700; color: var(--text-primary); font-size: 0.9em; }
+        .history-item-date { font-size: 0.8em; color: var(--text-tertiary); margin-top: 4px; }
+        .history-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; }
+        .history-badge.completed { background-color: #DEF7EC; color: #03543F; }
+        .history-badge.processing { background-color: #FEF3C7; color: #92400E; }
+        .history-badge.failed { background-color: #FDE8E8; color: #9B1C1C; }
+        .history-actions { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 10px; }
+        .btn-history-action { padding: 6px 12px; border-radius: 8px; font-size: 0.85em; font-weight: 600; cursor: pointer; border: none; transition: 0.2s; display: inline-flex; align-items: center; gap: 5px; }
+        .btn-play { background: var(--accent-primary); color: white; }
+        .btn-play:hover { background: var(--accent-primary-hover); }
+        .btn-track { background: var(--accent-premium); color: #333; }
+        .btn-track:hover { background: #e0a800; }
+        .btn-delete { background: #fff5f5; color: #e53e3e; border: 1px solid #fed7d7; }
+        .btn-delete:hover { background: #e53e3e; color: white; }
+        .empty-history { text-align: center; color: var(--text-tertiary); padding: 2rem; font-style: italic; }
 
         @media (max-width: 600px) {
             body { padding: 1.5rem 0; } 
@@ -287,6 +330,17 @@
                         </button>
                     </div>
                 </div>
+
+                <!-- Custom Voice History Section -->
+                <div class="history-container" id="custom-history-section">
+                    <div class="history-header">
+                        <h3><i class="fas fa-history"></i> سوابق درخواست‌های اختصاصی</h3>
+                    </div>
+                    <div class="history-list" id="custom-history-list">
+                        <!-- History Items Will Be Injected Here -->
+                    </div>
+                </div>
+
             </main>
         </div>
         <audio id="hidden-audio-player" style="display: none;"></audio>
@@ -549,6 +603,7 @@
         ['timeupdate', 'play', 'pause', 'ended'].forEach(e => mainAudioPlayer.addEventListener(e, updatePlayerUI));
         window.addEventListener('resize', updatePlayerUI);
         
+        // --- Standard View Logic (Unchanged) ---
         (function() {
             const form = document.getElementById('standard-tts-form'), textInput = document.getElementById('text-input-standard'), promptInput = document.getElementById('prompt-input-standard'), tempSlider = document.getElementById('temperature-slider-standard'), tempValueSpan = document.getElementById('temperature-value-standard'), generateBtn = document.getElementById('generate-btn-standard'), btnText = generateBtn.querySelector('.btn-text'), btnSpinner = generateBtn.querySelector('.spinner'), outputSection = document.getElementById('output-section-standard'), statusMessage = document.getElementById('status-message-standard'), loadingAnimation = document.getElementById('loading-animation-wrapper-standard'), playerContent = document.getElementById('audio-player-content-standard'), charCount = document.getElementById('char-count'), charMax = document.getElementById('char-max'), MAX_CHARS = 50000;
             const downloadWrapper = document.getElementById('download-wrapper-standard');
@@ -605,14 +660,105 @@
             createPlayerInstance('audio-player-content-standard'); statusMessage.style.display = 'block';
         })();
 
+        // --- NEW: Voice Clone View Logic (Updated for Manager Space) ---
         (function() {
-            const view = voiceCloneView, form = view.querySelector('#voice-clone-form'), generateBtn = view.querySelector('#generate-btn-clone'), btnText = generateBtn.querySelector('.btn-text'), btnSpinner = generateBtn.querySelector('.spinner'), textInput = view.querySelector('#text-input-clone'), promptInput = view.querySelector('#prompt-input-clone'), tempSlider = view.querySelector('#temperature-slider-clone'), tempValueSpan = view.querySelector('#temperature-value-clone'), userVoiceInput = view.querySelector('#user-voice-input'), uploadArea = view.querySelector('#upload-area'), filePreview = view.querySelector('#file-preview'), fileNameSpan = view.querySelector('#file-name'), removeFileBtn = view.querySelector('#remove-file-btn'), previewPlayBtn = view.querySelector('.preview-play-btn'), previewPlayIcon = previewPlayBtn.querySelector('.play-icon-preview'), previewPauseIcon = previewPlayBtn.querySelector('.pause-icon-preview'), audioPreview = view.querySelector('#audio-preview'), outputSection = view.querySelector('#output-section-clone'), statusMessage = view.querySelector('#status-message-clone'), loadingAnimation = view.querySelector('#loading-animation-wrapper-clone'), loadingText = view.querySelector('#loading-text-clone'), playerContent = view.querySelector('#audio-player-content-clone');
+            const view = voiceCloneView;
+            const form = view.querySelector('#voice-clone-form');
+            const generateBtn = view.querySelector('#generate-btn-clone');
+            const btnText = generateBtn.querySelector('.btn-text');
+            const btnSpinner = generateBtn.querySelector('.spinner');
+            const textInput = view.querySelector('#text-input-clone');
+            const promptInput = view.querySelector('#prompt-input-clone');
+            const tempSlider = view.querySelector('#temperature-slider-clone');
+            const tempValueSpan = view.querySelector('#temperature-value-clone');
+            const userVoiceInput = view.querySelector('#user-voice-input');
+            const uploadArea = view.querySelector('#upload-area');
+            const filePreview = view.querySelector('#file-preview');
+            const fileNameSpan = view.querySelector('#file-name');
+            const removeFileBtn = view.querySelector('#remove-file-btn');
+            const previewPlayBtn = view.querySelector('.preview-play-btn');
+            const previewPlayIcon = previewPlayBtn.querySelector('.play-icon-preview');
+            const previewPauseIcon = previewPlayBtn.querySelector('.pause-icon-preview');
+            const audioPreview = view.querySelector('#audio-preview');
+            const outputSection = view.querySelector('#output-section-clone');
+            const statusMessage = view.querySelector('#status-message-clone');
+            const loadingAnimation = view.querySelector('#loading-animation-wrapper-clone');
+            const loadingText = view.querySelector('#loading-text-clone');
+            const playerContent = view.querySelector('#audio-player-content-clone');
             const downloadWrapper = document.getElementById('download-wrapper-clone');
             const downloadBtn = document.getElementById('download-btn-clone');
             const longTextWarning = view.querySelector('#long-text-warning-clone');
+            const historyListContainer = document.getElementById('custom-history-list');
+
             const LONG_TEXT_THRESHOLD = 5000;
-            const RENDER_API = "/api/generate", HF_API = "https://amphion-vevo.hf.space/gradio_api/";
-            const showUIState = (state, msg = '') => { generateBtn.disabled = state === 'loading'; btnSpinner.style.display = state === 'loading' ? 'inline-block' : 'none'; btnText.textContent = state === 'loading' ? 'در حال پردازش...' : 'خلق صدا با آلفا'; outputSection.classList.remove('has-content'); statusMessage.style.display = 'none'; loadingAnimation.style.display = 'none'; playerContent.style.display = 'none'; downloadWrapper.style.display = 'none'; statusMessage.classList.remove('error'); if (state === 'initial') { statusMessage.textContent = 'صدای نهایی در اینجا نمایش داده می‌شود.'; statusMessage.style.display = 'block'; } else if (state === 'loading') { loadingAnimation.style.display = 'flex'; mainAudioPlayer.src = ''; audioPeaks = []; } else if (state === 'result') { playerContent.style.display = 'flex'; downloadWrapper.style.display = 'block'; outputSection.classList.add('has-content'); } else if (state === 'error') { statusMessage.innerHTML = `<b>خطا:</b> ${msg}`; statusMessage.style.display = 'block'; statusMessage.classList.add('error'); } };
+            const MANAGER_API_URL = "https://ezmary-sada.hf.space";
+            const TTS_API_ENDPOINT = "/api/generate"; // Keep using Alpha TTS to generate source audio
+            
+            // --- Helper: LocalStorage Management for Custom Jobs ---
+            function getCustomJobs() {
+                return JSON.parse(localStorage.getItem('alpha_custom_voice_jobs') || '{}');
+            }
+
+            function saveCustomJob(data) {
+                const jobs = getCustomJobs();
+                jobs[data.job_id] = {
+                    ...data,
+                    date: new Date().toLocaleDateString('fa-IR'),
+                    timestamp: Date.now(),
+                    textPreview: textInput.value.substring(0, 30) + '...'
+                };
+                localStorage.setItem('alpha_custom_voice_jobs', JSON.stringify(jobs));
+                renderHistory();
+            }
+
+            function updateCustomJob(id, updates) {
+                const jobs = getCustomJobs();
+                if(jobs[id]) {
+                    jobs[id] = { ...jobs[id], ...updates };
+                    localStorage.setItem('alpha_custom_voice_jobs', JSON.stringify(jobs));
+                    renderHistory();
+                }
+            }
+
+            function deleteCustomJob(id) {
+                const jobs = getCustomJobs();
+                delete jobs[id];
+                localStorage.setItem('alpha_custom_voice_jobs', JSON.stringify(jobs));
+                renderHistory();
+            }
+
+            // --- Helper: UI State Management ---
+            const showUIState = (state, msg = '') => {
+                generateBtn.disabled = state === 'loading';
+                btnSpinner.style.display = state === 'loading' ? 'inline-block' : 'none';
+                btnText.textContent = state === 'loading' ? 'در حال پردازش...' : 'خلق صدا با آلفا';
+                
+                outputSection.classList.remove('has-content');
+                statusMessage.style.display = 'none';
+                loadingAnimation.style.display = 'none';
+                playerContent.style.display = 'none';
+                downloadWrapper.style.display = 'none';
+                statusMessage.classList.remove('error');
+
+                if (state === 'initial') {
+                    statusMessage.textContent = 'صدای نهایی در اینجا نمایش داده می‌شود.';
+                    statusMessage.style.display = 'block';
+                } else if (state === 'loading') {
+                    loadingAnimation.style.display = 'flex';
+                    mainAudioPlayer.src = '';
+                    audioPeaks = [];
+                } else if (state === 'result') {
+                    playerContent.style.display = 'flex';
+                    downloadWrapper.style.display = 'block';
+                    outputSection.classList.add('has-content');
+                } else if (state === 'error') {
+                    statusMessage.innerHTML = `<b>خطا:</b> ${msg}`;
+                    statusMessage.style.display = 'block';
+                    statusMessage.classList.add('error');
+                }
+            };
+
+            // --- Input Handlers ---
             let lastSelectedFile = null;
             const handleFileSelect = (file) => { if (file) { lastSelectedFile = file; fileNameSpan.textContent = file.name; uploadArea.style.display = 'none'; filePreview.style.display = 'flex'; audioPreview.src = URL.createObjectURL(file); } };
             uploadArea.addEventListener('click', () => { userVoiceInput.value = ''; userVoiceInput.click(); });
@@ -625,9 +771,12 @@
             audioPreview.addEventListener('pause', () => { previewPlayIcon.style.display = 'block'; previewPauseIcon.style.display = 'none'; }); 
             audioPreview.addEventListener('ended', () => { previewPlayIcon.style.display = 'block'; previewPauseIcon.style.display = 'none'; }); 
             tempSlider.addEventListener('input', () => tempValueSpan.textContent = tempSlider.value);
+            downloadBtn.addEventListener('click', () => handleDownloadRequest(downloadBtn));
+
+            // --- Core Logic: Call TTS API first ---
             const callTtsApi = async (text, prompt, temp) => {
                 return new Promise((resolve, reject) => {
-                    fetch(RENDER_API, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text, speaker: "Charon", temperature: temp, prompt, fingerprint: userFingerprint, subscriptionStatus: userSubscriptionStatus }) })
+                    fetch(TTS_API_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text, speaker: "Charon", temperature: temp, prompt, fingerprint: userFingerprint, subscriptionStatus: userSubscriptionStatus }) })
                         .then(res => {
                             if (res.status === 429) { return res.json().then(err => reject(new Error(err.message || "اعتبار روزانه شما تمام شده است."))); }
                             if (!res.ok) { return res.json().then(err => reject(new Error(err.error || `سرویس متن به صدا خطا داد (${res.status})`))); }
@@ -635,9 +784,7 @@
                         })
                         .then(data => {
                             const jobId = data.job_id;
-                            const POLLING_INTERVAL = 4000; const MAX_ATTEMPTS = 1275; let attempts = 0;
                             const intervalId = setInterval(async () => {
-                                if (attempts++ > MAX_ATTEMPTS) { clearInterval(intervalId); reject(new Error('زمان پردازش صدای اولیه طولانی شد.')); }
                                 try {
                                     const statusRes = await fetch('/api/check_status', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ job_id: jobId }) });
                                     if (!statusRes.ok) return;
@@ -650,14 +797,131 @@
                                         reject(new Error(statusData.result || 'خطای ناشناخته در تولید صدای اولیه.'));
                                     }
                                 } catch (e) { console.error(e); }
-                            }, POLLING_INTERVAL);
+                            }, 4000);
                         })
                         .catch(reject);
                 });
             };
-            const uploadToHf = async (file) => { const fd = new FormData(); fd.append("files", file); const res = await fetch(`${HF_API}upload`, { method: 'POST', body: fd }); const result = await res.json(); if (result && result[0]) return result[0]; throw new Error("آپلود فایل در سرور ناموفق بود مجدداً تلاش کنید."); };
-            const callVevoApi = (source, timbre, hash) => new Promise(async (resolve, reject) => { await fetch(`${HF_API}queue/join?`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: [{ path: source, url: `${HF_API}file=${source}`, meta: { _type: "gradio.FileData" } }, { path: timbre, url: `${HF_API}file=${timbre}`, meta: { _type: "gradio.FileData" } }], fn_index: 0, session_hash: hash }) }); const es = new EventSource(`${HF_API}queue/data?session_hash=${hash}`); es.onmessage = e => { const d = JSON.parse(e.data); if (d.msg === 'process_starts') loadingText.textContent = 'مرحله ۲: شبیه‌سازی صدا...'; else if (d.msg === 'process_completed') { es.close(); if (d.output.error) { if (String(d.output.error).includes('GPU quota')) reject(new Error('محدودیت GPU. برای استفاده مجدد،از اینترنت سیم کارت استفاده کنید فیلتر شکن را خاموش کرده، یک یا دو بار حالت هواپیما را روشن و خاموش کنید و بدون فیلتر شکن مجدداً امتحان نمایید و یا اگر از وای فای استفاده میکنید ip تغییر بدید.')); else reject(new Error(`خطا در پردازش هوش مصنوعی: ${d.output.error}`)); } else if (d.output.data?.[0]?.path) resolve(`${HF_API}file=${d.output.data[0].path}`); else reject(new Error('پاسخ نهایی از سرور معتبر نبود.')); } else if (d.msg === 'queue_full') { es.close(); reject(new Error('صف پردازش سرور پر است. لطفاً کمی بعد دوباره تلاش کنید.')); } }; es.onerror = () => { es.close(); reject(new Error('خطا در ارتباط با سرور مجدداً تلاش کنید.')); }; });
-            
+
+            // --- Core Logic: Manager Interaction ---
+            const trackJob = (jobId) => {
+                const jobs = getCustomJobs();
+                const jobData = jobs[jobId];
+                if(!jobData) return;
+
+                // UI Update for Tracking
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+                showUIState('loading');
+                loadingText.textContent = `در حال پیگیری وضعیت... (${jobData.progress || 0}%)`;
+
+                const pollingInterval = setInterval(async () => {
+                    try {
+                        // Manager expects ProjectState object in check_status
+                        const response = await fetch(`${MANAGER_API_URL}/check_status`, {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify(jobData) 
+                        });
+                        
+                        const res = await response.json();
+                        const p = res.progress || 0;
+                        loadingText.textContent = `پردازش سرور موازی... ${p}%`;
+                        
+                        updateCustomJob(jobId, { status: res.status, progress: p, filename: res.filename });
+
+                        if(res.status === 'completed') {
+                            clearInterval(pollingInterval);
+                            const finalUrl = `${MANAGER_API_URL}/download/${res.filename}`;
+                            mainAudioPlayer.src = finalUrl;
+                            showUIState('result');
+                            updateCustomJob(jobId, { status: 'completed', resultUrl: finalUrl, progress: 100 });
+                        } 
+                        else if(res.status === 'error' || res.status === 'failed') {
+                            clearInterval(pollingInterval);
+                            showUIState('error', res.detail || 'خطا در پردازش سرور');
+                        }
+                    } catch(e) {
+                        console.error(e);
+                        // Don't clear interval immediately on network error, try again
+                    }
+                }, 4000);
+            };
+
+            // --- History Rendering ---
+            window.playHistoryItem = (url) => {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+                mainAudioPlayer.src = url;
+                mainAudioPlayer.play();
+                showUIState('result');
+            };
+
+            window.trackHistoryItem = (id) => {
+                trackJob(id);
+            };
+
+            window.deleteHistoryItem = (id) => {
+                if(confirm('آیا از حذف این مورد اطمینان دارید؟')) {
+                    deleteCustomJob(id);
+                }
+            };
+
+            const renderHistory = () => {
+                const jobs = getCustomJobs();
+                const list = Object.values(jobs).reverse();
+                historyListContainer.innerHTML = '';
+
+                if(list.length === 0) {
+                    historyListContainer.innerHTML = '<div class="empty-history">لیست خالی است</div>';
+                    return;
+                }
+
+                list.forEach(job => {
+                    const el = document.createElement('div');
+                    el.className = 'history-item';
+                    
+                    let statusBadge, actionBtns = '';
+                    
+                    if(job.status === 'completed') {
+                        statusBadge = `<span class="history-badge completed">تکمیل شده</span>`;
+                        actionBtns = `
+                            <button onclick="playHistoryItem('${job.resultUrl || `${MANAGER_API_URL}/download/${job.filename}`}')" class="btn-history-action btn-play">
+                                <i class="fas fa-play"></i> پخش
+                            </button>
+                        `;
+                    } else if(job.status === 'started' || job.status === 'processing') {
+                        statusBadge = `<span class="history-badge processing">در حال پردازش (${job.progress}%)</span>`;
+                        actionBtns = `
+                            <button onclick="trackHistoryItem('${job.job_id}')" class="btn-history-action btn-track">
+                                <i class="fas fa-sync"></i> پیگیری
+                            </button>
+                        `;
+                    } else {
+                        statusBadge = `<span class="history-badge failed">خطا</span>`;
+                    }
+
+                    actionBtns += `
+                        <button onclick="deleteHistoryItem('${job.job_id}')" class="btn-history-action btn-delete">
+                            <i class="fas fa-trash"></i>
+                        </button>
+                    `;
+
+                    el.innerHTML = `
+                        <div class="history-item-top">
+                            <div>
+                                <div class="history-item-id">شناسه: ${job.job_id.substring(0,8)}...</div>
+                                <div class="history-item-date">${job.date} | ${job.textPreview}</div>
+                            </div>
+                            <div>${statusBadge}</div>
+                        </div>
+                        <div class="history-actions">
+                            ${actionBtns}
+                        </div>
+                    `;
+                    historyListContainer.appendChild(el);
+                });
+            };
+
+            // --- Form Submission ---
             form.addEventListener('submit', async () => {
                 const text = textInput.value;
                 if (!text.trim() || !lastSelectedFile) { alert("لطفاً هم متن و هم فایل صوتی را وارد کنید."); return; }
@@ -670,20 +934,38 @@
                 }
 
                 showUIState('loading'); loadingText.textContent = 'مرحله ۱: تولید صدای اولیه...';
+                
                 try {
-                    const ttsBlob = await callTtsApi(text, promptInput.value, parseFloat(tempSlider.value));
-                    loadingText.textContent = 'در حال آپلود فایل‌ها به سرور...';
-                    const [hfTtsPath, hfUserVoicePath] = await Promise.all([ uploadToHf(new File([ttsBlob], "initial.wav")), uploadToHf(lastSelectedFile) ]);
-                    const finalAudioUrl = await callVevoApi(hfTtsPath, hfUserVoicePath, Math.random().toString(36).substring(2, 11));
-                    loadingText.textContent = 'در حال دریافت فایل نهایی...';
-                    const finalAudioBlob = await (await fetch(finalAudioUrl)).blob();
-                    mainAudioPlayer.src = URL.createObjectURL(finalAudioBlob);
-                    showUIState('result');
-                } catch (error) { showUIState('error', error.message); } finally { updateUIWithServerStatus(); }
+                    // Step 1: Generate Source Audio (TTS)
+                    const sourceBlob = await callTtsApi(text, promptInput.value, parseFloat(tempSlider.value));
+                    
+                    loadingText.textContent = 'مرحله ۲: ارسال به سرور پردازش موازی...';
+                    
+                    // Step 2: Prepare FormData for Manager
+                    const fd = new FormData();
+                    fd.append('source_audio', sourceBlob, 'src.wav');
+                    fd.append('ref_audio', lastSelectedFile, 'ref.wav');
+
+                    // Step 3: Upload to Manager
+                    const response = await fetch(`${MANAGER_API_URL}/upload`, { method: 'POST', body: fd });
+                    if(!response.ok) throw new Error('خطا در ارتباط با سرور مدیریت');
+                    
+                    const result = await response.json(); // { job_id, total_chunks, chunks, status }
+                    
+                    // Step 4: Save to History and Start Tracking
+                    saveCustomJob(result);
+                    trackJob(result.job_id);
+
+                } catch (error) { 
+                    showUIState('error', error.message); 
+                } finally { 
+                    updateUIWithServerStatus(); 
+                }
             });
 
-            downloadBtn.addEventListener('click', () => handleDownloadRequest(downloadBtn));
-            createPlayerInstance('audio-player-content-clone'); showUIState('initial');
+            createPlayerInstance('audio-player-content-clone'); 
+            showUIState('initial');
+            renderHistory();
         })();
 
         async function initializeApp() {
@@ -693,10 +975,8 @@
         
         updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
 
-        // --- START: کد جدید برای قفل کردن اندازه کارت ---
         const speakerCardToLock = document.getElementById('selected-speaker-card');
         if (speakerCardToLock) {
-            // یک تاخیر کوتاه می‌دهیم تا مرورگر فرصت محاسبه اندازه اولیه را داشته باشد
             setTimeout(() => {
                 const initialWidth = speakerCardToLock.offsetWidth;
                 if (initialWidth > 0) {
@@ -704,10 +984,10 @@
                 }
             }, 100);
         }
-        // --- END: کد جدید برای قفل کردن اندازه کارت ---
 
         initializeApp();
     });
     </script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
 </body>
 </html>