Veu3

Running

App Files Files Community

Hamed744 commited on Jun 6

Commit

e60f4e8

verified ·

1 Parent(s): 5cdc6dd

Update index.html

Browse files

Files changed (1) hide show

index.html +31 -34

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Alpha TTS - رابط کاربری هوشمند</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');
@@ -50,16 +50,16 @@
         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; }
-        /* --- **بخش جدید: نمایش گوینده منتخب** --- */
         #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; }
         #selected-speaker-info h3 { margin: 0; font-size: 1.4em; }
         #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; }
-        /* --- **بخش جدید: مودال گالری گویندگان** --- */
         #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.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; }
@@ -75,7 +75,7 @@
         .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 input[type="radio"] { display: none; }
-        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
         .speaker-card .speaker-name { padding: 0.7rem 0.5rem; font-weight: 500; font-size: 0.9em; }
         .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--app-button-bg); box-shadow: var(--speaker-selected-glow); }
@@ -141,7 +141,6 @@
         </main>
     </div>
-    <!-- Modal برای انتخاب گوینده -->
     <div id="speaker-modal">
         <div class="modal-content">
             <div class="modal-header">
@@ -152,12 +151,10 @@
         </div>
     </div>
-    <!-- این فیلد مخفی برای نگهداری مقدار انتخاب شده است -->
-    <input type="hidden" id="selected_speaker_id" value="Charon">
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // --- پیکربندی و متغیرها ---
             const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
             const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
             const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
@@ -167,8 +164,7 @@
             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: "لیدا (زن)" }
             ];
-            // --- عناصر DOM ---
             const form = document.getElementById('tts-form');
             const textInput = document.getElementById('text-input');
             const promptInput = document.getElementById('prompt-input');
@@ -177,41 +173,48 @@
             const generateBtn = document.getElementById('generate-btn');
             const statusMessage = document.getElementById('status-message');
             const audioPlayer = document.getElementById('audio-player');
-            const selectedSpeakerIdInput = document.getElementById('selected_speaker_id');
             const speakerModal = document.getElementById('speaker-modal');
             const changeSpeakerBtn = document.getElementById('change-speaker-btn');
             const closeModalBtn = document.querySelector('.close-modal-btn');
-            const speakerGrid = document.getElementById('speaker-grid');
-            const selectedSpeakerImg = document.getElementById('selected-speaker-img');
-            const selectedSpeakerName = 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' : 'women';
-                return `https://randomuser.me/api/portraits/thumb/${gender}/${index % 100}.jpg`;
             }
             function updateSelectedSpeakerDisplay(speakerId) {
                 const speaker = getSpeakerById(speakerId);
                 if (speaker) {
-                    selectedSpeakerImg.src = getImageUrl(speaker, speakers.findIndex(s => s.id === speakerId));
-                    selectedSpeakerName.textContent = speaker.name;
-                    selectedSpeakerIdInput.value = speaker.id;
                 }
             }
-            function createSpeakerCards() {
                 speakers.forEach((speaker, index) => {
                     const card = document.createElement('label');
                     card.className = 'speaker-card';
-                    card.setAttribute('for', `speaker-${speaker.id}`);
                     card.innerHTML = `
-                        <input type="radio" name="speaker" value="${speaker.id}" id="speaker-${speaker.id}">
                         <div class="speaker-visual">
                             <img src="${getImageUrl(speaker, index)}" alt="عکس گوینده ${speaker.name}" loading="lazy">
                             <div class="speaker-name">${speaker.name}</div>
@@ -220,19 +223,15 @@
                     card.addEventListener('click', () => {
                         updateSelectedSpeakerDisplay(speaker.id);
-                        // برای بستن خودکار مودال بعد از انتخاب
                         setTimeout(() => speakerModal.classList.remove('visible'), 100);
                     });
-                    speakerGrid.appendChild(card);
                 });
             }
-            // --- رویدادهای مودال ---
             changeSpeakerBtn.addEventListener('click', () => {
-                // به‌روزرسانی انتخاب فعلی در مودال
-                const currentSelected = document.querySelector(`input[name="speaker"][value="${selectedSpeakerIdInput.value}"]`);
-                if(currentSelected) currentSelected.checked = true;
                 speakerModal.classList.add('visible');
             });
             closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
@@ -255,7 +254,7 @@
                 const text = textInput.value;
                 const prompt = promptInput.value;
                 const temperature = parseFloat(tempSlider.value);
-                const selectedSpeaker = selectedSpeakerIdInput.value; // از فیلد مخفی می‌خوانیم
                 const sessionHash = Math.random().toString(36).substring(2);
                 if (!text.trim()) {
@@ -340,9 +339,7 @@
                 }
             }
-            // --- راه‌اندازی اولیه ---
-            createSpeakerCards();
-            updateSelectedSpeakerDisplay(selectedSpeakerIdInput.value); // نمایش گوینده پیش‌فرض
             form.addEventListener('submit', generateAudio);
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alpha TTS - رابط کاربری هوشمند با عکس</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');
         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; }
+        /* --- نمایش گوینده منتخب --- */
         #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-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; }
+        /* --- مودال گالری گویندگان --- */
         #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.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; }
         .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 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 input[type="radio"]:checked + .speaker-visual { border-color: var(--app-button-bg); box-shadow: var(--speaker-selected-glow); }
         </main>
     </div>
     <div id="speaker-modal">
         <div class="modal-content">
             <div class="modal-header">
         </div>
     </div>
+    <input type="hidden" id="selected_speaker_id_storage" value="Charon">
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
             const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
             const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
             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 textInput = document.getElementById('text-input');
             const promptInput = document.getElementById('prompt-input');
             const generateBtn = document.getElementById('generate-btn');
             const statusMessage = document.getElementById('status-message');
             const audioPlayer = document.getElementById('audio-player');
+            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) {
+                 // از یک سرویس عکس پرتره رندوم استفاده می کنیم
+                 // برای تنوع بیشتر، از یک اندیس متفاوت برای هر گوینده استفاده می کنیم
+                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`;
             }
             function updateSelectedSpeakerDisplay(speakerId) {
                 const speaker = getSpeakerById(speakerId);
                 if (speaker) {
+                    const speakerIndex = speakers.findIndex(s => s.id === speakerId);
+                    selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex);
+                    selectedSpeakerNameDisplay.textContent = speaker.name;
+                    selectedSpeakerIdStorage.value = speaker.id; // ذخیره 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)}" alt="عکس گوینده ${speaker.name}" loading="lazy">
                             <div class="speaker-name">${speaker.name}</div>
                     card.addEventListener('click', () => {
                         updateSelectedSpeakerDisplay(speaker.id);
                         setTimeout(() => speakerModal.classList.remove('visible'), 100);
                     });
+                    speakerGridInModal.appendChild(card);
                 });
             }
             changeSpeakerBtn.addEventListener('click', () => {
+                createSpeakerCardsInModal(); // هر بار مودال باز می شود، کارت ها را با انتخاب فعلی می سازیم
                 speakerModal.classList.add('visible');
             });
             closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
                 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);
                 if (!text.trim()) {
                 }
             }
+            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value); // نمایش گوینده پیش‌فرض
             form.addEventListener('submit', generateAudio);
         });
     </script>