Dịch bằng AI tích hợp sẵn

Thomas Steiner

Alexandra Klepper

Xuất bản: ngày 13 tháng 11 năm 2024, Cập nhật lần gần đây nhất: ngày 20 tháng 5 năm 2025

Sử dụng Translator API trong Chrome để dịch văn bản bằng các mô hình AI có trong trình duyệt.

Trang web của bạn có thể đã cung cấp nội dung bằng nhiều ngôn ngữ. Với Translator API, người dùng có thể viết bằng ngôn ngữ chính của mình. Ví dụ: người dùng có thể tham gia các cuộc trò chuyện hỗ trợ bằng ngôn ngữ đầu tiên của họ và trang web của bạn có thể dịch tin nhắn của họ sang ngôn ngữ đầu tiên của nhân viên hỗ trợ, trước khi tin nhắn rời khỏi thiết bị của người dùng. Điều này giúp mang lại trải nghiệm mượt mà, nhanh chóng và toàn diện cho tất cả người dùng.

Việc dịch nội dung trên web thường yêu cầu sử dụng một dịch vụ đám mây. Trước tiên, nội dung nguồn được tải lên một máy chủ, máy chủ này sẽ chạy bản dịch sang ngôn ngữ đích, sau đó văn bản kết quả được tải xuống và trả về cho người dùng. Khi nội dung chỉ tồn tại trong thời gian ngắn và không cần lưu vào cơ sở dữ liệu, thì việc dịch phía máy khách sẽ tiết kiệm thời gian và chi phí so với dịch vụ dịch được lưu trữ.

Bắt đầu

Chạy tính năng phát hiện để xem trình duyệt có hỗ trợ Translator API hay không.

if ('Translator' in self) {
  // The Translator API is supported.
}

Mặc dù luôn biết ngôn ngữ đích của bản dịch, nhưng bạn có thể không phải lúc nào cũng biết ngôn ngữ nguồn. Trong trường hợp như vậy, bạn có thể sử dụng Language Detector API.

Tải mô hình xuống

Translator API sử dụng một mô hình chuyên gia được huấn luyện để tạo bản dịch chất lượng cao. API này được tích hợp vào Chrome và mô hình này sẽ được tải xuống vào lần đầu tiên một trang web sử dụng API này.

Để xác định xem mô hình đã sẵn sàng sử dụng hay chưa, hãy gọi hàm không đồng bộ Translator.availability(). Nếu phản hồi cho availability() là downloadable, hãy theo dõi tiến trình tải xuống để thông báo cho người dùng về tiến trình này vì có thể mất một khoảng thời gian.

Kiểm tra xem cặp ngôn ngữ có được hỗ trợ hay không

Bản dịch được quản lý bằng các gói ngôn ngữ, được tải xuống theo yêu cầu. Gói ngôn ngữ giống như một từ điển cho một ngôn ngữ nhất định.

• sourceLanguage: Ngôn ngữ hiện tại của văn bản.
• targetLanguage: Ngôn ngữ cuối cùng mà văn bản sẽ được dịch sang.

Sử dụng mã ngôn ngữ ngắn BCP 47 dưới dạng chuỗi. Ví dụ: 'es' cho tiếng Tây Ban Nha hoặc 'fr' cho tiếng Pháp.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

Theo dõi tiến trình tải mô hình xuống bằng sự kiện downloadprogress:

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Nếu quá trình tải xuống không thành công, thì các sự kiện downloadprogress sẽ dừng và lời hứa ready sẽ bị từ chối.

Tạo và chạy trình dịch

Để tạo một trình dịch, hãy kiểm tra hoạt động kích hoạt của người dùng và gọi hàm create() không đồng bộ. Hàm create() của Trình dịch yêu cầu một tham số options có hai trường, một cho sourceLanguage và một cho targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Sau khi bạn có một trình dịch, hãy gọi translate() không đồng bộ.

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

Ngoài ra, nếu cần xử lý văn bản dài hơn, bạn cũng có thể sử dụng phiên bản truyền trực tuyến của API và gọi translateStreaming().

const stream = translator.translateStreaming(longText);
for await (const chunk of stream) {
  console.log(chunk);
}

Bản dịch tuần tự

Bản dịch được xử lý tuần tự. Nếu bạn gửi một lượng lớn văn bản cần dịch, thì các bản dịch tiếp theo sẽ bị chặn cho đến khi các bản dịch trước đó hoàn tất.

Để nhận được câu trả lời tốt nhất cho các yêu cầu của bạn, hãy nhóm các yêu cầu lại với nhau và thêm một giao diện tải, chẳng hạn như vòng quay, để cho biết quá trình dịch đang diễn ra.

Bản minh hoạ

Bạn có thể xem Translator API (được dùng kết hợp với Language Detector API) trong Translator và Language Detector API playground.

Chính sách về quyền, iframe và Web Worker

Theo mặc định, Translator API chỉ có sẵn cho các cửa sổ cấp cao nhất và cho các iframe cùng nguồn gốc. Bạn có thể uỷ quyền truy cập vào API cho iframe nhiều nguồn gốc bằng cách sử dụng thuộc tính Permissions Policy allow="":

<!--
  The host site https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Translator API by
  setting the `allow="translator"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="translator"></iframe>

Translator API không có trong Web Worker do sự phức tạp của việc thiết lập một tài liệu có trách nhiệm cho mỗi worker để kiểm tra trạng thái Chính sách về quyền.

Chia sẻ ý kiến phản hồi

Chúng tôi muốn xem những gì bạn đang xây dựng. Chia sẻ trang web và ứng dụng web của bạn với chúng tôi trên X, YouTube và LinkedIn.

Để gửi ý kiến phản hồi về cách triển khai của Chrome, hãy gửi một báo cáo lỗi hoặc một yêu cầu về tính năng.