ウェブ上で MediaPipe を用いて機械学習を行う際の 7 つの注意点

10月 05, 2023

Jen Person Developer Relations Engineer

機械学習（ML）の力をウェブアプリに活用したいと考えているウェブデベロッパーの方は、MediaPipe ソリューションをぜひお試しください！MediaPipe ソリューションを使用すると、わずか数行のコードで一般的な ML の課題を解決するためのカスタムタスクをデプロイできます。ドキュメントのガイドを見て、CodePen のウェブデモを試してみれば、とても簡単に始められることがわかります。MediaPipe ソリューションはウェブ上の ML の多くの複雑な問題に対処しますが、JavaScript の通常のベストプラクティスの範囲に収まらない留意すべき点がいくつかあります。それを 7 項目の行うべきことと行うべきでないことのリストとしてまとめました。役に立つヒントが得られますので、ぜひお読みください！

❌ モデルをアプリに組み込まないでください

ウェブデベロッパーは、最高のユーザーエクスペリエンスを確保するために、習慣としてアプリをできるだけ軽量にします。大きなデータやファイルを読み込む場合、ユーザーが長いダウンロードを待つことなく、にコンテンツを速やかに閲覧したり操作したりできるように、よく考えられた方法でダウンロードを行いたいと考えるでしょう。量子化のような戦略により、ML モデルは小さくなり、エッジデバイスで使えるようになりましたが、それでも十分に大きいので、ウェブアプリに組み込むことは避ける必要があります。そこで、お好みのクラウドストレージソリューションにモデルを保存します。その後、タスクを初期化すると、モデルと WebAssembly バイナリがダウンロードされ、初期化されます。最初のページを読み込んだ後、ローカルストレージまたは IndexedDB を使用してモデルとバイナリをキャッシュして、今後のページ読み込みをさらに高速で実行できるようにします。これに関する例は、このタッチレス ATM サンプルアプリ（GitHub 上）で確認できます。

✅ タスクを早めに初期化してください

モデルサイズ、接続速度、デバイスの種類によっては、タスクの初期化に時間がかかる場合があります。そのため、ユーザーとやり取りする前にアプリを初期化することをおすすめします。CodePen のほとんどのコードサンプルでは、初期化はページの読み込み時に行われます。これらのサンプルは、コードを理解して独自のユースケースに適用できるようにするため、できるだけシンプルに作成されていることに注意してください。ページの読み込み時にモデルを初期化することが妥当でない場合もあります。タスクを起動するのに適した場所を見つけることに専念して、ユーザーからは処理が見えないようにしましょう。

初期化後、プレースホルダ画像をモデルに渡して、タスクをウォームアップする必要があります。以下の例は、Pose Landmarker タスクを介して 1x1 ピクセルのキャンバスを実行するための関数を示しています。

function dummyDetection(poseLandmarker: PoseLandmarker) {
  const width = 1;
  const height = 1;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
 
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillRect(0, 0, width, height);
  poseLandmarker.detect(canvas);
}

✅ リソースをクリーンアップしてください

JavaScript の自動ガベージコレクションは、私のお気に入りです。実際、メモリ管理については、最後に意識したのがいつだったか覚えていません。MediaPipe タスクを最大限に活用するために必要ですので、メモリに関する知識を少し頭に入れておくといいでしょう。ウェブ用の MediaPipe ソリューションは、WebAssembly（WASM）を使用してブラウザ内で C++ コードを実行します。C++ を習得している必要はありませんが、C++ を使用するとメモリを解放できることを知っておくと便利です。未使用のメモリを解放しないと、ウェブページは時間とともにメモリを使用する量がどんどん増えていきます。その結果、パフォーマンスが悪くなり、場合によっては、クラッシュする可能性があります。

ソリューションが終了したら、.close () メソッドを使用してリソースを解放します。

たとえば、次のコードを使用してジェスチャ認識エンジンを作成できます。

const createGestureRecognizer = async () => {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recognizer/float16/1/gesture_recognizer.task",
      delegate: "GPU"
    },
  });
};
createGestureRecognizer();

ジェスチャの認識が完了したら、以下の close () メソッドを使ってジェスチャ認識エンジンを破棄します。

gestureRecognizer.close ();

各タスクには close メソッドがありますので、必要に応じて必ず使用してください。一部のタスクでは、返された結果をクローズするための close () メソッドがあります。詳細については、API ドキュメントを参照してください。

✅ MediaPipe Studio でタスクを試してください

ソリューションを確定またはカスタマイズする場合は、独自のコードを作成する前に MediaPipe Studio で試してみることをおすすめします。MediaPipe Studio は、アプリケーションのオンデバイス ML モデルとパイプラインを評価およびカスタマイズするためのウェブベースのアプリケーションです。このアプリを使用すると、独自のデータとカスタマイズされた ML モデルを使用して、ブラウザで MediaPipe ソリューションを迅速にテストできます。各ソリューションのデモでは、結果の総数や、結果を報告する最小信頼性しきい値などのモデル設定を試すこともできます。これは、ソリューションをカスタマイズする際に特に便利であり、テスト用のウェブページを作成せずに、モデルの動作を確認できます。

✅ さまざまなデバイスでテストしてください

ウェブアプリが必ず期待どおりに動作するようにするために、さまざまなデバイスやブラウザでテストすることはどのような場合でも重要です。また、念のために付け加えますが、さまざまなプラットフォームで早めに、そして頻繁にテストしてください。MediaPipe Studio を使用してデバイスをテストすることもできるため、ソリューションがユーザーのデバイスで動作するかどうかがすぐにわかります。

❌ 最も大きなモデルをデフォルトで選択しないでください

各タスクには、1 つ以上の推奨モデルが一覧表示されます。たとえば、Object Detection タスクでは 3 つの異なるモデルが一覧表示されますが、それぞれに速度、サイズ、精度に基づいた利点と欠点があります。最も重要なことは、精度が非常に高いモデルを選択することだと考えたくなるかもしれませんが、その場合、スピードが犠牲にされ、モデルのサイズが大きくなります。ユーザーは用途に応じて、正確さよりも、スピードを望む可能性があります。さまざまなモデルを比較するなら、MediaPipe Studio を使うのがベストです。MediaPipe Studio の宣伝のように聞こえるかもしれませんが、これは本当に便利なアプリケーションです！

✅ ぜひご連絡ください！

ウェブ上の機械学習に関して、他にも行うべきことや行うべきではないことがあるとお考えの場合や、どのように始めたらいいかわからない場合、あるいは、シェアしたい魅力的なプロジェクトがある場合は、LinkedIn からご連絡ください。ご提案やご質問について、ぜひお聞きかせください！