このページでは、JavaScript ウェブ アプリケーションで MediaPipe タスクを使用するための開発環境を設定する方法について説明します。
サポートされているプラットフォームとバージョン
MediaPipe Tasks でウェブ アプリケーションを作成するには、開発環境に以下が必要です。
- Chrome または Safari ブラウザ
- Node.js と NPM を使用するウェブ アプリケーション。また、script タグを使用して、コンテンツ配信ネットワーク（CDN）を介して MediaPipe Tasks にアクセスすることもできます。
MediaPipe タスクの依存関係
MediaPipe Tasks には、ビジョン、テキスト、オーディオ用の 3 つのビルド済みライブラリが用意されています。アプリで使用する MediaPipe タスクに応じて、ビジョン、テキスト、またはオーディオ ライブラリを開発プロジェクトにインポートします。
生成 AI のタスク
MediaPipe Tasks の生成 AI モジュールには、画像またはテキストの生成を処理するタスクが含まれています。MediaPipe Tasks の生成 AI ライブラリをインポートするには、次の依存関係を開発プロジェクトにインポートします。
LLM 推論 API
MediaPipe LLM 推論タスクは、tasks-genai ライブラリに含まれています。
npm install @mediapipe/tasks-genai
サーバーにデプロイする場合は、jsDelivr などのコンテンツ配信ネットワーク（CDN）サービスを使用して、HTML ページに直接コードを追加できます。
<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
サーバーにデプロイする場合は、jsDelivr などのコンテンツ配信ネットワーク（CDN）サービスを使用して、HTML ページに直接コードを追加できます。
<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
サーバーにデプロイする場合は、jsDelivr などのコンテンツ配信ネットワーク（CDN）サービスを使用して、HTML ページに直接コードを追加できます。
<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
サーバーにデプロイする場合は、jsDelivr などのコンテンツ配信ネットワーク（CDN）サービスを使用して、HTML ページに直接コードを追加できます。
<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 に関する技術的な質問については、ディスカッション グループまたは Stack Overflow にアクセスして、コミュニティからサポートを受けてください。バグの報告や機能リクエストを行うには、GitHub で問題を報告してください。