Update index.html

index.html

@@ -9,21 +9,21 @@
 
         :root {
             --app-font: 'Vazirmatn', sans-serif;
-            --app-header-grad-start: #1a2980;
-            --app-header-grad-end: #26d0ce;
+            --app-header-grad-start: #1e3a8a;
+            --app-header-grad-end: #3b82f6;
             --app-panel-bg: #FFFFFF;
-            --app-input-bg: #F8F9FA;
-            --app-button-bg: #5f27cd;
-            --app-button-hover-bg: #481e9e;
-            --app-main-bg: linear-gradient(170deg, #F3E8FF 0%, #E0F2FE 100%);
-            --app-text-primary: #2c3e50;
-            --app-text-secondary: #555;
-            --app-border-color: #E0E0E0;
+            --app-input-bg: #f7f8fc;
+            --app-button-bg: #6D28D9;
+            --app-button-hover-bg: #5B21B6;
+            --app-main-bg: #f0f4f9;
+            --app-text-primary: #1f2937;
+            --app-text-secondary: #6b7280;
+            --app-border-color: #e5e7eb;
             --radius-card: 24px;
             --radius-input: 12px;
-            --shadow-card: 0 10px 30px -5px rgba(0,0,0,0.08);
-            --shadow-button: 0 4px 15px -2px rgba(95, 39, 205, 0.4);
-            --speaker-selected-glow: 0 0 15px rgba(95, 39, 205, 0.5);
+            --shadow-card: 0 10px 30px -5px rgba(30, 58, 138, 0.1);
+            --shadow-button: 0 4px 15px -2px rgba(109, 40, 217, 0.4);
+            --speaker-selected-glow: 0 0 20px rgba(109, 40, 217, 0.4);
         }
 
         body {
@@ -32,7 +32,7 @@
             background: var(--app-main-bg);
             color: var(--app-text-primary);
             font-size: 16px;
-            line-height: 1.65;
+            line-height: 1.7;
             margin: 0;
             padding: 0;
             min-height: 100vh;
@@ -41,54 +41,71 @@
         }
 
         .container { max-width: 800px; width: 95%; margin: 0 auto; padding-bottom: 40px; }
-        .app-header { padding: 3rem 1.5rem 5rem 1.5rem; text-align: center; background-image: linear-gradient(135deg, var(--app-header-grad-start) 0%, var(--app-header-grad-end) 100%); color: white; border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); box-shadow: 0 6px 20px -5px rgba(0,0,0,0.2); }
-        .app-header h1 { font-size: 2.8em; font-weight: 800; margin:0 0 0.5rem 0; text-shadow: 0 2px 4px rgba(0,0,0,0.15); }
-        .app-header p { font-size: 1.2em; color: rgba(255,255,255,0.9); margin-top:0; opacity: 0.9; }
-        .main-content { padding: 2.5rem; margin: -3.5rem auto 2rem auto; background-color: var(--app-panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
+        .app-header { padding: 3rem 1.5rem 6rem 1.5rem; text-align: center; background-image: linear-gradient(135deg, var(--app-header-grad-start) 0%, var(--app-header-grad-end) 100%); color: white; border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); box-shadow: 0 6px 20px -5px rgba(30, 58, 138, 0.25); }
+        .app-header h1 { font-size: 3em; font-weight: 800; margin:0 0 0.5rem 0; text-shadow: 0 2px 5px rgba(0,0,0,0.2); }
+        .app-header p { font-size: 1.25em; color: rgba(255,255,255,0.9); margin-top:0; opacity: 0.95; }
+        .main-content { padding: 2.5rem; margin: -4.5rem auto 2rem auto; background-color: var(--app-panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
         .form-group { margin-bottom: 2.5rem; }
-        label { display: block; font-weight: 700; color: var(--app-text-primary); font-size: 1.1em; margin-bottom: 0.8rem; }
-        textarea, input[type="text"] { width: 100%; padding: 1rem; border-radius: var(--radius-input); border: 2px solid var(--app-border-color); background-color: var(--app-input-bg); box-shadow: none; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: all 0.2s ease-in-out; }
-        textarea:focus, input[type="text"]:focus { outline: none; border-color: var(--app-button-bg); box-shadow: 0 0 0 3px rgba(95, 39, 205, 0.2); background-color: #fff; }
+        label { display: block; font-weight: 700; color: var(--app-text-primary); font-size: 1.1em; margin-bottom: 1rem; }
+        textarea, input[type="text"] { width: 100%; padding: 1rem; border-radius: var(--radius-input); border: 2px solid var(--app-border-color); background-color: var(--app-input-bg); box-shadow: none; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: all 0.25s ease-in-out; }
+        textarea:focus, input[type="text"]:focus { outline: none; border-color: var(--app-button-bg); box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.15); background-color: #fff; }
 
         /* --- نمایش گوینده منتخب --- */
         #selected-speaker-display { text-align: center; }
-        #selected-speaker-card { display: inline-flex; align-items: center; background: #fff; border-radius: 99px; padding: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border: 2px solid var(--app-border-color); }
-        #selected-speaker-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-left: 15px; background-color: #eee; }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.4em; }
+        #selected-speaker-card { display: inline-flex; align-items: center; background: linear-gradient(145deg, #ffffff, #f7f8fc); border-radius: 99px; padding: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.07); border: 1px solid var(--app-border-color); }
+        #selected-speaker-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-left: 20px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); background-color: #eee; }
+        #selected-speaker-info h3 { margin: 0; font-size: 1.5em; font-weight: 700; }
         #selected-speaker-info p { margin: 5px 0 0; color: var(--app-text-secondary); font-size: 0.9em; }
-        #change-speaker-btn { display: block; margin: 1rem auto 0; padding: 8px 20px; border-radius: 8px; background-color: var(--app-input-bg); border: 1px solid var(--app-border-color); cursor: pointer; font-family: var(--app-font); font-weight: 500; transition: all 0.2s ease; }
-        #change-speaker-btn:hover { background-color: #e9ecef; border-color: #ced4da; }
+        #change-speaker-btn { display: block; margin: 1.2rem auto 0; padding: 10px 24px; border-radius: var(--radius-input); background-color: var(--app-input-bg); border: 1px solid var(--app-border-color); cursor: pointer; font-family: var(--app-font); font-weight: 500; transition: all 0.2s ease; }
+        #change-speaker-btn:hover { background-color: #e9ecef; border-color: #ced4da; transform: translateY(-1px); }
 
         /* --- مودال گالری گویندگان --- */
-        #speaker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
+        #speaker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(17, 24, 39, 0.6); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
         #speaker-modal.visible { display: flex; opacity: 1; }
-        .modal-content { background: #fff; padding: 2rem; border-radius: var(--radius-card); width: 90%; max-width: 700px; max-height: 80vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s ease; }
+        .modal-content { background: #fff; padding: 2rem; border-radius: var(--radius-card); width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s ease; }
         #speaker-modal.visible .modal-content { transform: scale(1); }
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--app-border-color); }
         .modal-header h2 { margin: 0; }
-        .close-modal-btn { background: none; border: none; font-size: 2rem; cursor: pointer; color: #aaa; transition: color 0.2s ease; }
-        .close-modal-btn:hover { color: #333; }
-        
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
+        .close-modal-btn { background: none; border: none; font-size: 2.2rem; cursor: pointer; color: #9ca3af; transition: color 0.2s ease, transform 0.2s ease; line-height: 1; }
+        .close-modal-btn:hover { color: var(--app-text-primary); transform: rotate(90deg); }
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.5rem; }
         @media (min-width: 576px) { #speaker-grid { grid-template-columns: repeat(4, 1fr); } }
-        .speaker-card { cursor: pointer; transition: all 0.3s ease; }
-        .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: var(--radius-card); overflow: hidden; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: relative; background-color: #fff; }
-        .speaker-card:hover .speaker-visual { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
+        .speaker-card { cursor: pointer; transition: all 0.3s ease; text-align: center; }
+        .speaker-card .speaker-visual { border: 4px solid transparent; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: relative; background-color: #fff; transition: all 0.3s ease; }
+        .speaker-card:hover .speaker-visual { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
         .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; background-color: #eee; /* Placeholder color */ }
-        .speaker-card .speaker-name { padding: 0.7rem 0.5rem; font-weight: 500; font-size: 0.9em; }
+        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; background-color: #eee; }
+        .speaker-card .speaker-name { padding: 0.8rem 0.5rem; font-weight: 500; font-size: 0.95em; color: var(--app-text-secondary); transition: color 0.2s; }
+        .speaker-card:hover .speaker-name { color: var(--app-text-primary); }
         .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--app-button-bg); box-shadow: var(--speaker-selected-glow); }
+        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { color: var(--app-button-bg); font-weight: 700; }
 
         /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1rem; }
-        input[type="range"] { flex-grow: 1; cursor: pointer; }
-        #temperature-value { font-weight: bold; background-color: var(--app-input-bg); padding: 0.2rem 0.8rem; border-radius: 8px; border: 1px solid var(--app-border-color); min-width: 40px; text-align: center; }
-        #generate-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1.2em; font-weight: 700; font-family: var(--app-font); background: var(--app-button-bg); color: white; border: none; border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-button); }
-        #generate-btn:hover:not(:disabled) { background-color: var(--app-button-hover-bg); transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(95, 39, 205, 0.5); }
-        #generate-btn:disabled { background-color: #999; cursor: not-allowed; box-shadow: none; }
-        #output-section { margin-top: 2.5rem; padding: 1.5rem; background-color: #fff; border-radius: var(--radius-card); min-height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border: 1px solid var(--app-border-color); }
-        #status-message { font-weight: 500; color: var(--app-text-secondary); }
+        .slider-container { display: flex; align-items: center; gap: 1.5rem; }
+        input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #e5e7eb; border-radius: 5px; outline: none; transition: background 0.2s; }
+        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: var(--app-button-bg); border-radius: 50%; cursor: pointer; border: 4px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
+        input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: var(--app-button-bg); border-radius: 50%; cursor: pointer; border: 4px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
+        #temperature-value { font-weight: 700; background-color: var(--app-input-bg); padding: 0.4rem 1rem; border-radius: 8px; border: 1px solid var(--app-border-color); min-width: 45px; text-align: center; }
+        #generate-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1.25em; font-weight: 700; font-family: var(--app-font); background: var(--app-button-bg); color: white; border: none; border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-button); }
+        #generate-btn:hover:not(:disabled) { background-color: var(--app-button-hover-bg); transform: translateY(-3px); box-shadow: 0 6px 20px -3px rgba(109, 40, 217, 0.5); }
+        #generate-btn:disabled { background-color: #9ca3af; cursor: not-allowed; box-shadow: none; transform: none; }
+        #output-section { margin-top: 2.5rem; padding: 2rem; background-color: #fff; border-radius: var(--radius-card); min-height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border: 1px dashed var(--app-border-color); transition: all 0.3s ease; }
+        #status-message { font-weight: 500; color: var(--app-text-secondary); text-align: center; }
         #audio-player { width: 100%; margin-top: 1rem; display: none; }
+
+        /* --- انیمیشن پردازش --- */
+        #loading-animation { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; }
+        .sound-wave-svg { width: 100px; height: 100px; }
+        .sound-wave-svg path { stroke: var(--app-button-bg); stroke-width: 3; fill: none; stroke-linecap: round; }
+        .wave-1 { animation: pulse 2s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19); }
+        .wave-2 { animation: pulse 2s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-delay: 0.2s; }
+        .wave-3 { animation: pulse 2s infinite cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-delay: 0.4s; }
+        #loading-text { font-size: 1.1em; font-weight: 500; color: var(--app-text-primary); }
+        @keyframes pulse {
+            0% { transform: scale(0.5); opacity: 0; }
+            50% { opacity: 1; }
+            100% { transform: scale(1.2); opacity: 0; }
+        }
     </style>
 </head>
 <body>
@@ -108,7 +125,6 @@
                     <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
                     <input type="text" id="prompt-input" value="با صدایی طبیعی و روان." placeholder="مثال: با لحنی شاد و پرانرژی">
                 </div>
-
                 <div class="form-group">
                     <label>🎤 گوینده منتخب</label>
                     <div id="selected-speaker-display">
@@ -122,7 +138,6 @@
                         <button type="button" id="change-speaker-btn">تغییر گوینده</button>
                     </div>
                 </div>
-                
                 <div class="form-group">
                     <label for="temperature-slider">🌡️ میزان خلاقیت صدا (0.1 تا 1.5)</label>
                     <div class="slider-container">
@@ -130,12 +145,20 @@
                         <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">
+                     <svg class="sound-wave-svg" viewBox="0 0 100 100">
+                        <path class="wave-1" d="M 20 50 Q 35 20 50 50 T 80 50"></path>
+                        <path class="wave-2" d="M 20 50 Q 35 20 50 50 T 80 50"></path>
+                        <path class="wave-3" d="M 20 50 Q 35 20 50 50 T 80 50"></path>
+                    </svg>
+                    <p id="loading-text">در حال تبدیل متن به صدا با هوش مصنوعی آلفا...</p>
+                </div>
                 <audio id="audio-player" controls></audio>
             </div>
         </main>
@@ -171,46 +194,46 @@
             const tempSlider = document.getElementById('temperature-slider');
             const tempValueSpan = document.getElementById('temperature-value');
             const generateBtn = document.getElementById('generate-btn');
+            
+            // Output section elements
             const statusMessage = document.getElementById('status-message');
             const audioPlayer = document.getElementById('audio-player');
+            const loadingAnimation = document.getElementById('loading-animation');
             
-            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage'); // برای نگهداری مقدار
+            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
             const speakerModal = document.getElementById('speaker-modal');
             const changeSpeakerBtn = document.getElementById('change-speaker-btn');
             const closeModalBtn = document.querySelector('.close-modal-btn');
-            const speakerGridInModal = document.getElementById('speaker-grid'); // گرید داخل مودال
-            const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img'); // نمایش عکس اصلی
-            const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name'); // نمایش نام اصلی
+            const speakerGridInModal = document.getElementById('speaker-grid');
+            const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
+            const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
             
             function getSpeakerById(id) {
                 return speakers.find(s => s.id === id);
             }
             
             function getImageUrl(speaker, index) {
-                 // از یک سرویس عکس پرتره رندوم استفاده می کنیم
-                 // برای تنوع بیشتر، از یک اندیس متفاوت برای هر گوینده استفاده می کنیم
-                const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego'); // اگر جنسیت مشخص نیست، از لگو استفاده می کنیم
-                const imageIndex = (index * 7 + 13) % 100; // یک فرمول ساده برای ایجاد تنوع در اندیس عکس
-                return `https://randomuser.me/api/portraits/${gender}/${imageIndex}.jpg`;
+                const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego');
+                const imageIndex = (index * 7 + 13) % 100;
+                return `https://randomuser.me/api/portraits/thumb/${gender}/${imageIndex}.jpg`;
             }
 
             function updateSelectedSpeakerDisplay(speakerId) {
                 const speaker = getSpeakerById(speakerId);
                 if (speaker) {
                     const speakerIndex = speakers.findIndex(s => s.id === speakerId);
-                    selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex);
+                    selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex).replace('thumb/', ''); // Get larger image
                     selectedSpeakerNameDisplay.textContent = speaker.name;
-                    selectedSpeakerIdStorage.value = speaker.id; // ذخیره ID انتخاب شده
+                    selectedSpeakerIdStorage.value = speaker.id;
                 }
             }
 
             function createSpeakerCardsInModal() {
-                speakerGridInModal.innerHTML = ''; // پاک کردن گرید قبلی
+                speakerGridInModal.innerHTML = '';
                 speakers.forEach((speaker, index) => {
                     const card = document.createElement('label');
                     card.className = 'speaker-card';
                     card.setAttribute('for', `modal-speaker-${speaker.id}`);
-                    
                     const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : '';
                     
                     card.innerHTML = `
@@ -223,7 +246,7 @@
                     
                     card.addEventListener('click', () => {
                         updateSelectedSpeakerDisplay(speaker.id);
-                        setTimeout(() => speakerModal.classList.remove('visible'), 100);
+                        setTimeout(() => speakerModal.classList.remove('visible'), 200);
                     });
                     
                     speakerGridInModal.appendChild(card);
@@ -231,7 +254,7 @@
             }
             
             changeSpeakerBtn.addEventListener('click', () => {
-                createSpeakerCardsInModal(); // هر بار مودال باز می شود، کارت ها را با انتخاب فعلی می سازیم
+                createSpeakerCardsInModal();
                 speakerModal.classList.add('visible');
             });
             closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
@@ -243,27 +266,45 @@
 
             tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
 
-            async function generateAudio(event) {
-                event.preventDefault();
-                generateBtn.disabled = true;
-                generateBtn.textContent = 'در حال پردازش...';
-                statusMessage.textContent = 'در حال ارسال درخواست به سرور...';
+            function showLoadingState() {
+                statusMessage.style.display = 'none';
                 audioPlayer.style.display = 'none';
                 audioPlayer.src = '';
+                loadingAnimation.style.display = 'flex';
+                generateBtn.disabled = true;
+                generateBtn.textContent = 'کمی صبر کنید...';
+            }
 
-                const text = textInput.value;
-                const prompt = promptInput.value;
-                const temperature = parseFloat(tempSlider.value);
-                const selectedSpeaker = selectedSpeakerIdStorage.value; // از فیلد مخفی می‌خوانیم
-                const sessionHash = Math.random().toString(36).substring(2);
+            function showResultState(isSuccess, message = '') {
+                loadingAnimation.style.display = 'none';
+                if (isSuccess) {
+                    statusMessage.style.display = 'none';
+                    audioPlayer.style.display = 'block';
+                    audioPlayer.play();
+                } else {
+                    statusMessage.textContent = message || 'یک خطای ناشناخته رخ داد.';
+                    statusMessage.style.display = 'block';
+                    audioPlayer.style.display = 'none';
+                }
+                generateBtn.disabled = false;
+                generateBtn.textContent = '🚀 تولید و پخش صدا';
+            }
+
+            async function generateAudio(event) {
+                event.preventDefault();
+                showLoadingState();
 
+                const text = textInput.value;
                 if (!text.trim()) {
-                    statusMessage.textContent = 'خطا: متن ورودی نمی‌تواند خالی باشد.';
-                    generateBtn.disabled = false;
-                    generateBtn.textContent = '🚀 تولید و پخش صدا';
+                    showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
                     return;
                 }
                 
+                const prompt = promptInput.value;
+                const temperature = parseFloat(tempSlider.value);
+                const selectedSpeaker = selectedSpeakerIdStorage.value;
+                const sessionHash = Math.random().toString(36).substring(2);
+
                 const payload = {
                     fn_index: FN_INDEX,
                     data: [false, null, text, prompt, selectedSpeaker, temperature],
@@ -283,8 +324,6 @@
                          throw new Error(`خطا در اتصال به صف (${joinQueueResponse.status}): ${errorBody}`);
                     }
                     
-                    statusMessage.textContent = 'در انتظار نتیجه از سرور...';
-                    
                     const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
                     const reader = dataResponse.body.getReader();
                     const decoder = new TextDecoder();
@@ -294,25 +333,17 @@
                     while (true) {
                         const { value, done } = await reader.read();
                         if (done) break;
-
                         buffer += decoder.decode(value, { stream: true });
                         const lines = buffer.split('\n');
                         buffer = lines.pop(); 
-
                         for (const line of lines) {
                             if (!line.startsWith('data:')) continue;
-                            
                             try {
                                 const data = JSON.parse(line.substring(5));
-                                if (data.msg === 'process_generating') {
-                                    statusMessage.textContent = 'سرور در حال تولید فایل صوتی است...';
-                                }
                                 if (data.msg === 'process_completed') {
                                     if (data.success && data.output.data && 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 {
-                                        console.error("ساختار پیام موفقیت مورد انتظار نبود:", data);
-                                    }
+                                    } else { console.error("ساختار پیام موفقیت مورد انتظار نبود:", data); }
                                     break; 
                                 }
                             } catch (e) { /* نادیده گرفتن خطاهای پارس */ }
@@ -321,25 +352,20 @@
                     }
                     
                     if (finalFilePath) {
-                        statusMessage.textContent = 'فایل صوتی با موفقیت دریافت شد!';
                         const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
                         audioPlayer.src = audioUrl;
-                        audioPlayer.style.display = 'block';
-                        audioPlayer.play();
+                        showResultState(true);
                     } else {
-                        throw new Error('فایل صوتی از سرور دریافت نشد. کنسول را برای اطلاعات بیشتر بررسی کنید.');
+                        throw new Error('فایل صوتی از سرور دریافت نشد.');
                     }
 
                 } catch (error) {
                     console.error('یک خطا در فرآیند رخ داد:', error);
-                    statusMessage.textContent = `یک خطا رخ داد: ${error.message}`;
-                } finally {
-                    generateBtn.disabled = false;
-                    generateBtn.textContent = '🚀 تولید و پخش صدا';
+                    showResultState(false, `یک خطا رخ داد: ${error.message}`);
                 }
             }
             
-            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value); // نمایش گوینده پیش‌فرض
+            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value);
             form.addEventListener('submit', generateAudio);
         });
     </script>