File size: 5,725 Bytes
dbf2148 |
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 |
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:
chatbot = gr.Chatbot()
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
)
return chatbot, state, user_input, send_button, clear_button, chat_tts_output
def create_streaming_voice_components() -> tuple:
"""Tạo components cho streaming voice với VAD"""
with gr.Group():
gr.Markdown("## 🎤 Trò chuyện giọng nói thời gian thực với VAD")
gr.Markdown("Hệ thống sẽ tự động phát hiện khi bạn nói và dừng, tạo cuộc hội thoại tự nhiên")
with gr.Row():
with gr.Column(scale=1):
# Voice activity visualization
vad_visualizer = gr.HTML(
value="<div class='vad-visualizer' style='width: 100%;'></div>",
label="Voice Activity"
)
# Controls
with gr.Row():
start_listening_btn = gr.Button(
"🎙️ Bắt đầu lắng nghe",
variant="primary",
size="sm"
)
stop_listening_btn = gr.Button(
"🛑 Dừng lắng nghe",
variant="secondary",
size="sm"
)
# Status
status_display = gr.Textbox(
label="Trạng thái",
value="Chưa lắng nghe",
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="🎯 Đang 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
)
# Hidden state components
streaming_state = gr.State(value=False)
conversation_history = gr.State(value=[])
return (
start_listening_btn, stop_listening_btn, status_display, state_display,
realtime_transcription, ai_response, tts_output, streaming_state,
conversation_history, vad_visualizer
) |