はじめに

みなさんは、Chrome が “ブラウザ内で動く組み込みAI” を標準搭載しはじめていることをご存じでしょうか？
2025年12月1日現在、Chrome では以下のような AI API が利用できます。

Translator API (Chrome 138以上）
- AIが入力テキストを翻訳してくれるAPI
Language Detector API (Chrome 138以上)
- AIが入力テキストの言語を特定してくれるAPI
Summarizer API (Chrome 138以上)
- AIが入力テキストをようやくしてくれるAPI
Writer API（Chrome 137~148でトライアル中）
- 指定されたライティングタスクに準拠した新しいコンテンツを作成してくれるAPI
Rewriter API（origin trial）
- テキストを修正＆再構成してくれるAPI
Proofreader API（origin trial）
- 文法、スペル、句読点の誤りを見つけて修正するしてくれるAPI
Prompt API（origin trial）
- ブラウザで Gemini Nano に自然言語リクエストを送信できるAPI

ローカルで AI を動かせる環境が、いよいよ Web 標準として整ってきました。
今回はその中でも、翻訳を行う「Translator API」 を実際に触ってみたので、その使い方や挙動を紹介します。

Translator API

Translator API は、ブラウザの内部 AIモデルを使用して、指定されたテキスト本文を翻訳してくれる機能です。
Translator API を使用すると、テキストを指定した言語に翻訳してくれます。

翻訳できる言語は、English・French・Japanese・Portuguese・spanish です。

// Translatorインスタンスの生成
const translator = await Translator.create({
  sourceLanguage: 'ja', // 入力テキストの言語
  targetLanguage: 'en', // 翻訳先の言語
});

const TranslatedText = await translator.translate('翻訳元の文章');

Translator APIを使用するには、Translator.create(options) を使って、Translatorインスタンスを作成します。

optionには以下の項目を指定することができます。

sourceLanguage：翻訳元のテキストの言語
targetLanguage：翻訳されたテキストの言語

指定できる言語は、以下の言語になります。

English → 'en'
French → 'fr'
Japanese → 'ja'
Portuguese → 'pt'
spanish → 'es'

また、以下のようにすることで、モデルダウンロードの進捗状況を取得できるようになります。

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

Translator APIを使えるようにする

Translator API を使うには、以下の条件を満たしている必要があります。

対応OS
- Windows 10/11
- macOS 13以降（Ventura+）
- Linux
- ChromeOS（プラットフォームバージョン16389.0.0以降の【83†Chromebook Plus】デバイス）
- ※Android版ChromeやiOS版Chrome、Chromebook Plus以外のChromeOS端末では現在サポートされていません
ストレージ空き容量
- Chromeプロファイルを含むドライブに最低22GBの空き領域が必要です
ハードウェア要件：組み込みモデルはGPUまたはCPUで実行できます
- GPUの場合: 4GB以上のVRAM
- CPUの場合: 16GB以上のRAMと4個以上のCPUコア
ネットワーク
- 無制限のデータ通信または従量制でない接続

① フラグを有効にする

chrome://flags/#optimization-guide-on-device-modelにアクセスする
- Enables optimization guide on device を Enabled にする
chrome://flags/#prompt-api-for-gemini-nano にアクセスする
- Summarization API for Gemini Nano を Enabled にする
- 多言語対応したい場合は、Enabled Multilingualにしてください
chrome://flags/#translation-api にアクセスする
- Experimental translation API を Enabled にする
その後、Chromeを再起動する

② AIモデルの利用可否を確認

DevToolを開き、以下のコードをコンソールに貼り付け、実行してください。

await LanguageModel.availability();

上記を実行すると、以下のようにAIモデルの利用状況が表示されます。

'unavailable': 環境要件未満
'Mdownloadable': ダウンロード可能（未取得）
'downloading': ダウンロード中
'available': ダウンロード済み、利用可能

③ AIモデルをダウンロードする

②のステップで、'Mdownloadable'が表示されていたら、AIモデルをダウンロードしましょう。

ダウンロードするには、開発環境にボタンを用意し、以下のコードを実行できるようにしてください。

const ClickHandler = async () => {
  if (navigator.userActivation.isActive) {
      const session = await LanguageModel.create();
  }
}

④ AIモデルの利用可否を確認

DevToolを開き、以下のコードをコンソールに貼り付け、実行してください。

await LanguageModel.availability();

上記を実行すると、以下のようにAIモデルの利用状況が表示されます。

'unavailable': 環境要件未満
'Mdownloadable': ダウンロード可能（未取得）
- → ③ができているか確認してください
'downloading': ダウンロード中
- → しばらくお待ちください
'available': ダウンロード済み
- → 利用可能です

'available' が表示されていれば、AIモデルがダウンロードされ、利用可能な状態です。

Translator APIを実装する

試しに、こんな感じに書いてみました。

const initializeTranslator = async () => {
  
  const options = {
    sourceLanguage: 'ja',
    targetLanguage: 'en',
    monitor(m: any) {
      m.addEventListener('downloadprogress', (e: any) => {
        console.log(`Downloaded ${e.loaded * 100}%`);
      });
    },
  };
  
  const translateText = `久しぶりにゆっくり話したいんだけど、今週どこか時間ある？`
  
  if ('Translator' in self) {
    const availability = await Translator.availability({
      sourceLanguage: 'ja',
      targetLanguage: 'en',
    });
    if (availability === 'unavailable') { return; }
    
    const translator = await Translator.create(options);
    const result = await translator.translate(translateText);
    console.log(result)
    
    //↓ 出力された文章
    // It's been a long time since I've wanted to talk slowly, but is there some time this week?
  }
};

まとめ

今回は Chrome の組み込み AI 機能のひとつである Translator API を実際に触ってみました。

ぜひ、この記事を参考に Translator API をさわってみてください

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。