クライアントサイドでの機械学習の実行について

TL;DR

フロントエンドエンジニアである自分が、とあるきっかけで、クライアントサイドで機械学習を実行する際に留意すべきことを調べてみたものになります。

きっかけ

以下の記事においてクライアントサイドでの機械学習に興味を持ったため
なぜGoogle Meetの背景ぼかしが最強なのか（一般公開版）
（元記事：Background Features in Google Meet, Powered by Web ML）

記事の内容

• ブラウザなのにネイティブアプリと同程度の性能を実現しているのがすごい
• 体感で4倍ぐらい早い機械学習高速化について
• ライブストリーミングに特化した機械学習・画像処理のフレームワーク
  • MediaPipe
    • WebAssembly(wasm)でビルドできる（※WebAssemblyとはJavaScriptよりも高速で実行できる技術 参考：WebAssemblyとは？〜実際にC言語をブラウザで動かす〜【2019年6月版】）
    • 全てをwasmで完結しているため余計なオーバーヘッドがない
• 400kBと超軽量な機械学習モデル
  • MobileNetV3-small
    • 対象検出
• その他画像処理技術
  • Refinement（輪郭の処理）
  • 背景ぼかし処理（背景と対象を分離して、背景のみぼかす）

クライアントサイドで機械学習を高速で実行すにはどうすればいいのだろう？

• 機械学習モデル自体の軽量化
• 実行環境の高速化（TensorFlow.jsについて）

機械学習モデル自体の軽量化

ディープラーニングを軽量化する「モデル圧縮」３手法｜エンジニアコラムより

• 主な3手法
  • Pruning（枝刈り）
  • Quantize（量子化）
  • Distillation（蒸留）

それぞれの手法について

Pruning（枝刈り）

計算するニューロンと重みの削減

Quantize（量子化）

数値の桁数の削減

Distillation（蒸留）

大きいモデルの出力を活用して小さいモデルを学習

様々な研究

• ディープラーニングを軽量化「宝くじ仮説」｜エンジニアコラム
  

• GhostNet
  

実行環境の高速化（TensorFlow.jsについて）

• 実行するbackendの選択
  • CPU
  • WebGL
  • WebAssembly
  • WebGPU
  • React Native

（Fast client-side ML with TensorFlow.js, by Ann Yuan (Google)、Platform and environment、TensorFlow.jsの新たな目玉機能｜Kai Sasaki｜note）

WebAssemblyを使うべきタイミング

TensorFlow.js の WebAssemblyバックエンド の紹介｜npaka｜note ←おすすめ
（元記事：Introducing the WebAssembly backend for TensorFlow.js）

基本的にWebGLよりも遅い。なぜなら、WebGLはGPUによる計算が行われるため。一方でwasmは、CPUで計算を行う。ただし、wasmの並列計算機能であるSIMDを活用すると、3倍程度早くなる。また以下の場合には、wasmの方が有利になる。

1. モデルが小さい場合
計算処理をGPUに転送するオーバーヘッドよりも、計算量が小さい時
2. 幅広いデバイスをサポートしたい場合
GPUはデバイスごとに大きな性能差があるため
3. 数値誤差が重要な場合
GPUではデバイスによって16ビットの浮動小数点にしか対応していないため
以上の点から、WebGL一強というわけではない。

その他の参考
SIMD およびマルチスレッド処理で TensorFlow.js WebAssembly バックエンドを高速化する