Spaces:

bilalRHCH
/

arabic-tts-worker-1

Sleeping

App Files Files Community

bilalRHCH commited on Apr 11

Commit

c5a9ee2

verified ·

1 Parent(s): 2a3d16d

Upload folder using huggingface_hub

Browse files

Files changed (3) hide show

static/index.html +92 -0
static/script.js +340 -0
static/style.css +523 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,92 @@

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OmniVoice Arabic TTS</title>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="blob blob-1"></div>
+    <div class="blob blob-2"></div>
+    <div class="container glass-panel">
+        <header>
+            <div class="header-top">
+                <h1>مولد الصوت العربي</h1>
+                <button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
+                    <svg id="moon-icon" 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="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                    <svg id="sun-icon" class="hidden" 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"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                </button>
+            </div>
+            <p class="subtitle">قم بتحويل النص العربي إلى صوت نقي وواضح باستخدام OmniVoice</p>
+        </header>
+        <main>
+            <div class="input-group">
+                <label for="tts-text">النص المراد تحويله</label>
+                <textarea id="tts-text" placeholder="اكتب النص العربي هنا..."></textarea>
+            </div>
+            <div class="input-row">
+                <div class="input-group relative-group">
+                    <label>الصوت</label>
+                    <button type="button" id="custom-voice-btn" class="custom-select-btn">
+                        <div class="voice-btn-content" id="selected-voice-display">
+                            <div class="avatar" style="background-color: #4A90E2;">ت</div>
+                            <div class="voice-info">
+                                <span class="voice-name">تلقائي (Auto)</span>
+                                <span class="voice-gender" style="opacity: 0.7; font-size: 0.85em;">ذكاء اصطناعي</span>
+                            </div>
+                        </div>
+                        <svg class="dropdown-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                    </button>
+                    <div id="voice-selector-modal" class="voice-selector-modal hidden">
+                        <div class="modal-header">
+                            <span>اختر صوتاً</span>
+                            <button type="button" id="close-modal-btn" class="icon-btn close-btn">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                            </button>
+                        </div>
+                        <div class="voice-list" id="voice-list-container">
+                            <!-- Managed by JS -->
+                        </div>
+                    </div>
+                </div>
+                <div class="input-group">
+                    <label for="tts-speed">سرعة القراءة</label>
+                    <input type="number" id="tts-speed" min="0.5" max="2.0" step="0.1" value="1.0">
+                </div>
+            </div>
+            <button id="synthesize-btn" class="primary-btn">
+                <span class="btn-text">توليد الصوت</span>
+                <div class="spinner hidden"></div>
+            </button>
+            <div id="progress-container" class="hidden" style="margin-top: 1.5rem;">
+                <div class="progress-bar-bg" style="width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem;">
+                    <div id="progress-fill" style="width: 0%; height: 100%; background: var(--primary); transition: width 0.3s ease;"></div>
+                </div>
+                <p id="progress-text" style="font-size: 0.9rem; text-align: center; color: var(--text-secondary);">جاري المعالجة... 0%</p>
+            </div>
+            <div id="result-container" class="hidden">
+                <div class="audio-wrapper">
+                    <audio id="audio-player" controls></audio>
+                </div>
+                <button id="download-btn" class="secondary-btn">تحميل الصوت</button>
+            </div>
+            <div id="error-message" class="error-toast hidden"></div>
+        </main>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

static/script.js ADDED Viewed

	@@ -0,0 +1,340 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const HF_API = "https://bilalrhch-arabic-tts-api.hf.space";
+    // ─────────────────────────────────────────────
+    // Voice definitions
+    // Add more voices here by uploading <id>.wav + <id>.txt to the HF /voices folder
+    // ─────────────────────────────────────────────
+    const availableVoices = [
+        { id: "Auto",   name: "تلقائي",     nameEn: "Auto",    gender: "ذكاء اصطناعي", color: "#4A90E2" },
+        { id: "tariq",  name: "طارق",       nameEn: "Tariq",   gender: "رجل",           color: "#10B981" },
+        { id: "omar",   name: "عمر",        nameEn: "Omar",    gender: "رجل",           color: "#F59E0B" },
+        { id: "layla",  name: "ليلى",       nameEn: "Layla",   gender: "امرأة",         color: "#E11D48" },
+        { id: "nour",   name: "نور",        nameEn: "Nour",    gender: "امرأة",         color: "#8B5CF6" },
+    ];
+    let selectedVoiceId = "Auto";
+    let previewAudio = null;
+    let playingVoiceId = null;
+    // ─────────────────────────────────────────────
+    // Theme Toggle
+    // ─────────────────────────────────────────────
+    const themeToggle = document.getElementById('theme-toggle');
+    const moonIcon    = document.getElementById('moon-icon');
+    const sunIcon     = document.getElementById('sun-icon');
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        moonIcon.classList.add('hidden');
+        sunIcon.classList.remove('hidden');
+    }
+    themeToggle.addEventListener('click', () => {
+        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+        if (isDark) {
+            document.documentElement.removeAttribute('data-theme');
+            localStorage.setItem('theme', 'light');
+            moonIcon.classList.remove('hidden');
+            sunIcon.classList.add('hidden');
+        } else {
+            document.documentElement.setAttribute('data-theme', 'dark');
+            localStorage.setItem('theme', 'dark');
+            moonIcon.classList.add('hidden');
+            sunIcon.classList.remove('hidden');
+        }
+    });
+    // ─────────────────────────────────────────────
+    // Voice Selector Modal
+    // ─────────────────────────────────────────────
+    const voiceBtn      = document.getElementById('custom-voice-btn');
+    const voiceModal    = document.getElementById('voice-selector-modal');
+    const closeModalBtn = document.getElementById('close-modal-btn');
+    const voiceListEl   = document.getElementById('voice-list-container');
+    function getInitial(voice) {
+        return voice.name.charAt(0);
+    }
+    function renderVoiceList() {
+        voiceListEl.innerHTML = '';
+        availableVoices.forEach(voice => {
+            const isActive = voice.id === selectedVoiceId;
+            const item = document.createElement('div');
+            item.className = 'voice-item' + (isActive ? ' active' : '');
+            item.dataset.voiceId = voice.id;
+            item.innerHTML = `
+                <div class="voice-item-left">
+                    <div class="avatar" style="background-color: ${voice.color}">${getInitial(voice)}</div>
+                    <div class="voice-info">
+                        <span class="voice-name">${voice.name}</span>
+                        <span class="voice-gender">${voice.gender}</span>
+                    </div>
+                </div>
+                <div class="voice-item-right">
+                    ${voice.id !== 'Auto' ? `
+                    <button type="button" class="preview-btn" data-voice-id="${voice.id}" title="معاينة الصوت">
+                        <div class="preview-audio-anim hidden" id="eq-${voice.id}">
+                            <span></span><span></span><span></span>
+                        </div>
+                        <svg class="play-icon" id="play-icon-${voice.id}" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M8 5v14l11-7z"/>
+                        </svg>
+                    </button>` : ''}
+                    <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                </div>
+            `;
+            // Select voice on row click (not the preview button)
+            item.addEventListener('click', (e) => {
+                if (e.target.closest('.preview-btn')) return;
+                selectVoice(voice);
+                closeModal();
+            });
+            voiceListEl.appendChild(item);
+        });
+        // Attach preview button handlers
+        voiceListEl.querySelectorAll('.preview-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const vId = btn.dataset.voiceId;
+                togglePreview(vId);
+            });
+        });
+    }
+    function selectVoice(voice) {
+        selectedVoiceId = voice.id;
+        // Update trigger button display
+        document.querySelector('#selected-voice-display .avatar').style.backgroundColor = voice.color;
+        document.querySelector('#selected-voice-display .avatar').textContent = getInitial(voice);
+        document.querySelector('#selected-voice-display .voice-name').textContent = voice.name;
+        document.querySelector('#selected-voice-display .voice-gender').textContent = voice.gender;
+        // Re-render to update active checkmark
+        renderVoiceList();
+    }
+    function openModal() {
+        renderVoiceList();
+        voiceModal.classList.remove('hidden');
+        voiceBtn.classList.add('open');
+    }
+    function closeModal() {
+        voiceModal.classList.add('hidden');
+        voiceBtn.classList.remove('open');
+    }
+    voiceBtn.addEventListener('click', () => {
+        if (voiceModal.classList.contains('hidden')) {
+            openModal();
+        } else {
+            closeModal();
+        }
+    });
+    closeModalBtn.addEventListener('click', closeModal);
+    // Close modal when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!voiceModal.classList.contains('hidden') &&
+            !voiceBtn.contains(e.target) &&
+            !voiceModal.contains(e.target)) {
+            closeModal();
+        }
+    });
+    // ─────────────────────────────────────────────
+    // Audio Preview
+    // ─────────────────────────────────────────────
+    function togglePreview(voiceId) {
+        if (playingVoiceId === voiceId) {
+            // Stop the current preview
+            stopPreview();
+            return;
+        }
+        // Stop previous if any
+        stopPreview();
+        const url = `${HF_API}/voices/${voiceId}.wav`;
+        previewAudio = new Audio(url);
+        playingVoiceId = voiceId;
+        // Show EQ animation, hide play icon
+        const eq = document.getElementById(`eq-${voiceId}`);
+        const playIcon = document.getElementById(`play-icon-${voiceId}`);
+        if (eq) eq.classList.remove('hidden');
+        if (playIcon) playIcon.classList.add('hidden');
+        previewAudio.play().catch(() => {
+            // Voice file not uploaded yet — silently fail
+            stopPreview();
+        });
+        previewAudio.addEventListener('ended', stopPreview);
+    }
+    function stopPreview() {
+        if (previewAudio) {
+            previewAudio.pause();
+            previewAudio.currentTime = 0;
+            previewAudio = null;
+        }
+        if (playingVoiceId) {
+            const eq = document.getElementById(`eq-${playingVoiceId}`);
+            const playIcon = document.getElementById(`play-icon-${playingVoiceId}`);
+            if (eq) eq.classList.add('hidden');
+            if (playIcon) playIcon.classList.remove('hidden');
+            playingVoiceId = null;
+        }
+    }
+    // ─────────────────────────────────────────────
+    // TTS Logic
+    // ─────────────────────────────────────────────
+    const synthesizeBtn    = document.getElementById('synthesize-btn');
+    const btnText          = synthesizeBtn.querySelector('.btn-text');
+    const spinner          = synthesizeBtn.querySelector('.spinner');
+    const textInput        = document.getElementById('tts-text');
+    const speedInput       = document.getElementById('tts-speed');
+    const resultContainer  = document.getElementById('result-container');
+    const audioPlayer      = document.getElementById('audio-player');
+    const downloadBtn      = document.getElementById('download-btn');
+    const errorMessage     = document.getElementById('error-message');
+    let currentAudioUrl = null;
+    synthesizeBtn.addEventListener('click', async () => {
+        const text = textInput.value.trim();
+        if (!text) {
+            showError("الرجاء إدخال النص أول��ً");
+            return;
+        }
+        hideError();
+        resultContainer.classList.add('hidden');
+        setLoading(true);
+        stopPreview();
+        closeModal();
+        try {
+            const response = await fetch(`${HF_API}/synthesize`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    text:  text,
+                    voice: selectedVoiceId,
+                    speed: parseFloat(speedInput.value) || 1.0
+                })
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => null);
+                throw new Error(errorData?.detail || `HTTP Error: ${response.status}`);
+            }
+            const data   = await response.json();
+            const taskId = data.task_id;
+            document.getElementById('progress-container').classList.remove('hidden');
+            pollTaskStatus(taskId);
+        } catch (error) {
+            console.error("Synthesis error:", error);
+            showError(`حدث خطأ أثناء التوليد: ${error.message}`);
+            setLoading(false);
+        }
+    });
+    // ─────────────────────────────────────────────
+    // Status Polling
+    // ─────────────────────────────────────────────
+    async function pollTaskStatus(taskId) {
+        try {
+            const statusRes = await fetch(`${HF_API}/status/${taskId}`);
+            if (!statusRes.ok) {
+                if (statusRes.status === 404 || statusRes.status === 503) {
+                    throw new Error(`تعذر جلب الحالة (HTTP ${statusRes.status}). الخادم قيد إعادة التشغيل، يرجى المحاولة بعد دقيقة.`);
+                }
+                throw new Error(`Could not fetch status: HTTP ${statusRes.status}`);
+            }
+            const state = await statusRes.json();
+            document.getElementById('progress-fill').style.width = `${state.progress}%`;
+            let statusText = `جاري المعالجة... ${state.progress}%`;
+            if (state.status === "stitching") statusText = "جاري تجميع الملفات الصوتية...";
+            document.getElementById('progress-text').textContent = statusText;
+            if (state.status === "completed") {
+                document.getElementById('progress-container').classList.add('hidden');
+                if (currentAudioUrl && currentAudioUrl.startsWith('blob:')) {
+                    URL.revokeObjectURL(currentAudioUrl);
+                }
+                currentAudioUrl = `${HF_API}/${state.download_url}`;
+                audioPlayer.src = currentAudioUrl;
+                resultContainer.classList.remove('hidden');
+                setLoading(false);
+                audioPlayer.play().catch(e => console.log('Autoplay blocked', e));
+            } else if (state.status === "failed") {
+                throw new Error(state.error || "Unknown background generation error");
+            } else {
+                setTimeout(() => pollTaskStatus(taskId), 2000);
+            }
+        } catch (error) {
+            console.error("Polling error:", error);
+            document.getElementById('progress-container').classList.add('hidden');
+            showError(`انقطع الاتصال أو حدث خطأ: ${error.message}`);
+            setLoading(false);
+        }
+    }
+    // ─────────────────────────────────────────────
+    // Download
+    // ─────────────────────────────────────────────
+    downloadBtn.addEventListener('click', () => {
+        if (!currentAudioUrl) return;
+        const a = document.createElement('a');
+        a.href = currentAudioUrl;
+        a.download = `OmniVoice_Arabic_${new Date().getTime()}.wav`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    });
+    // ─────────────────────────────────────────────
+    // Utils
+    // ─────────────────────────────────────────────
+    function setLoading(isLoading) {
+        synthesizeBtn.disabled = isLoading;
+        if (isLoading) {
+            btnText.classList.add('hidden');
+            spinner.classList.remove('hidden');
+        } else {
+            btnText.classList.remove('hidden');
+            spinner.classList.add('hidden');
+        }
+    }
+    function showError(msg) {
+        errorMessage.textContent = msg;
+        errorMessage.classList.remove('hidden');
+    }
+    function hideError() {
+        errorMessage.classList.add('hidden');
+    }
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,523 @@

+:root {
+    /* Light Mode Tokens */
+    --bg-color: #f3f4f6;
+    --text-primary: #1f2937;
+    --text-secondary: #4b5563;
+    --panel-bg: rgba(255, 255, 255, 0.7);
+    --panel-border: rgba(255, 255, 255, 0.4);
+    --input-bg: rgba(255, 255, 255, 0.9);
+    --input-border: #d1d5db;
+    --accent: #4f46e5;
+    --accent-hover: #4338ca;
+    --blob-1: rgba(99, 102, 241, 0.4);
+    --blob-2: rgba(168, 85, 247, 0.4);
+    --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
+}
+[data-theme="dark"] {
+    /* Dark Mode Tokens */
+    --bg-color: #0d1117;
+    --text-primary: #f9fafb;
+    --text-secondary: #9ca3af;
+    --panel-bg: rgba(30, 41, 59, 0.7);
+    --panel-border: rgba(255, 255, 255, 0.1);
+    --input-bg: rgba(15, 23, 42, 0.8);
+    --input-border: #334155;
+    --accent: #6366f1;
+    --accent-hover: #818cf8;
+    --blob-1: rgba(99, 102, 241, 0.2);
+    --blob-2: rgba(168, 85, 247, 0.2);
+    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    background-color: var(--bg-color);
+    color: var(--text-primary);
+    font-family: 'Cairo', 'Inter', sans-serif;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
+    position: relative;
+    transition: background-color 0.5s ease, color 0.5s ease;
+}
+/* Background Blobs (Dynamic Aesthetic) */
+.blob {
+    position: absolute;
+    filter: blur(80px);
+    z-index: -1;
+    border-radius: 50%;
+    animation: float 10s infinite ease-in-out alternate;
+}
+.blob-1 {
+    top: -10%;
+    right: -10%;
+    width: 400px;
+    height: 400px;
+    background: var(--blob-1);
+    animation-delay: 0s;
+}
+.blob-2 {
+    bottom: -10%;
+    left: -10%;
+    width: 350px;
+    height: 350px;
+    background: var(--blob-2);
+    animation-delay: -5s;
+}
+@keyframes float {
+    0% { transform: translateY(0) scale(1); }
+    100% { transform: translateY(30px) scale(1.1); }
+}
+/* Glassmorphism Panel */
+.glass-panel {
+    background: var(--panel-bg);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--panel-border);
+    border-radius: 24px;
+    padding: 40px;
+    width: 100%;
+    max-width: 600px;
+    box-shadow: var(--shadow);
+    z-index: 10;
+}
+header {
+    margin-bottom: 30px;
+}
+.header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+h1 {
+    font-size: 28px;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+}
+.subtitle {
+    color: var(--text-secondary);
+    font-size: 15px;
+    line-height: 1.5;
+}
+.icon-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s;
+}
+.icon-btn:hover {
+    background-color: var(--input-bg);
+}
+.hidden {
+    display: none !important;
+}
+/* Form Elements */
+.input-group {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    gap: 8px;
+}
+.input-row {
+    display: flex;
+    gap: 20px;
+}
+.input-row .input-group {
+    flex: 1;
+}
+label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+textarea, select, input {
+    width: 100%;
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 12px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 16px;
+    padding: 14px;
+    outline: none;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+textarea {
+    resize: vertical;
+    min-height: 120px;
+}
+textarea:focus, select:focus, input:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+}
+/* Primary Button */
+.primary-btn {
+    width: 100%;
+    background: var(--accent);
+    color: white;
+    border: none;
+    padding: 16px;
+    border-radius: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
+}
+.primary-btn:hover {
+    background: var(--accent-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+}
+.primary-btn:active {
+    transform: translateY(0);
+}
+.primary-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+/* Spinner */
+.spinner {
+    border: 3px solid rgba(255,255,255,0.3);
+    border-top: 3px solid white;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    margin-right: 10px;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+/* Results & Audio */
+#result-container {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid var(--panel-border);
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    animation: slideUp 0.5s ease;
+}
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+audio {
+    width: 100%;
+    height: 40px;
+    outline: none;
+}
+.secondary-btn {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    padding: 12px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.secondary-btn:hover {
+    background: var(--accent);
+    color: white;
+}
+.error-toast {
+    margin-top: 20px;
+    padding: 12px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid #ef4444;
+    color: #ef4444;
+    border-radius: 8px;
+    font-size: 14px;
+    text-align: center;
+}
+/* Responsive */
+@media (max-width: 640px) {
+    .glass-panel {
+        margin: 20px;
+        padding: 24px;
+        border-radius: 20px;
+    }
+    .input-row {
+        flex-direction: column;
+        gap: 0;
+    }
+}
+/* Voice Selector Custom UI */
+.relative-group {
+    position: relative;
+}
+.custom-select-btn {
+    width: 100%;
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 12px;
+    padding: 10px 14px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    text-align: right;
+    transition: all 0.3s ease;
+    min-height: 58px;
+}
+.custom-select-btn:hover {
+    border-color: var(--accent);
+}
+.voice-btn-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.avatar {
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-weight: 800;
+    font-size: 15px;
+    flex-shrink: 0;
+}
+.voice-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+.voice-name {
+    font-weight: 700;
+    color: var(--text-primary);
+    font-size: 14.5px;
+}
+.voice-gender {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+.dropdown-icon {
+    color: var(--text-secondary);
+}
+/* Modal Overlay Dropdown */
+.voice-selector-modal {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    left: 0;
+    margin-top: 8px;
+    background: var(--panel-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--panel-border);
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
+    z-index: 100;
+    overflow: hidden;
+    animation: fadeIn 0.2s ease;
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--panel-border);
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 13px;
+    background: rgba(0,0,0,0.02);
+}
+.close-btn {
+    padding: 4px;
+    color: var(--text-secondary);
+}
+.voice-list {
+    max-height: 280px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+/* Scrollbar tweaks for modal */
+.voice-list::-webkit-scrollbar {
+    width: 6px;
+}
+.voice-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+.voice-list::-webkit-scrollbar-thumb {
+    background: var(--panel-border);
+    border-radius: 10px;
+}
+.voice-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    cursor: pointer;
+    border-bottom: 1px solid var(--panel-border);
+    transition: background-color 0.2s;
+}
+.voice-item:last-child {
+    border-bottom: none;
+}
+.voice-item:hover, .voice-item.active {
+    background: rgba(99, 102, 241, 0.08);
+}
+.voice-item-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.checkmark {
+    color: var(--text-secondary);
+    display: none;
+}
+.voice-item.active .checkmark {
+    display: block;
+    color: var(--accent);
+}
+/* Audio Preview Animation */
+.preview-audio-anim {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    height: 15px;
+    margin-right: 15px;
+}
+.preview-audio-anim span {
+    display: block;
+    width: 3px;
+    height: 3px;
+    background: var(--accent);
+    border-radius: 3px;
+    animation: eq 0.8s infinite alternate;
+}
+.preview-audio-anim span:nth-child(1) { animation-delay: 0.1s; }
+.preview-audio-anim span:nth-child(2) { animation-delay: 0.3s; }
+.preview-audio-anim span:nth-child(3) { animation-delay: 0.5s; }
+@keyframes eq {
+    0% { height: 3px; }
+    100% { height: 14px; }
+}
+/* Voice item right-side (preview + checkmark) */
+.voice-item-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+/* Preview play button inside modal */
+.preview-btn {
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.25);
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--accent);
+    transition: background 0.2s, transform 0.15s;
+    padding: 0;
+}
+.preview-btn:hover {
+    background: var(--accent);
+    color: white;
+    transform: scale(1.1);
+}
+/* Open state: rotate dropdown chevron */
+.custom-select-btn.open .dropdown-icon {
+    transform: rotate(180deg);
+    transition: transform 0.25s ease;
+}
+.dropdown-icon {
+    transition: transform 0.25s ease;
+    flex-shrink: 0;
+}