Update ui/tabs.py

ui/tabs.py

@@ -9,6 +9,7 @@ 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 services.voice_coding_service import  VoiceCodingService
 from core.rag_system import EnhancedRAGSystem
 from core.tts_service import EnhancedTTSService
 from core.wikipedia_processor import WikipediaProcessor
@@ -18,13 +19,16 @@ 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
+                   hybrid_service: HybridStreamingService,
+                   voice_coding_service: VoiceCodingService
                    ):
     
     with gr.Tab("🎙️ Streaming Voice "):
         create_streaming_voice_tab(streaming_voice_service)
     with gr.Tab("OpenAI Realtime"):
         create_openai_realtime_tab(hybrid_service)
+    with gr.Tab("Voice Coding"):
+        create_voice_coding_tab(voice_coding_service)
     with gr.Tab("🎙️ Audio"):
         create_audio_tab(audio_service)
     
@@ -44,7 +48,156 @@ def create_all_tabs(audio_service: AudioService, chat_service: ChatService,
         create_language_info_tab(rag_system.multilingual_manager)
     with gr.Tab("Stream Object Detection"):
         create_streaming_object_detection()
+def create_voice_coding_tab(voice_coding_service):
+    """Tạo tab Voice Coding"""
+    
+    with gr.Blocks() as coding_tab:
+        gr.Markdown("## 🦙 Voice Coding - Lập trình bằng giọng nói")
+        gr.Markdown("Tạo và chỉnh sửa ứng dụng HTML single-file chỉ bằng giọng nói!")
+        
+        # State variables
+        history = gr.State([{"role": "system", "content": voice_coding_service.system_prompt}])
+        current_code = gr.State("")
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("### 🎤 Hướng dẫn sử dụng:")
+                gr.Markdown("""
+                1. Nhấn **Bắt đầu Recording**
+                2. Nói "Hello Llama" và chờ xác nhận
+                3. Đưa ra yêu cầu lập trình của bạn
+                4. Mỗi phiên giới hạn 90 giây
+                
+                **Ví dụ:** 
+                - "Tạo trang web hello world"
+                - "Tạo calculator bằng HTML"
+                - "Tạo đồng hồ digital"
+                """)
+                
+                # WebRTC component
+                webrtc = WebRTC(
+                    rtc_configuration=voice_coding_service.rtc_configuration,
+                    mode="send", 
+                    modality="audio",
+                    label="🎙️ Microphone"
+                )
+                
+                # Manual input fallback
+                with gr.Accordion("📝 Nhập text thủ công", open=False):
+                    text_input = gr.Textbox(
+                        label="Yêu cầu lập trình",
+                        placeholder="Nhập yêu cầu code của bạn ở đây...",
+                        lines=3
+                    )
+                    text_submit_btn = gr.Button("🚀 Generate Code")
+                
+                # Controls
+                with gr.Row():
+                    clear_btn = gr.Button("🗑️ Xóa hội thoại")
+                    reset_btn = gr.Button("🔄 Reset Code")
+            
+            with gr.Column(scale=2):
+                with gr.Tabs():
+                    with gr.Tab("🎮 Sandbox Preview"):
+                        sandbox = gr.HTML(
+                            value=voice_coding_service.sandbox_html,
+                            label="Live Preview"
+                        )
+                    
+                    with gr.Tab("📄 Code Editor"):
+                        code_display = gr.Code(
+                            language="html",
+                            label="Generated HTML Code",
+                            lines=25,
+                            interactive=True,  # Cho phép chỉnh sửa
+                            elem_classes="code-component"
+                        )
+                    
+                    with gr.Tab("💬 Chat History"):
+                        chat_display = gr.Chatbot(
+                            type="messages",
+                            label="Lịch sử hội thoại",
+                            height=400
+                        )
+        
+        # WebRTC streaming
+        webrtc.stream(
+            ReplyOnStopWords(
+                voice_coding_service.generate_code,
+                input_sample_rate=16000,
+                stop_words=["hello llama", "hello lama", "hello lamma", "hello llamma", "xin chào llama"],
+            ),
+            inputs=[webrtc, history, code_display],
+            outputs=[webrtc],
+            time_limit=90,
+            concurrency_limit=5,
+        )
+        
+        # Event handlers
+        def handle_additional_outputs(history, code):
+            """Xử lý additional outputs từ streaming"""
+            return history, code, history
+        
+        def update_sandbox(code):
+            """Cập nhật sandbox khi code thay đổi"""
+            return voice_coding_service.display_in_sandbox(code)
         
+        def clear_conversation():
+            """Xóa hội thoại"""
+            return [{"role": "system", "content": voice_coding_service.system_prompt}], "", voice_coding_service.sandbox_html
+        
+        def reset_code():
+            """Reset code về trạng thái ban đầu"""
+            return "", voice_coding_service.sandbox_html
+        
+        def generate_from_text(text, history, current_code):
+            """Generate code từ text input"""
+            if not text.strip():
+                return history, current_code, history, "Vui lòng nhập yêu cầu"
+            
+            # Simulate audio input format
+            fake_audio = (16000, np.zeros(16000, dtype=np.float32))
+            
+            # Use the same generation logic
+            result = None
+            for output in voice_coding_service.generate_code(fake_audio, history, current_code):
+                result = output
+            
+            if result:
+                new_history, new_code = result.args
+                return new_history, new_code, new_history, "✅ Đã generate code từ text"
+            
+            return history, current_code, history, "❌ Lỗi generate code"
+        
+        # Connect events
+        webrtc.on_additional_outputs(
+            handle_additional_outputs, 
+            outputs=[history, code_display, chat_display]
+        )
+        
+        code_display.change(
+            update_sandbox,
+            inputs=[code_display],
+            outputs=[sandbox]
+        )
+        
+        clear_btn.click(
+            clear_conversation,
+            outputs=[history, code_display, sandbox]
+        )
+        
+        reset_btn.click(
+            reset_code,
+            outputs=[code_display, sandbox]
+        )
+        
+        text_submit_btn.click(
+            generate_from_text,
+            inputs=[text_input, history, code_display],
+            outputs=[history, code_display, chat_display, text_input]
+        )
+    
+    return coding_tab       
 def create_openai_realtime_tab(hybrid_service: HybridStreamingService):
     """Tạo tab cho OpenAI Realtime API"""