Dipublikasikan: 8 Mei 2025
Jadikan konten Anda dapat diakses oleh audiens global dengan Translator API dan Language Detector API. Dengan Language Detector API, Anda dapat menentukan bahasa yang digunakan dalam input dan dengan Translator API, Anda dapat menerjemahkan dari bahasa yang terdeteksi tersebut ke bahasa lain. Kedua API tersebut berjalan di sisi klien dengan model AI yang disertakan dalam Chrome, yang berarti API tersebut cepat, aman, dan gratis digunakan, karena tidak ada biaya server.
| API | Penjelasan | Web | Ekstensi | Status Chrome | Intent |
|---|---|---|---|---|---|
| Translator API | MDN | View | Maksud untuk Mengirim | ||
| Language Detector API | MDN | View | Maksud untuk Mengirim |
Pelajari cara dua bisnis internasional besar, Policybazaar dan JioHotstar, menggunakan dan mendapatkan manfaat dari API bawaan ini.
Bantuan pelanggan multibahasa Policybazaar
Policybazaar adalah platform asuransi terbesar di India, dengan lebih dari 97 juta pelanggan terdaftar. India memiliki keberagaman bahasa yang luar biasa, dengan berbagai bahasa dan dialek yang digunakan di seluruh negeri.
Untuk mendukung keberagaman bahasa di antara pelanggan mereka, Policybazaar menerapkan Translator API dan Language Detector API dengan dua cara: memberikan bantuan terkait asuransi kapan saja dan menawarkan artikel dengan insight pasar dalam bahasa pilihan pelanggan.
Bantuan asuransi dengan Finova AI
Asuransi adalah produk yang secara inheren bersifat pribadi, dengan informasi sensitif sebagai dasar kebijakan tertentu. Pelanggan Policybazaar sering kali mencari panduan tentang cara memilih paket atau apa yang didukung oleh paket mereka. Meskipun memiliki staf yang dapat berbicara dalam banyak bahasa, Policybazaar memerlukan solusi yang dapat digunakan di berbagai zona waktu dan di luar jam kerja. Jadi, Policybazaar membangun Finova AI, yang memberikan bantuan asuransi yang disesuaikan dalam bahasa pilihan pelanggan.
"API Pendeteksi Bahasa dan Penerjemah Chrome telah membantu membuat bantuan asuransi kami lebih lancar dengan memenuhi beragam kebutuhan bahasa pelanggan kami. Dengan demikian, pengguna dapat berkomunikasi dalam bahasa India pilihan mereka, tanpa penundaan yang terlihat."
—Rishabh Mehrotra, Head of Design Life Insurance Business Unit di Policybazaar
Tim memilih AI sisi klien, yaitu inferensi yang terjadi di browser atau di perangkat pengguna. AI sisi klien menawarkan latensi minimal dan biaya yang lebih rendah daripada AI yang dihosting server atau AI tanpa server. Mengingat kecepatan dan volume pesan yang tinggi dalam percakapan real-time, solusi berbasis server akan mahal dan memakan waktu.
Penerapan AI bawaan Chrome menawarkan model yang dibuat di browser, sehingga inferensi dilakukan di perangkat. Solusi ini merupakan solusi yang efektif untuk memenuhi persyaratan utama.
// 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;
Terjemahan artikel untuk analisis pasar
"Translator API sangat mudah diintegrasikan ke dalam kode React kami yang sudah ada. Kami memilih solusi sisi klien ini untuk memastikan terjemahan yang cepat bagi pelanggan dan agen kami. API ini dapat menerjemahkan artikel sepanjang 1.000 karakter dalam waktu dua detik."
—Aman Soni, Tech Lead di Policybazaar
Bagian bisnis Asuransi Jiwa Policybazaar menyediakan banyak artikel untuk terus menginformasikan kondisi pasar kepada pelanggan dan agen dukungan pelanggan.
Hindi adalah bahasa yang banyak digunakan oleh pengguna mereka, sehingga mereka menguji coba Translator API untuk menerjemahkan artikel dari bahasa Inggris ke bahasa Hindi sesuai permintaan.
Untuk menambahkan terjemahan ke situs mereka, mereka menggunakan skrip berikut:
// 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;
});
}
Dengan model dan API yang disediakan oleh Chrome, pelanggan dapat mengakses terjemahan artikel yang hampir instan.
JioHotstar menawarkan terjemahan subtitel dinamis
JioHotstar, platform streaming digital terkemuka di India yang menawarkan berbagai film, acara TV, olahraga, dan konten asli dalam beberapa bahasa, sedang mengeksplorasi Translator API untuk meningkatkan kualitas terjemahan subtitel.
JioHotstar melayani pengguna di India yang cenderung mengonsumsi konten dalam bahasa regional mereka. Mengingat luasnya katalog konten yang tersedia di JioHotstar, memenuhi kebutuhan bahasa regional semua pengguna merupakan tantangan, sehingga meningkatkan konsumsi konten mereka.
Dengan Translator API, platform ini bertujuan untuk menerjemahkan teks bahasa Inggris secara dinamis ke dalam bahasa pilihan pengguna atau berdasarkan wilayah geografisnya. Opsi terjemahan dinamis ditawarkan di menu pemilihan bahasa tempat kami otomatis mendeteksi subtitel asli yang tidak ada dan melengkapinya dari bahasa yang didukung Chrome. Hal ini meningkatkan pengalaman pengguna terkait teks dan membuat konten dapat diakses oleh lebih banyak pengguna.
Daftar bahasa dinamis yang tersedia dibuat dengan memeriksa browser untuk mengetahui paket bahasa yang ada, berdasarkan daftar utama yang disesuaikan dengan preferensi dan lokasi geografis setiap pengguna. Saat pengguna memilih bahasa dan paket bahasa yang sesuai sudah didownload di browser, teks yang diterjemahkan akan langsung muncul. Jika tidak, paket akan didownload terlebih dahulu, lalu terjemahan dimulai.
Setelah pengguna memilih bahasa dan melihat terjemahan sedang berlangsung, mereka dapat yakin bahwa paket bahasa telah berhasil didownload. Mulai saat itu, semua konten yang diberi teks dapat dilihat dalam bahasa yang dipilih. Hal ini membantu menghilangkan ketidakpastian bagi pengguna yang mungkin ragu untuk menjelajahi konten, karena tidak yakin apakah konten tersebut akan tersedia dalam bahasa pilihan mereka.
Contoh kode berikut menginisialisasi dan menyiapkan penerjemah.
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;
}
};
}
}
Kemudian, mereka menggunakan Translator API untuk membuat subtitel terjemahan.
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');
Ada beberapa fungsi tambahan yang memperbarui subtitel yang dirender akhir.
/* 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))
Praktik terbaik
Meskipun penggunaan Translator API dan Language Detector API ini berbeda, ada banyak praktik terbaik umum:
- Lakukan penilaian kualitas untuk teks terjemahan guna memastikan tata bahasa dan konteksnya dipertahankan. Pertimbangkan untuk memberikan opsi bagi pengguna untuk memberikan masukan tentang terjemahan jika sesuai.
- Sediakan UI progres seperti spinner, pemuat, atau status progres untuk menunjukkan responsivitas. Misalnya, Policybazaar menggunakan indikator pengetikan untuk chatbot guna menunjukkan bahwa chatbot sedang memproses input pengguna.
Kesimpulan dan rekomendasi
Apakah Anda membangun sesuatu yang baru dengan API ini? Bagikan kepada kami di @ChromiumDev di X atau Chromium for Developers di LinkedIn.
Resource
- Mulai menggunakan API Bawaan di Chrome
- Pelajari Language Detector API lebih lanjut
- Pelajari Translator API lebih lanjut
- Mendukung blogger: Cara CyberAgent men-deploy AI bawaan untuk meningkatkan kualitas pembuatan konten
Ucapan terima kasih
Terima kasih kepada Rishabh Mehrotra dan Aman Soni dari Policybazaar, Bhuvaneswaran Mohan dan Ankeet Maini dari JioHotstar, Alexandra Klepper, Thomas Steiner, dan Kenji Baheux yang telah membantu menulis dan meninjau artikel ini.