ウェブの言語検出ガイド

MediaPipe 言語検出タスクを使用すると、テキストの言語を識別できます。ここでは、ウェブアプリと JavaScript アプリで Language Detector を使用する方法について説明します。この手順で説明されているコードサンプルは、GitHub で入手できます。

このタスクの実際の動作は、デモで確認できます。このタスクの機能、モデル、構成オプションの詳細については、概要をご覧ください。

サンプルコード

言語検出ツールのサンプルコードは、参考用にこのタスクの完全な実装を JavaScript で示しています。このコードは、このタスクをテストし、独自の言語検出機能の構築を始めるのに役立ちます。ウェブブラウザを使用して、Language Detector のサンプルコードを表示、実行、編集できます。

セットアップ

このセクションでは、言語検出ツールを使用するように開発環境とコード プロジェクトを設定する際の主な手順について説明します。プラットフォームのバージョン要件など、MediaPipe タスクを使用するための開発環境の設定に関する一般的な情報については、ウェブ用の設定ガイドをご覧ください。

JavaScript パッケージ

言語検出ツールは、@mediapipe/tasks-text パッケージから入手できます。これらのライブラリは、プラットフォームの設定ガイドにあるリンクから検索してダウンロードできます。

次のコマンドを使用して、ローカル ステージングに必要な次のコードを含む必要なパッケージをインストールできます。

npm install @mediapipe/tasks-text

サーバーにデプロイする場合は、次のように、jsDelivr などのコンテンツ配信ネットワーク(CDN)サービスを使用してコードを直接 HTML ページに追加できます。

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/index.js"
    crossorigin="anonymous"></script>
</head>

モデル

MediaPipe 言語検出タスクには、このタスクと互換性のあるトレーニング済みモデルが必要です。Language Detector で利用可能なトレーニング済みモデルの詳細については、タスクの概要のモデル セクションをご覧ください。

モデルを選択してダウンロードし、プロジェクト ディレクトリに保存します。

<dev-project-root>/app/shared/models

次のように、baseOptions オブジェクトの modelAssetPath パラメータを使用してモデルのパスを指定します。

baseOptions: {
        modelAssetPath: `/app/shared/models/language_detector.tflite`
      }

タスクを作成する

言語検出ツールの LanguageDetector.createFrom...() 関数のいずれかを使用して、推論を実行するタスクを準備します。createFromModelPath() 関数は、トレーニング済みモデルファイルへの相対パスまたは絶対パスを指定して使用できます。次のコードサンプルは createFromOptions() 関数の使い方を示しています。タスクの構成の詳細については、構成オプションをご覧ください。

次のコードは、このタスクをビルドして構成する方法を示しています。

async function createDetector() {
  const textFiles = await FilesetResolver.forTextTasks(
      "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text@latest/wasm/");
  languageDetector = await languageDetector.createFromOptions(
    textFiles,
    {
      baseOptions: {
        modelAssetPath: `https://storage.googleapis.com/mediapipe-models/language_detector/language_detector/float32/1/language_detector.tflite`
      },
    }
  );
}
createDetector();

構成オプション

このタスクには、ウェブ アプリケーションと JavaScript アプリケーション用の次の構成オプションがあります。

オプション名 説明 値の範囲 デフォルト値
maxResults スコアが上位の言語予測を返す場合の最大数を設定します(省略可)。この値が 0 未満の場合、利用可能なすべての結果が返されます。 任意の正の数 -1
scoreThreshold モデル メタデータ(存在する場合)で指定された値をオーバーライドする予測スコアのしきい値を設定します。この値を下回る結果は拒否されます。 任意の浮動小数点数 未設定
categoryAllowlist 使用できる言語コードのオプション リストを設定します。空でない場合、言語コードがこのセットにない言語予測は除外されます。このオプションは categoryDenylist と相互に排他的であり、両方を使用するとエラーになります。 任意の文字列 未設定
categoryDenylist 使用できない言語コードのオプション リストを設定します。空でない場合、言語コードがこのセット内にある言語予測は除外されます。このオプションは categoryAllowlist と相互に排他的であり、両方を使用するとエラーになります。 任意の文字列 未設定

データの準備

言語検出機能はテキスト(string)データを扱います。このタスクは、トークン化やテンソルの前処理など、データ入力の前処理を処理します。すべての前処理は detect 関数内で処理されます。入力テキストを事前に追加で前処理する必要はありません。

const inputText = "The input text for the detector.";

タスクを実行する

言語検出機能は、detect 関数を使用して推論をトリガーします。言語検出の場合は、入力テキストに該当する言語が返されます。

次のコードは、タスクモデルで処理を実行する方法を示しています。

// Wait to run the function until inner text is set
const detectionResult = languageDetector.detect(inputText);

結果を処理して表示する

言語検出タスクは、言語予測のリストと予測の確率で構成される LanguageDetectorResult を出力します。このタスクからの出力データの例を次に示します。

LanguageDetectorResult:
  LanguagePrediction #0:
    language_code: "fr"
    probability: 0.999781

この結果は、入力テキスト("Il y a beaucoup de bouches qui parlent et fort peu de têtes qui pensent.")に対してモデルを実行することで取得されています。

このタスクの結果を処理して可視化するために必要なコードの例については、ウェブ サンプルアプリをご覧ください。