Update index.html

index.html

@@ -71,7 +71,7 @@
             animation: fadeInDown 0.8s 0.1s ease-out backwards;
         }
         .app-header h1 {
-            font-size: 2.8em; /* Reduced size */
+            font-size: 2.4em; /* کوچکتر شد */
             font-weight: 900;
             margin:0 0 0.75rem 0;
             background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
@@ -80,15 +80,15 @@
             letter-spacing: -1px;
         }
         .app-header p {
-            font-size: 1.2em; /* Slightly reduced */
+            font-size: 1.05em; /* کوچکتر شد */
             color: var(--text-secondary);
             margin-top:0;
-            opacity: 0.9; /* Slightly less prominent */
+            opacity: 0.9;
             font-weight: 400;
         }
 
         .main-content {
-            padding: 2.5rem; /* Adjusted padding */
+            padding: 2.5rem;
             background-color: var(--panel-bg);
             border-radius: var(--radius-card);
             box-shadow: var(--shadow-strong);
@@ -96,7 +96,7 @@
             animation: fadeInUp 0.8s 0.3s ease-out backwards;
         }
 
-        .form-group { margin-bottom: 2rem; } /* Adjusted margin */
+        .form-group { margin-bottom: 2rem; }
 
         .label-with-info {
             display: flex;
@@ -144,7 +144,7 @@
             z-index: 10;
             bottom: 140%;
             left: 50%;
-            transform: translateX(-50%) translateY(10px); /* Start slightly lower */
+            transform: translateX(-50%) translateY(10px);
             opacity: 0;
             transition: opacity 0.3s, visibility 0.3s, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             font-size: 0.88em;
@@ -165,7 +165,7 @@
         .info-tooltip-icon.active .tooltip-text {
             visibility: visible;
             opacity: 1;
-            transform: translateX(-50%) translateY(0); /* Animate to final position */
+            transform: translateX(-50%) translateY(0);
         }
 
 
@@ -173,35 +173,35 @@
             display: block;
             font-weight: 700;
             color: var(--text-primary);
-            font-size: 1.05em; /* Adjusted size */
-            margin-bottom: 0.8rem; /* Adjusted margin */
+            font-size: 1.05em;
+            margin-bottom: 0.8rem;
         }
 
         textarea, input[type="text"] {
             width: 100%;
-            padding: 0.9rem 1.1rem; /* Adjusted padding */
+            padding: 0.9rem 1.1rem;
             border-radius: var(--radius-input);
             border: 1px solid var(--panel-border);
             background-color: var(--input-bg);
             color: var(--text-primary);
             box-shadow: var(--shadow-subtle) inset;
             font-family: var(--app-font);
-            font-size: 1rem; /* Adjusted size */
+            font-size: 1rem;
             box-sizing: border-box;
             transition: var(--transition-smooth);
         }
         textarea:focus, input[type="text"]:focus {
             outline: none;
             border-color: var(--input-border-focus);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--shadow-subtle) inset; /* Slightly adjusted focus shadow */
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--shadow-subtle) inset;
             background-color: #fff;
         }
-        textarea { min-height: 100px; resize: vertical; } /* Adjusted min-height */
+        textarea { min-height: 100px; resize: vertical; }
 
         .char-counter-wrapper {
             font-size: 0.85em;
             color: var(--text-secondary);
-            text-align: left; /* For LTR numbers, but RTL page */
+            text-align: left;
             margin-top: 0.5rem;
             padding: 0 0.2rem;
         }
@@ -218,27 +218,27 @@
             padding: 1rem 1.2rem;
             box-shadow: var(--shadow-medium);
             border: 1px solid var(--panel-border);
-            transition: var(--transition-bounce); /* Bouncy transition */
+            transition: var(--transition-bounce);
             position: relative;
             margin-bottom: 1.2rem;
             cursor: pointer;
         }
          #selected-speaker-card:hover {
-            transform: translateY(-6px) scale(1.03); /* More pronounced hover */
+            transform: translateY(-6px) scale(1.03);
             box-shadow: var(--shadow-strong);
         }
         #selected-speaker-card img {
-            width: 75px; height: 75px; /* Slightly smaller */
+            width: 75px; height: 75px;
             border-radius: 50%;
             object-fit: cover;
-            margin-left: 18px; /* Adjusted margin */
-            border: 3px solid var(--accent-secondary); /* Thinner border */
-            box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5); /* Adjusted shadow */
+            margin-left: 18px;
+            border: 3px solid var(--accent-secondary);
+            box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5);
             background-color: #e0e0e0;
             transition: var(--transition-smooth);
         }
         #selected-speaker-card:hover img {
-            transform: scale(1.08) rotate(3deg); /* More dynamic image hover */
+            transform: scale(1.08) rotate(3deg);
         }
         #selected-speaker-info h3 { margin: 0; font-size: 1.35em; font-weight: 800; color: var(--text-primary); }
         #selected-speaker-info p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88em; font-weight: 500; }
@@ -248,26 +248,26 @@
             align-items: center;
             justify-content: center;
             margin: 0 auto;
-            padding: 10px 20px; /* Adjusted padding */
+            padding: 10px 20px;
             border-radius: var(--radius-input);
             background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary));
             border: none;
             color: #fff;
             cursor: pointer;
-            font-family: var(--app-font); font-weight: 600; /* Adjusted weight */
-            font-size: 1em; /* Adjusted size */
+            font-family: var(--app-font); font-weight: 600;
+            font-size: 1em;
             transition: var(--transition-smooth);
-            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle); /* Adjusted shadow */
+            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle);
         }
         #change-speaker-btn:hover {
             background: linear-gradient(45deg, var(--accent-primary), var(--accent-primary-hover));
-            transform: translateY(-3px) scale(1.05); /* More lift */
-            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium); /* Stronger shadow */
+            transform: translateY(-3px) scale(1.05);
+            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium);
         }
         #change-speaker-btn svg {
-            width: 1.1em; /* Adjusted size */
+            width: 1.1em;
             height: 1.1em;
-            margin-right: 0.5em; /* Adjusted margin */
+            margin-right: 0.5em;
             fill: currentColor;
         }
 
@@ -275,20 +275,20 @@
         /* --- مودال گالری گویندگان --- */
         #speaker-modal {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(18, 24, 38, 0.7); /* Darker backdrop */
-            backdrop-filter: blur(8px) saturate(150%); /* Adjusted blur */
+            background-color: rgba(18, 24, 38, 0.7);
+            backdrop-filter: blur(8px) saturate(150%);
             display: none; align-items: center; justify-content: center;
             z-index: 1000; opacity: 0;
-            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Faster fade */
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         #speaker-modal.visible { display: flex; opacity: 1; }
         .modal-content {
             background: var(--panel-bg);
-            padding: 2rem; /* Adjusted padding */
+            padding: 2rem;
             border-radius: var(--radius-card);
-            width: 90%; max-width: 700px; /* Slightly smaller max-width */
-            max-height: 85vh; overflow-y: auto; /* Adjusted max-height */
-            transform: scale(0.95) translateY(20px); /* Start slightly smaller and lower */
+            width: 90%; max-width: 700px;
+            max-height: 85vh; overflow-y: auto;
+            transform: scale(0.95) translateY(20px);
             transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s;
             border: 1px solid var(--panel-border);
             box-shadow: var(--shadow-strong);
@@ -296,11 +296,11 @@
         }
         #speaker-modal.visible .modal-content { transform: scale(1) translateY(0); opacity: 1;}
         .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
-        .modal-header h2 { margin: 0; font-size: 1.6em; font-weight: 800; color: var(--accent-primary);} /* Adjusted size */
+        .modal-header h2 { margin: 0; font-size: 1.6em; font-weight: 800; color: var(--accent-primary);}
         .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
-        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); } /* Changed rotation */
+        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
 
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; } /* Adjusted gap and minmax */
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; }
         @media (min-width: 640px) { #speaker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
         .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative;}
         .speaker-card .speaker-visual {
@@ -310,33 +310,33 @@
             box-shadow: var(--shadow-subtle);
             position: relative;
             background-color: var(--input-bg);
-            transition: var(--transition-bounce); /* Bouncy transition */
-            padding: 6px; /* Adjusted padding */
+            transition: var(--transition-bounce);
+            padding: 6px;
         }
         .speaker-card:hover .speaker-visual {
-            transform: translateY(-5px) scale(1.06); /* More pop */
+            transform: translateY(-5px) scale(1.06);
             box-shadow: var(--shadow-medium);
-            border-color: rgba(var(--accent-secondary-rgb), 0.3); /* Subtle border on hover */
+            border-color: rgba(var(--accent-secondary-rgb), 0.3);
         }
         .speaker-card input[type="radio"] { display: none; }
         .speaker-card img {
-            width: 100%; height: 120px; /* Adjusted height */
+            width: 100%; height: 120px;
             object-fit: cover; display: block;
             background-color: #e0e0e0;
             transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border-radius: calc(var(--radius-card) - 12px); /* Adjusted inner radius */
+            border-radius: calc(var(--radius-card) - 12px);
         }
-        .speaker-card:hover img { transform: scale(1.12); } /* Slightly more zoom */
+        .speaker-card:hover img { transform: scale(1.12); }
         .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.1rem; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); transition: color 0.2s; }
         .speaker-card input[type="radio"]:checked + .speaker-visual {
             border-color: var(--accent-secondary);
-            box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.75); /* Stronger glow */
-            background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary)); /* New gradient */
-            transform: scale(1.05); /* Pop out selected */
+            box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.75);
+            background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary));
+            transform: scale(1.05);
         }
         .speaker-card input[type="radio"]:checked + .speaker-visual img {
-            border: 2px solid white; /* Thinner border */
-            transform: scale(1.05); /* Slight zoom for selected image */
+            border: 2px solid white;
+            transform: scale(1.05);
         }
         .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
             color: #fff;
@@ -344,10 +344,10 @@
         }
 
         /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1.2rem; } /* Adjusted gap */
+        .slider-container { display: flex; align-items: center; gap: 1.2rem; }
         input[type="range"] {
             flex-grow: 1; -webkit-appearance: none; appearance: none;
-            width: 100%; height: 8px; /* Thinner track */
+            width: 100%; height: 8px;
             background: #EAF0F6;
             border-radius: 4px; outline: none;
             cursor: pointer;
@@ -360,16 +360,16 @@
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none; appearance: none;
-            width: 22px; height: 22px; /* Slightly smaller thumb */
+            width: 22px; height: 22px;
             background: #fff;
             border-radius: 50%; cursor: pointer;
-            border: 3px solid var(--accent-primary); /* Thinner border */
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Adjusted shadow */
+            border: 3px solid var(--accent-primary);
+            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
             margin-top: -7px;
             transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
          input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:focus::-webkit-slider-thumb {
-            transform: scale(1.2); /* More pronounced hover/focus */
+            transform: scale(1.2);
             box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
         }
         input[type="range"]::-moz-range-thumb {
@@ -387,18 +387,18 @@
         }
         #temperature-value {
             font-weight: 700; background-color: var(--input-bg);
-            padding: 0.5rem 1rem; /* Adjusted padding */
-            border-radius: 8px; /* Adjusted radius */
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
             border: 1px solid var(--panel-border);
-            min-width: 45px; text-align: center; /* Adjusted min-width */
+            min-width: 45px; text-align: center;
             color: var(--accent-primary);
-            font-size: 1em; /* Adjusted size */
+            font-size: 1em;
             box-shadow: var(--shadow-subtle);
         }
 
         #generate-btn {
-            width: 100%; padding: 1rem 1.5rem; /* Adjusted padding */
-            font-size: 1.25em; font-weight: 800; /* Adjusted size */
+            width: 100%; padding: 1rem 1.5rem;
+            font-size: 1.25em; font-weight: 800;
             font-family: var(--app-font);
             background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
             color: #fff;
@@ -406,25 +406,25 @@
             border-radius: var(--radius-input);
             cursor: pointer;
             transition: var(--transition-smooth), transform 0.15s ease-out;
-            box-shadow: 0 5px 15px -4px rgba(59, 130, 246, 0.45), 0 5px 15px -4px rgba(16, 185, 129, 0.35); /* Adjusted shadow */
+            box-shadow: 0 5px 15px -4px rgba(59, 130, 246, 0.45), 0 5px 15px -4px rgba(16, 185, 129, 0.35);
             position: relative;
             overflow: hidden;
             letter-spacing: 0.5px;
         }
         #generate-btn::before {
             content: ''; position: absolute;
-            top: 0; left: -180%; width: 80%; height: 100%; /* Adjusted for effect */
+            top: 0; left: -180%; width: 80%; height: 100%;
             background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
-            transform: skewX(-30deg); /* Steeper angle */
-            transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1); /* Slower, smoother shine */
+            transform: skewX(-30deg);
+            transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
         }
         #generate-btn:hover::before { left: 180%; }
         #generate-btn:hover:not(:disabled) {
-            transform: translateY(-5px) scale(1.02); /* More lift */
-            box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45); /* Stronger shadow */
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45);
         }
         #generate-btn:active:not(:disabled) {
-            transform: translateY(-2px) scale(0.98); /* More pronounced active state */
+            transform: translateY(-2px) scale(0.98);
         }
         #generate-btn:disabled {
             background: #B8C2CC;
@@ -438,11 +438,11 @@
         }
 
         #output-section {
-            margin-top: 3rem; /* Adjusted margin */
-            padding: 2rem; /* Adjusted padding */
+            margin-top: 3rem;
+            padding: 2rem;
             background-color: var(--input-bg);
             border-radius: var(--radius-card);
-            min-height: 200px; /* Adjusted min-height */
+            min-height: 200px;
             display: flex; align-items: center; justify-content: center;
             flex-direction: column; gap: 1.5rem;
             border: 2px dashed var(--panel-border);
@@ -454,7 +454,7 @@
              background-color: #fff;
              border-style: solid;
              border-color: var(--accent-secondary);
-             box-shadow: 0 0 30px -8px rgba(16, 185, 129, 0.25); /* Soft glow when content is present */
+             box-shadow: 0 0 30px -8px rgba(16, 185, 129, 0.25);
              padding: 1.5rem;
         }
         #output-section.has-content #status-message,
@@ -462,12 +462,11 @@
             display: none !important;
         }
 
-        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; } /* Adjusted size */
+        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
         #audio-player { width: 100%; margin-top: 0; display: none; border-radius: 10px; box-shadow: var(--shadow-medium); }
         #output-section.has-content #audio-player {
             margin-top: 0;
         }
-        /* Customize audio player (browser-specific, may not work everywhere) */
         #audio-player::-webkit-media-controls-panel { background-color: #fdfdff; border-radius: 10px; padding: 5px; box-shadow: var(--shadow-subtle) inset;}
         #audio-player::-webkit-media-controls-play-button { color: var(--accent-primary); background-color: rgba(59, 130, 246, 0.1); border-radius: 50%; margin: 5px;}
         #audio-player::-webkit-media-controls-current-time-display,
@@ -481,20 +480,20 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            gap: 1.8rem; /* Adjusted gap */
+            gap: 1.8rem;
             width: 100%;
             min-height: 150px;
         }
         .orbital-loader {
-            width: 110px; /* Slightly smaller */
+            width: 110px;
             height: 110px;
             position: relative;
-            animation: rotate-loader-orbital 10s linear infinite; /* Faster rotation */
+            animation: rotate-loader-orbital 10s linear infinite;
         }
         .orbit {
             position: absolute;
             top: 50%; left: 50%;
-            border: 2px dashed rgba(59, 130, 246, 0.25); /* Lighter dash */
+            border: 2px dashed rgba(59, 130, 246, 0.25);
             border-radius: 50%;
             transform-origin: center center;
         }
@@ -504,14 +503,14 @@
 
         .orbit .satellite {
             position: absolute;
-            width: 10px; height: 10px; /* Smaller satellites */
+            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); /* Adjusted shadow */
+            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; } /* Added delay */
-        .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;} /* Added delay */
+        .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;}
 
         @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
         @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@@ -528,7 +527,7 @@
             to { transform: scale(1.1) translateX(50%); opacity: 1; }
         }
         #loading-text {
-            font-size: 1.2em; /* Adjusted size */
+            font-size: 1.2em;
             font-weight: 700;
             color: var(--text-primary);
             text-align: center;
@@ -691,15 +690,14 @@
             // Character Counter
             const charCountSpan = document.getElementById('char-count');
             const charMaxSpan = document.getElementById('char-max');
-            const MAX_CHARS = 1000; // You can change this
-            // textInput.maxLength = MAX_CHARS; // Optional: Enforce limit in HTML
+            const MAX_CHARS = 1000;
             charMaxSpan.textContent = MAX_CHARS;
 
             textInput.addEventListener('input', () => {
                 const currentLength = textInput.value.length;
                 charCountSpan.textContent = currentLength;
                 if (currentLength > MAX_CHARS) {
-                    charCountSpan.style.color = 'var(--accent-secondary-hover)'; // Or some error color
+                    charCountSpan.style.color = 'var(--accent-secondary-hover)';
                 } else {
                     charCountSpan.style.color = 'var(--accent-primary)';
                 }
@@ -712,7 +710,6 @@
 
             function getImageUrl(speaker, index, size = 'thumb') {
                 const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
-                // A simple way to get somewhat varied images based on index and ID length
                 const imageIndex = (index * 7 + speaker.id.length * 3 + 5) % 100;
                 let portraitSizePath = 'thumb/';
                 if (size === 'large') portraitSizePath = '';
@@ -747,13 +744,11 @@
                     `;
 
                     cardLabel.addEventListener('click', (e) => {
-                        // Ensure radio gets checked even if label's child is clicked
                         if (e.target.name !== "modal_speaker_selection") {
                              const radio = cardLabel.querySelector('input[type="radio"]');
                              if(radio) radio.checked = true;
                         }
                         updateSelectedSpeakerDisplay(speaker.id);
-                        // Add a slight delay for visual feedback before closing
                         setTimeout(() => speakerModal.classList.remove('visible'), 200);
                     });
 
@@ -764,12 +759,11 @@
             function openSpeakerModal() {
                 createSpeakerCardsInModal();
                 speakerModal.classList.add('visible');
-                // Focus management for accessibility
                 setTimeout(() => {
                     const firstFocusable = speakerModal.querySelector('input[type="radio"]:checked, input[type="radio"], .close-modal-btn');
                     if (firstFocusable) firstFocusable.focus();
-                    else closeModalBtn.focus(); // Fallback
-                }, 50); // Allow modal transition to start
+                    else closeModalBtn.focus();
+                }, 50);
             }
 
             changeSpeakerBtn.addEventListener('click', openSpeakerModal);
@@ -777,7 +771,7 @@
 
             closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
             speakerModal.addEventListener('click', (e) => {
-                if (e.target === speakerModal) { // Click on backdrop
+                if (e.target === speakerModal) {
                     speakerModal.classList.remove('visible');
                 }
             });
@@ -789,7 +783,6 @@
 
             tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
 
-            // Tooltip functionality
             tempInfoIcon.addEventListener('click', (e) => {
                 e.stopPropagation();
                 tempInfoIcon.classList.toggle('active');
@@ -836,7 +829,7 @@
                     outputSection.classList.remove('has-content');
                 }
                 generateBtn.disabled = false;
-                generateBtn.innerHTML = '✨ تولید صدا با آلفا'; // Restored original text
+                generateBtn.innerHTML = '✨ تولید صدا با آلفا';
             }
 
             async function generateAudio(event) {
@@ -880,7 +873,7 @@
 
                     let finalFilePath = null;
                     const startTime = Date.now();
-                    const timeoutDuration = 90000; // 90 seconds timeout
+                    const timeoutDuration = 90000;
 
                     while (Date.now() - startTime < timeoutDuration) {
                         const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
@@ -906,7 +899,7 @@
                                         console.error("Invalid server response structure or unsuccessful processing:", data);
                                         throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
                                     }
-                                    break; // Exit inner loop once completed
+                                    break;
                                 } else if (data.msg === 'queue_full') {
                                     throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
                                 }
@@ -914,8 +907,8 @@
                                 console.warn("Error parsing JSON from stream:", e, "Line:", line);
                             }
                         }
-                        if (finalFilePath) break; // Exit outer loop if file path is found
-                        await new Promise(resolve => setTimeout(resolve, 1000)); // Poll every second
+                        if (finalFilePath) break;
+                        await new Promise(resolve => setTimeout(resolve, 1000));
                     }
 
                     if (finalFilePath) {
@@ -934,17 +927,14 @@
                 }
             }
 
-            // Initial setup
             updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
             form.addEventListener('submit', generateAudio);
 
-            // Initial state for output section
             statusMessage.style.display = 'block';
             loadingAnimationWrapper.style.display = 'none';
             audioPlayer.style.display = 'none';
             outputSection.classList.remove('has-content');
 
-            // Add a keyframe for the spinner SVG in JS to keep it local
             const styleSheet = document.createElement("style")
             styleSheet.type = "text/css"
             styleSheet.innerText = `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`;