Policybazaar और JioHotstar, कई भाषाओं में अनुभव देने के लिए, Translator और Language Detector API का इस्तेमाल कैसे करते हैं

Swetha Gopalakrishnan

Saurabh Rajpal

पब्लिश किया गया: 8 मई, 2025

Translator API और Language Detector API की मदद से, अपने कॉन्टेंट को दुनिया भर के दर्शकों के लिए उपलब्ध कराएं. Language Detector API की मदद से, यह पता लगाया जा सकता है कि किसी इनपुट में किस भाषा का इस्तेमाल किया गया है. साथ ही, Translator API की मदद से, उस भाषा से किसी दूसरी भाषा में अनुवाद किया जा सकता है. दोनों एपीआई, Chrome में पहले से मौजूद एआई मॉडल के साथ क्लाइंट-साइड पर काम करते हैं. इसका मतलब है कि ये तेज़, सुरक्षित, और इस्तेमाल में आसान हैं. साथ ही, इनका इस्तेमाल बिना किसी शुल्क के किया जा सकता है, क्योंकि इनके लिए सर्वर की ज़रूरत नहीं होती.

एपीआई	जानकारी देने वाला चिप	वेब	एक्सटेंशन	Chrome का स्टेटस	प्रयोजन
Translator API	MDN	Chrome 138	Chrome 138	देखें	शिप करने का इंटेंट
Language Detector API	MDN	Chrome 138	Chrome 138	देखें	शिप करने का इंटेंट

जानें कि दो बड़े अंतरराष्ट्रीय कारोबार, Policybazaar और JioHotstar, इन पहले से मौजूद एपीआई का इस्तेमाल कैसे कर रहे हैं और इससे फ़ायदा कैसे ले रहे हैं.

Policybazaar की कई भाषाओं में उपलब्ध ग्राहक सहायता

Policybazaar, भारत का सबसे बड़ा इंश्योरेंस प्लैटफ़ॉर्म है. इस पर 97 करोड़ से ज़्यादा ग्राहक रजिस्टर हैं. भारत में भाषाओं की विविधता बहुत ज़्यादा है. यहां कई भाषाएं और बोलियां बोली जाती हैं.

अपने ग्राहकों की भाषाओं की इस विविधता को ध्यान में रखते हुए, Policybazaar ने Translator और Language Detector API को दो तरीकों से लागू किया है: ग्राहकों को किसी भी समय बीमा से जुड़ी सहायता देना और उनके पसंदीदा भाषा में, मार्केट की अहम जानकारी देने वाले लेख उपलब्ध कराना.

Finova के एआई की मदद से, बीमा से जुड़ी मदद

इंश्योरेंस एक निजी प्रॉडक्ट है. इसमें खास नीतियों के आधार पर संवेदनशील जानकारी शामिल होती है. Policybazaar के ग्राहक अक्सर प्लान चुनने के तरीके या प्लान की सुविधाओं के बारे में जानकारी चाहते हैं. उनके पास कई भाषाएं बोलने वाला स्टाफ़ है, लेकिन Policybazaar को एक ऐसा समाधान चाहिए था जो सभी टाइम ज़ोन में और कामकाजी घंटों के बाद भी काम करता हो. इसलिए, Policybazaar ने Finova एआई बनाया है. यह एआई, ग्राहक की पसंदीदा भाषा में बीमा से जुड़ी सहायता उपलब्ध कराता है.

"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;

मार्केट इनसाइट के लिए लेख का अनुवाद

"हमारे मौजूदा React कोड में Translator API को इंटिग्रेट करना बेहद आसान था. हमने क्लाइंट-साइड के इस समाधान को इसलिए चुना है, ताकि हमारे ग्राहकों और एजेंट को तुरंत अनुवाद मिल सके. एपीआई ने 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, भारत का एक प्रमुख डिजिटल स्ट्रीमिंग प्लैटफ़ॉर्म है. यह कई भाषाओं में फ़िल्में, टीवी शो, खेल, और ओरिजनल कॉन्टेंट की एक विस्तृत रेंज उपलब्ध कराता है. सबटाइटल के अनुवाद को बेहतर बनाने के लिए, 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 और Language Detector API के इस्तेमाल के ये तरीके अलग-अलग हैं. हालांकि, इनके लिए कई सामान्य सबसे सही तरीके हैं:

• अनुवाद किए गए टेक्स्ट की क्वालिटी का आकलन करें, ताकि यह पक्का किया जा सके कि व्याकरण और संदर्भ को बनाए रखा गया है. अगर ज़रूरी हो, तो उपयोगकर्ताओं को अनुवाद के बारे में सुझाव/राय देने या शिकायत करने का विकल्प दें.
• स्पिनर, लोडर या प्रोग्रेस बार जैसा प्रोग्रेस यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराएं, ताकि उपयोगकर्ताओं को यह पता चल सके कि ऐप्लिकेशन काम कर रहा है या नहीं. उदाहरण के लिए, Policybazaar ने चैटबॉट के लिए टाइपिंग इंडिकेटर का इस्तेमाल किया, ताकि यह पता चल सके कि वह उपयोगकर्ता के इनपुट को प्रोसेस कर रहा है.

नतीजे और सुझाव

क्या इन एपीआई की मदद से, कुछ नया बनाया जा रहा है? इसे X पर@ChromiumDev या LinkedIn पर Chromium for Developers पर शेयर करें.

संसाधन

• Chrome पर पहले से मौजूद एपीआई का इस्तेमाल शुरू करना
• Language Detector API के बारे में ज़्यादा जानें
• Translator API के बारे में ज़्यादा जानें
• ब्लॉगर को बेहतर बनाने में मदद करना: CyberAgent ने कॉन्टेंट बनाने की प्रोसेस को बेहतर बनाने के लिए, पहले से मौजूद एआई को कैसे डिप्लॉय किया

Acknowledgements

इस लेख को लिखने और उसकी समीक्षा करने में मदद करने के लिए, Policybazaar के ऋषभ मेहरोत्रा और अमन सोनी, JioHotstar के भूवनेश्वर मोहन और अंकित मैनी, अलेक्सांद्रा क्लेपर, थॉमस स्टाइनर, और केनजी बहेक्स का धन्यवाद.