פורסם: 8 במאי 2025
כדי להנגיש את התוכן לקהל גלובלי, אפשר להשתמש ב-Translator API וב-Language Detector API. באמצעות Language Detector API, אפשר לקבוע באיזו שפה נעשה שימוש בקלט, ובאמצעות Translator API, אפשר לתרגם מהשפה שזוהתה לשפה אחרת. שתי ה-API פועלות בצד הלקוח עם מודלים של AI שמובנים ב-Chrome, מה שאומר שהן מהירות, מאובטחות וחינמיות לשימוש, כי אין עלויות שרת.
API | הסבר | פיתוח אתרים | תוספים | הסטטוס של Chrome | כוונת רכישה |
---|---|---|---|---|---|
Translator API | MDN | |
|
תצוגה | כוונה לשלוח |
Language Detector API | MDN | |
|
תצוגה | כוונה לשלוח |
כאן אפשר לקרוא איך שני עסקים בינלאומיים גדולים, Policybazaar ו-JioHotstar, משתמשים בממשקי ה-API המובנים האלה ונהנים מהם.
תמיכת לקוחות רב-לשונית של Policybazaar
Policybazaar היא פלטפורמת הביטוח הגדולה ביותר בהודו, עם יותר מ-97 מיליון לקוחות רשומים. בהודו יש מגוון לשוני עצום, עם שפות וניבים רבים שמדוברים ברחבי המדינה.
כדי לתמוך במגוון הלשוני של הלקוחות שלהם, ב-Policybazaar הטמיעו את ממשקי ה-API של Translator ו-Language Detector בשתי דרכים: מתן סיוע בנושא ביטוח בכל שלב והצעת מאמרים עם תובנות לגבי השוק בשפה המועדפת של הלקוח.
סיוע בביטוח באמצעות Finova AI
ביטוח הוא מוצר אישי במהותו, ומידע רגיש הוא הבסיס לפוליסות ספציפיות. הלקוחות של Policybazaar מחפשים לעיתים קרובות הדרכה לגבי בחירת תוכנית או לגבי התמיכה שהתוכנית שלהם מספקת. ל-Policybazaar יש צוות שדובר שפות רבות, אבל הם היו צריכים פתרון שיפעל באזורי זמן שונים וגם אחרי שעות הפעילות. לכן, חברת Policybazaar פיתחה את Finova AI, כלי מותאם אישית לסיוע בביטוח בשפה המועדפת על הלקוח.
"ממשקי ה-API של Chrome לזיהוי שפה ולתרגום עזרו לנו לספק ללקוחות שלנו תמיכה חלקה יותר בנושאי ביטוח, כי הם מאפשרים לנו לתת מענה למגוון רחב של צרכים בשפות שונות. כתוצאה מכך, המשתמשים יכולים לתקשר בשפה ההודית המועדפת עליהם, ללא עיכובים מורגשים".
—Rishabh Mehrotra, Head of Design Life Insurance Business Unit at Policybazaar
הצוות בחר ב-AI מצד הלקוח, כלומר בהסקת מסקנות שמתרחשת בדפדפן או במכשיר של המשתמש. AI בצד הלקוח מציע חביון מינימלי ועלות נמוכה יותר בהשוואה ל-AI שמתארח בשרת או ל-AI ללא שרת. בשיחה בזמן אמת, קצב ההתקדמות מהיר וההודעות מגיעות בכמויות גדולות, ולכן פתרון שמבוסס על שרת יהיה יקר וידרוש זמן רב.
הטמעת ה-AI המובנה ב-Chrome כוללת מודלים שמובנים בדפדפן, כך שההסקה מתבצעת במכשיר. זהו פתרון יעיל שעוזר לעמוד בדרישות העיקריות.
// 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;
תרגום מאמרים ל-Market Insights
"Translator API היה קל מאוד לשילוב בקוד React הקיים שלנו. בחרנו בפתרון הזה בצד הלקוח כדי להבטיח תרגום מהיר ללקוחות ולנציגים שלנו. ה-API הצליח לתרגם מאמר באורך 1,000 תווים תוך שתי שניות".
– Aman Soni, מוביל טכני ב-Policybazaar
החברה Policybazaar מפעילה אנשי תמיכה בתחום ביטוחי החיים, שמספקים ללקוחות ולנציגי התמיכה שפע של מאמרים עם מידע על תנאי השוק.
הינדית היא שפה שמדוברת בקרב משתמשים רבים שלהם, ולכן הם ערכו פיילוט של Translator API לתרגום מאמרים מאנגלית להינדית לפי דרישה.
כדי להוסיף תרגום לאתר, הם השתמשו בסקריפט הבא:
// 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;
});
}
באמצעות המודל וה-API שמוצעים על ידי Chrome, הלקוחות יכולים לגשת לתרגום כמעט מיידי של מאמרים.
JioHotstar מציע תרגום דינמי של כתוביות
JioHotstar, פלטפורמת סטרימינג דיגיטלית מובילה בהודו שמציעה מגוון רחב של סרטים, תוכניות טלוויזיה, ספורט ותוכן מקורי בכמה שפות, בודקת את האפשרות להשתמש ב-Translator API כדי לשפר את התרגום של כתוביות.
השירות JioHotstar מיועד למשתמשים בהודו שמעדיפים לצרוך תוכן בשפה המקומית שלהם. מגוון התוכן שזמין ב-JioHotstar הוא רחב, ולכן קשה לספק מענה לצרכים של כל המשתמשים בשפות אזוריות, וכך לשפר את צריכת התוכן שלהם.
מטרת הפלטפורמה היא להשתמש ב-Translator API כדי לתרגם באופן דינמי כתוביות באנגלית לשפה המועדפת על המשתמש או על סמך האזור הגיאוגרפי שלו. האפשרות לתרגום דינמי מוצעת בתפריט לבחירת שפה, שבו אנחנו מזהים באופן אוטומטי כתוביות מקוריות חסרות ומשלימים אותן מהשפות שנתמכות ב-Chrome. כך משפרים את חוויית המשתמש של הכתוביות והופכים את התוכן לנגיש ליותר משתמשים.
רשימת השפות הדינמיות הזמינות נוצרת על ידי בדיקת הדפדפן כדי לראות אם יש חבילות שפה קיימות, על סמך רשימה ראשית שמותאמת להעדפות ולמיקום הגיאוגרפי של כל משתמש. כשמשתמש בוחר שפה וחבילת השפה המתאימה כבר הורדה בדפדפן, הטקסט המתורגם מופיע מיד. אחרת, החבילה תורד קודם, ואז יתחיל התרגום.
אחרי שהמשתמש בוחר שפה ורואה שהתרגום מתבצע, הוא יכול להיות בטוח שחבילת השפה הורדה בהצלחה. מנקודה זו ואילך, אפשר לצפות בכל התוכן עם כתוביות בשפה שנבחרה. כך המשתמשים לא יתלבטו אם לצפות בתוכן, כי הם ידעו אם הוא זמין בשפה המועדפת שלהם.
בדוגמת הקוד הבאה מוצגת הפעלה והגדרה של הכלי לתרגום.
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;
}
};
}
}
לאחר מכן, הם משתמשים ב-Translator API כדי ליצור כתוביות מתורגמות.
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');
יש עוד כמה פונקציות שמעדכנות את הכתוביות הסופיות.
/* 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))
שיטות מומלצות
השימושים האלה בממשקי ה-API של Translator ושל Language Detector שונים זה מזה, אבל יש הרבה שיטות מומלצות משותפות:
- עורכים הערכות איכות לטקסט מתורגם כדי לוודא שהדקדוק וההקשר נשמרים. במקרים המתאימים, כדאי לספק למשתמשים אפשרות לשלוח משוב על התרגום.
- כדי לציין שהאפליקציה מגיבה, צריך לספק ממשק משתמש של התקדמות, כמו סמל טעינה, רכיב טעינה או סרגל התקדמות. לדוגמה, Policybazaar השתמשה במחוון הקלדה בצ'אטבוט כדי להראות שהוא מעבד את הקלט של המשתמש.
מסקנות והמלצות
האם אתם בונים משהו חדש באמצעות ממשקי ה-API האלה? אתם יכולים לשתף אותה איתנו ב-@ChromiumDev ב-X או ב-Chromium for Developers ב-LinkedIn.
משאבים
- איך מתחילים להשתמש בממשקי API מובנים ב-Chrome
- מידע נוסף על Language Detector API
- מידע נוסף על Translator API
- מעצימים בלוגרים: איך CyberAgent הטמיעה AI מובנה כדי לשפר את יצירת התוכן
תודות
תודה ל-Rishabh Mehrotra ו-Aman Soni מ-Policybazaar, ל-Bhuvaneswaran Mohan ול-Ankeet Maini מ-JioHotstar, ל-Alexandra Klepper, ל-Thomas Steiner ול-Kenji Baheux על העזרה בכתיבה ובבדיקה של המאמר הזה.