Update ui/tabs.py

ui/tabs.py

@@ -7,6 +7,7 @@ from services.audio_service import AudioService
 from services.chat_service import ChatService
 from services.image_service import ImageService
 from services.streaming_voice_service import StreamingVoiceService
+from services.openai_realtime_service import HybridStreamingService
 from services.stream_object_detection_service import  StreamObjectDetection
 from core.rag_system import EnhancedRAGSystem
 from core.tts_service import EnhancedTTSService
@@ -17,11 +18,13 @@ def create_all_tabs(audio_service: AudioService, chat_service: ChatService,
                    image_service: ImageService, rag_system: EnhancedRAGSystem,
                    tts_service: EnhancedTTSService, wikipedia_processor: WikipediaProcessor,
                    streaming_voice_service: StreamingVoiceService,
+                   hybrid_service: HybridStreamingService
                    ):
     
     with gr.Tab("🎙️ Streaming Voice (VAD)"):
         create_streaming_voice_tab(streaming_voice_service)
-    
+    with gr.Tab("Stream Object Detection"):
+        create_openai_realtime_tab()
     with gr.Tab("🎙️ Audio"):
         create_audio_tab(audio_service)
     
@@ -40,7 +43,134 @@ def create_all_tabs(audio_service: AudioService, chat_service: ChatService,
     with gr.Tab("🌐 Language Info"):  # NEW TAB
         create_language_info_tab(rag_system.multilingual_manager)
     with gr.Tab("Stream Object Detection"):
-        create_streaming_object_detection()
+        create_streaming_object_detection(hybrid_service)
+        
+def create_openai_realtime_tab(hybrid_service: HybridStreamingService):
+    """Tạo tab cho OpenAI Realtime API"""
+    
+    with gr.Blocks() as openai_tab:
+        gr.Markdown("## 🤖 OpenAI Realtime API - Streaming Chất Lượng Cao")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                # Mode selection
+                mode_selector = gr.Radio(
+                    choices=["local", "openai", "auto"],
+                    value="auto",
+                    label="Chế độ nhận diện",
+                    info="Local: VOSK (nhanh), OpenAI: Chất lượng cao"
+                )
+                
+                start_btn = gr.Button("🎙️ Bắt đầu Streaming", variant="primary")
+                stop_btn = gr.Button("🛑 Dừng", variant="secondary")
+                
+                status_display = gr.Textbox(
+                    label="Trạng thái",
+                    value="Chưa kết nối",
+                    interactive=False
+                )
+                
+                # OpenAI specific controls
+                with gr.Accordion("⚙️ Cài đặt OpenAI", open=False):
+                    api_key = gr.Textbox(
+                        label="OpenAI API Key",
+                        type="password",
+                        placeholder="Nhập API key...",
+                        info="Cần cho chế độ OpenAI Realtime"
+                    )
+                    
+                    language_select = gr.Dropdown(
+                        choices=["vi", "en", "fr", "es", "de", "ja", "zh"],
+                        value="vi",
+                        label="Ngôn ngữ"
+                    )
+            
+            with gr.Column(scale=2):
+                chatbot = gr.Chatbot(
+                    label="💬 Hội thoại",
+                    type="messages",
+                    height=400
+                )
+                
+                transcription_display = gr.Textbox(
+                    label="🎤 Bạn nói",
+                    interactive=False,
+                    lines=2
+                )
+                
+                audio_output = gr.Audio(
+                    label="🔊 Phản hồi AI",
+                    interactive=False,
+                    autoplay=True
+                )
+        
+        # State management
+        connection_state = gr.State(value=False)
+        
+        async def start_streaming(mode, api_key, language, history):
+            """Bắt đầu streaming với mode đã chọn"""
+            try:
+                # Cập nhật service với API key
+                if api_key and not hybrid_service.openai_service:
+                    hybrid_service.openai_service = OpenAIRealtimeService(api_key)
+                
+                success = await hybrid_service.start_listening(
+                    speech_callback=lambda x: None,  # Will be handled via events
+                    mode=mode
+                )
+                
+                if success:
+                    return True, f"✅ Đã kết nối - Chế độ: {mode}", history
+                else:
+                    return False, "❌ Không thể kết nối", history
+                    
+            except Exception as e:
+                return False, f"❌ Lỗi: {str(e)}", history
+        
+        def stop_streaming():
+            """Dừng streaming"""
+            hybrid_service.stop_listening()
+            return False, "🛑 Đã dừng streaming", []
+        
+        def update_chat(history, message, role="user"):
+            """Cập nhật chat history"""
+            if role == "user":
+                history.append({"role": "user", "content": message})
+            else:
+                history.append({"role": "assistant", "content": message})
+            return history
+        
+        # Event handlers
+        start_btn.click(
+            start_streaming,
+            inputs=[mode_selector, api_key, language_select, chatbot],
+            outputs=[connection_state, status_display, chatbot]
+        )
+        
+        stop_btn.click(
+            stop_streaming,
+            outputs=[connection_state, status_display, chatbot]
+        )
+        
+        # Real-time updates via JavaScript
+        openai_tab.load(
+            fn=None,
+            inputs=[],
+            outputs=[],
+            js="""
+            function setupEventSource() {
+                const eventSource = new EventSource('/outputs');
+                eventSource.onmessage = function(event) {
+                    const data = JSON.parse(event.data);
+                    // Handle real-time updates from OpenAI
+                    console.log('OpenAI event:', data);
+                };
+            }
+            setupEventSource();
+            """
+        )
+    
+    return openai_tab
 def create_streaming_object_detection():
     with gr.Blocks() as object_detection_tab:
         gr.HTML(