ウェブの言語検出ガイド

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

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

サンプルコード

Language Detector のサンプルコードでは、このタスクの完全な実装が JavaScript で提供されています。このコードは、このタスクをテストし、独自の言語検出機能の構築を開始するのに役立ちます。ウェブブラウザだけでサンプルを表示、実行、 および編集できます。

設定

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

JavaScript パッケージ

Language Detector コードは、 @mediapipe/tasks-text パッケージから入手できます。これらのライブラリは、 プラットフォーム 設定ガイドに記載されているリンクからダウンロードできます。

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

npm install @mediapipe/tasks-text

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

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

モデル

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

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

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

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

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

タスクを作成する

Language Detector の 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 返される上位スコアの言語予測の最大数(省略可)を設定します。この値がゼロ未満の場合、使用可能なすべての結果が返されます。 任意の正の数 -1
scoreThreshold モデル メタデータで指定された予測スコアのしきい値(存在する場合)をオーバーライドするしきい値を設定します。この値より小さい結果は拒否されます。 任意の浮動小数点数 未設定
categoryAllowlist 許可される言語コードのリスト(省略可)を設定します。空でない場合、言語コードがこのセットに含まれていない言語予測は除外されます。このオプションは categoryDenylist と一緒に使用できません。両方を使用するとエラーが発生します。 任意の文字列 未設定
categoryDenylist 許可されない言語コードのリスト(省略可)を設定します。空でない場合、言語コードがこのセットに含まれている言語予測は除外されます。このオプションは categoryAllowlist と一緒に使用できません。両方を使用するとエラーが発生します。 任意の文字列 未設定

データの準備

Language Detector はテキスト(string)データで動作します。このタスクは、トークン化やテンソルの前処理など、データ入力の前処理を行います。 すべての前処理は detect 関数内で行われます。入力テキストの追加の前処理は必要ありません。

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

タスクを実行する

Language Detector は detect 関数を使用して推論をトリガーします。言語検出の場合、これは入力テキストに使用できる言語を返すことを意味します。

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

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

結果を処理して表示する

Language Detector タスクは、言語予測のリストとそれらの予測の確率で構成される 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." でモデルを実行して取得したものです。

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