Veu3

Running

App Files Files Community

Hamed744 commited on Jun 9

Commit

41da9f6

verified ·

1 Parent(s): 0d3789d

Update index.html

Browse files

Files changed (1) hide show

index.html +660 -360

index.html CHANGED Viewed

@@ -3,207 +3,702 @@
 <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;600;700;800&display=swap');
         :root {
             --app-font: 'Vazirmatn', sans-serif;
-            --bg-color: #0b0f19;
-            --panel-bg: rgba(30, 35, 50, 0.5);
-            --panel-border: rgba(255, 255, 255, 0.1);
-            --blur-intensity: 15px;
-            --primary-glow-start: #38bdf8;
-            --primary-glow-end: #818cf8;
-            --secondary-glow-start: #a78bfa;
-            --secondary-glow-end: #f472b6;
-            --text-primary: #f1f5f9;
-            --text-secondary: #94a3b8;
             --radius-card: 24px;
-            --radius-input: 12px;
-            --shadow-glow: 0 0 30px -5px var(--primary-glow-start);
         }
-        @keyframes aurora-bg {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
         body {
             font-family: var(--app-font);
             direction: rtl;
-            background-color: var(--bg-color);
-            background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.1) 0px, transparent 50%),
-                              radial-gradient(at 76% 2%, hsla(242, 94%, 70%, 0.1) 0px, transparent 50%),
-                              radial-gradient(at 97% 96%, hsla(339, 87%, 65%, 0.1) 0px, transparent 50%);
-            color: var(--text-primary);
             font-size: 16px;
-            line-height: 1.7;
-            margin: 0;
-            padding: 40px 0;
             min-height: 100vh;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             overflow-x: hidden;
         }
-        .container { max-width: 800px; width: 90%; margin: 0 auto; padding-bottom: 40px; }
-        .app-header { text-align: center; margin-bottom: 3rem; }
-        .app-header h1 {
-            font-size: 3.5em;
-            font-weight: 800;
-            margin: 0 0 0.5rem 0;
-            background: linear-gradient(90deg, var(--primary-glow-start), var(--primary-glow-end));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            text-shadow: 0 0 40px rgba(129, 140, 248, 0.3);
         }
-        .app-header p { font-size: 1.25em; color: var(--text-secondary); margin-top:0; }
-        .main-content {
-            padding: 2.5rem;
-            background: var(--panel-bg);
-            backdrop-filter: blur(var(--blur-intensity));
-            -webkit-backdrop-filter: blur(var(--blur-intensity));
-            border-radius: var(--radius-card);
-            border: 1px solid var(--panel-border);
-            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.3);
         }
-        .form-group { margin-bottom: 2.5rem; }
-        label { display: block; font-weight: 600; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; }
-        textarea, input[type="text"] {
-            width: 100%;
-            padding: 1rem;
-            border-radius: var(--radius-input);
-            border: 1px solid var(--panel-border);
-            background-color: rgba(15, 20, 30, 0.5);
-            box-shadow: none;
-            font-family: var(--app-font);
-            font-size: 1rem;
-            color: var(--text-primary);
-            box-sizing: border-box;
             transition: all 0.3s ease;
         }
-        textarea:focus, input[type="text"]:focus {
-            outline: none;
-            border-color: var(--primary-glow-start);
-            box-shadow: 0 0 15px -2px var(--primary-glow-start);
-            background-color: rgba(30, 35, 50, 0.7);
-        }
-        /* --- نمایش گوینده منتخب --- */
-        #selected-speaker-display { text-align: center; }
-        #selected-speaker-card { display: inline-flex; align-items: center; background: rgba(15, 20, 30, 0.5); border-radius: 99px; padding: 10px; border: 1px solid var(--panel-border); }
-        #selected-speaker-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-left: 20px; border: 3px solid var(--primary-glow-end); box-shadow: 0 0 15px rgba(129, 140, 248, 0.5); }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.5em; font-weight: 700; color: var(--text-primary); }
-        #selected-speaker-info p { margin: 5px 0 0; color: var(--text-secondary); font-size: 0.9em; }
-        #change-speaker-btn { display: block; margin: 1.2rem auto 0; padding: 10px 24px; border-radius: var(--radius-input); background-color: rgba(255, 255, 255, 0.1); border: 1px solid var(--panel-border); cursor: pointer; font-family: var(--app-font); font-weight: 500; color: var(--text-secondary); transition: all 0.2s ease; }
-        #change-speaker-btn:hover { color: var(--text-primary); background-color: rgba(255, 255, 255, 0.15); border-color: var(--primary-glow-start); }
-        /* --- مودال گالری گویندگان --- */
-        #speaker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(11, 15, 25, 0.7); backdrop-filter: blur(10px); 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: var(--panel-bg); padding: 2rem; border-radius: var(--radius-card); border: 1px solid var(--panel-border); width: 90%; max-width: 700px; max-height: 85vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s ease; }
-        #speaker-modal.visible .modal-content { transform: scale(1); }
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
-        .modal-header h2 { margin: 0; }
-        .close-modal-btn { background: none; border: none; font-size: 2.2rem; cursor: pointer; color: #9ca3af; transition: color 0.2s ease, transform 0.2s ease; line-height: 1; }
-        .close-modal-btn:hover { color: var(--text-primary); transform: rotate(90deg); }
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.5rem; }
-        .speaker-card { cursor: pointer; transition: all 0.3s ease; text-align: center; }
-        .speaker-card .speaker-visual { border: 2px solid transparent; border-radius: var(--radius-card); overflow: hidden; position: relative; transition: all 0.3s ease; background: rgba(0,0,0,0.2); }
-        .speaker-card:hover .speaker-visual { transform: translateY(-5px) scale(1.03); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
-        .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; filter: grayscale(50%); 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.8rem 0.5rem; font-weight: 500; font-size: 0.95em; color: var(--text-secondary); transition: color 0.2s; }
-        .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--primary-glow-end); box-shadow: 0 0 20px -2px var(--primary-glow-end); }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name { color: var(--text-primary); font-weight: 700; }
-        /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1.5rem; }
-        input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: rgba(0,0,0,0.3); border-radius: 5px; outline: none; transition: background 0.2s; }
-        input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--text-primary); border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px 2px rgba(255,255,255,0.5); transition: all 0.2s ease; }
-        input[type="range"]:hover::-webkit-slider-thumb { background: var(--primary-glow-start); box-shadow: 0 0 15px 2px var(--primary-glow-start); }
-        #temperature-value { font-weight: 700; background-color: rgba(0,0,0,0.3); padding: 0.4rem 1rem; border-radius: 8px; border: 1px solid var(--panel-border); min-width: 45px; text-align: center; color: var(--text-secondary); }
-        #generate-btn {
-            width: 100%;
-            padding: 1.1rem 1.5rem;
-            font-size: 1.25em;
-            font-weight: 700;
-            font-family: var(--app-font);
-            background: linear-gradient(90deg, var(--secondary-glow-start), var(--primary-glow-start));
-            color: white;
-            border: none;
             border-radius: var(--radius-input);
             cursor: pointer;
-            transition: all 0.35s ease;
-            box-shadow: 0 5px 20px -5px rgba(167, 139, 250, 0.6);
-            background-size: 200% auto;
         }
-        #generate-btn:hover:not(:disabled) {
-            background-position: right center;
-            transform: translateY(-3px) scale(1.02);
-            box-shadow: 0 8px 30px -8px rgba(167, 139, 250, 0.8);
         }
-        #generate-btn:disabled { background: #4b5563; cursor: not-allowed; box-shadow: none; transform: none; color: #9ca3af; }
-        #output-section {
-            margin-top: 2.5rem; padding: 2rem;
-            background: rgba(15, 20, 30, 0.5);
-            border-radius: var(--radius-card);
-            min-height: 180px;
-            display: flex; align-items: center; justify-content: center;
-            flex-direction: column; gap: 1rem;
-            border: 1px dashed var(--panel-border);
-            transition: all 0.3s ease;
         }
-        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; }
-        #audio-player { width: 100%; margin-top: 1rem; display: none; }
-        #audio-player::-webkit-media-controls-panel { background-color: rgba(50, 60, 80, 0.8); }
-        #audio-player::-webkit-media-controls-play-button { color: var(--text-primary); }
-        /* --- انیمیشن پردازش پریمیوم --- */
-        #loading-animation { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
-        .loader-container { position: relative; width: 120px; height: 120px; }
-        .ai-core, .particle { position: absolute; top: 50%; left: 50%; border-radius: 50%; }
-        .ai-core {
-            width: 40px; height: 40px;
-            background: radial-gradient(circle, #fff, var(--primary-glow-end));
             transform: translate(-50%, -50%);
-            box-shadow: 0 0 15px 5px #fff, 0 0 30px 10px var(--primary-glow-end), 0 0 50px 20px var(--secondary-glow-start);
-            animation: pulse-core 2s infinite ease-in-out;
-        }
-        .particle {
-            width: 8px; height: 8px;
-            background-color: var(--primary-glow-start);
-            box-shadow: 0 0 8px var(--primary-glow-start);
-            transform-origin: 0 0;
-        }
-        .p1 { animation: orbit 6s linear infinite; }
-        .p2 { animation: orbit 7s linear infinite; animation-delay: -1s; }
-        .p3 { animation: orbit 5s linear infinite; animation-delay: -2s; }
-        .p4 { animation: orbit 8s linear infinite; animation-delay: -3s; }
-        #loading-text { font-size: 1.1em; font-weight: 500; color: var(--text-primary); text-shadow: 0 0 10px var(--text-secondary); }
-        @keyframes pulse-core {
-            0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; }
-            50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
         }
-        @keyframes orbit {
-            0% { transform: translate(-50%, -50%) rotate(0deg) translateX(60px) rotate(0deg); }
-            100% { transform: translate(-50%, -50%) rotate(360deg) translateX(60px) rotate(-360deg); }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="app-header">
-            <h1>Alpha TTS</h1>
-            <p>کیفیت استثنایی صدا، با قدرت هوش مصنوعی</p>
         </header>
         <main class="main-content">
@@ -216,6 +711,7 @@
                     <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">
@@ -229,6 +725,7 @@
                         <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">
@@ -236,22 +733,12 @@
                         <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">
-                    <div class="loader-container">
-                        <div class="ai-core"></div>
-                        <div class="particle p1"></div>
-                        <div class="particle p2"></div>
-                        <div class="particle p3"></div>
-                        <div class="particle p4"></div>
-                    </div>
-                    <p id="loading-text">در حال ساخت امواج صوتی با هوش مصنوعی آلفا...</p>
-                </div>
                 <audio id="audio-player" controls></audio>
             </div>
         </main>
@@ -266,195 +753,8 @@
             <div id="speaker-grid"></div>
         </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 FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
-            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: "لیدا (زن)" }
-            ];
-            // All DOM elements are selected here as before...
-            const form = document.getElementById('tts-form');
-            const textInput = document.getElementById('text-input');
-            const promptInput = document.getElementById('prompt-input');
-            const tempSlider = document.getElementById('temperature-slider');
-            const tempValueSpan = document.getElementById('temperature-value');
-            const generateBtn = document.getElementById('generate-btn');
-            const statusMessage = document.getElementById('status-message');
-            const audioPlayer = document.getElementById('audio-player');
-            const loadingAnimation = document.getElementById('loading-animation');
-            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
-            const 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, isThumb = false) {
-                const gender = speaker.name.includes('(مرد)') ? 'men' : (speaker.name.includes('(زن)') ? 'women' : 'lego');
-                const imageIndex = (index * 11 + 7) % 100; // Use a different seed for variety
-                const size = isThumb ? 'thumb/' : '';
-                return `https://randomuser.me/api/portraits/${size}${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, false); // Get large image
-                    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, true)}" alt="عکس گوینده ${speaker.name}" loading="lazy">
-                            <div class="speaker-name">${speaker.name}</div>
-                        </div>
-                    `;
-                    card.addEventListener('click', () => {
-                        updateSelectedSpeakerDisplay(speaker.id);
-                        setTimeout(() => speakerModal.classList.remove('visible'), 200);
-                    });
-                    speakerGridInModal.appendChild(card);
-                });
-            }
-            // Event Listeners (no change in logic)
-            changeSpeakerBtn.addEventListener('click', () => { createSpeakerCardsInModal(); speakerModal.classList.add('visible'); });
-            closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
-            speakerModal.addEventListener('click', (e) => { if (e.target === speakerModal) speakerModal.classList.remove('visible'); });
-            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
-            function showLoadingState() {
-                statusMessage.style.display = 'none';
-                audioPlayer.style.display = 'none';
-                audioPlayer.src = '';
-                loadingAnimation.style.display = 'flex';
-                generateBtn.disabled = true;
-                generateBtn.textContent = 'در حال پردازش...';
-            }
-            function showResultState(isSuccess, message = '') {
-                loadingAnimation.style.display = 'none';
-                if (isSuccess) {
-                    statusMessage.style.display = 'none';
-                    audioPlayer.style.display = 'block';
-                    audioPlayer.play();
-                } else {
-                    statusMessage.textContent = message || 'یک خطای ناشناخته رخ داد.';
-                    statusMessage.style.display = 'block';
-                    audioPlayer.style.display = 'none';
-                }
-                generateBtn.disabled = false;
-                generateBtn.textContent = '🚀 تولید و پخش صدا';
-            }
-            // The main async function `generateAudio` remains identical in its logic.
-            // It just calls the new state functions.
-            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 {
-                    const joinQueueResponse = await fetch(JOIN_QUEUE_URL, {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        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_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) { /* نادیده گرفتن خطاهای پارس */ }
-                        }
-                        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);
-            form.addEventListener('submit', generateAudio);
-        });
-    </script>
-</body>
-</html>

 <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');
         :root {
             --app-font: 'Vazirmatn', sans-serif;
+            --app-header-grad-start: #667eea;
+            --app-header-grad-end: #764ba2;
+            --app-panel-bg: rgba(255, 255, 255, 0.95);
+            --app-input-bg: rgba(248, 249, 250, 0.8);
+            --app-button-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --app-button-hover-bg: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+            --app-main-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --app-text-primary: #2c3e50;
+            --app-text-secondary: #555;
+            --app-border-color: rgba(224, 224, 224, 0.5);
             --radius-card: 24px;
+            --radius-input: 16px;
+            --shadow-card: 0 20px 40px -10px rgba(0,0,0,0.1);
+            --shadow-button: 0 8px 25px -5px rgba(102, 126, 234, 0.4);
+            --speaker-selected-glow: 0 0 25px rgba(102, 126, 234, 0.6);
+            --accent-color: #ff6b6b;
+            --success-color: #4ecdc4;
         }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
         body {
             font-family: var(--app-font);
             direction: rtl;
+            background: var(--app-main-bg);
+            color: var(--app-text-primary);
             font-size: 16px;
+            line-height: 1.65;
             min-height: 100vh;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
+            position: relative;
             overflow-x: hidden;
         }
+        /* Background Animation */
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background:
+                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.3) 0%, transparent 50%),
+                radial-gradient(circle at 40% 40%, rgba(78, 205, 196, 0.2) 0%, transparent 50%);
+            animation: backgroundMove 20s ease-in-out infinite;
+            z-index: -1;
+        }
+        @keyframes backgroundMove {
+            0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
+            33% { transform: translateX(-30px) translateY(-50px) rotate(0.5deg); }
+            66% { transform: translateX(20px) translateY(20px) rotate(-0.5deg); }
+        }
+        .container {
+            max-width: 900px;
+            width: 95%;
+            margin: 0 auto;
+            padding-bottom: 40px;
+        }
+        .app-header {
+            padding: 4rem 2rem 6rem 2rem;
+            text-align: center;
+            background: linear-gradient(135deg, var(--app-header-grad-start) 0%, var(--app-header-grad-end) 100%);
+            color: white;
+            border-bottom-left-radius: var(--radius-card);
+            border-bottom-right-radius: var(--radius-card);
+            box-shadow: 0 10px 30px -5px rgba(0,0,0,0.3);
+            position: relative;
+            overflow: hidden;
+        }
+        .app-header::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            animation: headerShine 8s ease-in-out infinite;
+        }
+        @keyframes headerShine {
+            0%, 100% { transform: rotate(0deg); opacity: 0.3; }
+            50% { transform: rotate(180deg); opacity: 0.1; }
+        }
+        .app-header h1 {
+            font-size: 3.2em;
+            font-weight: 800;
+            margin: 0 0 1rem 0;
+            text-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            position: relative;
+            z-index: 1;
+            background: linear-gradient(45deg, #fff, #f0f8ff);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
+        .app-header p {
+            font-size: 1.3em;
+            color: rgba(255,255,255,0.9);
+            margin-top: 0;
+            opacity: 0.95;
+            position: relative;
+            z-index: 1;
         }
+        .main-content {
+            padding: 3rem;
+            margin: -4rem auto 2rem auto;
+            background: var(--app-panel-bg);
+            backdrop-filter: blur(20px);
+            border-radius: var(--radius-card);
+            box-shadow: var(--shadow-card);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .form-group {
+            margin-bottom: 2.8rem;
+            position: relative;
+        }
+        label {
+            display: block;
+            font-weight: 700;
+            color: var(--app-text-primary);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            position: relative;
+        }
+        label::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            right: 0;
+            width: 30px;
+            height: 3px;
+            background: linear-gradient(90deg, var(--accent-color), transparent);
+            border-radius: 2px;
+        }
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 1.2rem 1.5rem;
+            border-radius: var(--radius-input);
+            border: 2px solid var(--app-border-color);
+            background: var(--app-input-bg);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+            font-family: var(--app-font);
+            font-size: 1rem;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+        }
+        textarea:focus, input[type="text"]:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.2), 0 8px 25px rgba(0,0,0,0.1);
+            background: rgba(255, 255, 255, 0.95);
+            transform: translateY(-2px);
+        }
+        /* Enhanced Speaker Selection */
+        #selected-speaker-display {
+            text-align: center;
+        }
+        #selected-speaker-card {
+            display: inline-flex;
+            align-items: center;
+            background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
+            backdrop-filter: blur(15px);
+            border-radius: 20px;
+            padding: 15px 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            border: 2px solid rgba(255, 255, 255, 0.3);
             transition: all 0.3s ease;
         }
+        #selected-speaker-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+        }
+        #selected-speaker-card img {
+            width: 90px;
+            height: 90px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-left: 20px;
+            background-color: #eee;
+            border: 3px solid rgba(255, 255, 255, 0.8);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        }
+        #selected-speaker-info h3 {
+            margin: 0;
+            font-size: 1.5em;
+            color: var(--app-text-primary);
+        }
+        #selected-speaker-info p {
+            margin: 8px 0 0;
+            color: var(--app-text-secondary);
+            font-size: 0.95em;
+        }
+        #change-speaker-btn {
+            display: block;
+            margin: 1.5rem auto 0;
+            padding: 12px 30px;
+            border-radius: 12px;
+            background: linear-gradient(135deg, var(--app-input-bg) 0%, rgba(248,249,250,0.9) 100%);
+            border: 2px solid var(--app-border-color);
+            cursor: pointer;
+            font-family: var(--app-font);
+            font-weight: 600;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(10px);
+        }
+        #change-speaker-btn:hover {
+            background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
+            border-color: var(--accent-color);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+        }
+        /* Enhanced Modal */
+        #speaker-modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.6);
+            backdrop-filter: blur(10px);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        #speaker-modal.visible {
+            display: flex;
+            opacity: 1;
+        }
+        .modal-content {
+            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.95) 100%);
+            backdrop-filter: blur(20px);
+            padding: 2.5rem;
+            border-radius: var(--radius-card);
+            width: 90%;
+            max-width: 800px;
+            max-height: 85vh;
+            overflow-y: auto;
+            transform: scale(0.9) translateY(50px);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
+        }
+        #speaker-modal.visible .modal-content {
+            transform: scale(1) translateY(0);
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+        .modal-header h2 {
+            margin: 0;
+            font-size: 1.8em;
+            color: var(--app-text-primary);
+        }
+        .close-modal-btn {
+            background: none;
+            border: none;
+            font-size: 2.5rem;
+            cursor: pointer;
+            color: #999;
+            transition: all 0.3s ease;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+        }
+        .close-modal-btn:hover {
+            color: var(--accent-color);
+            background: rgba(255, 107, 107, 0.1);
+            transform: rotate(90deg);
+        }
+        #speaker-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 1.5rem;
+        }
+        @media (min-width: 576px) {
+            #speaker-grid {
+                grid-template-columns: repeat(4, 1fr);
+            }
+        }
+        .speaker-card {
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .speaker-card .speaker-visual {
+            border: 3px solid transparent;
+            border-radius: var(--radius-card);
+            overflow: hidden;
+            text-align: center;
+            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
+            position: relative;
+            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+            backdrop-filter: blur(10px);
+        }
+        .speaker-card:hover .speaker-visual {
+            transform: translateY(-5px) scale(1.02);
+            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
+        }
+        .speaker-card input[type="radio"] {
+            display: none;
+        }
+        .speaker-card img {
+            width: 100%;
+            height: 140px;
+            object-fit: cover;
+            display: block;
+            background-color: #eee;
+        }
+        .speaker-card .speaker-name {
+            padding: 1rem 0.8rem;
+            font-weight: 600;
+            font-size: 0.95em;
+            color: var(--app-text-primary);
+        }
+        .speaker-card input[type="radio"]:checked + .speaker-visual {
+            border-color: var(--accent-color);
+            box-shadow: var(--speaker-selected-glow), 0 12px 30px rgba(0,0,0,0.15);
+            transform: scale(1.05);
+        }
+        /* Enhanced Slider */
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 1.5rem;
+            background: var(--app-input-bg);
+            backdrop-filter: blur(10px);
+            padding: 1rem 1.5rem;
             border-radius: var(--radius-input);
+            border: 2px solid var(--app-border-color);
+        }
+        input[type="range"] {
+            flex-grow: 1;
             cursor: pointer;
+            height: 8px;
+            background: linear-gradient(90deg, var(--accent-color), var(--success-color));
+            border-radius: 5px;
+            outline: none;
+            -webkit-appearance: none;
         }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--accent-color), #ff8a8a);
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4);
         }
+        #temperature-value {
+            font-weight: bold;
+            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,249,250,0.9));
+            padding: 0.5rem 1rem;
+            border-radius: 10px;
+            border: 2px solid rgba(255, 107, 107, 0.3);
+            min-width: 50px;
+            text-align: center;
+            color: var(--accent-color);
+            font-size: 1.1em;
+        }
+        /* Enhanced Generate Button */
+        #generate-btn {
+            width: 100%;
+            padding: 1.5rem 2rem;
+            font-size: 1.3em;
+            font-weight: 700;
+            font-family: var(--app-font);
+            background: var(--app-button-bg);
+            color: white;
+            border: none;
+            border-radius: var(--radius-input);
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: var(--shadow-button);
+            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.2), transparent);
+            transition: left 0.6s;
         }
+        #generate-btn:hover::before {
+            left: 100%;
+        }
+        #generate-btn:hover:not(:disabled) {
+            background: var(--app-button-hover-bg);
+            transform: translateY(-3px);
+            box-shadow: 0 12px 35px -5px rgba(102, 126, 234, 0.6);
+        }
+        #generate-btn:disabled {
+            background: linear-gradient(135deg, #999, #777);
+            cursor: not-allowed;
+            box-shadow: none;
+            transform: none;
+        }
+        #output-section {
+            margin-top: 3rem;
+            padding: 2rem;
+            background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
+            backdrop-filter: blur(15px);
+            border-radius: var(--radius-card);
+            min-height: 120px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            gap: 1.5rem;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
+        }
+        #status-message {
+            font-weight: 600;
+            color: var(--app-text-secondary);
+            font-size: 1.1em;
+        }
+        #audio-player {
+            width: 100%;
+            margin-top: 1rem;
+            display: none;
+            border-radius: 12px;
+        }
+        /* Loading Animation */
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+            backdrop-filter: blur(20px);
+        }
+        .loading-overlay.active {
+            display: flex;
+        }
+        .loading-content {
+            text-align: center;
+            color: white;
+            max-width: 600px;
+            padding: 3rem;
+        }
+        .loading-animation {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            margin: 0 auto 3rem;
+        }
+        .sound-wave {
+            position: absolute;
+            left: 50%;
+            top: 50%;
             transform: translate(-50%, -50%);
+            width: 8px;
+            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
+            border-radius: 4px;
+            animation: soundWave 1.5s ease-in-out infinite;
+        }
+        .sound-wave:nth-child(1) { left: 45%; animation-delay: 0s; height: 20px; }
+        .sound-wave:nth-child(2) { left: 48%; animation-delay: 0.1s; height: 40px; }
+        .sound-wave:nth-child(3) { left: 51%; animation-delay: 0.2s; height: 60px; }
+        .sound-wave:nth-child(4) { left: 54%; animation-delay: 0.3s; height: 40px; }
+        .sound-wave:nth-child(5) { left: 57%; animation-delay: 0.4s; height: 20px; }
+        @keyframes soundWave {
+            0%, 100% {
+                transform: translate(-50%, -50%) scaleY(0.5);
+                opacity: 0.7;
+            }
+            50% {
+                transform: translate(-50%, -50%) scaleY(1.5);
+                opacity: 1;
+            }
+        }
+        .ai-circle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 120px;
+            height: 120px;
+            border: 3px solid rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            animation: aiRotate 3s linear infinite;
+        }
+        .ai-circle::before {
+            content: '🤖';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 3rem;
+            animation: aiPulse 2s ease-in-out infinite;
+        }
+        @keyframes aiRotate {
+            0% { transform: translate(-50%, -50%) rotate(0deg); }
+            100% { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+        @keyframes aiPulse {
+            0%, 100% { transform: translate(-50%, -50%) scale(1); }
+            50% { transform: translate(-50%, -50%) scale(1.1); }
+        }
+        .loading-text h2 {
+            font-size: 2.5em;
+            margin-bottom: 1rem;
+            background: linear-gradient(45deg, #fff, #f0f8ff, #e6f3ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            animation: textGlow 2s ease-in-out infinite alternate;
+        }
+        .loading-text p {
+            font-size: 1.3em;
+            opacity: 0.9;
+            animation: textFade 3s ease-in-out infinite;
+        }
+        @keyframes textGlow {
+            0% { opacity: 0.8; }
+            100% { opacity: 1; }
+        }
+        @keyframes textFade {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; }
         }
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+            margin-top: 2rem;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
+            border-radius: 3px;
+            animation: progressMove 2s ease-in-out infinite;
+        }
+        @keyframes progressMove {
+            0% { width: 10%; }
+            50% { width: 80%; }
+            100% { width: 100%; }
+        }
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .app-header {
+                padding: 3rem 1.5rem 4rem;
+            }
+            .app-header h1 {
+                font-size: 2.5em;
+            }
+            .main-content {
+                padding: 2rem;
+                margin: -3rem auto 1rem;
+            }
+            .loading-animation {
+                width: 150px;
+                height: 150px;
+            }
+            .loading-text h2 {
+                font-size: 2em;
+            }
+            .loading-text p {
+                font-size: 1.1em;
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Loading Overlay -->
+    <div id="loading-overlay" class="loading-overlay">
+        <div class="loading-content">
+            <div class="loading-animation">
+                <div class="ai-circle"></div>
+                <div class="sound-wave"></div>
+                <div class="sound-wave"></div>
+                <div class="sound-wave"></div>
+                <div class="sound-wave"></div>
+                <div class="sound-wave"></div>
+            </div>
+            <div class="loading-text">
+                <h2>در حال تبدیل متن به صدا</h2>
+                <p>با هوش مصنوعی آلفا</p>
+                <div class="progress-bar">
+                    <div class="progress-fill"></div>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="container">
         <header class="app-header">
+            <h1>آلفا TTS</h1>
+            <p>جادوی تبدیل متن به صدا، به سبک شما</p>
         </header>
         <main class="main-content">
                     <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">
                         <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">
                         <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>
                 <audio id="audio-player" controls></audio>
             </div>
         </main>
             <div id="speaker-grid"></div>
         </div>
     </div>
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
     <script>
+        document.addEventListener('DOMContentLoaded', () => {