Update ui/tabs.py

ui/tabs.py

@@ -56,26 +56,26 @@ def create_all_tabs(audio_service: AudioService, chat_service: ChatService,
     with gr.Tab("Stream Object Detection"):
         create_streaming_object_detection()
 def create_gemini_realtime_tab():
-    """Tạo tab cho Gemini Realtime API"""
+    """Tạo tab cho Gemini Realtime API với Audio Streaming"""
     
     with gr.Blocks() as gemini_tab:
         gr.Markdown("""
-        # 🎯 Gemini Realtime API
-        **Streaming hội thoại thời gian thực với Google Gemini**
+        # 🎯 Gemini Realtime API 
+        **Audio Streaming Thời Gian Thực với Google Gemini**
         """)
         
         with gr.Row():
             with gr.Column(scale=1):
                 # Connection controls
                 with gr.Group():
-                    gr.Markdown("### 🔗 Kết nối")
+                    gr.Markdown("### 🔗 Kết nối Audio")
                     
                     api_key = gr.Textbox(
                         label="Gemini API Key",
                         type="password",
                         placeholder="Nhập API key của bạn...",
                         value=os.getenv("GEMINI_API_KEY", ""),
-                        info="Lấy từ https://aistudio.google.com/"
+                        info="Cần cho Audio Streaming"
                     )
                     
                     voice_select = gr.Dropdown(
@@ -86,7 +86,7 @@ def create_gemini_realtime_tab():
                     )
                     
                     with gr.Row():
-                        connect_btn = gr.Button("🔗 Kết nối", variant="primary")
+                        connect_btn = gr.Button("🔗 Kết nối Audio", variant="primary")
                         disconnect_btn = gr.Button("🔌 Ngắt kết nối", variant="secondary")
                 
                 # Status panel
@@ -94,7 +94,7 @@ def create_gemini_realtime_tab():
                     gr.Markdown("### 📊 Trạng thái")
                     
                     status_display = gr.Textbox(
-                        label="Trạng thái kết nối",
+                        label="Trạng thái",
                         value="Chưa kết nối",
                         interactive=False
                     )
@@ -113,217 +113,268 @@ def create_gemini_realtime_tab():
                     chatbot = gr.Chatbot(
                         label="Gemini Chat",
                         type="messages",
-                        height=400,
+                        height=300,
                         show_copy_button=True,
-                        value=[]  # Khởi tạo giá trị mặc định
+                        value=[]
                     )
                 
-                # Audio interface - Simplified for now
+                # Audio Streaming Interface
                 with gr.Group():
-                    gr.Markdown("### 🎤 Audio Streaming (Coming Soon)")
+                    gr.Markdown("### 🎤 Audio Streaming")
                     
-                    gr.Markdown("""
-                    **Tính năng audio realtime đang được phát triển**
-                    - 🎙️ Real-time voice recognition
-                    - 🔊 Real-time audio response  
-                    - ⚡ Low latency streaming
-                    """)
-                    
-                    # Tạm thời ẩn các nút audio
-                    # with gr.Row():
-                    #     start_audio_btn = gr.Button("🎙️ Bắt đầu nói", variant="primary", visible=False)
-                    #     stop_audio_btn = gr.Button("⏹️ Dừng nói", variant="secondary", visible=False)
+                    with gr.Row():
+                        start_audio_btn = gr.Button("🎙️ Bắt đầu nói", variant="primary")
+                        stop_audio_btn = gr.Button("⏹️ Dừng nói", variant="secondary")
                     
                     transcription_display = gr.Textbox(
                         label="Bạn nói",
                         interactive=False,
                         lines=2,
-                        placeholder="Tính năng audio đang được phát triển...",
-                        visible=False
+                        placeholder="Văn bản nhận diện sẽ hiển thị ở đây..."
                     )
                     
+                    # Audio output for Gemini responses
                     audio_output = gr.Audio(
-                        label="Gemini trả lời",
+                        label="🔊 Gemini trả lời",
                         interactive=False,
-                        autoplay=True,
-                        visible=False
+                        autoplay=True
+                    )
+                    
+                    # Audio input for user
+                    audio_input = gr.Audio(
+                        label="🎤 Micro của bạn",
+                        sources=["microphone"],
+                        type="numpy",
+                        interactive=True
                     )
         
         # State management
         connection_state = gr.State(value=False)
-        # audio_stream_state = gr.State(value=False)
+        audio_streaming_state = gr.State(value=False)
+        gemini_service_state = gr.State(value=None)
         
-        # Khởi tạo service (không khởi tạo global để tránh lỗi)
-        gemini_service = None
-        
-        async def initialize_gemini_service(api_key: str):
-            """Khởi tạo Gemini service"""
-            nonlocal gemini_service
-            try:
-                from services.gemini_realtime_service import GeminiRealtimeService
-                gemini_service = GeminiRealtimeService(api_key)
-                await gemini_service.initialize()
-                return True, "✅ Đã khởi tạo Gemini service"
-            except Exception as e:
-                return False, f"❌ Lỗi khởi tạo: {str(e)}"
-        
-        async def gemini_callback(data: dict):
-            """Callback function để xử lý events từ Gemini service"""
-            if data['type'] == 'status':
-                return data['message'], data['message']
-            elif data['type'] == 'text':
-                return f"📝 Gemini: {data['content']}", data['content']
-            elif data['type'] == 'error':
-                return f"❌ Lỗi: {data['message']}", data['message']
-            return "Unknown event", "Unknown event"
-        
-        # Event handlers for connection
-        async def connect_gemini(api_key: str, voice_name: str, current_chat):
-            """Kết nối đến Gemini Realtime API"""
+        async def connect_gemini(api_key, voice_name, current_chat):
+            """Kết nối Gemini Audio Streaming"""
             try:
                 if not api_key:
-                    return False, "❌ Vui lòng nhập API Key", "Chưa kết nối", current_chat
-                
-                # Khởi tạo service
-                success, message = await initialize_gemini_service(api_key)
-                if not success:
-                    return False, message, "Lỗi khởi tạo", current_chat
-                
-                # Kết nối session
-                success = await gemini_service.start_session(
-                    voice_name=voice_name, 
-                    callback=gemini_callback
+                    return False, "❌ Vui lòng nhập API Key", "Chưa kết nối", current_chat, None
+                
+                service = GeminiRealtimeService(api_key)
+                
+                # Callback để xử lý real-time events
+                async def handle_gemini_callback(data):
+                    if data['type'] == 'status':
+                        gr.Info(data['message'])
+                        return data['message'], data['message'], current_chat
+                    elif data['type'] == 'text':
+                        # Cập nhật transcription
+                        new_chat = current_chat + [{"role": "assistant", "content": data['content']}]
+                        return f"📝 {data['content']}", data['content'], new_chat
+                    elif data['type'] == 'audio':
+                        # Xử lý audio stream (sẽ được xử lý trong audio output)
+                        return "🔊 Đang nhận audio...", "audio_received", current_chat
+                    elif data['type'] == 'error':
+                        gr.Warning(data['message'])
+                        return f"❌ {data['message']}", data['message'], current_chat
+                    return "Unknown", "unknown", current_chat
+                
+                success = await service.start_session(
+                    voice_name=voice_name,
+                    callback=handle_gemini_callback
                 )
                 
                 if success:
-                    # Thêm message chào mừng
-                    new_chat = current_chat + [{"role": "assistant", "content": f"Xin chào! Tôi là Gemini AI với giọng {voice_name}. Hãy bắt đầu trò chuyện!"}]
-                    return True, "✅ Đã kết nối Gemini", f"Đang sử dụng giọng: {voice_name}", new_chat
+                    welcome_msg = f"Xin chào! Tôi là Gemini với giọng {voice_name}. Hãy bắt đầu nói chuyện!"
+                    new_chat = current_chat + [{"role": "assistant", "content": welcome_msg}]
+                    info_msg = f"Đã kết nối audio streaming - Giọng: {voice_name}"
+                    return True, "✅ Đã kết nối Audio Streaming", info_msg, new_chat, service
                 else:
-                    return False, "❌ Không thể kết nối Gemini", "Lỗi kết nối", current_chat
-                
+                    return False, "❌ Không thể kết nối audio", "Lỗi kết nối", current_chat, None
+                    
             except Exception as e:
-                return False, f"❌ Lỗi kết nối: {str(e)}", "Lỗi kết nối", current_chat
-        
-        async def disconnect_gemini(current_chat):
-            """Ngắt kết nối Gemini"""
-            nonlocal gemini_service
-            if gemini_service:
-                await gemini_service.close()
-                gemini_service = None
+                error_msg = f"❌ Lỗi kết nối: {str(e)}"
+                return False, error_msg, f"Lỗi: {str(e)}", current_chat, None
+        
+        async def disconnect_gemini(current_chat, service):
+            """Ngắt kết nối"""
+            if service:
+                await service.close()
             
-            # Thêm message thông báo ngắt kết nối
-            new_chat = current_chat + [{"role": "assistant", "content": "Đã ngắt kết nối với Gemini."}]
-            return False, "🔌 Đã ngắt kết nối", "Ngắt kết nối", new_chat
-        
-        # Text chat functionality
-        async def send_text_message(message: str, history):
-            """Gửi tin nhắn text đến Gemini"""
-            if not gemini_service or not gemini_service.is_active:
-                return history, "❌ Chưa kết nối Gemini. Vui lòng kết nối trước."
+            new_chat = current_chat + [{"role": "assistant", "content": "Đã ngắt kết nối audio streaming."}]
+            return False, "🔌 Đã ngắt kết nối", "Ngắt kết nối", new_chat, None
+        
+        async def start_audio_stream(service, audio_state):
+            """Bắt đầu stream audio"""
+            if not service or not service.is_active:
+                return False, "❌ Chưa kết nối. Vui lòng kết nối trước."
+            
+            return True, "🎙️ Đang nghe... Hãy bắt đầu nói!"
+        
+        async def stop_audio_stream(service, audio_state):
+            """Dừng stream audio"""
+            return False, "⏹️ Đã dừng thu âm"
+        
+        async def process_audio_input(audio_data, sample_rate, service, current_chat):
+            """Xử lý audio input từ user"""
+            if not service or not service.is_active:
+                return current_chat, "❌ Chưa kết nối audio", current_chat
+            
+            if audio_data is None:
+                return current_chat, "⚠️ Không có audio input", current_chat
             
             try:
-                # Thêm tin nhắn user vào history
-                new_history = history + [{"role": "user", "content": message}]
-                
-                # Gửi đến Gemini (sử dụng text fallback)
-                response_text = await gemini_service.send_text(message)
+                # Gửi audio đến Gemini
+                success = await service.send_audio_chunk(audio_data, sample_rate)
                 
-                if response_text:
-                    # Thêm response vào history
-                    new_history.append({"role": "assistant", "content": response_text})
-                    return new_history, f"✅ Đã nhận phản hồi ({len(response_text)} ký tự)"
+                if success:
+                    # Nhận audio response từ Gemini
+                    audio_response = await service.receive_audio()
+                    
+                    if audio_response:
+                        resp_sample_rate, resp_audio_data = audio_response
+                        # Lưu audio response để phát
+                        audio_path = f"gemini_response_{int(asyncio.get_event_loop().time())}.wav"
+                        import scipy.io.wavfile as wavfile
+                        wavfile.write(audio_path, resp_sample_rate, resp_audio_data)
+                        
+                        info_msg = "🔊 Đã nhận phản hồi audio từ Gemini"
+                        return current_chat, info_msg, audio_path
+                    else:
+                        info_msg = "⏳ Đang chờ phản hồi audio..."
+                        return current_chat, info_msg, None
                 else:
-                    error_msg = "❌ Không nhận được phản hồi từ Gemini"
-                    new_history.append({"role": "assistant", "content": error_msg})
-                    return new_history, error_msg
+                    return current_chat, "❌ Lỗi gửi audio", current_chat
                     
+            except Exception as e:
+                error_msg = f"❌ Lỗi xử lý audio: {str(e)}"
+                return current_chat, error_msg, current_chat
+        
+        async def send_text_message(message, current_chat, service):
+            """Gửi tin nhắn text (fallback)"""
+            if not service or not service.is_active:
+                error_msg = "❌ Chưa kết nối. Vui lòng kết nối trước."
+                new_chat = current_chat + [{"role": "user", "content": message}, {"role": "assistant", "content": error_msg}]
+                return new_chat, "Lỗi kết nối", new_chat
+                
+            if not message.strip():
+                return current_chat, "⚠️ Vui lòng nhập tin nhắn", current_chat
+            
+            try:
+                # Hiển thị tin nhắn user
+                new_chat = current_chat + [{"role": "user", "content": message}]
+                
+                # Gửi text
+                response = await service.send_text(message)
+                
+                # Cập nhật response
+                new_chat = new_chat + [{"role": "assistant", "content": response}]
+                
+                return new_chat, f"✅ Đã nhận phản hồi ({len(response)} ký tự)", new_chat
+                
             except Exception as e:
                 error_msg = f"❌ Lỗi: {str(e)}"
-                new_history = history + [
-                    {"role": "user", "content": message},
-                    {"role": "assistant", "content": error_msg}
-                ]
-                return new_history, error_msg
+                new_chat = current_chat + [{"role": "user", "content": message}, {"role": "assistant", "content": error_msg}]
+                return new_chat, error_msg, new_chat
         
-        # Thêm text input cho chat
+        def clear_chat():
+            """Xóa chat"""
+            return [], "🧹 Đã xóa chat", []
+        
+        # Thêm text input
         with gr.Row():
             text_input = gr.Textbox(
-                label="Tin nhắn của bạn",
-                placeholder="Nhập tin nhắn và nhấn Enter...",
+                label="Hoặc nhập tin nhắn text",
+                placeholder="Nhập tin nhắn text và nhấn Enter...",
                 scale=4
             )
-            send_text_btn = gr.Button("📤 Gửi", scale=1)
+            send_text_btn = gr.Button("📤 Gửi text", scale=1)
         
-        # Connection events
+        # Event handlers
         connect_btn.click(
             connect_gemini,
             inputs=[api_key, voice_select, chatbot],
-            outputs=[connection_state, status_display, connection_info, chatbot]
+            outputs=[connection_state, status_display, connection_info, chatbot, gemini_service_state]
         )
         
         disconnect_btn.click(
             disconnect_gemini,
-            inputs=[chatbot],
-            outputs=[connection_state, status_display, connection_info, chatbot]
+            inputs=[chatbot, gemini_service_state],
+            outputs=[connection_state, status_display, connection_info, chatbot, gemini_service_state]
+        )
+        
+        start_audio_btn.click(
+            start_audio_stream,
+            inputs=[gemini_service_state, audio_streaming_state],
+            outputs=[audio_streaming_state, transcription_display]
+        )
+        
+        stop_audio_btn.click(
+            stop_audio_stream,
+            inputs=[gemini_service_state, audio_streaming_state],
+            outputs=[audio_streaming_state, transcription_display]
         )
         
-        # Text message events
+        # Audio input processing
+        audio_input.stop_recording(
+            process_audio_input,
+            inputs=[audio_input, audio_input, gemini_service_state, chatbot],
+            outputs=[chatbot, connection_info, audio_output]
+        )
+        
+        # Text message handling
         send_text_btn.click(
             send_text_message,
-            inputs=[text_input, chatbot],
-            outputs=[chatbot, connection_info]
+            inputs=[text_input, chatbot, gemini_service_state],
+            outputs=[chatbot, connection_info, chatbot]
+        ).then(
+            lambda: "",
+            outputs=[text_input]
         )
         
         text_input.submit(
             send_text_message,
-            inputs=[text_input, chatbot],
-            outputs=[chatbot, connection_info]
+            inputs=[text_input, chatbot, gemini_service_state],
+            outputs=[chatbot, connection_info, chatbot]
         ).then(
-            lambda: "",  # Clear input
+            lambda: "",
             outputs=[text_input]
         )
         
-        # Đơn giản hóa JavaScript - sửa lỗi syntax
-        gemini_tab.load(
-            fn=None,
-            inputs=[],
-            outputs=[],
-            js="""function() { 
-                console.log('Gemini Realtime Tab Loaded Successfully'); 
-                return [];
-            }"""
+        clear_btn = gr.Button("🧹 Xóa chat", variant="secondary")
+        clear_btn.click(
+            clear_chat,
+            outputs=[chatbot, connection_info, chatbot]
         )
         
         # Hướng dẫn sử dụng
-        with gr.Accordion("📖 Hướng dẫn sử dụng", open=False):
+        with gr.Accordion("📖 Hướng dẫn sử dụng Audio Streaming", open=True):
             gr.Markdown("""
-            ### Cách sử dụng Gemini Realtime:
-            
-            1. **Lấy API Key**:
-               - Truy cập [Google AI Studio](https://aistudio.google.com/)
-               - Tạo API key mới trong mục API Keys
-               - Sao chép và dán vào ô API Key
+            ### 🎯 Cách sử dụng Audio Streaming:
             
-            2. **Kết nối**:
-               - Chọn giọng nói yêu thích
-               - Nhấn **"Kết nối"** để thiết lập session
+            1. **Kết nối**:
+               - Nhập API Key Gemini
+               - Chọn giọng nói
+               - Nhấn **"Kết nối Audio"**
             
-            3. **Trò chuyện**:
-               - Nhập tin nhắn vào ô text
-               - Nhấn **Enter** hoặc **"Gửi"** để gửi
-               - Gemini sẽ trả lời ngay lập tức
+            2. **Trò chuyện bằng giọng nói**:
+               - Nhấn **"Bắt đầu nói"** 
+               - Nói vào micro
+               - Gemini sẽ trả lời bằng audio ngay lập tức
             
-            ### Tính năng hiện có:
-            - 💬 Text chat với Gemini
-            - 🔗 Kết nối realtime
-            - 🎯 Multiple voice options
-            - 📊 Status monitoring
+            3. **Hoặc chat bằng text**:
+               - Nhập tin nhắn trong ô text
+               - Nhấn Enter hoặc **"Gửi text"**
             
-            ### Tính năng sắp có:
+            ### 🔊 Tính năng Audio Streaming:
             - 🎙️ Real-time voice recognition
             - 🔊 Real-time audio response
-            - ⚡ Low latency streaming
+            - ⚡ Ultra low latency
+            - 🎯 Multiple voice options
+            
+            ### 💡 Mẹo sử dụng:
+            - Sử dụng headset để chất lượng tốt hơn
+            - Nói rõ ràng, không nói quá nhanh
+            - Môi trường yên tĩnh cho kết quả tốt nhất
             """)
     
     return gemini_tab