WebブラウザでMediaPipe
以下の記事を参考に書いてます。
1. WebブラウザでMediaPipe
「MediaPipe」は、クロスプラットフォームでマルチモーダルなMLパイプラインを構築するためのフレームワークです。以前に、モバイル（Android、iOS）およびGoogle CoralなどのエッジデバイスでMediaPipeグラフとしてMLパイプラインを構築および実行することを実証しました。この記事では、Webブラウザーで「MediaPipe」が利用できることを紹介します。「WebAssembly」によって実装し、「XNNPack ML Inference Library」によって高速化しています。このプレビュー機能をWebベースのVisualizerツールに統合することにより、グラフ設計をすばやく反復するための遊び場を提供します。すべてがブラウザで直接実行されるため、ビデオはユーザーのコンピューターから離れることはなく、各反復はライブWebカメラストリーム（およびすぐに任意のビデオ）ですぐにテストできます。
2. MediaPipe Visualizer
「MediaPipe Visualizer」はviz.mediapipe.devでホストされています。MediaPipeグラフを検査するには、グラフコードを「Editor」タブに貼り付けるか、そのグラフファイルをビジュアライザーにアップロードします。ユーザーは、マウスとスクロールホイールを使用して、グラフのグラフィカル表現をパンおよびズームできます。グラフは、エディタ内で行われた変更にもリアルタイムで反応します。
3. MediaPipe Visualizerのデモ
既存のMediaPipeグラフのサンプルからいくつかのVisualizerのデモを作成しました。これらは、Chromeブラウザで次のアドレスにアクセスすると、Visualizer内で表示できます。
・エッジ検出
・顔検出
・ヘアセグメンテーション
・ハンドトラッキング
※ 動画は情報源参照
これらの各デモは、エディターの上部にある小さな実行中の男性アイコンをクリックすることにより、ブラウザ内で実行できます（非デモワークスペースがロードされている場合はグレー表示されます）。
これにより、現在のグラフを実行する新しいタブが開きます（これにはWebカメラが必要です）。
4. 実装の詳細
移植性を最大化するために、Emscriptenを使用して、必要なすべてのC++コードをWebAssemblyに直接コンパイルします。WebAssemblyは、Webブラウザー専用に設計された低レベルアセンブリコードの特別な形式です。実行時に、Webブラウザは仮想マシンを作成します。仮想マシンでは、これらの命令を非常に迅速に実行でき、従来のJavaScriptコードよりもはるかに高速です。
また、JavaScriptとC++の間で必要なすべての通信のための単純なAPIを作成し、JavaScriptからMediaPipeグラフを直接変更および操作できるようにしました。Android開発に精通している読者にとって、これはAndroid NDKを使用したC++ / Javaブリッジのオーサリングと同様のプロセスと考えることができます。
最後に、必要なすべてのデモアセット（MLモデルと補助テキスト/データファイル）を個別のバイナリデータパッケージとしてパッケージ化し、実行時にロードします。また、グラフィックとレンダリングについては、MediaPipeが自動的にWebGLを直接利用できるようにして、ほとんどのOpenGLベースの計算機がWeb上で「機能する」ようにします。
5. パフォーマンス
WebAssemblyの実行は一般に純粋なJavaScriptよりもはるかに高速ですが、通常はネイティブC++よりもはるかに遅いため、ユーザーエクスペリエンスを向上させるためにいくつかの最適化を行いました。可能な場合は画像操作にGPUを使用し、すべてのMLモデルの可能な限り軽量なバージョンを使用することを選択します（速度のためにある程度の品質をあきらめます）。ただし、コンピューティングシェーダーはWebで広く利用できないため、TensorFlow Lite GPU機械学習の推論を簡単に利用することはできず、結果として生じるCPU推論は、しばしば大きなパフォーマンスボトルネックになります。そのため、これを軽減するために、「XNNPack ML Inference Library」を使用して「TfLiteInferenceCalculator」を自動的に拡張します。これにより、ほとんどのアプリケーションで2-3倍の高速化が実現します。
現在、WebベースのMediaPipeのサポートにはいくつかの重要な制限があります。
・上記のデモグラフのカリキュレータのみを使用できます。
・ユーザーは、テンプレートグラフのいずれかを編集する必要があります。 彼らは自分自身をゼロから提供することはできません。
・ユーザーはアセットを追加または変更できません。
・グラフのエグゼキューターはシングルスレッドでなければなりません。
・GPUでのTensorFlow Liteの推論はサポートされていません。
この記事が気に入ったらサポートをしてみませんか？