תרגום באמצעות AI מובנה

Thomas Steiner

Alexandra Klepper

פורסם: 13 בנובמבר 2024, עדכון אחרון: 20 במאי 2025

אפשר להשתמש ב-Translator API ב-Chrome כדי לתרגם טקסט באמצעות מודלים של AI שזמינים בדפדפן.

יכול להיות שהאתר שלכם כבר מציע תוכן בכמה שפות. בעזרת Translator API, המשתמשים יכולים לכתוב בשפה הראשונה שלהם. לדוגמה, משתמשים יכולים להשתתף בצ'אטים עם נציגי תמיכה בשפה הראשונה שלהם, והאתר יכול לתרגם את ההודעה שלהם לשפה הראשונה של נציגי התמיכה, לפני שההודעה יוצאת מהמכשיר של המשתמש. כך נוצרת חוויה חלקה, מהירה ומכילה לכל המשתמשים.

כדי לתרגם תוכן באינטרנט, בדרך כלל צריך להשתמש בשירות ענן. קודם מעלים את תוכן המקור לשרת, שמריץ את התרגום לשפת היעד, ואז מורידים את הטקסט שמתקבל ומחזירים אותו למשתמש. אם התוכן הוא זמני ואין צורך לשמור אותו במסד נתונים, תרגום בצד הלקוח חוסך זמן וכסף בהשוואה לשירות תרגום מתארח.

שנתחיל?

מריצים זיהוי תכונות כדי לבדוק אם הדפדפן תומך ב-Translator API.

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

אתם תמיד יודעים מה שפת היעד של התרגומים, אבל לא תמיד תדעו מה שפת המקור. במקרים כאלה, אפשר להשתמש ב-Language Detector API.

הורדת המודל

‫Translator API משתמש במודל מומחה שאומן ליצירת תרגומים באיכות גבוהה. ממשק ה-API מובנה ב-Chrome, והמודל מורד בפעם הראשונה שאתר משתמש בממשק ה-API הזה.

כדי לקבוע אם המודל מוכן לשימוש, מפעילים את הפונקציה האסינכרונית Translator.availability(). אם התשובה ל-availability() היא downloadable, צריך להמתין להתקדמות ההורדה כדי לעדכן את המשתמש לגבי ההתקדמות, כי התהליך עשוי להימשך זמן מה.

בדיקת התמיכה בזוג שפות

התרגום מתבצע באמצעות חבילות שפה, שמורידים לפי הצורך. חבילת שפה היא כמו מילון לשפה מסוימת.

• ‫sourceLanguage: השפה הנוכחית של הטקסט.
• ‫targetLanguage: השפה הסופית שאליה הטקסט צריך להיות מתורגם.

צריך להשתמש בקודי שפה קצרים לפי BCP 47 כמחרוזות. לדוגמה, 'es' לספרדית או 'fr' לצרפתית.

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

כדי לעקוב אחרי התקדמות ההורדה של המודל, משתמשים באירוע downloadprogress:

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

אם ההורדה נכשלת, אירועי downloadprogress מפסיקים והבטחת ready נדחית.

יצירה והרצה של הכלי לתרגום

כדי ליצור מתרגם, בודקים אם יש הפעלה של המשתמש וקוראים לפונקציה האסינכרונית create(). פונקציית התרגום create() דורשת פרמטר אפשרויות עם שני שדות, אחד ל-sourceLanguage ואחד ל-targetLanguage.

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

אחרי שמקבלים אובייקט Translator, מתקשרים אל הפונקציה האסינכרונית translate().

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

לחלופין, אם אתם צריכים לעבד טקסטים ארוכים יותר, אתם יכולים להשתמש גם בגרסת הסטרימינג של ה-API ולהפעיל את translateStreaming().

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

תרגומים עוקבים

התרגומים מעובדים ברצף. אם שולחים כמויות גדולות של טקסט לתרגום, התרגומים הבאים נחסמים עד שהתרגומים הקודמים מסתיימים.

כדי לקבל את התשובה הכי טובה לבקשות שלכם, כדאי לאגד אותן ולהוסיף ממשק טעינה, כמו סמל טעינה, כדי להראות שהתרגום מתבצע.

הדגמה (דמו)

אפשר לראות את Translator API, שמשמש בשילוב עם Language Detector API, בסביבת הבדיקה של Translator ו-Language Detector API.

מדיניות הרשאות, מסגרות iframe ו-Web Workers

כברירת מחדל, Translator API זמין רק לחלונות ברמה העליונה ול-iframes מאותו מקור. אפשר להעניק גישה ל-API ל-iframes ממקורות שונים באמצעות המאפיין 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 לא זמין ב-Web Workers, בגלל המורכבות של יצירת מסמך אחראי לכל worker, כדי לבדוק את הסטטוס של מדיניות ההרשאות.

שליחת משוב

אנחנו רוצים לראות מה אתם בונים. אתם יכולים לשתף איתנו את האתרים ואת אפליקציות האינטרנט שלכם ב-X, ב-YouTube וב-LinkedIn.

כדי לשלוח משוב על ההטמעה של Chrome, אפשר להגיש דוח באגים או בקשה להוספת תכונה.