Ngày xuất bản: 8 tháng 5 năm 2025
Giúp khán giả trên toàn cầu có thể truy cập vào nội dung của bạn bằng Translator API và Language Detector API. Với Language Detector API, bạn có thể xác định ngôn ngữ được dùng trong một dữ liệu đầu vào và với Translator API, bạn có thể dịch từ ngôn ngữ được phát hiện đó sang một ngôn ngữ khác. Cả hai API này đều chạy phía máy khách với các mô hình AI được tích hợp vào Chrome, nghĩa là chúng hoạt động nhanh, an toàn và miễn phí sử dụng vì không tốn chi phí máy chủ.
| API | Video giải thích | Web | Phần mở rộng | Trạng thái của Chrome | Intent |
|---|---|---|---|---|---|
| Translator API | MDN | Xem | Ý định vận chuyển | ||
| Language Detector API | MDN | Xem | Ý định vận chuyển |
Tìm hiểu cách hai doanh nghiệp quốc tế lớn là Policybazaar và JioHotstar đang sử dụng và hưởng lợi từ các API tích hợp này.
Dịch vụ hỗ trợ khách hàng đa ngôn ngữ của Policybazaar
Policybazaar là nền tảng bảo hiểm lớn nhất ở Ấn Độ, với hơn 97 triệu khách hàng đã đăng ký. Ấn Độ có sự đa dạng ngôn ngữ đáng kinh ngạc, với nhiều ngôn ngữ và phương ngữ được sử dụng trên khắp đất nước.
Để hỗ trợ sự đa dạng về ngôn ngữ của khách hàng, Policybazaar đã triển khai Translator API và Language Detector API theo 2 cách: cung cấp dịch vụ hỗ trợ bảo hiểm bất cứ lúc nào và cung cấp các bài viết có thông tin chi tiết về thị trường bằng ngôn ngữ mà khách hàng ưu tiên.
Hỗ trợ bảo hiểm bằng AI của Finova
Bảo hiểm là một sản phẩm mang tính cá nhân, trong đó thông tin nhạy cảm là cơ sở của các chính sách cụ thể. Khách hàng của Policybazaar thường tìm kiếm hướng dẫn về cách chọn gói hoặc những gì gói của họ hỗ trợ. Mặc dù có đội ngũ nhân viên nói được nhiều ngôn ngữ, nhưng Policybazaar vẫn cần một giải pháp có thể hoạt động ở nhiều múi giờ và ngoài giờ làm việc. Vì vậy, Policybazaar đã xây dựng Finova AI, một trợ lý bảo hiểm được điều chỉnh theo ngôn ngữ mà khách hàng ưu tiên.
"Các API Trình dịch và Trình phát hiện ngôn ngữ của Chrome đã giúp dịch vụ hỗ trợ bảo hiểm của chúng tôi trở nên liền mạch hơn bằng cách đáp ứng nhu cầu đa dạng về ngôn ngữ của khách hàng. Do đó, người dùng có thể giao tiếp bằng ngôn ngữ Ấn Độ mà họ muốn mà không gặp phải tình trạng trễ đáng kể."
– Rishabh Mehrotra, Trưởng bộ phận Thiết kế của Đơn vị kinh doanh bảo hiểm nhân thọ tại Policybazaar
Nhóm đã chọn AI phía máy khách, tức là suy luận xảy ra trong trình duyệt hoặc trên thiết bị của người dùng. AI phía máy khách có độ trễ tối thiểu và chi phí thấp hơn so với AI được lưu trữ trên máy chủ hoặc AI không có máy chủ. Do tốc độ và số lượng tin nhắn lớn trong cuộc trò chuyện theo thời gian thực, nên giải pháp dựa trên máy chủ sẽ tốn kém và mất thời gian.
Việc Chrome triển khai AI tích hợp sẵn cung cấp các mô hình được tích hợp trong trình duyệt, vì vậy, quá trình suy luận được thực hiện trên thiết bị. Đây là một giải pháp hấp dẫn để đáp ứng các yêu cầu chính.
// Language Detector and Translator APIs implemented with React
import { useRef } from "react";
const useService = () => {
const languageModel = useRef(null);
const translatorCapabilitiesModel = useRef(null);
const loadAllModels = async () => {
if (window?.LanguageDetector) {
languageModel.current = await window.LanguageDetector.create().catch(() => null);
}
}
// Detect what language the customer is writing
const detectLanguage = async (message) => {
if (!languageModel.current) return "";
try {
const [result] = await languageModel.current.detect(message);
const { detectedLanguage, confidence } = result || {};
return confidence * 100 > 50 ? detectedLanguage : "";
} catch (err) {
console.error(err);
return "";
}
};
// Translate messages to and from the detected language and English
const translateMessage = async (message, detectedLanguage, targetLanguage = 'en') => {
try {
const modelAvailability = await window.Translator.availability({ sourceLanguage: detectedLanguage, targetLanguage });
if (!['available', 'downloadable'].includes(modelAvailability)) {
return message;
}
const translator = await window.Translator.create({ sourceLanguage: detectedLanguage, targetLanguage });
const translatedMessage = await translator.translate(message);
return translatedMessage;
} catch (error) {
return message;
}
}
return { detectLanguage, translateMessage, loadAllModels };
}
export default useService;
Bản dịch bài viết cho thông tin chi tiết về thị trường
"Translator API cực kỳ dễ tích hợp vào mã React hiện có của chúng tôi. Chúng tôi chọn giải pháp phía máy khách này để đảm bảo bản dịch nhanh chóng cho khách hàng và nhân viên hỗ trợ. API này có thể dịch một bài viết dài 1.000 ký tự trong vòng 2 giây."
– Aman Soni, Trưởng nhóm kỹ thuật tại Policybazaar
Mảng kinh doanh Bảo hiểm nhân thọ của Policybazaar cung cấp rất nhiều bài viết để khách hàng và nhân viên hỗ trợ khách hàng nắm được thông tin về tình hình thị trường.
Tiếng Hindi là ngôn ngữ được nhiều người dùng của họ sử dụng, vì vậy, họ đã thử nghiệm Translator API để dịch bài viết từ tiếng Anh sang tiếng Hindi theo yêu cầu.
Để thêm bản dịch vào trang web của mình, họ đã sử dụng tập lệnh sau:
// Initialize the translator, setting source and target languages
var translator = null;
var translatorAvailable = false;
var languageOptionsData = { name: "Hindi", code: "hi" };
var IGNORED_TEXT_NODES = ['RSI', 'NAV'];
function checkForLanguageOptions() {
if (window.Translator) {
translatorAvailable = true;
return window.Translator.create({
sourceLanguage: 'en',
targetLanguage: languageOptionsData.code
}).then(function (createdTranslator) {
translator = createdTranslator;
});
} else {
translatorAvailable = false;
return Promise.resolve();
}
}
/**
* Translate the article content using the Translator API.
* @param {HTMLElement} container - element that holds the article content.
* @return {Promise<string>} A promise that resolves to the container's innerHTML after translation.
*/
function translateArticle(container) {
if (!translatorAvailable) { return Promise.resolve(''); }
var textNodes = getAllTextNodes(container);
var promiseChain = Promise.resolve();
textNodes.forEach(function (element) {
if (IGNORED_TEXT_NODES.indexOf(element.nodeValue) !== -1) return;
var message = element.nodeValue;
promiseChain = promiseChain.then(function () {
return translator.translate(message).then(function (translated) {
element.nodeValue = translated;
}).catch(function (error) {
console.error('Translation error:', error);
});
});
});
return promiseChain.then(function () {
return container.innerHTML;
});
}
Với mô hình và API do Chrome cung cấp, khách hàng có thể truy cập vào bản dịch gần như tức thì của các bài viết.
JioHotstar cung cấp tính năng dịch phụ đề động
JioHotstar là một nền tảng truyền trực tuyến kỹ thuật số hàng đầu ở Ấn Độ, cung cấp nhiều loại phim, chương trình truyền hình, nội dung thể thao và nội dung nguyên gốc bằng nhiều ngôn ngữ. Nền tảng này đang khám phá Translator API để cải thiện bản dịch phụ đề.
JioHotstar phục vụ những người dùng ở Ấn Độ có xu hướng xem nội dung bằng ngôn ngữ địa phương của họ. Với danh mục nội dung đa dạng có trên JioHotstar, việc đáp ứng nhu cầu về ngôn ngữ theo khu vực của tất cả người dùng là một thách thức, do đó, việc cải thiện mức tiêu thụ nội dung của họ cũng là một thách thức.
Nhờ Translator API, nền tảng này hướng đến việc dịch linh hoạt phụ đề tiếng Anh sang ngôn ngữ mà người dùng ưu tiên hoặc dựa trên khu vực địa lý của họ. Lựa chọn dịch linh hoạt có trong trình đơn chọn ngôn ngữ. Tại đây, chúng tôi tự động phát hiện phụ đề gốc bị thiếu và bổ sung phụ đề bằng các ngôn ngữ mà Chrome hỗ trợ. Điều này giúp cải thiện trải nghiệm người dùng về phụ đề và giúp nhiều người dùng tiếp cận được nội dung hơn.
Danh sách các ngôn ngữ động có sẵn được tạo bằng cách kiểm tra trình duyệt để tìm các gói ngôn ngữ hiện có, dựa trên một danh sách chính phù hợp với lựa chọn ưu tiên và vị trí địa lý của từng người dùng. Khi người dùng chọn một ngôn ngữ và gói ngôn ngữ tương ứng đã được tải xuống trong trình duyệt, văn bản được dịch sẽ xuất hiện ngay lập tức. Nếu không, gói sẽ được tải xuống trước, sau đó bản dịch sẽ bắt đầu.
Sau khi chọn một ngôn ngữ và thấy bản dịch xuất hiện, người dùng có thể yên tâm rằng gói ngôn ngữ đã được tải xuống thành công. Từ thời điểm đó trở đi, bạn có thể xem mọi nội dung có phụ đề bằng ngôn ngữ đã chọn. Điều này giúp loại bỏ sự không chắc chắn cho những người dùng có thể do dự khi duyệt xem nội dung vì không biết nội dung đó có ở ngôn ngữ họ muốn hay không.
Mã mẫu sau đây khởi chạy và thiết lập trình dịch.
class SubTitleTranslator {
// Cache translator instances based on source-target language pair, so that we don't create this often for multiple contents
#translatorMap = {};
// Get or create a translator for the language pair
async #createTranslator(sourceLanguage, targetLanguage) {
const key = `${sourceLanguage}-${targetLanguage}`;
const translator = this.#translatorMap[key];
// Check if a translator already exists for a language pair in the map
if (translator) {
return translator;
}
// Check if translation is available
const isAvailable =
(await Translator.availability({ sourceLanguage, targetLanguage })) ===
"available";
if (isAvailable) {
// If available, create a new translator and cache it
this.#translatorMap[key] = await Translator.create({
sourceLanguage,
targetLanguage,
});
return this.#translatorMap[key];
}
return null;
}
// Translate text
async #translateText(text, sourceLanguage, targetLanguage) {
const translator = await this.#createTranslator(
sourceLanguage,
targetLanguage
);
// Returns the given input text if translator is unavailable
if (!translator) {
return text;
}
return await translator.translate(text);
}
// Public method to get a reusable translation function for a specific language pair.
getTranslatorFor(sourceLanguage, targetLanguage) {
return async (text) => {
try {
return this.#translateText(text, sourceLanguage, targetLanguage);
} catch {
return text;
}
};
}
}
Sau đó, họ sử dụng Translator API để tạo phụ đề đã dịch.
const translatorFactory = new SubTitleTranslator();
/* Accept English input and translate to Tamil.*/
const translateToTamil = translatorFactory.getTranslatorFor('en','ta');
/* Accept English text as input and translate it to Japanese. */
const translateToJapanese = translatorFactory.getTranslatorFor('en','ja');
/* Accept English input and returns English, as `JTA` is not a valid language code. */
const translateToUnknownLanguage = translatorFactory.getTranslatorFor('en','jta');
Có một số hàm bổ sung giúp cập nhật phụ đề được kết xuất cuối cùng.
/* updateSubtitle is the internal function that updates the rendered subtitle. */
translateToTamil('hi').then(result => updateSubtitle(result))
translateToJapanese('hi').then(result => updateSubtitle(result))
translateToUnknownLanguage('hi').then(result => updateSubtitle(result))
Các phương pháp hay nhất
Mặc dù có sự khác biệt giữa các trường hợp sử dụng Translator API và Language Detector API, nhưng có nhiều phương pháp hay thường gặp:
- Đánh giá chất lượng văn bản đã dịch để đảm bảo ngữ pháp và ngữ cảnh được giữ nguyên. Cân nhắc việc cung cấp cho người dùng lựa chọn gửi ý kiến phản hồi về bản dịch nếu thích hợp.
- Cung cấp giao diện người dùng tiến trình, chẳng hạn như một chỉ báo xoay, trình tải hoặc thanh tiến trình để cho biết khả năng phản hồi. Ví dụ: Policybazaar đã sử dụng chỉ báo nhập liệu cho chatbot để cho biết chatbot đang xử lý thông tin đầu vào của người dùng.
Kết luận và đề xuất
Bạn có đang xây dựng một ứng dụng mới bằng các API này không? Hãy chia sẻ với chúng tôi tại @ChromiumDev trên X hoặc Chromium for Developers trên LinkedIn.
Tài nguyên
- Bắt đầu sử dụng các API tích hợp trên Chrome
- Tìm hiểu thêm về Language Detector API
- Tìm hiểu thêm về Translator API
- Hỗ trợ blogger: Cách CyberAgent triển khai AI tích hợp để nâng cao khả năng sáng tạo nội dung
Lời cảm ơn
Xin cảm ơn Rishabh Mehrotra và Aman Soni của Policybazaar, Bhuvaneswaran Mohan và Ankeet Maini của JioHotstar, Alexandra Klepper, Thomas Steiner và Kenji Baheux vì đã giúp viết và xem xét bài viết này.