Update ui/components.py

ui/components.py

@@ -105,9 +105,10 @@ 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 sử dụng Gradio microphone"""
-    with gr.Group():
+def create_streaming_voice_tab(streaming_service: StreamingVoiceService):
+    """Tạo tab streaming voice sử dụng Gradio microphone"""
+    
+    with gr.Blocks() as streaming_tab:
         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")
         
@@ -160,16 +161,46 @@ def create_streaming_voice_components() -> tuple:
                     interactive=False,
                     autoplay=True
                 )
+        
+        def process_audio_stream(audio_data):
+            """Xử lý audio stream từ microphone"""
+            if audio_data is None:
+                return "❌ Không có âm thanh", "Vui lòng nói lại", None, "Đang chờ...", {}
+            
+            try:
+                print("🎯 Đang xử lý audio stream...")
+                
+                # Xử lý audio
+                result = streaming_service.process_streaming_audio(audio_data)
+                
+                # Cập nhật state
+                state = streaming_service.get_conversation_state()
+                status = f"✅ Đã xử lý - {len(result['transcription'])} ký tự"
+                
+                return result['transcription'], result['response'], result['tts_audio'], status, state
+                
+            except Exception as e:
+                error_msg = f"❌ Lỗi xử lý: {str(e)}"
+                print(f"Lỗi: {traceback.format_exc()}")
+                return error_msg, "Xin lỗi, có lỗi xảy ra", None, "❌ Lỗi", {}
+        
+        def clear_conversation():
+            """Xóa hội thoại"""
+            streaming_service.clear_conversation()
+            state = streaming_service.get_conversation_state()
+            return "", "", None, "🗑️ Đã xóa hội thoại", state
+        
+        # Event handlers
+        microphone.stream(
+            process_audio_stream,
+            inputs=[microphone],
+            outputs=[realtime_transcription, ai_response, tts_output, status_display, state_display]
+        )
+        
+        clear_btn.click(
+            clear_conversation,
+            outputs=[realtime_transcription, ai_response, tts_output, status_display, state_display]
+        )
     
-    # CHỈ TRẢ VỀ 8 GIÁ TRỊ - đã bỏ streaming_state và conversation_history
-    return (
-        microphone, 
-        clear_btn, 
-        status_display, 
-        state_display,
-        realtime_transcription, 
-        ai_response, 
-        tts_output
-        # Đã bỏ 2 giá trị cuối: streaming_state, conversation_history
-    )
+    return streaming_tab