Googleは最近、WebAssemblyによって実現され、XNNPack ML推論ライブラリによって高速化されたブラウザ用のMediaPipeグラフを発表した。以前にモバイル（Android、iOS）で示されたように、MediaPipeグラフを使用すると、開発者は機械学習（ML）パイプラインを構築して実行し、複雑なタスクを実行できる。
MediaPipeグラフは、MediaPipe Visualizerを使用してブラウザ環境で視覚化される。MediaPipe Visualizerは、開発者がさまざまな機械学習やその他の処理タスクを表すノードで構成されるグラフを作成できるようにする専用のWebアプリケーションである。次の図は、VisualizerでのMediaPipe顔検出の例の実行結果を示している。
出典: https://developers.googleblog.com/2020/01/mediapipe-on-web.html
グラフから明らかなように、顔検出アプリケーションは一連の変換を通じて入力フレーム（input_frames_gpu）を出力フレーム（output_frames_gpu）に変換する。例えば、入力フレームのイメージテンサーへの変換（TfLiteTensor）、顔検出用のTFLiteモデルによる後処理、出力ビデオへの注釈のオーバーレイである。
視覚化されたグラフは対面するテキストと一致する。そこには、ノードのコンテンツの説明と実現する予定の処理を含む。MediaPipe Visualizerは、テキストとグラフの状態を維持するために、エディター内で行われた変更にリアルタイムで反応する。以前のTFLiteモデルの構成は、たとえば次のとおりである。
# Converts the transformed input image on GPU into an image tensor stored as a
# TfLiteTensor.
node {
calculator: "TfLiteConverterCalculator"
input_stream: "IMAGE:transformed_input_video_cpu"
output_stream: "TENSORS:image_tensor"
}
Googleは、ブラウザで実行する4つのデモ（エッジ検出、顔検出、ヘアセグメンテーション、ハンドトラッキング）を作成した。
MediaPipeグラフのブラウザ対応バージョンは、Emscriptenを使用してC++ソースコードをWebAssemblyにコンパイルすることで実装される。そして、JavaScriptとC++の間で必要なすべての通信に必要なAPIを作成する。必要なデモアセット（MLモデルと補助テキスト/データファイル）は、実行時にロードされる個別のバイナリデータパッケージとしてパッケージ化されている。
パフォーマンスを最適化するために、MediaPipeのブラウザバージョンは、可能な限り画像操作にGPUを活用し、利用可能な最も軽い（しかし正確な）MLモデルに採用する。XNNPack ML推論ライブラリは追加として、TensorflowLite推論計算機（TfLiteInferenceCalculator）に接続して使用されるため、ほとんどのアプリケーションで推定2～3倍の速度向上が得られる。
Googleは、MediaPipeのブラウザバージョンを改善し、開発者がMediaPipeモデルファイルで使用されるテンプレートグラフとアセットをより細かく制御できるようにする予定である。開発者は、Google Developer Twitterアカウントをフォローするように招待されている。
MediaPipeは、モバイルデバイス、ワークステーション、サーバ用のクロスプラットフォームフレームワークであり、GPUアクセラレーションをサポートする。MediaPipeは、MITオープンソースライセンスの下で利用できる。貢献とフィードバックは大歓迎であり、GitHubプロジェクトを介して参加できる。