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

Thomas Steiner

Alexandra Klepper

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

شرح	الويب	الإضافات	حالة Chrome	النيّة بالشراء
MDN	Chrome 138	Chrome 138	العرض	Intent to Ship

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

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

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

البدء

تتوفّر Translator API من الإصدار الثابت 138 من Chrome. في البداية، شغِّل ميزة التعرّف على الميزات لمعرفة ما إذا كان المتصفّح يتيح استخدام Translator API.

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

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

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

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

لتحديد ما إذا كان النموذج جاهزًا للاستخدام، استدعِ الدالة غير المتزامنة Translator.availability(). إذا كان الرد على availability() هو downloadable، استمع إلى تقدّم التنزيل لإعلام المستخدم بمدى تقدّمه، إذ قد يستغرق بعض الوقت.

const availability = await Translator.availability(); 

التحقّق من توفّر الزوج اللغوي

تتم إدارة الترجمة باستخدام حِزم اللغات التي يتم تنزيلها عند الطلب. حزمة اللغة هي بمثابة قاموس للغة معيّنة.

• ‫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="" في Permission Policy:

<!--   The hosting site at 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 بسبب صعوبة تحديد مستند مسؤول لكل عامل من أجل التحقّق من حالة سياسة الأذونات.

الجهد المطلوب لتوحيد المقاييس

نعمل على توحيد واجهة برمجة التطبيقات Translator API لضمان توافقها مع جميع المتصفّحات.

اعتمدت فريق عمل WebML التابع لاتحاد شبكة الويب العالمية (W3C) واجهتَي برمجة التطبيقات Translator API وLanguage Detector API. وقد طلبنا من Mozilla وWebKit توضيح مواقفهما بشأن المعايير.

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

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

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