ui/components.py

import gradio as gr

def create_custom_css() -> str:
    return """
    .gradio-container {
        background-color: #1f1f1f;
    }
    .gr-markdown, .gr-markdown * {
        color: #ffffff !important;
    }
    
    .streaming-active {
        border: 3px solid #00ff00 !important;
        animation: pulse 2s infinite;
    }
    
    .streaming-inactive {
        border: 2px solid #ff4444 !important;
    }
    
    @keyframes pulse {
        0% { border-color: #00ff00; }
        50% { border-color: #00cc00; }
        100% { border-color: #00ff00; }
    }
    
    .vad-visualizer {
        background: linear-gradient(90deg, #00ff00, #ffff00, #ff0000);
        height: 20px;
        border-radius: 10px;
        margin: 10px 0;
        transition: all 0.1s ease;
    }
    
    .conversation-bubble {
        background: #2d2d2d;
        border-radius: 15px;
        padding: 10px 15px;
        margin: 5px 0;
        border-left: 4px solid #f55036;
    }
    
    .user-bubble {
        border-left-color: #36a2f5;
    }
    
    .assistant-bubble {
        border-left-color: #f55036;
    }
    """
def create_header() -> gr.Markdown:
    return gr.Markdown("# 🎙️ Groq x Gradio Multi-Modal với RAG Wikipedia")
def create_audio_components() -> tuple:
    with gr.Row():
        audio_input = gr.Audio(type="numpy", label="Nói hoặc tải lên file âm thanh")
    
    with gr.Row():
        transcription_output = gr.Textbox(
            label="Bản ghi âm",
            lines=5,
            interactive=True,
            placeholder="Bản ghi âm sẽ hiển thị ở đây..."
        )
        response_output = gr.Textbox(
            label="Phản hồi AI",
            lines=5,
            interactive=True,
            placeholder="Phản hồi của AI sẽ hiển thị ở đây..."
        )
    
    with gr.Row():
        tts_audio_output = gr.Audio(
            label="Phản hồi bằng giọng nói",
            interactive=False
        )
    
    process_button = gr.Button("Xử lý", variant="primary")
    
    return audio_input, transcription_output, response_output, tts_audio_output, process_button

def create_chat_components() -> tuple:
    """Tạo components cho chat interface - ĐÃ SỬA WARNING"""
    chatbot = gr.Chatbot(
        label="Chatbot",
        height=500,
        show_copy_button=True,
        type="messages"  # THÊM DÒNG NÀY ĐỂ FIX WARNING
    )
    state = gr.State([])
    
    with gr.Row():
        user_input = gr.Textbox(
            show_label=False, 
            placeholder="Nhập tin nhắn của bạn ở đây...", 
            container=False,
            scale=4
        )
        send_button = gr.Button("Gửi", variant="primary", scale=1)
        clear_button = gr.Button("Xóa Chat", variant="secondary", scale=1)
    
    with gr.Row():
        chat_tts_output = gr.Audio(
            label="Phản hồi bằng giọng nói",
            interactive=False,
            visible=True
        )
    
    return chatbot, state, user_input, send_button, clear_button, chat_tts_output
def create_streaming_voice_components() -> tuple:
    """Tạo components cho streaming voice sử dụng Gradio microphone"""
    with gr.Group():
        gr.Markdown("## 🎤 Trò chuyện giọng nói thời gian thực")
        gr.Markdown("Sử dụng microphone của thiết bị để trò chuyện với AI - hoạt động trên cả điện thoại và máy tính")
        
        with gr.Row():
            with gr.Column(scale=1):
                # Microphone component
                microphone = gr.Microphone(
                    label="🎙️ Nhấn và nói",
                    type="numpy",
                    streaming=True,
                    show_download_button=False
                )
                
                # Clear conversation button
                clear_btn = gr.Button("🗑️ Xóa hội thoại", variant="secondary", size="sm")
                
                # Status display
                status_display = gr.Textbox(
                    label="Trạng thái",
                    value="Sẵn sàng - nhấn nút microphone để nói",
                    interactive=False
                )
                
                # Conversation state
                state_display = gr.JSON(
                    label="Thông tin hội thoại",
                    value={}
                )
            
            with gr.Column(scale=2):
                # Real-time transcription
                realtime_transcription = gr.Textbox(
                    label="📝 Bạn vừa nói",
                    lines=2,
                    interactive=False,
                    placeholder="Văn bản được chuyển đổi sẽ xuất hiện ở đây..."
                )
                
                # AI Response
                ai_response = gr.Textbox(
                    label="🤖 Phản hồi AI",
                    lines=3,
                    interactive=False,
                    placeholder="Phản hồi của AI sẽ xuất hiện ở đây..."
                )
                
                # TTS Audio output
                tts_output = gr.Audio(
                    label="🔊 Phản hồi bằng giọng nói",
                    interactive=False,
                    autoplay=True
                )
    
    # CHỈ TRẢ VỀ 8 GIÁ TRỊ - đã bỏ streaming_state và conversation_history
    return (
        microphone, 
        clear_btn, 
        status_display, 
        state_display,
        realtime_transcription, 
        ai_response, 
        tts_output
        # Đã bỏ 2 giá trị cuối: streaming_state, conversation_history
    )