Update app.py

app.py

@@ -6,10 +6,17 @@ import gradio as gr
 import soundfile as sf
 import tempfile
 import torch
-from vieneu_tts import VieNeuTTS
+import sys
+# Hỗ trợ cấu trúc thư mục trên HF Spaces: Thêm 'src' vào đường dẫn tìm kiếm module
+src_path = os.path.join(os.path.dirname(__file__), "src")
+if os.path.exists(src_path) and src_path not in sys.path:
+    sys.path.append(src_path)
+
+from vieneu import Vieneu
 import time
+import numpy as np
 
-print("⏳ Đang khởi động VieNeu-TTS...")
+print("⏳ Đang khởi động VieNeu-TTS v2-Turbo...")
 
 # --- 1. SETUP MODEL ---
 print("📦 Đang tải model...")
@@ -17,78 +24,64 @@ device = "cuda" if torch.cuda.is_available() else "cpu"
 print(f"🖥️ Sử dụng thiết bị: {device.upper()}")
 
 try:
-    tts = VieNeuTTS(
-        backbone_repo="pnnbao-ump/VieNeu-TTS-0.3B",
+    # Sử dụng backend Standard (PyTorch) vì HF Space không chạy được LMDeploy dễ dàng
+    tts = Vieneu(
+        backbone_repo="pnnbao-ump/VieNeu-TTS-v2-Turbo",
         backbone_device=device,
-        codec_repo="neuphonic/neucodec",
-        codec_device=device
+        codec_repo="pnnbao-ump/VieNeu-Codec",
+        codec_device=device,
+        backend="standard"
     )
-    print("✅ Model đã tải xong!")
+    print("✅ Model v2-Turbo đã tải xong!")
 except Exception as e:
     print(f"⚠️ Không thể tải model (Chế độ UI Demo): {e}")
+    # Mocking for UI testing if model fails
     class MockTTS:
-        def encode_reference(self, path): return None
-        def infer(self, text, ref, ref_text): 
-            import numpy as np
-            # Giả lập độ trễ để test tính năng đo thời gian
+        def list_preset_voices(self): return [("Xuân Vĩnh (Nam - Miền Nam)", "Xuân Vĩnh (Nam - Miền Nam)")]
+        def get_preset_voice(self, v): return {"codes": [3], "text": "Hello", "voice_id": 3}
+        def encode_reference(self, path): return np.zeros(10)
+        def infer(self, text, **kwargs): 
             time.sleep(1.5) 
-            return np.random.uniform(-0.5, 0.5, 24000*3)
+            return np.random.uniform(-0.1, 0.1, 24000*3)
     tts = MockTTS()
 
-# --- 2. DATA ---
-VOICE_SAMPLES = {
-    "Tuyên (nam miền Bắc)": {"audio": "./sample/Tuyên (nam miền Bắc).wav", "text": "./sample/Tuyên (nam miền Bắc).txt"},
-    "Vĩnh (nam miền Nam)": {"audio": "./sample/Vĩnh (nam miền Nam).wav", "text": "./sample/Vĩnh (nam miền Nam).txt"},
-    "Bình (nam miền Bắc)": {"audio": "./sample/Bình (nam miền Bắc).wav", "text": "./sample/Bình (nam miền Bắc).txt"},
-    "Đoan (nữ miền Nam)": {"audio": "./sample/Đoan (nữ miền Nam).wav", "text": "./sample/Đoan (nữ miền Nam).txt"},
-    "Ngọc (nữ miền Bắc)": {"audio": "./sample/Ngọc (nữ miền Bắc).wav", "text": "./sample/Ngọc (nữ miền Bắc).txt"},
-    "Ly (nữ miền Bắc)": {"audio": "./sample/Ly (nữ miền Bắc).wav", "text": "./sample/Ly (nữ miền Bắc).txt"}
-}
+# --- 2. DATA (Tự động lấy từ SDK) ---
+try:
+    PRESET_VOICES = tts.list_preset_voices()
+    VOICE_NAMES = [v[0] for v in PRESET_VOICES]
+except:
+    VOICE_NAMES = ["Xuân Vĩnh (Nam - Miền Nam)"]
 
 # --- 3. HELPER FUNCTIONS ---
-def load_reference_info(voice_choice):
-    if voice_choice in VOICE_SAMPLES:
-        audio_path = VOICE_SAMPLES[voice_choice]["audio"]
-        text_path = VOICE_SAMPLES[voice_choice]["text"]
-        try:
-            if os.path.exists(text_path):
-                with open(text_path, "r", encoding="utf-8") as f:
-                    ref_text = f.read()
-                return audio_path, ref_text
-            else:
-                return audio_path, "⚠️ Không tìm thấy file text mẫu."
-        except Exception as e:
-            return None, f"❌ Lỗi: {str(e)}"
-    return None, ""
-
 @spaces.GPU(duration=120) 
-def synthesize_speech(text, voice_choice, custom_audio, custom_text, mode_tab):
+def synthesize_speech(text, voice_choice, speaker_id_val, custom_audio, custom_text, mode_tab, temperature):
     try:
         if not text or text.strip() == "":
-            return None, "⚠️ Vui lòng nhập văn bản cần tổng hợp!"
+            return None, "⚠️ Vui lòng nhập văn bản hoặc chọn ví dụ bên dưới!"
         
-        # --- LOGIC CHECK LIMIT 250 ---
-        if len(text) > 250:
-            return None, f"❌ Văn bản quá dài ({len(text)}/250 ký tự)! Vui lòng cắt ngắn lại để đảm bảo chất lượng."
+        # --- LOGIC CHECK LIMIT 500 ---
+        if len(text) > 500:
+            return None, f"❌ Văn bản quá dài ({len(text)}/500 ký tự)! Vui lòng cắt ngắn lại để đảm bảo chất lượng."
 
-        # Logic chọn Reference
+        # Logic chọn Reference & Voice Data
+        voice_data = None
         if mode_tab == "custom_mode": 
             if custom_audio is None or not custom_text:
-                return None, "⚠️ Vui lòng tải lên Audio và nhập nội dung Audio đó."
-            ref_audio_path = custom_audio
+                return None, "⚠️ Vui lòng tải lên Audio và nhập nội dung Audio đó để Clone giọng."
+            ref_codes = tts.encode_reference(custom_audio)
             ref_text_raw = custom_text
-            print("🎨 Mode: Custom Voice")
+            voice_data = {"codes": ref_codes, "text": ref_text_raw}
+            print("🎨 Mode: Voice Cloning")
+        elif mode_tab == "id_mode":
+            print(f"🎭 Mode: Speaker ID {speaker_id_val}")
+            # Dùng ID bất kỳ từ bộ dữ liệu
+            ref_codes = [int(speaker_id_val)] 
+            ref_text_raw = "Chào mừng bạn đến với VieNeu-TTS."
+            voice_data = {"codes": ref_codes, "text": ref_text_raw, "voice_id": int(speaker_id_val)}
         else: # Preset
-            if voice_choice not in VOICE_SAMPLES:
-                 return None, "⚠️ Vui lòng chọn một giọng mẫu."
-            ref_audio_path = VOICE_SAMPLES[voice_choice]["audio"]
-            ref_text_path = VOICE_SAMPLES[voice_choice]["text"]
-            
-            if not os.path.exists(ref_audio_path):
-                 return None, f"❌ Không tìm thấy file audio: {ref_audio_path}"
-                 
-            with open(ref_text_path, "r", encoding="utf-8") as f:
-                ref_text_raw = f.read()
+            voice_data = tts.get_preset_voice(voice_choice)
+            ref_codes = voice_data['codes']
+            ref_text_raw = voice_data['text']
             print(f"🎤 Mode: Preset Voice ({voice_choice})")
 
         # Inference & Đo thời gian
@@ -96,8 +89,13 @@ def synthesize_speech(text, voice_choice, custom_audio, custom_text, mode_tab):
         
         start_time = time.time()
         
-        ref_codes = tts.encode_reference(ref_audio_path)
-        wav = tts.infer(text, ref_codes, ref_text_raw)
+        wav = tts.infer(
+            text, 
+            ref_codes=ref_codes, 
+            ref_text=ref_text_raw, 
+            voice=voice_data,
+            temperature=temperature
+        )
         
         end_time = time.time()
         process_time = end_time - start_time
@@ -107,241 +105,189 @@ def synthesize_speech(text, voice_choice, custom_audio, custom_text, mode_tab):
             sf.write(tmp_file.name, wav, 24000)
             output_path = tmp_file.name
         
-        return output_path, f"✅ Thành công! (Thời gian: {process_time:.2f}s)"
+        return output_path, f"✅ Tổng hợp xong! (Thời gian: {process_time:.2f}s)"
 
     except Exception as e:
         import traceback
         traceback.print_exc()
-        return None, f"❌ Lỗi hệ thống: {str(e)}"
+        return None, f"❌ Lỗi: {str(e)}"
 
 # --- 4. UI SETUP ---
 theme = gr.themes.Soft(
     primary_hue="indigo",
     secondary_hue="cyan",
     neutral_hue="slate",
-    font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui'],
+    font=[gr.themes.GoogleFont('Outfit'), 'ui-sans-serif', 'system-ui'],
 ).set(
     button_primary_background_fill="linear-gradient(90deg, #6366f1 0%, #0ea5e9 100%)",
     button_primary_background_fill_hover="linear-gradient(90deg, #4f46e5 0%, #0284c7 100%)",
-    block_shadow="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    block_shadow="0 4px 10px rgba(0, 0, 0, 0.05)",
 )
 
 css = """
-.container { max-width: 1200px; margin: auto; }
+.container { max-width: 1100px; margin: auto; }
 .header-box { 
     text-align: center; 
     margin-bottom: 25px; 
-    padding: 25px; 
+    padding: 30px; 
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-    border-radius: 12px; 
+    border-radius: 16px; 
     border: 1px solid #334155; 
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
 }
 .header-title { 
-    font-size: 2.5rem; 
+    font-size: 2.8rem; 
     font-weight: 800; 
     color: white;
-    background: -webkit-linear-gradient(45deg, #60A5FA, #22D3EE);
+    background: -webkit-linear-gradient(45deg, #818cf8, #22d3ee);
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
-    margin-bottom: 10px; 
+    margin-bottom: 5px; 
 }
 .header-desc {
-    font-size: 1.1rem; 
-    color: #cbd5e1;
+    font-size: 1.15rem; 
+    color: #94a3b8;
     margin-bottom: 15px;
 }
+.badge-v2 {
+    background: #4f46e5;
+    color: white;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    vertical-align: middle;
+    margin-left: 10px;
+}
 .link-group a { 
     text-decoration: none; 
-    margin: 0 10px; 
+    margin: 0 12px; 
     font-weight: 600; 
-    color: #94a3b8;
-    transition: color 0.2s; 
+    color: #cbd5e1;
+    transition: all 0.2s; 
 }
-.link-group a:hover { color: #38bdf8; text-shadow: 0 0 5px rgba(56, 189, 248, 0.5); }
+.link-group a:hover { color: #38bdf8; transform: translateY(-1px); }
 .status-box { font-weight: bold; text-align: center; border: none; background: transparent; }
-.warning-banner {
-    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-    border: 2px solid #f59e0b;
-    border-radius: 8px;
-    padding: 15px 20px;
-    margin: 15px 0;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-.warning-banner-title {
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: #92400e;
-    margin-bottom: 8px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.warning-banner-content {
-    color: #78350f;
-    font-size: 0.95rem;
-    line-height: 1.6;
-}
-.warning-banner-content strong {
-    color: #92400e;
-    font-weight: 600;
-}
-.warning-banner-content code {
-    background: #fef3c7;
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-family: monospace;
-    color: #92400e;
-    font-weight: 500;
+.notice-card {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
 }
 """
 
 EXAMPLES_LIST = [
-    ["Về miền Tây không chỉ để ngắm nhìn sông nước hữu tình, mà còn để cảm nhận tấm chân tình của người dân nơi đây. Cùng ngồi xuồng ba lá len lỏi qua rặng dừa nước, nghe câu vọng cổ ngọt ngào thì còn gì bằng.", "Vĩnh (nam miền Nam)"],
-    ["Hà Nội những ngày vào thu mang một vẻ đẹp trầm mặc và cổ kính đến lạ thường. Đi dạo quanh Hồ Gươm vào sáng sớm, hít hà mùi hoa sữa nồng nàn và thưởng thức chút cốm làng Vòng là trải nghiệm khó quên.", "Bình (nam miền Bắc)"],
-    ["Sự bùng nổ của trí tuệ nhân tạo đang định hình lại cách chúng ta làm việc và sinh sống. Từ xe tự lái đến trợ lý ảo thông minh, công nghệ đang dần xóa nhòa ranh giới giữa thực tại và những bộ phim viễn tưởng.", "Tuyên (nam miền Bắc)"],
-    ["Sài Gòn hối hả là thế, nhưng chỉ cần tấp vào một quán cà phê ven đường, gọi ly bạc xỉu đá và ngắm nhìn dòng người qua lại, bạn sẽ thấy thành phố này cũng có những khoảng lặng thật bình yên và đáng yêu.", "Ngọc (nữ miền Bắc)"],
-    ["Ngày xửa ngày xưa, ở một ngôi làng nọ có cô Tấm xinh đẹp, nết na nhưng sớm mồ côi mẹ. Dù bị mẹ kế và Cám hãm hại đủ đường, Tấm vẫn giữ được tấm lòng lương thiện và cuối cùng tìm được hạnh phúc xứng đáng.", "Đoan (nữ miền Nam)"],
-    ["Dạ em chào anh chị, hiện tại bên em đang có chương trình ưu đãi đặc biệt cho căn hộ hướng sông này. Với thiết kế hiện đại và không gian xanh mát, đây chắc chắn là tổ ấm lý tưởng mà gia đình mình đang tìm kiếm.", "Ly (nữ miền Bắc)"],
+    ["VieNeu-TTS-v2 can speak English smoothly too! You can mix both languages: Hà Nội là một thành phố beautiful với bề dày history ngàn năm văn hiến.", "Đoan Trang (Nữ - Miền Bắc)", 4, 0.4],
+    ["Sự nhanh nhẹn và chính xác là ưu điểm của bản v2-Turbo. Chào mừng bạn đến với tương lai của TTS tiếng Việt!", "Xuân Vĩnh (Nam - Miền Nam)", 3, 0.4],
+    ["Hà Nội vào thu thật đẹp. Đi dạo quanh Hồ Gươm sáng sớm và thưởng thức chút cốm làng Vòng là trải nghiệm khó quên.", "Phạm Tuyên (Nam - Miền Bắc)", 2, 0.5],
+    ["Chào mừng bạn đến với kênh của chúng mình! Hôm nay mình sẽ giới thiệu về những địa điểm du lịch hot nhất miền Tây nhé.", "Thục Đoan (Nữ - Miền Nam)", 1, 0.4],
 ]
 
-with gr.Blocks(theme=theme, css=css, title="VieNeu-TTS Studio") as demo:
+with gr.Blocks(theme=theme, css=css, title="VieNeu-TTS v2-Turbo") as demo:
     
     with gr.Column(elem_classes="container"):
         # Header
-        gr.HTML("""
+        gr.HTML(f"""
             <div class="header-box">
-                <div class="header-title">🦜 VieNeu-TTS Studio</div>
+                <div class="header-title">🦜 VieNeu-TTS v2-Turbo <span class="badge-v2">V2 RELEASE</span></div>
                 <div class="header-desc">
-                    Phiên bản: VieNeu-TTS (model mới nhất, train trên 1000 giờ dữ liệu)
+                    Mô hình TTS Anh-Việt song ngữ thế hệ mới. Khám phá kho giọng đọc khổng lồ.
                 </div>
                 <div class="link-group">
-                    <a href="https://huggingface.co/pnnbao-ump/VieNeu-TTS" target="_blank">🤗 Model Card</a> • 
-                    <a href="https://huggingface.co/datasets/pnnbao-ump/VieNeu-TTS-1000h" target="_blank">📖 Dataset 1000h</a> • 
-                    <a href="https://github.com/pnnbao97/VieNeu-TTS" target="_blank">🦜 GitHub</a>
+                    <a href="https://huggingface.co/pnnbao-ump/VieNeu-TTS-v2-Turbo" target="_blank">🤗 Model</a> • 
+                    <a href="https://github.com/pnnbao97/VieNeu-TTS" target="_blank">🦜 GitHub</a> •
+                    <a href="https://pnnbao.id.vn" target="_blank">🌐 Website</a>
                 </div>
             </div>
         """)
         
-        # Performance Warning Banner
-        gr.HTML("""
-            <div class="warning-banner">
-                <div class="warning-banner-title">
-                    ⚠️ Lưu ý về hiệu năng
-                </div>
-                <div class="warning-banner-content">
-                    <strong>Demo này chạy trên HF Spaces với ZeroGPU (shared GPU)</strong> nên tốc độ sẽ <strong>chậm hơn</strong> và <strong>bị giới hạn 250 ký tự</strong> vì không thể triển khai lmdeploy trên HF space.<br><br>
-                    
-                    💡 <strong>Muốn tốc độ cực nhanh và không giới hạn ký tự?</strong> Hãy clone mã nguồn từ <a href="https://github.com/pnnbao97/VieNeu-TTS" target="_blank" style="color: #92400e; text-decoration: underline;">GitHub</a> và cài <code>lmdeploy</code> để chạy trên GPU của bạn:<br>
-                    
-                    🚀 Với LMDeploy + GPU local, tốc độ sẽ <strong>nhanh hơn 5-10 lần</strong> so với demo này!
-                </div>
-            </div>
-        """)
-    
-    with gr.Row(elem_classes="container", equal_height=False):
-        
-        # --- LEFT: INPUT ---
-        with gr.Column(scale=3, variant="panel"):
-            gr.Markdown("### 📝 Văn bản đầu vào")
-            text_input = gr.Textbox(
-                label="Nhập văn bản",
-                placeholder="Nhập nội dung tiếng Việt cần chuyển thành giọng nói...",
-                lines=4,
-                value="Sự bùng nổ của trí tuệ nhân tạo đang định hình lại cách chúng ta làm việc và sinh sống. Từ xe tự lái đến trợ lý ảo thông minh, công nghệ đang dần xóa nhòa ranh giới giữa thực tại và những bộ phim viễn tưởng.",
-                show_label=False
-            )
-            
-            # Counter
-            with gr.Row():
-                char_count = gr.HTML("<div style='text-align: right; color: #64748B; font-size: 0.8rem;'>0 / 250 ký tự</div>")
-            
-            gr.Markdown("### 🗣️ Chọn giọng đọc")
-            with gr.Tabs() as tabs:
-                with gr.TabItem("👤 Giọng có sẵn (Preset)", id="preset_mode"):
-                    voice_select = gr.Dropdown(
-                        choices=list(VOICE_SAMPLES.keys()),
-                        value="Tuyên (nam miền Bắc)",
-                        label="Danh sách giọng",
-                        interactive=True
+        with gr.Row():
+            # --- LEFT: INPUT ---
+            with gr.Column(scale=3):
+                with gr.Group():
+                    gr.Markdown("### 📝 Nội dung văn bản")
+                    text_input = gr.Textbox(
+                        label="Nhập văn bản (hỗ trợ song ngữ)",
+                        placeholder="Nhập nội dung tiếng Việt hoặc Anh-Việt mix...",
+                        lines=5,
+                        value="Chào mừng bạn đến với VieNeu-TTS-v2-Turbo! Đây là mô hình mới nhất hỗ trợ đọc song ngữ Anh-Việt cực kỳ mượt mà. I hope you enjoy this demo!",
+                        show_label=False
                     )
-                    with gr.Accordion("Thông tin giọng mẫu", open=False):
-                        ref_audio_preview = gr.Audio(label="Audio mẫu", interactive=False, type="filepath")
-                        ref_text_preview = gr.Markdown("...")
-
-                with gr.TabItem("🦜 Voice Cloning", id="custom_mode"):
-                    gr.Markdown("Tải lên giọng của bạn (Zero-shot Cloning)")
-                    custom_audio = gr.Audio(label="File ghi âm (.wav)", type="filepath")
-                    custom_text = gr.Textbox(label="Nội dung ghi âm", placeholder="Nhập chính xác lời thoại...")
+                    with gr.Row():
+                        char_count = gr.HTML("<div style='text-align: right; color: #64748B; font-size: 0.8rem;'>0 / 500 ký tự</div>")
                     
-                    gr.Examples(
-                        examples=[
-                            [os.path.join("examples", "audio_ref", "example.wav"), "Ví dụ 2. Tính trung bình của dãy số."],
-                            [os.path.join("examples", "audio_ref", "example_2.wav"), "Trên thực tế, các nghi ngờ đã bắt đầu xuất hiện."],
-                            [os.path.join("examples", "audio_ref", "example_3.wav"), "Cậu có nhìn thấy không?"],
-                            [os.path.join("examples", "audio_ref", "example_4.wav"), "Tết là dịp mọi người háo hức đón chào một năm mới với nhiều hy vọng và mong ước."]
-                        ],
-                        inputs=[custom_audio, custom_text],
-                        label="Ví dụ mẫu để thử nghiệm clone giọng"
+                    temperature = gr.Slider(
+                        minimum=0.1, maximum=1.0, value=0.4, step=0.1, 
+                        label="����️ Temperature", info="Cao = đa dạng cảm xúc hơn, Thấp = ổn định hơn."
                     )
+                
+                gr.Markdown("### 🗣️ Chọn giọng đọc")
+                with gr.Tabs() as tabs:
+                    with gr.TabItem("👤 Nhân vật mẫu", id="preset_mode"):
+                        voice_select = gr.Dropdown(
+                            choices=VOICE_NAMES,
+                            value=VOICE_NAMES[0] if VOICE_NAMES else None,
+                            label="Chọn nhân vật",
+                            interactive=True
+                        )
+                    
+                    with gr.TabItem("🎭 Giọng đa dạng (ID)", id="id_mode"):
+                        gr.Markdown("Khám phá hàng ngàn giọng đọc khác nhau bằng cách chọn ID (0 - 1000).")
+                        speaker_id_num = gr.Slider(
+                            minimum=0, maximum=1000, value=3, step=1,
+                            label="Speaker ID", info="Mỗi ID đại diện cho một giọng đọc khác nhau trong tập huấn luyện."
+                        )
 
-            current_mode = gr.State(value="preset_mode")
-            btn_generate = gr.Button("Tổng hợp giọng nói", variant="primary", size="lg")
+                    with gr.TabItem("🦜 Voice Cloning", id="custom_mode"):
+                        gr.Markdown("Tải lên voice 3-5 giây để clone (Zero-shot)")
+                        custom_audio = gr.Audio(label="Audio mẫu", type="filepath")
+                        custom_text = gr.Textbox(label="Nội dung audio mẫu", placeholder="Nhập chính xác văn bản trong audio trên...")
 
-        # --- RIGHT: OUTPUT ---
-        with gr.Column(scale=2):
-            gr.Markdown("### 🎧 Kết quả")
-            with gr.Group():
-                audio_output = gr.Audio(label="Audio đầu ra", type="filepath", autoplay=True)
-                status_output = gr.Textbox(label="Trạng thái", show_label=False, elem_classes="status-box", placeholder="Sẵn sàng...")
+                current_mode = gr.State(value="preset_mode")
+                btn_generate = gr.Button("⚡ Bắt đầu tổng hợp", variant="primary", size="lg", elem_id="generate_btn")
 
-    # --- EXAMPLES ---
-    with gr.Row(elem_classes="container"):
-        with gr.Column():
-            gr.Markdown("### 📚 Ví dụ mẫu")
-            gr.Examples(examples=EXAMPLES_LIST, inputs=[text_input, voice_select], label="Thử nghiệm nhanh")
+            # --- RIGHT: OUTPUT ---
+            with gr.Column(scale=2):
+                gr.Markdown("### 🎧 Kết quả âm thanh")
+                with gr.Group():
+                    audio_output = gr.Audio(label="Output Audio", type="filepath", autoplay=True)
+                    status_output = gr.Textbox(label="Trạng thái", show_label=False, elem_classes="status-box", placeholder="Sẵn sàng...")
+                
+                with gr.Column(elem_classes="notice-card"):
+                    gr.Markdown("#### 💡 Mẹo nhỏ")
+                    gr.Markdown("""
+                    - **Speaker ID:** Cho phép bạn khám phá vô số giọng đọc có sẵn trong model mà không cần file mẫu.
+                    - **Song ngữ:** Bạn có thể viết xen kẽ tiếng Anh và tiếng Việt.
+                    - **Cloning:** Hãy sử dụng audio rõ nét, không tạp âm để có kết quả tốt nhất.
+                    """)
+
+        # --- EXAMPLES ---
+        gr.Markdown("### 📚 Ví dụ thử nghiệm")
+        gr.Examples(
+            examples=EXAMPLES_LIST, 
+            inputs=[text_input, voice_select, speaker_id_num, temperature],
+            label="Nhấn vào ví dụ để thử nhanh"
+        )
 
     # --- LOGIC ---
     def update_count(text):
         l = len(text)
-        if l > 250:
-            color = "#dc2626"
-            msg = f"⚠️ <b>{l} / 250</b> - Quá giới hạn!"
-        elif l > 200:
-            color = "#ea580c"
-            msg = f"{l} / 250"
-        else:
-            color = "#64748B"
-            msg = f"{l} / 250 ký tự"
+        color = "#64748B" if l <= 500 else "#dc2626"
+        msg = f"{l} / 500 ký tự"
         return f"<div style='text-align: right; color: {color}; font-size: 0.8rem; font-weight: bold'>{msg}</div>"
 
     text_input.change(update_count, text_input, char_count)
 
-    def update_ref_preview(voice):
-        audio, text = load_reference_info(voice)
-        return audio, f"> *\"{text}\"*"
-    
-    voice_select.change(update_ref_preview, voice_select, [ref_audio_preview, ref_text_preview])
-    demo.load(update_ref_preview, voice_select, [ref_audio_preview, ref_text_preview])
-
     # Tab handling
-    def set_preset_mode():
-        return "preset_mode"
-    
-    def set_custom_mode():
-        return "custom_mode"
-    
-    tabs.children[0].select(fn=set_preset_mode, outputs=current_mode)
-    tabs.children[1].select(fn=set_custom_mode, outputs=current_mode)
+    tabs.children[0].select(fn=lambda: "preset_mode", outputs=current_mode)
+    tabs.children[1].select(fn=lambda: "id_mode", outputs=current_mode)
+    tabs.children[2].select(fn=lambda: "custom_mode", outputs=current_mode)
 
     btn_generate.click(
         fn=synthesize_speech,
-        inputs=[text_input, voice_select, custom_audio, custom_text, current_mode],
+        inputs=[text_input, voice_select, speaker_id_num, custom_audio, custom_text, current_mode, temperature],
         outputs=[audio_output, status_output]
     )
 
 if __name__ == "__main__":
-    demo.queue().launch(
-        server_name="0.0.0.0",
-        server_port=7860
-    )
+    demo.queue().launch(show_api=False)