File size: 5,732 Bytes
dbf2148
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4692e94
e9e3bb4
 
 
4692e94
 
e9e3bb4
dbf2148
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e9e3bb4
 
dbf2148
 
 
6da3891
 
 
5082129
 
dbf2148
 
 
a1302e7
5082129
 
 
 
 
dbf2148
 
5082129
 
dbf2148
5082129
dbf2148
 
5082129
dbf2148
 
 
 
 
 
 
 
 
 
 
 
5082129
dbf2148
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6da3891
 
 
 
 
 
 
 
 
 
 
9254808
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
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
    )