Policybazaar 和 JioHotstar 如何使用 Translator API 和 Language Detector API 打造多语言体验

Swetha Gopalakrishnan
Swetha Gopalakrishnan
Saurabh Rajpal
Saurabh Rajpal

发布时间:2025 年 5 月 8 日

借助 Translator APILanguage Detector API,让全球受众群体都能访问您的内容。借助 Language Detector API,您可以确定输入内容所用的语言;借助 Translator API,您可以将检测到的语言翻译成其他语言。这两个 API 均在客户端运行,并内置了 Chrome 中的 AI 模型,这意味着它们快速、安全且免费,因为没有服务器费用。

API 解说 Web 扩展程序 Chrome 状态 意向
Translator API MDN Chrome 138 Beta 版 Chrome 138 Beta 版 视图 意图进行实验
Language Detector API MDN Chrome 138 Beta 版 Chrome 138 Beta 版 视图 发货意图

了解两家大型国际企业 Policybazaar 和 JioHotstar 如何使用这些内置 API 并从中受益。

Policybazaar 提供多语言客户服务

Policybazaar 是印度最大的保险平台,拥有超过 9700 万注册客户。印度语言多元化程度极高,全国各地都使用多种语言和方言。

为了支持客户的多语言需求,Policybazaar 通过以下两种方式实现了 Translator API 和 Language Detector API:随时提供保险咨询服务,并以客户的首选语言提供包含市场洞见的文章。

借助 Finova AI 提供保险援助

保险是一种本质上非常个人化的产品,敏感信息是特定保险政策的基础。Policybazaar 的客户经常会寻求有关如何选择方案或其方案支持的内容的指导。虽然 Policybazaar 的员工会说多种语言,但他们需要一个能够跨时区和非工作时间提供支持的解决方案。因此,Policybazaar 构建了 Finova AI,以客户的首选语言提供量身定制的保险咨询服务。

用户可以用自己的母语与 Finova 聊天机器人聊天。

“Chrome 的语言检测器和 Translator API 满足了客户的多样化语言需求,帮助我们更顺畅地提供保险咨询服务。因此,用户无需等待太久,即可用自己偏好的印度语言进行交流。”

-Rishabh Mehrotra,Policybazaar 寿险业务设计部门负责人

该团队选择了客户端 AI,即在浏览器或用户设备上进行推理。与服务器托管型 AI 或无服务器 AI 相比,客户端 AI 具有最短的延迟时间和更低的费用。鉴于实时对话中消息的速度和数量非常快,基于服务器的解决方案会非常耗时且成本高昂。

Chrome 的内置 AI 实现提供了内置在浏览器中的模型,因此推理是在设备端执行的。这是一个可满足主要要求的极具吸引力的解决方案。

// 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 代码中。我们选择了此客户端解决方案,以确保为客户和客服人员提供快速翻译。该 API 能够在两秒内翻译 1,000 个字符的文章。”

- Policybazaar 技术主管 Aman Soni

Policybazaar 的“人寿保险”业务领域提供了丰富的文章,让客户和客户服务人员及时了解市场行情。

由于印地语是其用户广泛使用的语言,因此他们试用了 Translator API,以便按需将文章从英语翻译成印地语。

Policybazaar 可快速无缝地在英语和印地语之间进行翻译。

为了在其网站上添加翻译,他们使用了以下脚本:

// 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 提供的模型和 API,客户可以近乎即时地翻译文章。

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 为聊天机器人使用了打字指示器,以显示它正在处理用户的输入。

结论和建议

您是否正在使用这些 API 构建新内容?您可以通过 X 上的@ChromiumDevLinkedIn 上的“Chrome 开发者版”与我们分享您的反馈。

资源

致谢

感谢 Policybazaar 的 Rishabh MehrotraAman Soni、JioHotstar 的 Bhuvaneswaran MohanAnkeet MainiAlexandra KlepperThomas SteinerKenji Baheux 帮助撰写和审核本文。