✏️

Translator API による多言語対応

2024/11/14に公開2件

Chrome

API

tech

はじめに

プロダクト開発において、多言語対応の機会は少なくないのではないでしょうか。
自前で多言語対応の仕組みを作ったり、外部のサービスを用いることかと思います。
そのような状況の中 Chrome 131 から Origin trial で Translator API というものが出ました。
この記事では、Translator API をさわってみた内容を書かせていただきます。

Translator API

Chrome 131 から Origin trial で使用できる API です。
ローカル AI モデルを使用してブラウザでテキストを翻訳できます。

Translator API がサポートされているか確認

declare const self: any

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

言語ペアのサポートを確認

canTranslate() には、次の 2 つのフィールドを持つ options パラメータが必要です

sourceLanguage: テキストの現在の言語
targetLanguage: テキストを翻訳する言語

各値には BCP 47 言語のショートコードを文字列として使用できるようですが、オリジントライアルでは、サポートされている言語は以下のように制限されています。

英語（en）
標準中国語（zh、簡体）または台湾語（zh-Hant、繁体）
日本語（ja）
ポルトガル語（pt）
ロシア語（ru）
スペイン語（es）
トルコ語（tr）
ヒンディー語（hi）
ベトナム語（vi）
ベンガル語（bn）

const translate = await translation.canTranslate({
  sourceLanguage: 'en',
  targetLanguage: 'ja',
})

また戻り値は以下です

no: このブラウザでは、リクエストされた翻訳をすることできません
readily: ブラウザはリクエストに応じて翻訳できます
after-download: ブラウザは翻訳できますが、関連するモデルまたは言語パックをダウンロードした後にのみ実行できます

よって、上記の例では translate は、readily になります。例えは、サポートされていないフランス語（fr）を targetLanguage に設定すると translate は no になります。

翻訳する

翻訳するにはcreateTranslator()でトランスレータを作成して、translate() を実行します

const translator = await self.translation.createTranslator({
  sourceLanguage: 'ja',
  targetLanguage: 'en',
})

await translator.translate('明日の天気は雨です。') // Tomorrow's weather is raining.

デモ

Vite + React で架空の EC サイトを作成し、Translator API を使い日本語を英語に翻訳しました。

簡略化した例を記します。画面右上の「translate」というボタンをクリックしたときに Translator API を実行して翻訳する仕様です。

トークンを設定する

オリジントライアルに登録して、取得したトークンを設定します。（詳しくは以下を参照ください）

.env.development.local

VITE_TRANSLATOR_API_TOKEN="abc..."

main.tsx

const otMeta = document.createElement('meta')
otMeta.httpEquiv = 'origin-trial'
otMeta.content = import.meta.env.VITE_TRANSLATOR_API_TOKEN
document.head.append(otMeta)

ボタンクリックで Translator API を実行

App.tsx

import { useState } from 'react'

export default function App() {
  const [callToAction, setCallToAction] = useState('カートに追加')

  const translate = async () => {
    const translator = await self.translation.createTranslator({
      sourceLanguage: 'ja',
      targetLanguage: 'en'
    })
    const translatedCallToAction = await translator.translate(callToAction)
    setCallToAction(translatedCallToAction)
  }

  return (
    <div>
      <header className="bg-white">
        <nav>
          <button
            type="button"
            onClick={translate}
          >
            translate
          </button>
        </nav>
      </header>
      <button type="submit">{callToAction}</button>
    </div>
  )
}