ウェブの設定ガイド

このページでは、MediaPipe を使用する開発環境の設定方法について説明します。 JavaScript ウェブ アプリケーションでの ToDo リスト。

サポートされているプラットフォームとバージョン

MediaPipe Tasks を使用してウェブ アプリケーションを作成するには、開発環境で 次のものが必要です。

  • Chrome または Safari ブラウザ
  • Node.js と NPM を使用するウェブ アプリケーション。別の方法として、 コンテンツ配信ネットワーク経由で MediaPipe Tasks にアクセスするためのスクリプトタグ （CDN）。

MediaPipe Tasks の依存関係

MediaPipe Tasks には、ビジョン、テキスト、オーディオの 3 つのビルド済みライブラリが用意されています。 アプリで使用される MediaPipe タスクに応じて、Vision、text、または 開発プロジェクトにコピーします。

<ph type="x-smartling-placeholder">

生成 AI のタスク

MediaPipe Tasks の生成 AI モジュールには、画像または動画を処理する 説明します。MediaPipe Tasks の生成 AI ライブラリをインポートするには、 依存関係を追加していきます。

LLM 推論 API

MediaPipe LLM 推論タスクは tasks-genai ライブラリに含まれています。

npm install @mediapipe/tasks-genai

サーバーにデプロイする場合は、コンテンツ配信ネットワーク（CDN）を使用できます サービス（jsDelivr など）を使用して、コードを 追加します。

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

視覚に関するタスク

MediaPipe Tasks ビジョン モジュールには、画像や動画を処理するタスクが含まれます できます。MediaPipe Tasks ビジョン ライブラリをインポートするには、以下をインポートします。 開発プロジェクトに組み込めます。

npm install @mediapipe/tasks-vision

サーバーにデプロイする場合は、コンテンツ配信ネットワーク（CDN）を使用できます サービス（jsDelivr など）を使用して、コードを 追加します。

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

テキスト タスク

MediaPipe Tasks テキスト モジュールには、文字列入力を処理するタスクが含まれています。宛先 MediaPipe Tasks テキスト ライブラリをインポートし、次の依存関係を 組み込むことが重要です

npm install @mediapipe/tasks-text

サーバーにデプロイする場合は、コンテンツ配信ネットワーク（CDN）を使用できます サービス（jsDelivr など）を使用して、コードを 追加します。

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

音声タスク

MediaPipe Tasks オーディオ モジュールには、音声入力を処理するタスクが含まれています。宛先 MediaPipe Tasks オーディオ ライブラリをインポートし、次の依存関係を 開発プロジェクトに組み込めます

npm install @mediapipe/tasks-audio

サーバーにデプロイする場合は、コンテンツ配信ネットワーク（CDN）を使用できます サービス（jsDelivr など）を使用して、コードを 追加します。

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

BaseOptions 構成

BaseOptions を使用すると、MediaPipe Task API の一般的な構成が可能になります。

オプション名 説明 有効な値
modelAssetBuffer Uint8Array 型配列としてのモデルアセット ファイルの内容。 Uint8Array
modelAssetPath モデルアセットを開いてメモリにマッピングするパス。 TrustedResourceUrl
Delegate MediaPipe パイプラインを実行するデバイス デリゲートによるハードウェア アクセラレーションを有効にします。デフォルト値: CPU。 [CPU,
GPU]

トラブルシューティング

MediaPipe に関連する技術的な質問については、こちらのディスカッション group または Stack オーバーフロー: できます。バグの報告や機能リクエストを行うには、 GitHub