Update ui/tabs.py

ui/tabs.py

@@ -49,58 +49,51 @@ 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 với FastRTC"""
-    
-    # Tạo stream
-    stream = voice_coding_service.create_stream()
+    """Tạo tab Voice Coding đơn giản - Text-based trước"""
     
     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!")
+        gr.Markdown("## 🦙 Voice Coding - Lập trình bằng AI")
+        gr.Markdown("Tạo và chỉnh sửa ứng dụng HTML single-file với AI Assistant")
         
         # State variables
-        history = gr.State([{"role": "system", "content": "You are an AI coding assistant."}])
+        history = gr.State([{"role": "system", "content": "You are an AI coding assistant. Help create HTML applications."}])
         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("### 🎯 Hướng dẫn sử dụng:")
                 gr.Markdown("""
-                1. Nhấn **Bắt đầu Recording**
-                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
-                
-                **Ví dụ:** 
+                **Nhập yêu cầu lập trình:**
                 - "Tạo trang web hello world"
-                - "Tạo calculator bằng HTML"
+                - "Tạo calculator bằng HTML/CSS/JS"  
                 - "Tạo đồng hồ digital"
+                - "Tạo form đăng ký với validation"
+                
+                **Chức năng voice đang được phát triển**
                 """)
                 
-                # FastRTC component
-                fastrtc_audio = stream.ui()
+                # Text input chính
+                text_input = gr.Textbox(
+                    label="Yêu cầu lập trình",
+                    placeholder="Ví dụ: Tạo trang web hello world với màu nền xanh và chữ màu trắng...",
+                    lines=3
+                )
                 
-                # 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="Ví dụ: Tạo trang web hello world với màu nền xanh...",
-                        lines=3
-                    )
-                    text_submit_btn = gr.Button("🚀 Generate Code", variant="primary")
+                with gr.Row():
+                    generate_btn = gr.Button("🚀 Generate Code", variant="primary", scale=2)
+                    clear_btn = gr.Button("🗑️ Clear", variant="secondary", scale=1)
                 
-                # Status display
+                # Status
                 status_display = gr.Textbox(
                     label="Trạng thái",
                     value="Sẵn sàng...",
                     interactive=False
                 )
                 
-                # Controls
-                with gr.Row():
-                    clear_btn = gr.Button("🗑️ Xóa hội thoại")
-                    reset_btn = gr.Button("🔄 Reset Code")
+                # FastRTC component (tạm ẩn)
+                with gr.Accordion("🎤 Voice Input (Experimental)", open=False):
+                    gr.Markdown("Chức năng voice đang được phát triển...")
+                    # fastrtc_audio = voice_coding_service.create_stream().ui()
             
             with gr.Column(scale=2):
                 with gr.Tabs():
@@ -126,15 +119,15 @@ def create_voice_coding_tab(voice_coding_service):
                             height=400
                         )
         
-        # Event handlers cho manual input
-        def generate_from_text(text, current_history, current_code_value):
+        # Event handlers
+        def generate_code(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
+                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}"
+                user_prompt = f"Create a single-file HTML application for: {text}. Current code: {current_code_value}. Respond with complete HTML code only."
                 
                 # Update history
                 new_history = current_history + [
@@ -143,11 +136,11 @@ def create_voice_coding_tab(voice_coding_service):
                 
                 # Generate code với Groq
                 response = voice_coding_service.groq_client.chat.completions.create(
-                    model="llama-3.3-70b-versatile",
+                    model="llama-3.1-8b-instant",
                     messages=new_history,
-                    temperature=1,
-                    max_tokens=2048,
-                    top_p=1,
+                    temperature=0.7,
+                    max_tokens=1024,
+                    top_p=0.9,
                     stream=False,
                 )
                 
@@ -155,8 +148,6 @@ def create_voice_coding_tab(voice_coding_service):
                 
                 # 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})
@@ -164,30 +155,32 @@ def create_voice_coding_tab(voice_coding_service):
                 # Update sandbox
                 sandbox_html = voice_coding_service.display_in_sandbox(html_code)
                 
-                return new_history, html_code, new_history, "✅ Đã generate code!", sandbox_html
+                return new_history, html_code, new_history, "✅ Đã generate code thành công!", sandbox_html
                 
             except Exception as e:
-                return current_history, current_code_value, current_history, f"❌ Lỗi: {str(e)}", voice_coding_service.sandbox_html
+                error_msg = f"❌ Lỗi: {str(e)}"
+                return current_history, current_code_value, current_history, error_msg, voice_coding_service.sandbox_html
         
         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": "You are an AI coding assistant."}], "", [], "Đã xóa hội thoại", voice_coding_service.sandbox_html
+        def clear_all():
+            """Xóa tất cả"""
+            empty_history = [{"role": "system", "content": "You are an AI coding assistant."}]
+            return empty_history, "", empty_history, "Đã xóa tất cả", voice_coding_service.sandbox_html
         
-        def reset_code():
-            """Reset code"""
-            return "", voice_coding_service.sandbox_html, "Đã reset code"
+        def clear_text():
+            """Xóa text input"""
+            return ""
         
         # Kết nối events
-        text_submit_btn.click(
-            generate_from_text,
+        generate_btn.click(
+            generate_code,
             inputs=[text_input, history, current_code],
             outputs=[history, current_code, chat_display, status_display, sandbox]
         ).then(
-            lambda: "",  # Clear text input
+            clear_text,
             outputs=[text_input]
         )
         
@@ -198,37 +191,11 @@ def create_voice_coding_tab(voice_coding_service):
         )
         
         clear_btn.click(
-            clear_conversation,
-            outputs=[history, current_code, chat_display, status_display, sandbox]
-        )
-        
-        reset_btn.click(
-            reset_code,
-            outputs=[current_code, sandbox, status_display]
-        )
-        
-        # 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,
+            clear_all,
             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"""