Xây Dựng Giao Diện Giọng Nói Cho AI Agent Trong 2 Giờ Với Flask và Web Speech API

Trong một buổi chiều thứ Bảy rảnh rỗi, tác giả đặt mục tiêu đơn giản: có thể nói chuyện trực tiếp với AI agent bằng giọng nói và nghe nó phản hồi ngay lập tức. Chỉ sau 2 giờ, bot AI mang tên Atlas đã có thể phát ra giọng nói.

Bài viết này sẽ trình bày chính xác cách xây dựng hệ thống đó — gồm backend nhỏ gọn với Flask, nhận diện giọng nói bằng Web Speech API, chuyển văn bản thành giọng nói qua Mistral Voxtral TTS, cùng hiệu ứng hoạt hình trên mắt avatar đồng bộ nhịp với âm thanh.

Kiến Trúc và Các Thành Phần Sử Dụng

• Flask: backend nhỏ gọn gồm hai API endpoint
• Web Speech API: API nhận dạng giọng nói tích hợp sẵn trong trình duyệt Chrome (chỉ hỗ trợ push-to-talk)
• Mistral Voxtral TTS: model voxtral-mini-tts-2603 tạo ra file MP3 dạng base64
• MacOS say command: phương án dự phòng khi API Voxtral gặp lỗi
• Web Audio API AnalyserNode: điều khiển hiệu ứng phát sáng mắt avatar theo tần số âm thanh

Quy Trình Hoạt Động

1. Người dùng giữ phím Space → Chrome thực thi SpeechRecognition để thu âm và chuyển giọng nói thành văn bản nội bộ
2. Khi có kết quả cuối cùng, đoạn text được gửi POST đến endpoint /api/chat
3. Flask gọi API chat của Mistral (mistral-large-latest) để nhận phản hồi dạng text
4. Flask gọi Voxtral TTS để chuyển phản hồi text thành giọng nói MP3 base64
5. Trình duyệt giải mã MP3, phát qua AnalyserNode
6. Canvas vẽ hiệu ứng ánh sáng đồng bộ theo dữ liệu tần số âm thanh, làm cho mắt avatar phát sáng

Đặc biệt, hệ thống không dùng WebSocket hay streaming audio, mà hoạt động theo kiểu truyền từng request-response đơn giản. Sự đơn giản này giúp triển khai nhanh và hiệu quả.

Mô Hình Dự Phòng Dịch Vụ TTS

Mistral TTS có chất lượng giọng nói tự nhiên, độ trễ thấp, nhưng dịch vụ đôi khi không ổn định. Giải pháp dự phòng là dùng lệnh say của macOS, chuyển văn bản thành file AIFF rồi quy đổi sang MP3 bằng ffmpeg, cuối cùng mã hóa base64 để frontend có thể phát.

def generate_tts(text: str) -> str | None:
    """Trả về MP3 dạng base64. Thử trước Mistral TTS, nếu lỗi thì dùng fallback macOS say."""
    mistral_key = os.getenv("MISTRAL_API_KEY", "")
    if mistral_key:
        try:
            headers = {
                "Authorization": f"Bearer {mistral_key}",
                "Content-Type": "application/json"
            }
            payload = {
                "model": "voxtral-mini-tts-2603",
                "input": text,
                "response_format": "mp3",
                "voice_id": "casual_male"
            }
            resp = requests.post(
                "https://api.mistral.ai/v1/audio/speech",
                headers=headers,
                json=payload,
                timeout=30
            )
            resp.raise_for_status()
            data = resp.json()
            if "audio_data" in data:
                return data["audio_data"]
        except Exception:
            pass
    # Fallback với macOS say và ffmpeg
    # Chi tiết ở phần code gốc

Điểm mấu chốt của mô hình này là luôn trả về audio dạng base64, bất kể viện nguồn từ neural TTS hiện đại hay công cụ synth cũ kỹ, giúp frontend xử lý và phát lại đồng nhất.

Hiệu Ứng Hoạt Hình Cho Avatar

Phần được tác giả tự hào nhất là hiệu ứng ánh sáng cho đôi mắt avatar của Atlas khi nói:

• Dữ liệu tần số âm thanh được lấy từ AnalyserNode mỗi khung hình
• Dựa vào cường độ âm thanh trong dải giọng nói, vẽ hiệu ứng gradient màu cyan trên canvas theo vị trí mắt của avatar
• Chế độ globalCompositeOperation = 'screen' tạo hiệu ứng đèn phát sáng từ phía sau, không phải chỉ vẽ phủ

Cách làm này tạo cảm giác mắt avatar “sáng lên” đồng bộ với giọng nói, tăng tính sinh động cho giao diện.

Thử Thách và Bài Học Rút Ra

• Phần khó nhất không phải là code mà là tinh chỉnh “giọng nói” cho thật tự nhiên, tránh âm thanh quá nhanh hay quá chậm, mỗi thứ đều tạo cảm giác không phù hợp
• Sử dụng giọng “Reed” trên macOS với tốc độ 155 từ/phút làm dự phòng khá hiệu quả tuy hơi nhân tạo
• Web Speech API có giới hạn Chrome sẽ tắt session nhận diện sau mỗi lần dùng, do đó cần tạo mới đối tượng nhận dạng mỗi lần lắng nghe
• Các đánh giá:
  • Voxtral TTS: chất lượng tốt, độ trễ thấp, có thể thêm voice cloning qua audio tham chiếu, phù hợp dùng trong sản phẩm
  • macOS say: chỉ hợp để dev, không nên dùng chính thức
  • Web Speech API: chỉ chạy trên Chrome, cần mạng internet vì STT dựa vào server Google, phù hợp công cụ phát triển nội bộ

Tổng thể, hệ thống là một công cụ phát triển nội bộ, nhưng cho thấy rằng tạo giao diện giọng nói cho AI giờ đây không còn là thử thách lớn — các thành phần cơ bản đã sẵn sàng.

Hướng Phát Triển Tương Lai

• Tiếp theo sẽ là phát triển tính năng streaming TTS để giảm độ trễ 1-2 giây khi các câu trả lời được tạo, giúp tạo cảm giác đàm thoại tự nhiên và liền mạch
• Thêm tính năng voice cloning dựa trên audio tham chiếu để giọng nói của Atlas trở nên độc đáo hơn, thay vì giọng có sẵn

Nếu bạn đang xây dựng AI agent và muốn tích hợp sẵn giao diện giọng nói, hoặc cần outsource toàn bộ phần tự động hóa, tác giả giới thiệu dịch vụ bên whoffagents.com với khả năng phát triển AI agent tùy chỉnh đầu-cuối.