Veu3

Running

App Files Files Community

Hamed744 commited on Jun 9

Commit

1827ca5

verified ·

1 Parent(s): 72b0cbe

Update index.html

Browse files

Files changed (1) hide show

index.html +502 -322

index.html CHANGED Viewed

@@ -3,319 +3,439 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Alpha TTS - نسخه Premium</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
         :root {
-            --font-family: 'Vazirmatn', sans-serif;
-            --bg-color: #0c0a18;
-            --panel-bg: rgba(22, 19, 41, 0.45);
-            --panel-border: rgba(255, 255, 255, 0.15);
-            --text-primary: #f0f0f5;
-            --text-secondary: #a09cb8;
-            --accent-primary: #8a42e5;
-            --accent-secondary: #3b82f6;
-            --accent-glow: rgba(138, 66, 229, 0.5);
-            --radius-card: 28px;
-            --radius-input: 14px;
-            --shadow-button: 0 6px 20px -5px rgba(138, 66, 229, 0.6);
-        }
-        *, *::before, *::after { box-sizing: border-box; }
         body {
-            font-family: var(--font-family);
             direction: rtl;
-            background-color: var(--bg-color);
             color: var(--text-primary);
             font-size: 16px;
-            line-height: 1.7;
             margin: 0;
             min-height: 100vh;
             display: flex;
-            align-items: center;
             justify-content: center;
-            overflow: hidden;
-            position: relative;
         }
-        /* --- Aurora Background Animation --- */
-        .aurora-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
-        .aurora-background::before, .aurora-background::after {
-            content: '';
-            position: absolute;
-            width: 800px;
-            height: 800px;
-            border-radius: 50%;
-            filter: blur(150px);
-            opacity: 0.3;
         }
-        .aurora-background::before {
-            background: radial-gradient(circle, var(--accent-primary), transparent 60%);
-            top: -20%;
-            right: -20%;
-            animation: moveAurora1 25s infinite alternate ease-in-out;
         }
-        .aurora-background::after {
-            background: radial-gradient(circle, var(--accent-secondary), transparent 60%);
-            bottom: -20%;
-            left: -20%;
-            animation: moveAurora2 30s infinite alternate-reverse ease-in-out;
         }
-        @keyframes moveAurora1 {
-            from { transform: translate(0, 0) rotate(0deg); }
-            to { transform: translate(100px, 50px) rotate(45deg); }
         }
-        @keyframes moveAurora2 {
-            from { transform: translate(0, 0) rotate(0deg); }
-            to { transform: translate(-50px, -100px) rotate(-60deg); }
         }
-        .container { max-width: 1000px; width: 95%; padding: 2rem 0; }
-        .app-header { text-align: center; margin-bottom: 2rem; }
-        .app-header h1 { font-size: 3.5em; font-weight: 800; margin: 0; color: #fff; text-shadow: 0 0 20px var(--accent-glow); }
-        .app-header p { font-size: 1.25em; color: var(--text-secondary); margin-top: 0.5rem; }
-        /* --- Glassmorphism Main Panel --- */
-        .main-interface {
-            background: var(--panel-bg);
             border: 1px solid var(--panel-border);
-            border-radius: var(--radius-card);
-            backdrop-filter: blur(25px);
-            -webkit-backdrop-filter: blur(25px);
-            padding: 2.5rem;
-            display: grid;
-            grid-template-columns: 1.2fr 1fr;
-            gap: 3rem;
-            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
-        }
-        .input-column, .output-column { display: flex; flex-direction: column; }
-        .form-group { margin-bottom: 2rem; }
-        label { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; }
-        textarea, input[type="text"] {
-            width: 100%;
-            padding: 1rem 1.2rem;
-            border-radius: var(--radius-input);
             border: 1px solid var(--panel-border);
-            background-color: rgba(0,0,0,0.2);
-            color: var(--text-primary);
-            font-family: var(--font-family);
-            font-size: 1rem;
-            transition: all 0.25s ease;
-        }
-        textarea { resize: vertical; min-height: 120px; }
-        textarea:focus, input[type="text"]:focus {
-            outline: none;
-            border-color: var(--accent-primary);
-            background-color: rgba(0,0,0,0.3);
-            box-shadow: 0 0 15px var(--accent-glow);
-        }
-        /* --- Speaker Carousel --- */
-        #speaker-carousel { display: flex; overflow-x: auto; gap: 1rem; padding-bottom: 1rem; margin-bottom: 2rem; scrollbar-width: thin; scrollbar-color: var(--accent-primary) transparent; }
-        #speaker-carousel::-webkit-scrollbar { height: 6px; }
-        #speaker-carousel::-webkit-scrollbar-thumb { background-color: var(--accent-primary); border-radius: 10px; }
-        .speaker-item {
             cursor: pointer;
-            text-align: center;
-            flex-shrink: 0;
-            opacity: 0.6;
-            transition: all 0.3s ease;
         }
-        .speaker-item img {
-            width: 70px;
-            height: 70px;
-            border-radius: 50%;
-            border: 3px solid transparent;
-            object-fit: cover;
-            transition: all 0.3s ease;
         }
-        .speaker-item.selected { opacity: 1; }
-        .speaker-item.selected img {
-            border-color: var(--accent-primary);
-            box-shadow: 0 0 15px var(--accent-glow);
             transform: scale(1.1);
         }
-        .speaker-item p { margin: 0.5rem 0 0; font-size: 0.9em; font-weight: 500; color: var(--text-secondary); transition: color 0.3s; }
-        .speaker-item.selected p { color: var(--text-primary); font-weight: 600; }
-        /* --- Output Display & Loading Animation --- */
-        #output-display-area {
-            flex-grow: 1;
-            background: rgba(0,0,0,0.25);
-            border-radius: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
             position: relative;
             overflow: hidden;
-            min-height: 250px;
         }
-        .output-content {
             display: none;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            text-align: center;
             width: 100%;
-            padding: 1rem;
-        }
-        #output-display-area[data-state="initial"] #speaker-info,
-        #output-display-area[data-state="loading"] #loading-animation,
-        #output-display-area[data-state="result"] #audio-player-container,
-        #output-display-area[data-state="error"] #error-message {
-            display: flex;
         }
-        #speaker-info img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--panel-border); margin-bottom: 1rem; }
-        #speaker-info h3 { font-size: 1.8em; margin: 0; }
-        #speaker-info p { color: var(--text-secondary); margin: 0.25rem 0 0; }
-        #audio-player { width: 90%; margin: 1rem 0; }
-        #error-message { color: #ff8a8a; }
-        /* --- Premium Loading Animation --- */
-        #loading-animation img {
             width: 120px;
             height: 120px;
-            border-radius: 50%;
-            object-fit: cover;
             position: relative;
-            z-index: 2;
         }
-        .orb-container { position: absolute; width: 250px; height: 250px; }
-        .orb {
             position: absolute;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
             border-radius: 50%;
-            border: 2px solid;
-            mix-blend-mode: screen;
-        }
-        .orb-1 { border-color: var(--accent-primary); animation: rotate-orb 6s infinite linear; }
-        .orb-2 { border-color: var(--accent-secondary); animation: rotate-orb 8s infinite linear reverse; }
-        .orb-3 {
-            border-color: #5eead4;
-            border-style: dotted;
-            animation: rotate-orb 10s infinite linear;
-        }
-        @keyframes rotate-orb {
-            from { transform: rotate(0deg) scale(0.8); opacity: 0.5; }
-            50% { transform: rotate(180deg) scale(1.1); opacity: 1; }
-            to { transform: rotate(360deg) scale(0.8); opacity: 0.5; }
-        }
-        #loading-animation p {
-            margin-top: 1.5rem;
-            position: relative;
-            z-index: 2;
-            font-weight: 500;
-            text-shadow: 0 0 10px var(--bg-color);
         }
-        /* --- Slider & Button --- */
-        .slider-container { display: flex; align-items: center; gap: 1rem; }
-        input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
-        input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: rgba(0,0,0,0.4); border-radius: 3px; }
-        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -9px; width: 24px; height: 24px; background: var(--accent-primary); border-radius: 50%; border: 4px solid var(--bg-color); box-shadow: 0 0 10px var(--accent-glow); }
-        #temperature-value { font-weight: 700; background-color: rgba(0,0,0,0.2); padding: 0.4rem 1rem; border-radius: 8px; min-width: 45px; text-align: center; }
-        #generate-btn {
-            grid-column: 1 / -1; /* Span across both columns */
-            width: 100%;
-            padding: 1.2rem;
-            font-size: 1.3em;
-            font-weight: 700;
-            font-family: var(--font-family);
-            background: linear-gradient(45deg, var(--accent-secondary), var(--accent-primary));
-            color: white;
-            border: none;
-            border-radius: var(--radius-input);
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: var(--shadow-button);
-            margin-top: 1rem;
         }
-        #generate-btn:hover:not(:disabled) { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 25px -5px rgba(138, 66, 229, 0.7); }
-        #generate-btn:disabled { background: #555; cursor: not-allowed; box-shadow: none; transform: none; }
     </style>
 </head>
 <body>
-    <div class="aurora-background"></div>
     <div class="container">
         <header class="app-header">
-            <h1>Alpha TTS</h1>
-            <p>نسل جدید تبدیل متن به صدا</p>
         </header>
-        <main class="main-interface">
-            <div class="input-column">
-                <form id="tts-form">
-                    <div class="form-group">
-                        <label for="text-input">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
-                            متن اصلی
-                        </label>
-                        <textarea id="text-input" rows="6" placeholder="متن خود را برای تبدیل به صدا اینجا وارد کنید...">این یک آزمایش برای بررسی کیفیت صدای تولید شده توسط هوش مصنوعی آلفا است.</textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="prompt-input">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 15-3-3a3 3 0 0 1 3-3 3 3 0 0 1 3 3l-3 3"></path><path d="m19 9-3 3"></path><path d="M5 15l3-3"></path></svg>
-                            راهنمای لحن (اختیاری)
-                        </label>
-                        <input type="text" id="prompt-input" value="با صدایی آرام و دلنشین." placeholder="مثال: با لحنی شاد و پرانرژی">
-                    </div>
-                     <div class="form-group">
-                        <label for="temperature-slider">
-                           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z"></path></svg>
-                            میزان خلاقیت
-                        </label>
-                        <div class="slider-container">
-                            <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
-                            <span id="temperature-value">0.9</span>
                         </div>
                     </div>
-                </form>
-            </div>
-            <div class="output-column">
-                <label>انتخاب گوینده</label>
-                <div id="speaker-carousel"></div>
-                <div id="output-display-area" data-state="initial">
-                    <!-- State 1: Initial Speaker Info -->
-                    <div id="speaker-info" class="output-content">
-                        <img id="selected-speaker-img" src="" alt="عکس گوینده">
-                        <h3 id="selected-speaker-name"></h3>
-                        <p>گوینده منتخب شما</p>
                     </div>
-                    <!-- State 2: Loading Animation -->
-                    <div id="loading-animation" class="output-content">
-                        <div class="orb-container">
-                           <div class="orb orb-1"></div>
-                           <div class="orb orb-2"></div>
-                           <div class="orb orb-3"></div>
-                        </div>
-                        <img id="loading-speaker-img" src="" alt="عکس گوینده در حال پردازش">
-                        <p>در حال خلق صدا با هوش مصنوعی آلفا...</p>
-                    </div>
-                    <!-- State 3: Result -->
-                    <div id="audio-player-container" class="output-content">
-                         <p>فایل صوتی شما آماده است!</p>
-                         <audio id="audio-player" controls></audio>
-                    </div>
-                    <!-- State 4: Error -->
-                     <div id="error-message" class="output-content">
-                         <p></p>
-                    </div>
                 </div>
             </div>
-            <button type="submit" id="generate-btn" form="tts-form">✨ خلق صدا</button>
         </main>
     </div>
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
@@ -328,7 +448,7 @@
             const FN_INDEX = 1;
             const speakers = [
-                { id: "Zephyr", name: "آوا (زن)" }, { id: "Charon", name: "شهاب (مرد)" }, { id: "Zubenelgenubi", name: "رویا (زن)" }, { id: "Achird", name: "نوید (مرد)" }, { id: "Sadachbia", name: "پریسا (زن)" }, { id: "Vindemiatrix", name: "کیان (مرد)" }, { id: "Sulafat", name: "شبنم (زن)" }, { id: "Sadaltager", name: "آرش (مرد)" }, { id: "Achernar", name: "مریم (زن)" }, { id: "Laomedeia", name: "سهیل (مرد)" }, { id: "Schedar", name: "نگار (زن)" }, { id: "Alnilam", name: "بهرام (مرد)" }, { id: "Pulcherrima", name: "سارا (زن)" }
             ];
             const form = document.getElementById('tts-form');
@@ -337,85 +457,131 @@
             const tempSlider = document.getElementById('temperature-slider');
             const tempValueSpan = document.getElementById('temperature-value');
             const generateBtn = document.getElementById('generate-btn');
-            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
-            const speakerCarousel = document.getElementById('speaker-carousel');
-            const outputDisplayArea = document.getElementById('output-display-area');
-            const selectedSpeakerImg = document.getElementById('selected-speaker-img');
-            const loadingSpeakerImg = document.getElementById('loading-speaker-img');
-            const selectedSpeakerName = document.getElementById('selected-speaker-name');
             const audioPlayer = document.getElementById('audio-player');
-            const errorMessageP = document.querySelector('#error-message p');
-            function getImageUrl(speaker, index, size = 'med') {
-                const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
-                const imageIndex = (index * 5 + 10) % 100; // Formula for variety
-                return `https://randomuser.me/api/portraits/${size}/${gender}/${imageIndex}.jpg`;
             }
             function updateSelectedSpeakerDisplay(speakerId) {
-                const speaker = speakers.find(s => s.id === speakerId);
-                const speakerIndex = speakers.findIndex(s => s.id === speakerId);
                 if (speaker) {
                     selectedSpeakerIdStorage.value = speaker.id;
-                    selectedSpeakerImg.src = getImageUrl(speaker, speakerIndex, 'men'); // Large image
-                    loadingSpeakerImg.src = getImageUrl(speaker, speakerIndex, 'men'); // Image for loading animation
-                    selectedSpeakerName.textContent = speaker.name;
-                    // Update carousel selection
-                    document.querySelectorAll('.speaker-item').forEach(item => {
-                        item.classList.toggle('selected', item.dataset.speakerId === speakerId);
-                    });
                 }
             }
-            function populateSpeakerCarousel() {
-                speakerCarousel.innerHTML = '';
                 speakers.forEach((speaker, index) => {
-                    const item = document.createElement('div');
-                    item.className = 'speaker-item';
-                    item.dataset.speakerId = speaker.id;
-                    item.innerHTML = `
-                        <img src="${getImageUrl(speaker, index, 'thumb')}" alt="${speaker.name}">
-                        <p>${speaker.name.split(' ')[0]}</p>
                     `;
-                    item.addEventListener('click', () => {
                         updateSelectedSpeakerDisplay(speaker.id);
-                        outputDisplayArea.dataset.state = 'initial'; // Reset state on speaker change
                     });
-                    speakerCarousel.appendChild(item);
                 });
             }
-            function setOutputState(state, message = '') {
-                outputDisplayArea.dataset.state = state;
-                if (state === 'error') {
-                    errorMessageP.textContent = message;
                 }
-            }
             tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
             async function generateAudio(event) {
                 event.preventDefault();
-                setOutputState('loading');
-                generateBtn.disabled = true;
-                generateBtn.textContent = 'در حال پردازش...';
                 const text = textInput.value;
                 if (!text.trim()) {
-                    setOutputState('error', 'خطا: متن ورودی نمی‌تواند خالی باشد.');
-                    generateBtn.disabled = false;
-                    generateBtn.textContent = '✨ خلق صدا';
                     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 {
@@ -425,48 +591,62 @@
                         body: JSON.stringify(payload)
                     });
-                    if (!joinQueueResponse.ok) throw new Error(`خطای سرور (${joinQueueResponse.status})`);
-                    const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${payload.session_hash}`);
                     const reader = dataResponse.body.getReader();
                     const decoder = new TextDecoder();
                     let finalFilePath = null;
                     while (true) {
                         const { value, done } = await reader.read();
                         if (done) break;
-                        const line = decoder.decode(value);
-                        if (line.includes('"msg": "process_completed"')) {
-                           try {
-                                const data = JSON.parse(line.substring(5)); // remove "data:"
-                                if (data.success && data.output.data[0]) {
-                                    finalFilePath = data.output.data[0].name || data.output.data[0].path;
                                 }
-                           } catch(e) { /* ignore parse errors of partial data */ }
-                           break;
                         }
                     }
                     if (finalFilePath) {
-                        audioPlayer.src = `${FILE_URL_BASE}${finalFilePath}`;
-                        audioPlayer.oncanplay = () => {
-                             setOutputState('result');
-                        };
                     } else {
-                        throw new Error('پاسخی از سرور دریافت نشد. لطفا دوباره تلاش کنید.');
                     }
                 } catch (error) {
-                    console.error('یک خطا در فرآیند رخ داد:', error);
-                    setOutputState('error', `یک خطا رخ داد: ${error.message}`);
-                } finally {
-                    generateBtn.disabled = false;
-                    generateBtn.textContent = '✨ خلق صدا';
                 }
             }
-            populateSpeakerCarousel();
-            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value);
             form.addEventListener('submit', generateAudio);
         });
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alpha TTS Premium - تبدیل متن به صدا</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800;900&display=swap');
         :root {
+            --app-font: 'Vazirmatn', sans-serif;
+            --app-bg: #0D1117; /* Deep dark blue/black */
+            --panel-bg: #161B22; /* Slightly lighter dark */
+            --panel-border: #30363D;
+            --text-primary: #C9D1D9; /* Light gray for text */
+            --text-secondary: #8B949E; /* Medium gray */
+            --accent-primary: #58A6FF; /* Bright blue accent */
+            --accent-primary-hover: #79C0FF;
+            --accent-secondary: #A371F7; /* Purple accent */
+            --accent-secondary-hover: #B38FF9;
+            --radius-card: 16px;
+            --radius-input: 10px;
+            --shadow-strong: 0 10px 30px -10px rgba(0,0,0,0.3);
+            --shadow-glow-accent: 0 0 25px -5px var(--accent-primary);
+            --shadow-glow-secondary: 0 0 25px -5px var(--accent-secondary);
+        }
         body {
+            font-family: var(--app-font);
             direction: rtl;
+            background-color: var(--app-bg);
             color: var(--text-primary);
             font-size: 16px;
+            line-height: 1.75;
             margin: 0;
+            padding: 0;
             min-height: 100vh;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
             display: flex;
             justify-content: center;
+            align-items: flex-start; /* Align to top for long content */
+            padding-top: 3rem;
+            padding-bottom: 3rem;
         }
+        .container {
+            max-width: 700px;
+            width: 90%;
+            margin: 0 auto;
         }
+        .app-header {
+            padding: 1rem 0 2rem 0;
+            text-align: center;
+            margin-bottom: 2rem;
         }
+        .app-header h1 {
+            font-size: 3.2em;
+            font-weight: 800;
+            margin:0 0 0.5rem 0;
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
         }
+        .app-header p {
+            font-size: 1.1em;
+            color: var(--text-secondary);
+            margin-top:0;
+            opacity: 0.9;
         }
+        .main-content {
+            padding: 2.5rem;
+            background-color: var(--panel-bg);
+            border-radius: var(--radius-card);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.2), 0 0 0 1px var(--panel-border);
+            border: 1px solid var(--panel-border);
         }
+        .form-group { margin-bottom: 2.5rem; }
+        label {
+            display: block;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 1.05em;
+            margin-bottom: 0.8rem;
+        }
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 0.9rem 1rem;
+            border-radius: var(--radius-input);
+            border: 1px solid var(--panel-border);
+            background-color: #0D1117; /* Darker than panel for contrast */
+            color: var(--text-primary);
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+            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(--accent-primary);
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 0 3px rgba(88, 166, 255, 0.3);
+            background-color: #10151D;
+        }
+        textarea { min-height: 100px; }
+        /* --- نمایش گوینده منتخب --- */
+        #selected-speaker-display { text-align: center; margin-top: 1rem; }
+        #selected-speaker-card {
+            display: inline-flex;
+            align-items: center;
+            background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
+            border-radius: 99px;
+            padding: 12px 15px 12px 25px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
             border: 1px solid var(--panel-border);
+            transition: all 0.3s ease;
+        }
+        #selected-speaker-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.25), var(--shadow-glow-secondary);
+        }
+        #selected-speaker-card img {
+            width: 70px; height: 70px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-left: 20px;
+            border: 3px solid var(--accent-secondary);
+            box-shadow: 0 0 15px -2px var(--accent-secondary);
+            background-color: #333;
+        }
+        #selected-speaker-info h3 { margin: 0; font-size: 1.3em; font-weight: 700; color: var(--text-primary); }
+        #selected-speaker-info p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.85em; }
+        #change-speaker-btn {
+            display: block; margin: 1rem auto 0;
+            padding: 10px 22px;
+            border-radius: var(--radius-input);
+            background-color: transparent;
+            border: 1px solid var(--accent-primary);
+            color: var(--accent-primary);
+            cursor: pointer;
+            font-family: var(--app-font); font-weight: 500;
+            transition: all 0.2s ease;
+        }
+        #change-speaker-btn:hover {
+            background-color: rgba(88, 166, 255, 0.1);
+            box-shadow: 0 0 10px -2px var(--accent-primary);
+            transform: translateY(-1px);
+        }
+        /* --- مودال گالری گویندگان --- */
+        #speaker-modal {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-color: rgba(13, 17, 23, 0.8);
+            backdrop-filter: blur(10px) saturate(180%);
+            display: none; align-items: center; justify-content: center;
+            z-index: 1000; opacity: 0;
+            transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+        #speaker-modal.visible { display: flex; opacity: 1; }
+        .modal-content {
+            background: var(--panel-bg);
+            padding: 2rem;
+            border-radius: var(--radius-card);
+            width: 90%; max-width: 650px;
+            max-height: 85vh; overflow-y: auto;
+            transform: scale(0.9);
+            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
             border: 1px solid var(--panel-border);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.4);
+        }
+        #speaker-modal.visible .modal-content { transform: scale(1); }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
+        .modal-header h2 { margin: 0; font-size: 1.5em; }
+        .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: all 0.2s ease; line-height: 1; }
+        .close-modal-btn:hover { color: var(--text-primary); transform: rotate(90deg) scale(1.1); }
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 1.2rem; }
+        @media (min-width: 576px) { #speaker-grid { grid-template-columns: repeat(4, 1fr); } }
+        .speaker-card { cursor: pointer; transition: all 0.3s ease; text-align: center; position: relative;}
+        .speaker-card .speaker-visual {
+            border: 3px solid transparent;
+            border-radius: var(--radius-card);
+            overflow: hidden;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+            position: relative;
+            background-color: #0D1117;
+            transition: all 0.3s ease;
+        }
+        .speaker-card:hover .speaker-visual {
+            transform: translateY(-5px) scale(1.03);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+        }
+        .speaker-card input[type="radio"] { display: none; }
+        .speaker-card img {
+            width: 100%; height: 110px;
+            object-fit: cover; display: block;
+            background-color: #333;
+            filter: grayscale(30%);
+            transition: filter 0.3s ease;
+        }
+        .speaker-card:hover img, .speaker-card input[type="radio"]:checked + .speaker-visual img {
+            filter: grayscale(0%);
+        }
+        .speaker-card .speaker-name { padding: 0.7rem 0.5rem; font-weight: 500; font-size: 0.9em; color: var(--text-secondary); }
+        .speaker-card input[type="radio"]:checked + .speaker-visual {
+            border-color: var(--accent-secondary);
+            box-shadow: 0 0 20px -4px var(--accent-secondary);
+        }
+        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
+            color: var(--accent-secondary);
+            font-weight: 700;
+        }
+        /* --- Slider & Button & Output --- */
+        .slider-container { display: flex; align-items: center; gap: 1.2rem; }
+        input[type="range"] {
+            flex-grow: 1; -webkit-appearance: none; appearance: none;
+            width: 100%; height: 6px;
+            background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+            border-radius: 3px; outline: none; opacity: 0.7; transition: opacity .2s;
             cursor: pointer;
         }
+        input[type="range"]:hover { opacity: 1; }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none; appearance: none;
+            width: 22px; height: 22px;
+            background: #fff;
+            border-radius: 50%; cursor: pointer;
+            border: 3px solid var(--accent-primary);
+            box-shadow: 0 0 8px rgba(88, 166, 255, 0.5);
+            transition: transform 0.2s ease;
         }
+         input[type="range"]::-webkit-slider-thumb:hover {
             transform: scale(1.1);
         }
+        input[type="range"]::-moz-range-thumb {
+            width: 22px; height: 22px;
+            background: #fff;
+            border-radius: 50%; cursor: pointer;
+            border: 3px solid var(--accent-primary);
+            box-shadow: 0 0 8px rgba(88, 166, 255, 0.5);
+        }
+        #temperature-value {
+            font-weight: bold; background-color: rgba(255,255,255,0.05);
+            padding: 0.3rem 0.9rem;
+            border-radius: 8px;
+            border: 1px solid var(--panel-border);
+            min-width: 40px; text-align: center;
+            color: var(--text-primary);
+        }
+        #generate-btn {
+            width: 100%; padding: 1.1rem 1.5rem;
+            font-size: 1.2em; font-weight: 700;
+            font-family: var(--app-font);
+            background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+            color: #0D1117; /* Dark text on bright button */
+            border: none;
+            border-radius: var(--radius-input);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px -5px var(--accent-primary), 0 4px 15px -5px var(--accent-secondary);
             position: relative;
             overflow: hidden;
         }
+        #generate-btn::before {
+            content: '';
+            position: absolute;
+            top: 0; left: -100%;
+            width: 100%; height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            transition: left 0.5s ease;
+        }
+        #generate-btn:hover::before {
+            left: 100%;
+        }
+        #generate-btn:hover:not(:disabled) {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px -5px var(--accent-primary), 0 6px 20px -5px var(--accent-secondary);
+        }
+        #generate-btn:disabled {
+            background: var(--text-secondary);
+            cursor: not-allowed; box-shadow: none; color: #0D1117; opacity: 0.7;
+            transform: none;
+        }
+        #generate-btn:disabled::before {
             display: none;
+        }
+        #output-section {
+            margin-top: 3rem;
+            padding: 2.5rem;
+            background-color: rgba(255,255,255,0.02);
+            border-radius: var(--radius-card);
+            min-height: 200px;
+            display: flex; align-items: center; justify-content: center;
+            flex-direction: column; gap: 1.5rem;
+            border: 1px dashed var(--panel-border);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
+        #audio-player { width: 100%; margin-top: 1rem; display: none; filter: invert(90%) hue-rotate(180deg); } /* Custom style for dark theme */
+        #audio-player::-webkit-media-controls-panel { background-color: var(--panel-bg); }
+        #audio-player::-webkit-media-controls-play-button { color: var(--accent-primary); }
+        /* --- انیمیشن پردازش فوق العاده زیبا --- */
+        #loading-animation-wrapper {
+            display: none; /* Hidden by default */
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            gap: 1.5rem;
             width: 100%;
+            min-height: 150px; /* Ensure it takes space */
         }
+        .aurora-loader {
             width: 120px;
             height: 120px;
             position: relative;
+            filter: drop-shadow(0 0 10px var(--accent-primary)) drop-shadow(0 0 20px var(--accent-secondary));
         }
+        .aurora-loader::before,
+        .aurora-loader::after {
+            content: "";
             position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 100%;
+            height: 100%;
             border-radius: 50%;
+            background: radial-gradient(circle, transparent 30%, var(--accent-primary) 50%, var(--accent-secondary) 70%, transparent 90%);
+            opacity: 0.7;
+            transform-origin: center center;
+            animation: aurora-spin 4s linear infinite, aurora-pulse 3s ease-in-out infinite alternate;
         }
+        .aurora-loader::after {
+            width: 80%;
+            height: 80%;
+            background: radial-gradient(circle, transparent 20%, var(--accent-secondary) 40%, var(--accent-primary) 60%, transparent 80%);
+            animation-delay: -2s; /* Offset animation */
+            opacity: 0.5;
         }
+        @keyframes aurora-spin {
+            0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.8); }
+            50% { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
+            100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.8); }
+        }
+        @keyframes aurora-pulse {
+            0% { filter: brightness(0.8) blur(2px); }
+            100% { filter: brightness(1.2) blur(0px); }
+        }
+        #loading-text {
+            font-size: 1.15em;
+            font-weight: 500;
+            color: var(--text-primary);
+            text-align: center;
+            text-shadow: 0 0 5px rgba(255,255,255,0.2);
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="app-header">
+            <h1>آلفا TTS</h1>
+            <p>جادوی تبدیل متن به صدا، با کیفیتی بی‌نظیر برای شما</p>
         </header>
+        <main class="main-content">
+            <form id="tts-form">
+                <div class="form-group">
+                    <label for="text-input">📝 متن برای تبدیل</label>
+                    <textarea id="text-input" rows="4" placeholder="متن خود را با دقت اینجا وارد نمایید...">این یک آزمایش پیشرفته برای بررسی عمق و پویایی صدای تولید شده توسط نسل جدید هوش مصنوعی آلفا است، با تمرکز بر وضوح و طبیعی بودن گفتار.</textarea>
+                </div>
+                <div class="form-group">
+                    <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">
+                        <div id="selected-speaker-card">
+                            <img id="selected-speaker-img" src="" alt="عکس گوینده">
+                            <div id="selected-speaker-info">
+                                <h3 id="selected-speaker-name"></h3>
+                                <p>برای انتخاب گوینده، کلیک کنید</p>
+                            </div>
                         </div>
+                        <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">
+                        <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
+                        <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 class="aurora-loader"></div>
+                    <p id="loading-text">در حال خلق اثر صوتی شما با هوش مصنوعی آلفا...</p>
                 </div>
+                <audio id="audio-player" controls></audio>
             </div>
         </main>
     </div>
+    <div id="speaker-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>انتخاب استاد صدا</h2>
+                <button type="button" class="close-modal-btn">×</button>
+            </div>
+            <div id="speaker-grid"></div>
+        </div>
+    </div>
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
             const FN_INDEX = 1;
             const speakers = [
+                { id: "Charon", name: "شهاب (مرد)" }, { id: "Zephyr", name: "آوا (زن)" }, { id: "Achird", name: "نوید (مرد)" }, { id: "Zubenelgenubi", name: "رویا (زن)" }, { id: "Vindemiatrix", name: "کیان (مرد)" }, { id: "Sadachbia", name: "پریسا (زن)" }, { id: "Sadaltager", name: "آرش (مرد)" }, { id: "Sulafat", name: "شبنم (زن)" }, { id: "Laomedeia", name: "سهیل (مرد)" }, { id: "Achernar", name: "مریم (زن)" }, { id: "Alnilam", name: "بهرام (مرد)" }, { id: "Schedar", name: "نگار (زن)" }, { id: "Gacrux", name: "فرید (مرد)" }, { id: "Pulcherrima", name: "سارا (زن)" }, { id: "Umbriel", name: "مانی (مرد)" }, { id: "Algieba", name: "آناهیتا (زن)" }, { id: "Despina", name: "دلنواز (زن)" }, { id: "Erinome", name: "رسا (مرد)" }, { id: "Algenib", name: "امید (مرد)" }, { id: "Rasalthgeti", name: "الهه (زن)" }, { id: "Orus", name: "بردیا (مرد)" }, { id: "Aoede", name: "ترانه (زن)" }, { id: "Callirrhoe", name: "نیما (مرد)" }, { id: "Autonoe", name: "هستی (زن)" }, { id: "Enceladus", name: "کامیار (مرد)" }, { id: "Iapetus", name: "ستاره (زن)" }, { id: "Puck", name: "پویا (مرد)" }, { id: "Kore", name: "مهتاب (زن)" }, { id: "Fenrir", name: "سام (مرد)" }, { id: "Leda", name: "لیدا (زن)" }
             ];
             const form = document.getElementById('tts-form');
             const tempSlider = document.getElementById('temperature-slider');
             const tempValueSpan = document.getElementById('temperature-value');
             const generateBtn = document.getElementById('generate-btn');
+            const statusMessage = document.getElementById('status-message');
             const audioPlayer = document.getElementById('audio-player');
+            const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
+            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');
+            function getSpeakerById(id) {
+                return speakers.find(s => s.id === id);
             }
+            function getImageUrl(speaker, index, size = 'medium') { // 'thumb', 'medium', 'large'
+                const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego');
+                const imageIndex = (index * 11 + 23) % 100; // Slightly different formula for variety
+                 // randomuser.me API provides different sizes. For "thumb" in modal, 'large' for selected.
+                let portraitSize = 'thumb'; // default for modal
+                if (size === 'large') portraitSize = ''; // API uses no path for largest, just /men/idx.jpg
+                return `https://randomuser.me/api/portraits/${portraitSize ? portraitSize+'/' : ''}${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, 'large');
+                    selectedSpeakerNameDisplay.textContent = speaker.name;
                     selectedSpeakerIdStorage.value = speaker.id;
                 }
             }
+            function createSpeakerCardsInModal() {
+                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 = `
+                        <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}>
+                        <div class="speaker-visual">
+                            <img src="${getImageUrl(speaker, index, 'thumb')}" alt="${speaker.name}" loading="lazy">
+                            <div class="speaker-name">${speaker.name}</div>
+                        </div>
                     `;
+                    card.addEventListener('click', () => {
                         updateSelectedSpeakerDisplay(speaker.id);
+                        setTimeout(() => speakerModal.classList.remove('visible'), 250); // Slightly longer for smoother feel
                     });
+                    speakerGridInModal.appendChild(card);
                 });
             }
+            changeSpeakerBtn.addEventListener('click', () => {
+                createSpeakerCardsInModal();
+                speakerModal.classList.add('visible');
+            });
+            // Also allow clicking the selected speaker card to open modal
+            document.getElementById('selected-speaker-card').addEventListener('click', () => {
+                createSpeakerCardsInModal();
+                speakerModal.classList.add('visible');
+            });
+            closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
+            speakerModal.addEventListener('click', (e) => {
+                if (e.target === speakerModal) { // Click on backdrop
+                    speakerModal.classList.remove('visible');
                 }
+            });
             tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
+            function showLoadingState() {
+                statusMessage.style.display = 'none';
+                audioPlayer.style.display = 'none';
+                audioPlayer.src = '';
+                loadingAnimationWrapper.style.display = 'flex';
+                generateBtn.disabled = true;
+                generateBtn.textContent = 'در حال خلق...';
+            }
+            function showResultState(isSuccess, message = '') {
+                loadingAnimationWrapper.style.display = 'none';
+                if (isSuccess) {
+                    statusMessage.style.display = 'none';
+                    audioPlayer.style.display = 'block';
+                    // audioPlayer.play(); // Autoplay can be annoying, let user click
+                } 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()) {
+                    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],
                     event_data: null,
+                    session_hash: sessionHash
                 };
                 try {
                         body: JSON.stringify(payload)
                     });
+                    if (!joinQueueResponse.ok) {
+                         const errorBody = await joinQueueResponse.text();
+                         throw new Error(`خطا در برقراری ارتباط با سرویس (${joinQueueResponse.status}).`);
+                    }
+                    const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
                     const reader = dataResponse.body.getReader();
                     const decoder = new TextDecoder();
                     let finalFilePath = null;
+                    let buffer = '';
                     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') {
+                                    // You could potentially update a progress bar here if the API provided steps
+                                }
+                                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); }
+                                    break;
                                 }
+                            } catch (e) { /* Ignore JSON parse errors on partial stream data */ }
                         }
+                        if (finalFilePath) break;
                     }
                     if (finalFilePath) {
+                        const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
+                        audioPlayer.src = audioUrl;
+                        showResultState(true);
                     } else {
+                        throw new Error('فایل صوتی از سرور دریافت نشد. ممکن است پردازش با مشکل مواجه شده باشد.');
                     }
                 } catch (error) {
+                    console.error('خطا در فرآیند تولید صدا:', error);
+                    showResultState(false, `خطا: ${error.message}`);
                 }
             }
+            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value); // Load default speaker
             form.addEventListener('submit', generateAudio);
+            // Initial state for output section
+            statusMessage.style.display = 'block';
+            loadingAnimationWrapper.style.display = 'none';
+            audioPlayer.style.display = 'none';
         });
     </script>
 </body>