Tích hợp API STT, LLM, TTS vào React: Hướng dẫn kỹ thuật

Việc xây dựng các ứng dụng web tương tác tự nhiên bằng giọng nói đang trở thành xu hướng tất yếu trong phát triển phần mềm hiện đại. Để hiện thực hóa điều này, việc Tích hợp API React với các dịch vụ AI chuyên biệt là bước đi quan trọng. Bài viết này sẽ cung cấp hướng dẫn kỹ thuật chi tiết, giúp bạn kết nối Speech-to-Text, LLM và TTS vào ứng dụng React một cách mượt mà, tối ưu hiệu suất và đảm bảo trải nghiệm người dùng liền mạch.

Kiến trúc tổng quan của hệ thống giọng nói trong React

Trước khi đi vào mã nguồn, chúng ta cần hiểu rõ luồng dữ liệu. Một ứng dụng giọng nói hoàn chỉnh thường bao gồm ba thành phần chính:

1. Speech-to-Text (STT): Chuyển đổi âm thanh từ micro thành văn bản.
2. Large Language Model (LLM): Xử lý ngữ cảnh, suy luận và tạo phản hồi.
3. Text-to-Speech (TTS): Chuyển đổi văn bản phản hồi thành giọng nói.

Trong môi trường React, thách thức lớn nhất là quản lý trạng thái (state) và xử lý dữ liệu streaming. Thay vì chờ đợi toàn bộ phản hồi, chúng ta cần hiển thị kết quả theo thời gian thực để giảm độ trễ cảm nhận (perceived latency).

Bước 1: Xử lý Speech-to-Text với WebSocket

Đối với Speech to Text React, việc sử dụng WebSocket là bắt buộc để đạt được độ trễ thấp nhất. Các API REST truyền thống thường chỉ phù hợp cho file audio đã ghi âm, không đáp ứng được yêu cầu thời gian thực.

AIVISION cung cấp API STT hỗ trợ streaming qua WebSocket, đặc biệt tối ưu cho tiếng Việt và khả năng chuyển đổi ngôn ngữ (code-switching) giữa Việt-Anh. Dưới đây là ví dụ cơ bản để thiết lập kết nối:

const sttSocket = new WebSocket('wss://api.s2speech.com/stt/stream');

sttSocket.onopen = () => {
  console.log('STT Connection established');
};

sttSocket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'partial') {
  setPartialText(data.text); // Cập nhật text tạm thời
  } else if (data.type === 'final') {
  setFinalText(data.text); // Xác nhận text cuối cùng
  handleLLMRequest(data.text);
  }
};

// Gửi audio chunks (ArrayBuffer) từ MediaRecorder
function sendAudioChunk(chunk) {
  if (sttSocket.readyState === WebSocket.OPEN) {
  sttSocket.send(chunk);
  }
}

Lời khuyên kỹ thuật: Hãy chia nhỏ audio chunks (ví dụ: mỗi 100ms) và gửi liên tục. Điều này giúp STT có đủ ngữ cảnh để phát âm chính xác các từ chuyên ngành hoặc tên riêng.

Bước 2: Tích hợp LLM API Web với Streaming

Sau khi nhận được văn bản từ STT, ta cần gọi LLM API Web để tạo câu trả lời.

Việc sử dụng streaming cho LLM là bắt buộc để người dùng thấy phản hồi ngay lập tức, thay vì phải chờ hàng giây.

async function handleLLMRequest(userText) {
  setLoader(true);
  setLLMResponse('');
 
  const response = await fetch('https://api.s2speech.com/v1/chat/completions', {
  method: 'POST',
  headers: {
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${API_KEY}`
  },
  body: JSON.stringify({
  model: 'aivision-L1.0',
  messages: [
  { role: 'system', content: 'Bạn là trợ lý giọng nói thân thiện.' },
  { role: 'user', content: userText }
  ],
  stream: true
  })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
  const { done, value } = await reader.read();
  if (done) break;
 
  const chunk = decoder.decode(value);
  // Xử lý SSE format: data: {...}
  const lines = chunk.split('\n');
  lines.forEach(line => {
  if (line.startsWith('data: ')) {
  const data = JSON.parse(line.slice(6));
  if (data.choices[0].delta.content) {
  setLLMResponse(prev => prev + data.choices[0].delta.content);
  }
  }
  });
  }
  setLoader(false);
}

Bước 3: TTS React và tối ưu trải nghiệm nghe

Cuối cùng, chúng ta chuyển văn bản từ LLM thành giọng nói. TTS React cần xử lý cẩn thận để tránh chồng chéo âm thanh hoặc độ trễ cao.

async function playTTS(text) {
  // Giả lập fetch TTS streaming
  const response = await fetch('https://api.s2speech.com/tts/stream', {
  method: 'POST',
  headers: { 'Authorization': `Bearer ${API_KEY}` },
  body: JSON.stringify({ text: text, voice: 'vi-female-1' })
  });
 
  const audioContext = new AudioContext();
  // Xử lý audio stream và phát qua AudioContext
  // Lưu ý: Cần hủy AudioContext cũ trước khi tạo mới để tránh rò rỉ bộ nhớ
}

Tối ưu hiệu suất và quản lý trạng thái

Khi kết hợp cả ba thành phần, bạn cần một quản lý trạng thái hiệu quả. Dưới đây là bảng so sánh các phương pháp xử lý:

Thành phần	Giao thức	Ưu điểm	Lưu ý kỹ thuật
STT	WebSocket	Real-time, độ trễ thấp	Cần xử lý reconnection nếu mất mạng
LLM	HTTP (SSE)	Streaming text, dễ debug	Cần parse SSE format đúng cách
TTS	HTTP/WS	Streaming audio	Cần quản lý AudioContext để tránh lỗi

Mẹo thực chiến:

• Debounce cho STT: Nếu người dùng dừng nói, hãy chờ 500ms trước khi gửi lệnh "final" để tránh cắt cụt câu.
• AbortController: Luôn sử dụng AbortController khi gọi API LLM hoặc TTS để người dùng có thể hủy yêu cầu nếu đổi ý.
• Xử lý lỗi mạng: WebSocket có thể bị ngắt. Hãy viết logic tự động kết nối lại (reconnect) với backoff strategy.

Kết luận

Việc Tích hợp API React với hệ sinh thái STT, LLM và TTS không còn là bài toán khó nếu bạn nắm vững kiến trúc streaming và quản lý trạng thái. Bằng cách tận dụng các API hiện đại hỗ trợ WebSocket và OpenAI-compatible, bạn có thể xây dựng những ứng dụng giọng nói mượt mà, chính xác và tự nhiên.

AIVISION đã hỗ trợ hàng trăm doanh nghiệp triển khai các giải pháp giọng nói tiếng Việt với độ chính xác cao và khả năng xử lý code-switching linh hoạt. Nếu bạn muốn bắt đầu ngay, hãy Dùng thử miễn phí các dịch vụ API của chúng tôi hoặc xem thêm các bài viết chuyên sâu tại Blog.

Câu hỏi thường gặp

Tại sao nên dùng WebSocket cho Speech-to-Text trong React?

WebSocket cho phép truyền dữ liệu hai chiều liên tục, giúp giảm độ trễ (latency) xuống mức thấp nhất, phù hợp cho giao tiếp thời gian thực. HTTP REST chỉ phù hợp khi xử lý file audio đã hoàn chỉnh.

Làm thế nào để xử lý tiếng Anh trong câu tiếng Việt khi dùng STT?

Hãy sử dụng các API STT hỗ trợ code-switching. AIVISION's STT model được huấn luyện đặc biệt để xử lý tốt các từ tiếng Anh xen kẽ trong câu tiếng Việt, đảm bảo độ chính xác cao.

Có cần cài đặt thư viện đặc biệt để tích hợp TTS vào React không?

Bạn có thể dùng API fetch hoặc axios để gọi API TTS. Về phía trình duyệt, hãy sử dụng Web Audio API hoặc HTML5 Audio để phát lại dữ liệu audio nhận được từ server.

Làm sao để giảm độ trễ khi hiển thị phản hồi từ LLM?

Sử dụng chế độ streaming (SSE) khi gọi LLM API. Điều này cho phép bạn hiển thị từng từ hoặc từng câu ngay khi nhận được, thay vì chờ toàn bộ phản hồi hoàn tất.

AIVISION có hỗ trợ các ngôn ngữ khác ngoài tiếng Việt không?

Có, ngoài tiếng Việt, AIVISION hỗ trợ thêm 24 ngôn ngữ khác bao gồm tiếng Anh, Tây Ban Nha, Thái Lan, Trung Quốc, Nhật Bản, Hàn Quốc... phục vụ cho các ứng dụng dịch thuật đa ngôn ngữ.

#Tích hợp API React#Speech to Text React#LLM API Web#TTS React#AI giọng nói#phát triển web