الترجمة باستخدام تكنولوجيات الذكاء الاصطناعي المدمجة

Thomas Steiner

Alexandra Klepper

تاريخ النشر: 13 نوفمبر 2024، تاريخ آخر تعديل: 20 مايو 2025

استخدام Translator API في Chrome لترجمة النصوص باستخدام نماذج الذكاء الاصطناعي المتوفّرة في المتصفّح

قد يقدّم موقعك الإلكتروني محتوى بأكثر من لغة واحدة. باستخدام Translator API، يمكن للمستخدمين الكتابة بلغتهم الأم. على سبيل المثال، يمكن للمستخدمين المشاركة في محادثات الدعم بلغتهم الأولى، ويمكن لموقعك الإلكتروني ترجمة رسالتهم إلى اللغة الأولى التي يتحدث بها موظفو الدعم، وذلك قبل أن تغادر الرسالة جهاز المستخدم. يؤدي ذلك إلى توفير تجربة سلسة وسريعة وشاملة لجميع المستخدمين.

تتطلّب ترجمة محتوى الويب عادةً استخدام خدمة سحابية. أولاً، يتم تحميل المحتوى المصدر إلى خادم، ثم يتم تشغيل الترجمة إلى اللغة المستهدَفة، وبعد ذلك يتم تنزيل النص الناتج وإرساله إلى المستخدم. عندما يكون المحتوى مؤقتًا ولا يستحق الحفظ في قاعدة بيانات، يوفّر الترجمة من جهة العميل الوقت والتكلفة مقارنةً بخدمة الترجمة المستضافة.

البدء

نفِّذ عملية رصد الميزات لمعرفة ما إذا كان المتصفّح يتيح استخدام Translator API.

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

مع أنّك تعرف دائمًا اللغة الهدف للترجمات، قد لا تعرف دائمًا اللغة المصدر. في مثل هذه الحالات، يمكنك استخدام Language Detector API.

تنزيل النموذج

تستخدِم Translator API نموذجًا متخصصًا تم تدريبه لإنشاء ترجمات عالية الجودة. تكون واجهة برمجة التطبيقات مضمّنة في Chrome، ويتم تنزيل النموذج في المرة الأولى التي يستخدم فيها موقع إلكتروني هذه الواجهة.

لتحديد ما إذا كان النموذج جاهزًا للاستخدام، استدعِ الدالة غير المتزامنة 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(). تتطلّب الدالة Translator create() معلَمة خيارات تتضمّن حقلَين، أحدهما sourceLanguage والآخر targetLanguage.

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

بعد الحصول على مترجم، اتّصِل بالدالة غير المتزامنة translate().

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

بدلاً من ذلك، إذا كنت بحاجة إلى التعامل مع نصوص أطول، يمكنك أيضًا استخدام إصدار البث من واجهة برمجة التطبيقات واستدعاء translateStreaming().

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

الترجمات التسلسلية

تتم معالجة الترجمات بالتسلسل. إذا أرسلت كميات كبيرة من النصوص لترجمتها، سيتم حظر الترجمات اللاحقة إلى أن تكتمل الترجمات السابقة.

للحصول على أفضل استجابة لطلباتك، قسِّمها إلى أجزاء وأضِف واجهة تحميل، مثل مؤشر تقدّم التحميل، للإشارة إلى أنّ عملية الترجمة مستمرة.

عرض توضيحي

يمكنك الاطّلاع على واجهة برمجة التطبيقات Translator API، المستخدَمة مع واجهة برمجة التطبيقات Language Detector، في ساحة تجارب واجهة برمجة التطبيقات Translator وLanguage Detector.

سياسة الأذونات وإطارات iframe وWeb Workers

تتوفّر واجهة برمجة التطبيقات Translator API تلقائيًا للنوافذ ذات المستوى الأعلى وإطارات iframe من المصدر نفسه فقط. يمكن تفويض إذن الوصول إلى واجهة برمجة التطبيقات إلى إطارات iframe من مصادر متعددة باستخدام السمة 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 بسبب صعوبة تحديد مستند مسؤول لكل عامل، وذلك للتحقّق من حالة "سياسة الأذونات".

مشاركة الملاحظات

نريد أن نرى ما تعمل عليه. يمكنك مشاركة مواقعك الإلكترونية وتطبيقات الويب معنا على X وYouTube وLinkedIn.

لإرسال ملاحظات حول طريقة تنفيذ Chrome لهذه الميزة، يمكنك تقديم تقرير عن خطأ أو طلب ميزة.