Update ui/components.py

ui/components.py

@@ -106,36 +106,28 @@ def create_chat_components() -> tuple:
     
     return chatbot, state, user_input, send_button, clear_button, chat_tts_output
 def create_streaming_voice_components() -> tuple:
-    """Tạo components cho streaming voice với VAD"""
+    """Tạo components cho streaming voice sử dụng Gradio microphone"""
     with gr.Group():
-        gr.Markdown("## 🎤 Trò chuyện giọng nói thời gian thực với VAD")
-        gr.Markdown("Hệ thống sẽ tự động phát hiện khi bạn nói và dừng, tạo cuộc hội thoại tự nhiên")
+        gr.Markdown("## 🎤 Trò chuyện giọng nói thời gian thực")
+        gr.Markdown("Sử dụng microphone của thiết bị để trò chuyện với AI - hoạt động trên cả điện thoại và máy tính")
         
         with gr.Row():
             with gr.Column(scale=1):
-                # Voice activity visualization
-                vad_visualizer = gr.HTML(
-                    value="<div class='vad-visualizer' style='width: 100%;'></div>",
-                    label="Voice Activity"
+                # Microphone component - THAY THẾ VAD bằng Gradio Microphone
+                microphone = gr.Microphone(
+                    label="🎙️ Nhấn và nói",
+                    type="numpy",
+                    streaming=True,
+                    show_download_button=False
                 )
                 
-                # Controls
-                with gr.Row():
-                    start_listening_btn = gr.Button(
-                        "🎙️ Bắt đầu lắng nghe", 
-                        variant="primary",
-                        size="sm"
-                    )
-                    stop_listening_btn = gr.Button(
-                        "🛑 Dừng lắng nghe", 
-                        variant="secondary",
-                        size="sm"
-                    )
+                # Clear conversation button
+                clear_btn = gr.Button("🗑️ Xóa hội thoại", variant="secondary", size="sm")
                 
-                # Status
+                # Status display
                 status_display = gr.Textbox(
                     label="Trạng thái",
-                    value="Chưa lắng nghe",
+                    value="Sẵn sàng - nhấn nút microphone để nói",
                     interactive=False
                 )
                 
@@ -148,7 +140,7 @@ def create_streaming_voice_components() -> tuple:
             with gr.Column(scale=2):
                 # Real-time transcription
                 realtime_transcription = gr.Textbox(
-                    label="🎯 Đang nói...",
+                    label="📝 Bạn vừa nói",
                     lines=2,
                     interactive=False,
                     placeholder="Văn bản được chuyển đổi sẽ xuất hiện ở đây..."
@@ -169,12 +161,11 @@ def create_streaming_voice_components() -> tuple:
                     autoplay=True
                 )
         
-        # Hidden state components
-        streaming_state = gr.State(value=False)
-        conversation_history = gr.State(value=[])
+        # Hidden state
+        conversation_state = gr.State(value={})
     
     return (
-        start_listening_btn, stop_listening_btn, status_display, state_display,
-        realtime_transcription, ai_response, tts_output, streaming_state,
-        conversation_history, vad_visualizer
+        microphone, clear_btn, status_display, state_display,
+        realtime_transcription, ai_response, tts_output, conversation_state
+    )
     )