Spaces:

Hamed744
/

HtmlEzmar

Running

App Files Files Community

Hamed744 commited on Jul 5

Commit

b79e35f

verified ·

1 Parent(s): 6b41f29

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -139

index.html CHANGED Viewed

@@ -191,12 +191,10 @@
                         <span id="char-count">0</span> / <span id="char-max">50000</span> نویسه
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="prompt-input">🗣️ توصیف لحن و احساس (اختیاری)</label>
                     <input type="text" id="prompt-input" placeholder="مثال: با لحنی آرام و قصه‌گو، یا صدای یک گوینده خبر حرفه‌ای">
                 </div>
                 <div class="form-group">
                     <label>🎤 گوینده منتخب</label>
                     <div id="selected-speaker-display">
@@ -210,7 +208,6 @@
                         <button type="button" id="change-speaker-btn">تغییر گوینده</button>
                     </div>
                 </div>
                 <div class="form-group">
                     <div class="label-with-info">
                         <label for="temperature-slider">🌡️ خلاقیت و پویایی صدا</label>
@@ -221,10 +218,8 @@
                         <span id="temperature-value">0.9</span>
                     </div>
                 </div>
                 <button type="submit" id="generate-btn">✨ خلق صدا با آلفا</button>
             </form>
             <div id="output-section">
                 <div id="status-message">صدای تولید شده در اینجا ظاهر خواهد شد.</div>
                 <div id="loading-animation-wrapper">
@@ -235,7 +230,6 @@
                      </div>
                      <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
                 </div>
                 <div id="audio-player-content">
                      <div class="audio-waveform-container">
                          <span class="audio-time audio-current-time">0:00</span>
@@ -246,16 +240,12 @@
                          <span class="audio-time audio-total-time">0:00</span>
                      </div>
                       <div class="audio-controls-group">
-                         <button class="audio-skip-btn backward">
-                             <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
-                         </button>
                          <button class="audio-play-pause-btn-large">
                              <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
                              <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
                          </button>
-                         <button class="audio-skip-btn forward">
-                             <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
-                         </button>
                      </div>
                       <div class="audio-utility-controls">
                          <button class="audio-volume-btn">
@@ -271,28 +261,8 @@
     </div>
     <!-- Modals -->
-    <div id="speaker-modal" class="modal-overlay">
-        <div class="modal-dialog">
-            <div class="modal-header">
-                <h2>گالری گویندگان آلفا</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="speaker-modal">×</button>
-            </div>
-            <div id="speaker-grid"></div>
-        </div>
-    </div>
-    <div id="info-modal" class="modal-overlay">
-        <div class="modal-dialog" style="max-width: 520px;">
-            <div class="modal-header">
-                <h2>🌡️ خلاقیت و پویایی صدا</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="info-modal">×</button>
-            </div>
-            <div>
-                 <p style="color: var(--text-secondary); line-height: 1.9;">این پارامتر، میزان "غیرقابل پیش‌بینی بودن" و تنوع در صدای خروجی را کنترل می‌کند.</p>
-                 <p><strong>مقادیر بالاتر (نزدیک به ۱.۵):</strong> صدایی بسیار متنوع، احساسی و پویا ایجاد می‌کند. ایده‌آل برای محتوای خلاقانه و هنری.</p>
-                 <p><strong>مقادیر پایین‌تر (نزدیک به ۰.۱):</strong> صدایی پایدار، یکنواخت و قابل پیش‌بینی‌تر تولید می‌کند. مناسب برای خوانش متون رسمی و خبری.</p>
-            </div>
-        </div>
-    </div>
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
     <script>
@@ -303,164 +273,147 @@
         const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
         const FN_INDEX = 1;
-        // UPDATED SPEAKERS ARRAY WITH NEW NAMES, GENDERS, AND IMAGE URLs
         const speakers = [
             { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا", imgUrl: "https://uploadkon.ir/uploads/a18705_25IMG-۲۰۲۵۰۷۰۵-۱۱۰۵۴۹.jpg" },
             { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین", imgUrl: "https://uploadkon.ir/uploads/029605_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۲۵۲.jpg" },
             { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی", imgUrl: "https://uploadkon.ir/uploads/697e05_25IMG-۲۰۲۵۰۶۰۹-۰۶۴۶۳۷.jpg" },
-            { id: "Zubenelgenubi", name: "آرمان (مرد)", desc: "گرم و صمیمی", imgUrl: "https://uploadkon.ir/uploads/a8a705_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۶۲۹.jpg" }, // Changed to male
-            { id: "Vindemiatrix", name: "مهسا (زن)", desc: "باوقار و رسمی", imgUrl: "https://uploadkon.ir/uploads/d74d05_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۸۳۸.jpg" }, // Changed to female
-            { id: "Sadachbia", name: "سامان (مرد)", desc: "شاداب و پویا", imgUrl: "https://uploadkon.ir/uploads/580205_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۳۳۰.jpg" }, // Changed to male
             { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار", imgUrl: "https://uploadkon.ir/uploads/c4db05_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۵۰۰.jpg" },
             { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین", imgUrl: "https://uploadkon.ir/uploads/995005_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۶۱۱.jpg" },
-            { id: "Laomedeia", name: "سحر (زن)", desc: "دوستانه و گیرا", imgUrl: "https://uploadkon.ir/uploads/660705_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۷۵۴.jpg" }, // Changed to female
             { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح", imgUrl: "https://uploadkon.ir/uploads/4c2905_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۰۳۶.jpg" },
             { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ", imgUrl: "https://uploadkon.ir/uploads/f0c205_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۲۲۰.jpg" },
-            { id: "Schedar", name: "نیکان (مرد)", desc: "مهربان و شیرین", imgUrl: "https://uploadkon.ir/uploads/d37a05_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۳۲۵.jpg" }, // Changed to male
-            { id: "Gacrux", name: "فرناز (زن)", desc: "پخته و قابل اعتماد", imgUrl: "https://uploadkon.ir/uploads/cff705_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۶۰۵.jpg" }, // Changed to female
             { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن", imgUrl: "https://uploadkon.ir/uploads/acb105_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۷۴۳.jpg" },
             { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت", imgUrl: "https://uploadkon.ir/uploads/68b505_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۹۱۴.jpg" },
-            { id: "Algieba", name: "آرتین (مرد)", desc: "با اصالت و شیک", imgUrl: "https://uploadkon.ir/uploads/571005_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۰۳۹.jpg" }, // Changed to male
             { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی", imgUrl: "https://uploadkon.ir/uploads/5d7805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۲۲۲.jpg" },
-            { id: "Erinome", name: "روژان (زن)", desc: "شفاف و گویا", imgUrl: "https://uploadkon.ir/uploads/aa8805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۳۴۹.jpg" }, // Changed to female
             { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت", imgUrl: "https://uploadkon.ir/uploads/a63c05_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۹۲۱.jpg" },
             { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان", imgUrl: "https://uploadkon.ir/uploads/8bc405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۴۳۳.jpg" },
             { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ", imgUrl: "https://uploadkon.ir/uploads/9cb405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۸۵۰.jpg" },
-            { id: "Callirrhoe", name: "نیکو (زن)", desc: "روایتگر و قصه‌گو", imgUrl: "https://uploadkon.ir/uploads/ee5f05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۰۴۷.jpg" }, // Changed to female
             { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی", imgUrl: "https://uploadkon.ir/uploads/9b0505_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۲۲۲.jpg" },
             { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی", imgUrl: "https://uploadkon.ir/uploads/127805_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۴۱۴.jpg" },
-            { id: "Iapetus", name: "کیانوش (مرد)", desc: "درخشان و گیرا", imgUrl: "https://uploadkon.ir/uploads/c98b05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۶۰۵.jpg" }, // Changed to male
             { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده", imgUrl: "https://uploadkon.ir/uploads/ca3605_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۸۳۹.jpg" },
             { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش", imgUrl: "https://uploadkon.ir/uploads/b66605_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۰۳۵.jpg" },
             { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک", imgUrl: "https://uploadkon.ir/uploads/03c005_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۴۱۳.jpg" },
             { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار", imgUrl: "https://uploadkon.ir/uploads/710305_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۷۳۱.jpg" }
         ];
-        // --- DOM Elements ---
-        const form = document.getElementById('tts-form'); const textInput = document.getElementById('text-input'); const promptInput = document.getElementById('prompt-input'); const tempSlider = document.getElementById('temperature-slider'); const tempValueSpan = document.getElementById('temperature-value'); const generateBtn = document.getElementById('generate-btn'); const outputSection = document.getElementById('output-section'); const statusMessage = document.getElementById('status-message'); const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper'); const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage'); const changeSpeakerBtn = document.getElementById('change-speaker-btn'); const selectedSpeakerCard = document.getElementById('selected-speaker-card'); const speakerGridInModal = document.getElementById('speaker-grid'); const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img'); const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name'); const selectedSpeakerDescDisplay = document.getElementById('selected-speaker-desc'); const speakerModal = document.getElementById('speaker-modal'); const infoModal = document.getElementById('info-modal'); const tempInfoIcon = document.getElementById('temp-info-icon'); const hiddenAudioPlayer = document.getElementById('hidden-audio-player'); const audioPlayerContent = document.getElementById('audio-player-content'); const audioCurrentTimeSpan = audioPlayerContent.querySelector('.audio-current-time'); const audioTotalTimeSpan = audioPlayerContent.querySelector('.audio-total-time'); const audioWaveformCanvas = document.getElementById('audio-waveform-canvas'); const waveformCtx = audioWaveformCanvas.getContext('2d'); const playPauseBtn = audioPlayerContent.querySelector('.audio-play-pause-btn-large'); const playIcon = playPauseBtn.querySelector('.play-icon'); const pauseIcon = playPauseBtn.querySelector('.pause-icon'); const skipBackwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.backward'); const skipForwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.forward'); const volumeBtn = audioPlayerContent.querySelector('.audio-volume-btn'); const volumeHighIcon = volumeBtn.querySelector('.volume-high-icon'); const volumeMuteIcon = volumeBtn.querySelector('.volume-mute-icon'); const speedBtn = audioPlayerContent.querySelector('.audio-speed-btn');
         let currentPlaybackSpeedIndex = 0; const playbackSpeeds = [1.0, 1.25, 1.5, 0.75]; let audioPeaks = []; let audioContext = null;
-        // --- Character Counter ---
         const charCountSpan = document.getElementById('char-count'); const charMaxSpan = document.getElementById('char-max'); const MAX_CHARS = 50000;
         charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
-        textInput.addEventListener('input', () => { const currentLength = textInput.value.length; charCountSpan.textContent = currentLength.toLocaleString('fa-IR'); charCountSpan.style.color = currentLength > MAX_CHARS ? 'red' : 'var(--accent-primary)'; });
-        // --- Speaker Logic ---
         const getSpeakerById = (id) => speakers.find(s => s.id === id) || speakers[0];
         const getImageUrl = (speaker) => speaker.imgUrl;
-        const updateSelectedSpeakerDisplay = (speakerId) => { const speaker = getSpeakerById(speakerId); selectedSpeakerImgDisplay.src = getImageUrl(speaker); selectedSpeakerNameDisplay.textContent = speaker.name; selectedSpeakerDescDisplay.textContent = speaker.desc; selectedSpeakerIdStorage.value = speaker.id; };
-        const createSpeakerCardsInModal = () => { speakerGridInModal.innerHTML = ''; speakers.forEach((speaker) => { const cardLabel = document.createElement('label'); cardLabel.className = 'speaker-card'; cardLabel.setAttribute('for', `modal-speaker-${speaker.id}`); const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : ''; cardLabel.innerHTML = ` <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}> <div class="speaker-visual"> <img src="${getImageUrl(speaker)}" alt="${speaker.name}" loading="lazy"> </div> <div class="speaker-name">${speaker.name}</div> `; cardLabel.addEventListener('click', () => { updateSelectedSpeakerDisplay(speaker.id); hideModal(speakerModal); }); speakerGridInModal.appendChild(cardLabel); }); };
-        // --- Modal Management ---
-        const showModal = (modalElement) => { modalElement.classList.add('visible'); setTimeout(() => modalElement.querySelector('button')?.focus(), 50); }; const hideModal = (modalElement) => modalElement.classList.remove('visible'); changeSpeakerBtn.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); }); selectedSpeakerCard.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); }); tempInfoIcon.addEventListener('click', () => showModal(infoModal)); document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', (e) => (e.target === o) && hideModal(o))); document.querySelectorAll('.close-modal-btn').forEach(b => b.addEventListener('click', () => hideModal(document.getElementById(b.dataset.modalId)))); document.addEventListener('keydown', (e) => (e.key === 'Escape') && document.querySelectorAll('.modal-overlay.visible').forEach(hideModal)); tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
-        // --- Original Audio Player Logic (with Waveform Fix) ---
-        const formatTime = (seconds) => { if (isNaN(seconds) || seconds < 0) return '0:00'; const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; };
-        function drawWaveform(progressRatio = 0) {
-            // This function is now robust because it's called inside requestAnimationFrame
-             const dpr = window.devicePixelRatio || 1;
-             audioWaveformCanvas.width = audioWaveformCanvas.offsetWidth * dpr;
-             audioWaveformCanvas.height = audioWaveformCanvas.offsetHeight * dpr;
-             waveformCtx.scale(dpr, dpr);
-             const width = audioWaveformCanvas.offsetWidth;
-             const height = audioWaveformCanvas.offsetHeight;
-             if (width === 0 || height === 0) return; // Extra safety check
-             waveformCtx.clearRect(0, 0, width, height);
-             const barWidth = 3; const barGap = 2; const totalBarAndGap = barWidth + barGap;
-             const numBars = Math.floor(width / totalBarAndGap);
-             const offset = (width - (numBars * totalBarAndGap)) / 2;
-             const activeBars = Math.floor(progressRatio * numBars);
-             const activeColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-active').trim();
-             const inactiveColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-inactive').trim();
-             for (let i = 0; i < numBars; i++) {
-                 const peak = audioPeaks[i] || 0;
-                 const barHeight = peak * height;
-                 waveformCtx.fillStyle = i < activeBars ? activeColor : inactiveColor;
-                 const x = offset + i * totalBarAndGap;
-                 const y = (height - barHeight) / 2;
-                 waveformCtx.fillRect(x, y, barWidth, barHeight);
-             }
-         }
-        const updatePlayerUI = () => { playIcon.style.display = hiddenAudioPlayer.paused || hiddenAudioPlayer.ended ? 'block' : 'none'; pauseIcon.style.display = !(hiddenAudioPlayer.paused || hiddenAudioPlayer.ended) ? 'block' : 'none'; const currentTime = hiddenAudioPlayer.currentTime; const duration = hiddenAudioPlayer.duration; audioCurrentTimeSpan.textContent = formatTime(currentTime); if (isFinite(duration) && duration > 0) { audioTotalTimeSpan.textContent = formatTime(duration); requestAnimationFrame(() => drawWaveform(currentTime / duration)); } else { requestAnimationFrame(() => drawWaveform(0)); } };
-        async function processAudioForWaveform(audioBuffer) {
-            if (!audioBuffer) { audioPeaks = []; return; }
-            const channelData = audioBuffer.getChannelData(0);
-            const numBars = Math.floor(audioWaveformCanvas.offsetWidth / 5);
-            const samplesPerBar = Math.floor(channelData.length / numBars);
-            const peaks = [];
-            for (let i = 0; i < numBars; i++) {
-                let maxPeak = 0;
-                const start = i * samplesPerBar;
-                for (let j = 0; j < samplesPerBar; j++) {
-                    const value = Math.abs(channelData[start + j]);
-                    if (value > maxPeak) maxPeak = value;
-                }
-                peaks.push(Math.min(1, Math.max(0, maxPeak * 1.5)));
-            }
-            audioPeaks = peaks;
-            // Draw initial waveform on the next available frame to ensure canvas is ready
             requestAnimationFrame(() => drawWaveform(0));
         }
-        playPauseBtn.addEventListener('click', () => hiddenAudioPlayer.paused ? hiddenAudioPlayer.play() : hiddenAudioPlayer.pause()); skipBackwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 5)); skipForwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 5));
-        volumeBtn.addEventListener('click', () => { hiddenAudioPlayer.muted = !hiddenAudioPlayer.muted; volumeHighIcon.style.display = hiddenAudioPlayer.muted ? 'none' : 'block'; volumeMuteIcon.style.display = hiddenAudioPlayer.muted ? 'block' : 'none'; });
-        speedBtn.addEventListener('click', () => { currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length; const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex]; hiddenAudioPlayer.playbackRate = newSpeed; speedBtn.textContent = `${newSpeed}x`; });
-        hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI); hiddenAudioPlayer.addEventListener('play', updatePlayerUI); hiddenAudioPlayer.addEventListener('pause', updatePlayerUI); hiddenAudioPlayer.addEventListener('ended', () => { hiddenAudioPlayer.currentTime = 0; updatePlayerUI(); });
-        hiddenAudioPlayer.addEventListener('loadedmetadata', async () => { if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)(); try { const response = await fetch(hiddenAudioPlayer.src); const arrayBuffer = await response.arrayBuffer(); const decodedBuffer = await audioContext.decodeAudioData(arrayBuffer); await processAudioForWaveform(decodedBuffer); } catch (e) { console.error("Error decoding audio for waveform:", e); audioPeaks = []; requestAnimationFrame(() => drawWaveform(0)); } updatePlayerUI(); });
-        let resizeTimeout; window.addEventListener('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { if (outputSection.classList.contains('has-content') && hiddenAudioPlayer.src) { requestAnimationFrame(() => drawWaveform(hiddenAudioPlayer.currentTime / hiddenAudioPlayer.duration)); } }, 250); });
-        // --- State Management Functions ---
-        const showLoadingState = () => { audioPlayerContent.style.display = 'none'; outputSection.classList.remove('has-content'); statusMessage.style.display = 'none'; loadingAnimationWrapper.style.display = 'flex'; generateBtn.disabled = true; generateBtn.innerHTML = ` <svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="animation: spin 1s linear infinite;"> <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/> <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0492C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/> </svg> در حال پردازش... `; };
-        const showResultState = (isSuccess, message = '') => { loadingAnimationWrapper.style.display = 'none'; if (isSuccess) { statusMessage.style.display = 'none'; audioPlayerContent.style.display = 'flex'; outputSection.classList.add('has-content'); } else { statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.'; statusMessage.style.display = 'block'; audioPlayerContent.style.display = 'none'; outputSection.classList.remove('has-content'); hiddenAudioPlayer.src = ''; audioPeaks = []; requestAnimationFrame(() => drawWaveform(0)); } generateBtn.disabled = false; generateBtn.innerHTML = '✨ خلق صدا با آلفا'; };
-        // --- API Call ---
         async function generateAudio(event) {
-            event.preventDefault(); showLoadingState();
-            const text = textInput.value;
             if (!text.trim()) { showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.'); return; }
             if (text.length > MAX_CHARS) { showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS.toLocaleString('fa-IR')} نویسه است.`); return; }
-            const payload = { fn_index: FN_INDEX, data: [false, null, text, promptInput.value, selectedSpeakerIdStorage.value, parseFloat(tempSlider.value)], event_data: null, session_hash: Math.random().toString(36).substring(2) };
             try {
-                const joinQueueResponse = await fetch(JOIN_QUEUE_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
-                if (!joinQueueResponse.ok) { throw new Error(`خطا در برقراری ارتباط با سرویس آلفا (کد: ${joinQueueResponse.status}).`); }
-                let finalFilePath = null; const startTime = Date.now(); const timeoutDuration = 90000;
-                while (Date.now() - startTime < timeoutDuration) {
-                    const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
-                    if (!dataResponse.ok) { throw new Error(`خطا در دریافت داده از س��ویس (کد: ${dataResponse.status})`); }
-                    const responseText = await dataResponse.text(); const lines = responseText.trim().split('\n');
                     for (const line of lines) {
                         if (!line.startsWith('data:')) continue;
                         try {
                             const data = JSON.parse(line.substring(5));
                             if (data.msg === 'process_completed') {
-                                if (data.success && data.output?.data?.[0] && (data.output.data[0].name || data.output.data[0].path)) { finalFilePath = data.output.data[0].name || data.output.data[0].path; } else { throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.'); }
                                 break;
-                            } else if (data.msg === 'queue_full') { throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.'); }
-                        } catch (e) { console.warn("Error parsing JSON from stream:", e, "Line:", line); }
                     }
-                    if (finalFilePath) break;
-                    await new Promise(resolve => setTimeout(resolve, 1000));
                 }
-                if (finalFilePath) { hiddenAudioPlayer.src = `${FILE_URL_BASE}${finalFilePath}`; showResultState(true); } else if (Date.now() - startTime >= timeoutDuration) { throw new Error('پردازش بیش از حد طول کشید و متوقف شد.'); } else { throw new Error('فایل صوتی از سرور دریافت نشد یا پردازش ناموفق بود.'); }
-            } catch (error) { console.error('خطا در فرآیند تولید صدا:', error); showResultState(false, error.message); }
         }
-        // --- Initial Setup ---
-        const defaultSpeakerId = speakers.length > 0 ? speakers[0].id : "Charon";
-        updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || defaultSpeakerId);
-        form.addEventListener('submit', generateAudio);
-        statusMessage.style.display = 'block'; loadingAnimationWrapper.style.display = 'none';
-        audioPlayerContent.style.display = 'none'; outputSection.classList.remove('has-content');
     });
     </script>
 </body>

                         <span id="char-count">0</span> / <span id="char-max">50000</span> نویسه
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="prompt-input">🗣️ توصیف لحن و احساس (اختیاری)</label>
                     <input type="text" id="prompt-input" placeholder="مثال: با لحنی آرام و قصه‌گو، یا صدای یک گوینده خبر حرفه‌ای">
                 </div>
                 <div class="form-group">
                     <label>🎤 گوینده منتخب</label>
                     <div id="selected-speaker-display">
                         <button type="button" id="change-speaker-btn">تغییر گوینده</button>
                     </div>
                 </div>
                 <div class="form-group">
                     <div class="label-with-info">
                         <label for="temperature-slider">🌡️ خلاقیت و پویایی صدا</label>
                         <span id="temperature-value">0.9</span>
                     </div>
                 </div>
                 <button type="submit" id="generate-btn">✨ خلق صدا با آلفا</button>
             </form>
             <div id="output-section">
                 <div id="status-message">صدای تولید شده در اینجا ظاهر خواهد شد.</div>
                 <div id="loading-animation-wrapper">
                      </div>
                      <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
                 </div>
                 <div id="audio-player-content">
                      <div class="audio-waveform-container">
                          <span class="audio-time audio-current-time">0:00</span>
                          <span class="audio-time audio-total-time">0:00</span>
                      </div>
                       <div class="audio-controls-group">
+                         <button class="audio-skip-btn backward"><svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg></button>
                          <button class="audio-play-pause-btn-large">
                              <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
                              <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
                          </button>
+                         <button class="audio-skip-btn forward"><svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg></button>
                      </div>
                       <div class="audio-utility-controls">
                          <button class="audio-volume-btn">
     </div>
     <!-- Modals -->
+    <div id="speaker-modal" class="modal-overlay"><div class="modal-dialog"><div class="modal-header"><h2>گالری گویندگان آلفا</h2><button type="button" class="close-modal-btn" data-modal-id="speaker-modal">×</button></div><div id="speaker-grid"></div></div></div>
+    <div id="info-modal" class="modal-overlay"><div class="modal-dialog" style="max-width: 520px;"><div class="modal-header"><h2>🌡️ خلاقیت و پویایی صدا</h2><button type="button" class="close-modal-btn" data-modal-id="info-modal">×</button></div><div><p style="color: var(--text-secondary); line-height: 1.9;">این پارامتر، میزان "غیرقابل پیش‌بینی بودن" و تنوع در صدای خروجی را کنترل می‌کند.</p><p><strong>مقادیر بالاتر (نزدیک به ۱.۵):</strong> صدایی بسیار متنوع، احساسی و پویا ایجاد می‌کند. ایده‌آل برای محتوای خلاقانه و هنری.</p><p><strong>مقادیر پایین‌تر (نزدیک به ۰.۱):</strong> صدایی پایدار، یکنواخت و قابل پیش‌بینی‌تر تولید می‌کند. مناسب برای خوانش متون رسمی و خبری.</p></div></div></div>
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
     <script>
         const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
         const FN_INDEX = 1;
         const speakers = [
             { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا", imgUrl: "https://uploadkon.ir/uploads/a18705_25IMG-۲۰۲۵۰۷۰۵-۱۱۰۵۴۹.jpg" },
             { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین", imgUrl: "https://uploadkon.ir/uploads/029605_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۲۵۲.jpg" },
             { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی", imgUrl: "https://uploadkon.ir/uploads/697e05_25IMG-۲۰۲۵۰۶۰۹-۰۶۴۶۳۷.jpg" },
+            { id: "Zubenelgenubi", name: "آرمان (مرد)", desc: "گرم و صمیمی", imgUrl: "https://uploadkon.ir/uploads/a8a705_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۶۲۹.jpg" },
+            { id: "Vindemiatrix", name: "مهسا (زن)", desc: "باوقار و رسمی", imgUrl: "https://uploadkon.ir/uploads/d74d05_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۸۳۸.jpg" },
+            { id: "Sadachbia", name: "سامان (مرد)", desc: "شاداب و پویا", imgUrl: "https://uploadkon.ir/uploads/580205_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۳۳۰.jpg" },
             { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار", imgUrl: "https://uploadkon.ir/uploads/c4db05_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۵۰۰.jpg" },
             { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین", imgUrl: "https://uploadkon.ir/uploads/995005_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۶۱۱.jpg" },
+            { id: "Laomedeia", name: "سحر (زن)", desc: "دوستانه و گیرا", imgUrl: "https://uploadkon.ir/uploads/660705_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۷۵۴.jpg" },
             { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح", imgUrl: "https://uploadkon.ir/uploads/4c2905_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۰۳۶.jpg" },
             { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ", imgUrl: "https://uploadkon.ir/uploads/f0c205_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۲۲۰.jpg" },
+            { id: "Schedar", name: "نیکان (مرد)", desc: "مهربان و شیرین", imgUrl: "https://uploadkon.ir/uploads/d37a05_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۳۲۵.jpg" },
+            { id: "Gacrux", name: "فرناز (زن)", desc: "پخته و قابل اعتماد", imgUrl: "https://uploadkon.ir/uploads/cff705_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۶۰۵.jpg" },
             { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن", imgUrl: "https://uploadkon.ir/uploads/acb105_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۷۴۳.jpg" },
             { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت", imgUrl: "https://uploadkon.ir/uploads/68b505_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۹۱۴.jpg" },
+            { id: "Algieba", name: "آرتین (مرد)", desc: "با اصالت و شیک", imgUrl: "https://uploadkon.ir/uploads/571005_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۰۳۹.jpg" },
             { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی", imgUrl: "https://uploadkon.ir/uploads/5d7805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۲۲۲.jpg" },
+            { id: "Erinome", name: "روژان (زن)", desc: "شفاف و گویا", imgUrl: "https://uploadkon.ir/uploads/aa8805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۳۴۹.jpg" },
             { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت", imgUrl: "https://uploadkon.ir/uploads/a63c05_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۹۲۱.jpg" },
             { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان", imgUrl: "https://uploadkon.ir/uploads/8bc405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۴۳۳.jpg" },
             { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ", imgUrl: "https://uploadkon.ir/uploads/9cb405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۸۵۰.jpg" },
+            { id: "Callirrhoe", name: "نیکو (زن)", desc: "روایتگر و قصه‌گو", imgUrl: "https://uploadkon.ir/uploads/ee5f05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۰۴۷.jpg" },
             { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی", imgUrl: "https://uploadkon.ir/uploads/9b0505_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۲۲۲.jpg" },
             { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی", imgUrl: "https://uploadkon.ir/uploads/127805_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۴۱۴.jpg" },
+            { id: "Iapetus", name: "کیانوش (مرد)", desc: "درخشان و گیرا", imgUrl: "https://uploadkon.ir/uploads/c98b05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۶۰۵.jpg" },
             { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده", imgUrl: "https://uploadkon.ir/uploads/ca3605_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۸۳۹.jpg" },
             { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش", imgUrl: "https://uploadkon.ir/uploads/b66605_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۰۳۵.jpg" },
             { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک", imgUrl: "https://uploadkon.ir/uploads/03c005_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۴۱۳.jpg" },
             { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار", imgUrl: "https://uploadkon.ir/uploads/710305_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۷۳۱.jpg" }
         ];
+        const dom = {form: document.getElementById('tts-form'), textInput: document.getElementById('text-input'), promptInput: document.getElementById('prompt-input'), tempSlider: document.getElementById('temperature-slider'), tempValueSpan: document.getElementById('temperature-value'), generateBtn: document.getElementById('generate-btn'), outputSection: document.getElementById('output-section'), statusMessage: document.getElementById('status-message'), loadingAnimationWrapper: document.getElementById('loading-animation-wrapper'), selectedSpeakerIdStorage: document.getElementById('selected_speaker_id_storage'), changeSpeakerBtn: document.getElementById('change-speaker-btn'), selectedSpeakerCard: document.getElementById('selected-speaker-card'), speakerGridInModal: document.getElementById('speaker-grid'), selectedSpeakerImgDisplay: document.getElementById('selected-speaker-img'), selectedSpeakerNameDisplay: document.getElementById('selected-speaker-name'), selectedSpeakerDescDisplay: document.getElementById('selected-speaker-desc'), speakerModal: document.getElementById('speaker-modal'), infoModal: document.getElementById('info-modal'), tempInfoIcon: document.getElementById('temp-info-icon'), hiddenAudioPlayer: document.getElementById('hidden-audio-player'), audioPlayerContent: document.getElementById('audio-player-content'), audioCurrentTimeSpan: document.querySelector('.audio-current-time'), audioTotalTimeSpan: document.querySelector('.audio-total-time'), audioWaveformCanvas: document.getElementById('audio-waveform-canvas'), playPauseBtn: document.querySelector('.audio-play-pause-btn-large'), playIcon: document.querySelector('.play-icon'), pauseIcon: document.querySelector('.pause-icon'), skipBackwardBtn: document.querySelector('.audio-skip-btn.backward'), skipForwardBtn: document.querySelector('.audio-skip-btn.forward'), volumeBtn: document.querySelector('.audio-volume-btn'), volumeHighIcon: document.querySelector('.volume-high-icon'), volumeMuteIcon: document.querySelector('.volume-mute-icon'), speedBtn: document.querySelector('.audio-speed-btn')};
+        const waveformCtx = dom.audioWaveformCanvas.getContext('2d');
         let currentPlaybackSpeedIndex = 0; const playbackSpeeds = [1.0, 1.25, 1.5, 0.75]; let audioPeaks = []; let audioContext = null;
         const charCountSpan = document.getElementById('char-count'); const charMaxSpan = document.getElementById('char-max'); const MAX_CHARS = 50000;
         charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
+        dom.textInput.addEventListener('input', () => { const len = dom.textInput.value.length; charCountSpan.textContent = len.toLocaleString('fa-IR'); charCountSpan.style.color = len > MAX_CHARS ? 'red' : 'var(--accent-primary)'; });
         const getSpeakerById = (id) => speakers.find(s => s.id === id) || speakers[0];
         const getImageUrl = (speaker) => speaker.imgUrl;
+        const updateSelectedSpeakerDisplay = (id) => { const s = getSpeakerById(id); dom.selectedSpeakerImgDisplay.src = getImageUrl(s); dom.selectedSpeakerNameDisplay.textContent = s.name; dom.selectedSpeakerDescDisplay.textContent = s.desc; dom.selectedSpeakerIdStorage.value = s.id; };
+        const createSpeakerCardsInModal = () => { dom.speakerGridInModal.innerHTML = ''; speakers.forEach((s) => { const l = document.createElement('label'); l.className = 'speaker-card'; l.htmlFor = `modal-speaker-${s.id}`; l.innerHTML = `<input type="radio" name="modal_speaker_selection" value="${s.id}" id="modal-speaker-${s.id}" ${s.id === dom.selectedSpeakerIdStorage.value ? 'checked' : ''}><div class="speaker-visual"><img src="${getImageUrl(s)}" alt="${s.name}" loading="lazy"></div><div class="speaker-name">${s.name}</div>`; l.addEventListener('click', () => { updateSelectedSpeakerDisplay(s.id); hideModal(dom.speakerModal); }); dom.speakerGridInModal.appendChild(l); }); };
+        const showModal = (el) => { el.classList.add('visible'); setTimeout(() => el.querySelector('button')?.focus(), 50); }; const hideModal = (el) => el.classList.remove('visible');
+        dom.changeSpeakerBtn.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(dom.speakerModal); });
+        dom.selectedSpeakerCard.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(dom.speakerModal); });
+        dom.tempInfoIcon.addEventListener('click', () => showModal(dom.infoModal));
+        document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', (e) => (e.target === o) && hideModal(o)));
+        document.querySelectorAll('.close-modal-btn').forEach(b => b.addEventListener('click', () => hideModal(document.getElementById(b.dataset.modalId))));
+        document.addEventListener('keydown', (e) => (e.key === 'Escape') && document.querySelectorAll('.modal-overlay.visible').forEach(hideModal));
+        dom.tempSlider.addEventListener('input', () => { dom.tempValueSpan.textContent = dom.tempSlider.value; });
+        // --- THE FIX: State Reset Function ---
+        function resetAudioPlayerState() {
+            dom.hiddenAudioPlayer.pause();
+            dom.hiddenAudioPlayer.removeAttribute("src"); // More definitive than src=''
+            audioPeaks = [];
+            dom.audioCurrentTimeSpan.textContent = "0:00";
+            dom.audioTotalTimeSpan.textContent = "0:00";
+            dom.playIcon.style.display = 'block';
+            dom.pauseIcon.style.display = 'none';
+            // Clear the canvas on the next animation frame
+            requestAnimationFrame(() => {
+                waveformCtx.clearRect(0, 0, dom.audioWaveformCanvas.width, dom.audioWaveformCanvas.height);
+            });
+        }
+        const formatTime = (s) => { if (isNaN(s) || s < 0) return '0:00'; const m = Math.floor(s / 60); const rs = Math.floor(s % 60); return `${m}:${rs < 10 ? '0' : ''}${rs}`; };
+        function drawWaveform(progress) {
+             const dpr = window.devicePixelRatio || 1; const canvas = dom.audioWaveformCanvas; canvas.width = canvas.offsetWidth * dpr; canvas.height = canvas.offsetHeight * dpr; waveformCtx.scale(dpr, dpr);
+             const w = canvas.offsetWidth, h = canvas.offsetHeight;
+             if (w === 0) return;
+             waveformCtx.clearRect(0, 0, w, h);
+             const barW = 3, barG = 2, total = barW + barG, numBars = Math.floor(w / total), offset = (w - (numBars * total)) / 2, activeBars = Math.floor(progress * numBars);
+             const activeColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-active').trim(); const inactiveColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-inactive').trim();
+             for (let i = 0; i < numBars; i++) { const peak = audioPeaks[i] || 0; const barH = peak * h; waveformCtx.fillStyle = i < activeBars ? activeColor : inactiveColor; const x = offset + i * total, y = (h - barH) / 2; waveformCtx.fillRect(x, y, barW, barH); }
+        }
+        const updatePlayerUI = () => { const p = dom.hiddenAudioPlayer; p.paused || p.ended ? (dom.playIcon.style.display = 'block', dom.pauseIcon.style.display = 'none') : (dom.playIcon.style.display = 'none', dom.pauseIcon.style.display = 'block'); const dur = p.duration; dom.audioCurrentTimeSpan.textContent = formatTime(p.currentTime); if (isFinite(dur) && dur > 0) { dom.audioTotalTimeSpan.textContent = formatTime(dur); requestAnimationFrame(() => drawWaveform(p.currentTime / dur)); } else { requestAnimationFrame(() => drawWaveform(0)); } };
+        async function processAudioForWaveform(buffer) {
+            if (!buffer) { audioPeaks = []; return; }
+            const channelData = buffer.getChannelData(0); const numBars = Math.floor(dom.audioWaveformCanvas.offsetWidth / 5); const samplesPerBar = Math.floor(channelData.length / numBars); const pks = [];
+            for (let i = 0; i < numBars; i++) { let max = 0; const start = i * samplesPerBar; for (let j = 0; j < samplesPerBar; j++) { const v = Math.abs(channelData[start + j]); if (v > max) max = v; } pks.push(Math.min(1, max * 1.5)); }
+            audioPeaks = pks;
             requestAnimationFrame(() => drawWaveform(0));
         }
+        dom.playPauseBtn.addEventListener('click', () => dom.hiddenAudioPlayer.paused ? dom.hiddenAudioPlayer.play() : dom.hiddenAudioPlayer.pause());
+        dom.skipBackwardBtn.addEventListener('click', () => dom.hiddenAudioPlayer.currentTime = Math.max(0, dom.hiddenAudioPlayer.currentTime - 5));
+        dom.skipForwardBtn.addEventListener('click', () => dom.hiddenAudioPlayer.currentTime = Math.min(dom.hiddenAudioPlayer.duration, dom.hiddenAudioPlayer.currentTime + 5));
+        dom.volumeBtn.addEventListener('click', () => { dom.hiddenAudioPlayer.muted = !dom.hiddenAudioPlayer.muted; dom.volumeHighIcon.style.display = dom.hiddenAudioPlayer.muted ? 'none' : 'block'; dom.volumeMuteIcon.style.display = dom.hiddenAudioPlayer.muted ? 'block' : 'none'; });
+        dom.speedBtn.addEventListener('click', () => { currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length; const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex]; dom.hiddenAudioPlayer.playbackRate = newSpeed; dom.speedBtn.textContent = `${newSpeed}x`; });
+        dom.hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI); dom.hiddenAudioPlayer.addEventListener('play', updatePlayerUI); dom.hiddenAudioPlayer.addEventListener('pause', updatePlayerUI); dom.hiddenAudioPlayer.addEventListener('ended', () => { dom.hiddenAudioPlayer.currentTime = 0; updatePlayerUI(); });
+        dom.hiddenAudioPlayer.addEventListener('loadedmetadata', async () => { if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)(); try { const res = await fetch(dom.hiddenAudioPlayer.src); const buffer = await res.arrayBuffer(); const decoded = await audioContext.decodeAudioData(buffer); await processAudioForWaveform(decoded); } catch (e) { console.error("Waveform Error:", e); audioPeaks = []; } updatePlayerUI(); });
+        const showLoadingState = () => { dom.audioPlayerContent.style.display = 'none'; dom.outputSection.classList.remove('has-content'); dom.statusMessage.style.display = 'none'; dom.loadingAnimationWrapper.style.display = 'flex'; dom.generateBtn.disabled = true; dom.generateBtn.innerHTML = `<svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="animation: spin 1s linear infinite;"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0492C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/></svg> در حال پردازش...`; };
+        const showResultState = (success, msg = '') => { dom.loadingAnimationWrapper.style.display = 'none'; if (success) { dom.statusMessage.style.display = 'none'; dom.audioPlayerContent.style.display = 'flex'; dom.outputSection.classList.add('has-content'); } else { dom.statusMessage.textContent = msg || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.'; dom.statusMessage.style.display = 'block'; dom.audioPlayerContent.style.display = 'none'; dom.outputSection.classList.remove('has-content'); resetAudioPlayerState(); } dom.generateBtn.disabled = false; dom.generateBtn.innerHTML = '✨ خلق صدا با آلفا'; };
         async function generateAudio(event) {
+            event.preventDefault();
+            resetAudioPlayerState(); // <-- THE FIX IS CALLED HERE!
+            showLoadingState();
+            const text = dom.textInput.value;
             if (!text.trim()) { showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.'); return; }
             if (text.length > MAX_CHARS) { showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS.toLocaleString('fa-IR')} نویسه است.`); return; }
+            const payload = { fn_index: FN_INDEX, data: [false, null, text, dom.promptInput.value, dom.selectedSpeakerIdStorage.value, parseFloat(dom.tempSlider.value)], event_data: null, session_hash: Math.random().toString(36).substring(2) };
             try {
+                const joinRes = await fetch(JOIN_QUEUE_URL, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) });
+                if (!joinRes.ok) throw new Error(`خطای ارتباط با سرور (${joinRes.status})`);
+                let filePath = null; const start = Date.now();
+                while (Date.now() - start < 90000) {
+                    const dataRes = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
+                    if (!dataRes.ok) throw new Error(`خطای دریافت داده (${dataRes.status})`);
+                    const lines = (await dataRes.text()).trim().split('\n');
                     for (const line of lines) {
                         if (!line.startsWith('data:')) continue;
                         try {
                             const data = JSON.parse(line.substring(5));
                             if (data.msg === 'process_completed') {
+                                if (data.success && data.output?.data?.[0]?.name) { filePath = data.output.data[0].name; } else { throw new Error(data.output?.error || 'خطای پردازش در سرور.'); }
                                 break;
+                            } else if (data.msg === 'queue_full') { throw new Error('صف پردازش پر است، لطفا بعدا تلاش کنید.'); }
+                        } catch (e) { console.warn("JSON Parse Error:", e, line); }
                     }
+                    if (filePath) break;
+                    await new Promise(r => setTimeout(r, 1000));
                 }
+                if (filePath) { dom.hiddenAudioPlayer.src = `${FILE_URL_BASE}${filePath}`; showResultState(true); } else { throw new Error('زمان پردازش تمام شد یا فایلی دریافت نشد.'); }
+            } catch (error) { console.error('Audio Generation Error:', error); showResultState(false, error.message); }
         }
+        const defaultId = speakers.length > 0 ? speakers[0].id : "Charon";
+        updateSelectedSpeakerDisplay(dom.selectedSpeakerIdStorage.value || defaultId);
+        dom.form.addEventListener('submit', generateAudio);
+        dom.statusMessage.style.display = 'block'; dom.loadingAnimationWrapper.style.display = 'none';
+        dom.audioPlayerContent.style.display = 'none'; dom.outputSection.classList.remove('has-content');
     });
     </script>
 </body>