Language Detector API

ブラウザ内蔵の言語検出機能


概要
- `Language Detector API` を使うことで、ブラウザ内蔵の言語検出機能を使うことが可能 - ChromeのビルトインGemini nanoを使って言語検出 - 2025/07/02現在、PC版のChrome 138 以降でのみ利用可能 - 初回利用時に数百MB程度のモデルが端末にダウンロードされる - 検出した言語候補と信頼度（0〜1）が多い順に表示

デモ

結果

    ポイント
    | ステップ | 役割 | 主な API | |----------|------|----------| | ① 機能検出 | `LanguageDetector` が存在するか確認 | `if ('LanguageDetector' in self)` | | ② 利用可否判定 | モデルの有無・DL 必要性を取得 | `LanguageDetector.availability()` | | ③ セッション生成 | 必要ならモデルを DL し、進捗を監視 | `LanguageDetector.create({ monitor })` | | ④ 言語判定 | テキストを渡して候補を取得 | `detector.detect(text)` |

    コード

    JavaScript

    (async () => {
  // 1) 機能検出
  if (!('LanguageDetector' in self)) {
    document.getElementById('unsupported').hidden = false;
    return;
  }

  // 2) 利用可否の取得
  const availability = await LanguageDetector.availability(); // 4 つの状態を返す:contentReference[oaicite:1]{index=1}
  if (availability === 'unavailable') {
    alert('Language Detector は利用できません。');
    return;
  }

  // 3) セッション生成（必要ならモデル DL の進捗をモニタ）
  const detector = await LanguageDetector.create({
    monitor(monitor) {
      monitor.addEventListener('downloadprogress', e => {
        console.log(`Model download: ${(e.loaded * 100).toFixed(1)}%`);
      });
    }
  });
  await detector.ready;      // DL 中はここで待機:contentReference[oaicite:2]{index=2}

  // 4) Detect ボタン押下時の処理
  document.getElementById('detectBtn').addEventListener('click', async () => {
    const text = document.getElementById('input').value.trim();
    if (!text) return;

    // detect() は [{detectedLanguage, confidence}, …] を返す:contentReference[oaicite:3]{index=3}
    const candidates = await detector.detect(text);
    const list = document.getElementById('results');
    list.innerHTML = ''; // クリア

    // 上位候補を表示（閾値 0.2 未満は除外する例）
    candidates
      .filter(c => c.confidence >= 0.2)
      .forEach(({ detectedLanguage, confidence }) => {
        const li = document.createElement('li');
        li.innerHTML = `${detectedLanguage} 
                        (${confidence.toFixed(3)})`;
        list.appendChild(li);
      });

    if (!list.children.length) {
      list.innerHTML = '
  • 十分な信頼度で判定できませんでした。
    • ';
    }
  });
})();

    参照