كيفية استخدام Policybazaar وJioHotstar واجهتَي برمجة التطبيقات Translator API وLanguage Detector API لإنشاء تجارب متعددة اللغات

Swetha Gopalakrishnan

Saurabh Rajpal

تاريخ النشر: 8 مايو 2025

يمكنك إتاحة المحتوى الخاص بك لجمهور عالمي باستخدام Translator API وLanguage Detector API. باستخدام واجهة برمجة التطبيقات Language Detector، يمكنك تحديد اللغة المستخدَمة في الإدخال، وباستخدام واجهة برمجة التطبيقات Translator، يمكنك الترجمة من اللغة التي تم رصدها إلى لغة أخرى. تعمل واجهتا برمجة التطبيقات من جهة العميل باستخدام نماذج الذكاء الاصطناعي المضمّنة في Chrome، ما يعني أنّهما سريعتان وآمنتان ومتاحتان للاستخدام بدون أي تكلفة، إذ لا توجد تكاليف للخادم.

واجهة برمجة التطبيقات	شرح	الويب	الإضافات	حالة Chrome	النيّة بالشراء
Translator API	MDN	Chrome 138	Chrome 138	العرض	Intent to Ship
Language Detector API	MDN	Chrome 138	Chrome 138	العرض	Intent to Ship

تعرَّف على كيفية استخدام شركتَين دوليتَين كبيرتَين، هما Policybazaar وJioHotstar، لواجهات برمجة التطبيقات المضمّنة هذه والاستفادة منها.

خدمة العملاء المتعدّدة اللغات من Policybazaar

‫Policybazaar هي أكبر منصة للتأمين في الهند، وتضم أكثر من 97 مليون عميل مسجّل. تتسم الهند بتنوّع لغوي مذهل، إذ يتحدث سكانها العديد من اللغات واللهجات.

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

مساعدة في التأمين باستخدام Finova AI

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

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

—ريشاب ميهروترا، رئيس قسم تصميم منتجات التأمين على الحياة في شركة Policybazaar

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

توفّر ميزة الذكاء الاصطناعي المضمَّن في 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;

ترجمة المقالات للحصول على إحصاءات السوق

"كان من السهل جدًا دمج Translator API في رمز React الحالي. لقد اخترنا هذا الحلّ من جهة العميل لضمان توفير ترجمة سريعة لعملائنا وموظفينا. تمكّنت واجهة برمجة التطبيقات من ترجمة مقالة مؤلّفة من 1,000 حرف في غضون ثانيتَين."

—أمان سوني، قائد الفريق التقني في 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;
  });
}

باستخدام النموذج وواجهة برمجة التطبيقات التي يوفّرها 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))

أفضل الممارسات

على الرغم من اختلاف استخدامات واجهتَي برمجة التطبيقات Translator API وLanguage Detector API، هناك العديد من أفضل الممارسات الشائعة:

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

الاستنتاجات والاقتراحات

هل تعمل على إنشاء شيء جديد باستخدام واجهات برمجة التطبيقات هذه؟ يمكنك مشاركة ملاحظاتك معنا على ‎@ChromiumDev على X أو Chromium for Developers على LinkedIn.

الموارد

• بدء استخدام واجهات برمجة التطبيقات المضمّنة في Chrome
• مزيد من المعلومات حول Language Detector API
• مزيد من المعلومات حول Translator API
• تمكين المدونين: كيف نشرت شركة CyberAgent الذكاء الاصطناعي المضمّن لتحسين عملية إنشاء المحتوى؟

الإقرارات

نشكر ريشاب ميهروترا وأمان سوني من Policybazaar وبوفانيسواران موهان وأنكيت مايني من JioHotstar وألكسندرا كليبر وتوماس شتاينر وكينجي باهيو على مساعدتهم في كتابة هذه المقالة ومراجعتها.