Update ui/tabs.py

ui/tabs.py

@@ -49,22 +49,26 @@ def create_all_tabs(audio_service: AudioService, chat_service: ChatService,
     with gr.Tab("Stream Object Detection"):
         create_streaming_object_detection()
 def create_voice_coding_tab(voice_coding_service):
-    """Tạo tab Voice Coding"""
+    """Tạo tab Voice Coding với FastRTC"""
+    
+    # Tạo stream
+    stream = voice_coding_service.create_stream()
     
     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}])
+        history = gr.State([{"role": "system", "content": "You are an AI coding assistant."}])
         current_code = gr.State("")
+        status_message = gr.State("Sẵn sàng...")
         
         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
+                2. Nói "Hello Llama" hoặc "Code" 
                 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
                 
@@ -74,22 +78,24 @@ def create_voice_coding_tab(voice_coding_service):
                 - "Tạo đồng hồ digital"
                 """)
                 
-                # WebRTC component
-                webrtc = WebRTC(
-                    rtc_configuration=voice_coding_service.rtc_configuration,
-                    mode="send", 
-                    modality="audio",
-                    label="🎙️ Microphone"
-                )
+                # FastRTC component
+                fastrtc_audio = stream.ui()
                 
-                # Manual input fallback
-                with gr.Accordion("📝 Nhập text thủ công", open=False):
+                # Manual input
+                with gr.Accordion("📝 Nhập text thủ công", open=True):
                     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...",
+                        placeholder="Ví dụ: Tạo trang web hello world với màu nền xanh...",
                         lines=3
                     )
-                    text_submit_btn = gr.Button("🚀 Generate Code")
+                    text_submit_btn = gr.Button("🚀 Generate Code", variant="primary")
+                
+                # Status display
+                status_display = gr.Textbox(
+                    label="Trạng thái",
+                    value="Sẵn sàng...",
+                    interactive=False
+                )
                 
                 # Controls
                 with gr.Row():
@@ -109,8 +115,8 @@ def create_voice_coding_tab(voice_coding_service):
                             language="html",
                             label="Generated HTML Code",
                             lines=25,
-                            interactive=True,  # Cho phép chỉnh sửa
-                            elem_classes="code-component"
+                            interactive=True,
+                            value=""
                         )
                     
                     with gr.Tab("💬 Chat History"):
@@ -120,23 +126,48 @@ def create_voice_coding_tab(voice_coding_service):
                             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
+        # Event handlers cho manual input
+        def generate_from_text(text, current_history, current_code_value):
+            """Generate code từ text input"""
+            if not text.strip():
+                return current_history, current_code_value, current_history, "Vui lòng nhập yêu cầu", voice_coding_service.sandbox_html
+            
+            try:
+                # Tạo prompt
+                user_prompt = f"Please write a single-file HTML application to fulfill the following request.\nThe message:{text}\nCurrent code you have written:{current_code_value}"
+                
+                # Update history
+                new_history = current_history + [
+                    {"role": "user", "content": user_prompt}
+                ]
+                
+                # Generate code với Groq
+                response = voice_coding_service.groq_client.chat.completions.create(
+                    model="llama-3.3-70b-versatile",
+                    messages=new_history,
+                    temperature=1,
+                    max_tokens=2048,
+                    top_p=1,
+                    stream=False,
+                )
+                
+                output = response.choices[0].message.content
+                
+                # Extract HTML
+                html_code = voice_coding_service.extract_html_content(output)
+                if not html_code:
+                    html_code = f"<!-- Generated Code -->\n{output}"
+                
+                # Update history
+                new_history.append({"role": "assistant", "content": output})
+                
+                # Update sandbox
+                sandbox_html = voice_coding_service.display_in_sandbox(html_code)
+                
+                return new_history, html_code, new_history, "✅ Đã generate code!", sandbox_html
+                
+            except Exception as e:
+                return current_history, current_code_value, current_history, f"❌ Lỗi: {str(e)}", voice_coding_service.sandbox_html
         
         def update_sandbox(code):
             """Cập nhật sandbox khi code thay đổi"""
@@ -144,35 +175,20 @@ def create_voice_coding_tab(voice_coding_service):
         
         def clear_conversation():
             """Xóa hội thoại"""
-            return [{"role": "system", "content": voice_coding_service.system_prompt}], "", voice_coding_service.sandbox_html
+            return [{"role": "system", "content": "You are an AI coding assistant."}], "", [], "Đã xóa hội thoại", voice_coding_service.sandbox_html
         
         def reset_code():
-            """Reset code về trạng thái ban đầu"""
-            return "", voice_coding_service.sandbox_html
+            """Reset code"""
+            return "", voice_coding_service.sandbox_html, "Đã reset code"
         
-        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]
+        # Kết nối events
+        text_submit_btn.click(
+            generate_from_text,
+            inputs=[text_input, history, current_code],
+            outputs=[history, current_code, chat_display, status_display, sandbox]
+        ).then(
+            lambda: "",  # Clear text input
+            outputs=[text_input]
         )
         
         code_display.change(
@@ -183,21 +199,36 @@ def create_voice_coding_tab(voice_coding_service):
         
         clear_btn.click(
             clear_conversation,
-            outputs=[history, code_display, sandbox]
+            outputs=[history, current_code, chat_display, status_display, sandbox]
         )
         
         reset_btn.click(
             reset_code,
-            outputs=[code_display, sandbox]
+            outputs=[current_code, sandbox, status_display]
         )
         
-        text_submit_btn.click(
-            generate_from_text,
-            inputs=[text_input, history, code_display],
-            outputs=[history, code_display, chat_display, text_input]
+        # FastRTC additional outputs handling
+        def handle_fastrtc_outputs(output_data):
+            """Xử lý outputs từ FastRTC"""
+            if hasattr(output_data, 'args'):
+                data = output_data.args[0] if output_data.args else {}
+                
+                if data.get('type') == 'code_generated':
+                    return data.get('history', []), data.get('code', ''), data.get('history', []), data.get('message', ''), voice_coding_service.display_in_sandbox(data.get('code', ''))
+                elif data.get('type') == 'loading':
+                    return data.get('history', []), data.get('code', ''), data.get('history', []), data.get('message', ''), voice_coding_service.loading_html
+                elif data.get('type') == 'error':
+                    return data.get('history', []), data.get('code', ''), data.get('history', []), data.get('message', ''), voice_coding_service.sandbox_html
+            
+            return history.value, current_code.value, chat_display.value, status_display.value, sandbox.value
+        
+        # Kết nối FastRTC outputs
+        fastrtc_audio.on_additional_outputs(
+            handle_fastrtc_outputs,
+            outputs=[history, current_code, chat_display, status_display, sandbox]
         )
     
-    return coding_tab       
+    return coding_tab      
 def create_openai_realtime_tab(hybrid_service: HybridStreamingService):
     """Tạo tab cho OpenAI Realtime API"""