Google I/O 2021 フロントエンドまとめ（6/6）〜 機械学習@フロントエンド〜

# Google I/O 2021 フロントエンドまとめ（6/6）〜 機械学習@フロントエンド〜

この記事は、[Google I/O 2021](https://www.google.com/io)で発表されたフロントエンド関連情報の中で個人的に気になったものをまとめたもので、
全6記事中6本目。

## 機械学習@フロントエンド の話
[TensorFlow.js を使用した次世代ウェブアプリの機械学習 @Google I/O 2021](https://events.google.com/io/session/3823ec97-499a-4af3-9e76-a1a538c5adb4?utm_source=google-io21&utm_medium=referral&utm_campaign=io21-resources&lng=ja)

### `TensorFlow.js`とはなんぞや。というお話
`TensorFlow.js`は、JavaScriptで機械学習を行うためのライブラリ。（そしてかつては`deeplearn.js`という名前だった）
`TensorFlow.js`はクライアントのWebブラウザ上で機械学習の処理を実行でき、これにより低い遅延の推論（「Lower latency」）と高い機密性（「High privacy」）を実現しユーザ（=`TensorFlow.js`を使う開発者）のサービスコストを削減する（「Lower serving cost」）。

`TensorFlow.js`がリーチできるプラットフォームとして、以下がある。

- クライアント(Web): Chrome, Safari, FirefoxなどのWebブラウザ
- サーバ: Node.js
- モバイル: ReactNative, PWA
- デスクトップ: Electron
- IoTデバイス: Raspberry Pie (via Node.js)

また、`TensorFlow.js`が出来ることとして、

- 作成・訓練済みのモデルの実行
- 転移学習による再トレーニング
- ゼロからの独自モデルの作成

が挙げられる。（Python版`TensorFlow`で行えることが既にJavaScriptでも出来るようになっている）

`TensorFlow.js`では、多くの既存モデルを[公開](https://www.tensorflow.org/js/models)しており、現在もその選択肢を広げる努力を続けている。
一例として

- ビジョン: 画像分類、物体検知
- 人体: 人体セグメンテーション、姿勢推定、顔ランドマーク検出、ハンドポーズ推定
- テキスト: テキスト有害度検出、セマンティックセグメンテーション、`BERT`によるQ&A、会話意図の検出
- サウンド: 音声コマンド認識
- その他: KNN分類器

などがある。「これらを使うにあたって機械学習の背景知識は必要ありません」とのことで（そうね、これら既製モデルを「使う」**だけ**ならね。）、「ただしJavaScriptの実践的な知識は必要」ではある。

続いて、`TensorFlow.js`を使ったクライアントサイドAIの実例・デモとして

- InSpace: Web会議アプリにおける、リアルタイム"毒性"フィルター機能
- IncludeHealth: ポーズ推定モデルを改良し、大規模な理学療法に活用
- 複数の既製モデル（ポーズ推定＆顔メッシュ検出）を組み合わせることで、好きなSVGキャラクターを自分の動き似合わせてリアルタイムに動かす
- 自分の歌声の音程通りに好みの楽器の音を再生させる
- （あらゆる種類の）手話を理解するジェスチャー認識ライブラリ

などが紹介された。

### `TensorFlow.js`の2021年の新機能について。というお話
まずは早速、`TensorFlow.js`がこの一年でどれだけ勢いよく成長したかの話から始まる。（ん?）
週ごとの利用者数が前年比で3倍に増加し、NPMにおける累計ダウンロード数は320万回に超えているとのこと。また、5,000万超のCDNヒットを達成し、12,500超のプロジェクトも誕生したとのこと。（本題ﾏﾀﾞ-?）

次に、モデルのアップデートの話。（あのさぁ）

- `FaceMesh`の虹彩サポートによるトレース精度の向上
- 2つの姿勢推定モデルのリリース（どちらも`PoseNet`を元にしており、精度・パフォーマンスが向上している）
- `MoveNet`: 超高速で正確。さまざまなポーズやアクションの検出に最適な17の重要なポイントを追跡。
- `MediaPipe BlazePose`: 重要なポイントの数が33であり、様々なポーズに合わせて調整されているため、両手の追跡など極めて高い精度で対応可能。
- 会話の意図の検出モデル: `DistilBERT`により小さいサイズと高パフォーマンスを実現、ブラウザやオンデバイスのシナリオにも適している（なお、`DistilBERT`に類似する`BERT`系言語処理モデルとして`Mobile BERT`がある）
- [BERT系（Mobile BERT）モデルを使用したフルクライアントQ&A Chrome拡張](https://developers-jp.googleblog.com/2020/04/tensorflowjs-bert.html)

などが紹介された。

そしてようやく、次が本題のアップデート情報。（???「[せんせいがこの話を始めるまでに6分近くもかかりました](https://www.google.com/search?q=%E7%9A%86%E3%81%95%E3%82%93%E3%81%8C%E9%9D%99%E3%81%8B%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AB*%E5%88%86%E3%81%8B%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F)」）

#### `WASM`（`WebAssembly`） + `SIMD` + マルチスレッドによるパフォーマンス向上
（V8の）`WebAssembly`で[`SIMD`（読み: しむど、しむでぃー; Single Instruction, Multiple Dataの略）](https://qiita.com/toshi00ysm/items/b9822c6ab33cc55d62e9#v8%E3%81%8Csimd%E3%82%92%E3%82%B5%E3%83%9D%E3%83%BC%E3%83%88%E3%81%97%E3%81%9F%E3%81%8B%E3%82%89chrome%E3%81%AEwebassembly%E3%81%8C%E3%82%82%E3%81%A3%E3%81%A8%E9%AB%98%E9%80%9F%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%82%88%E3%81%A8%E3%81%84%E3%81%86%E3%81%8A%E8%A9%B1)がサポートされたことにより、マルチスレッドと併せてCPUでの実行を高速化出来るようになった。
既にサポートされている、GPUでの実行を可能とする`WebGL`との比較試験では、CPUでのパフォーマンスが（GPUを使う）`WebGL`並みまたはそれ以上になるものもあったとのこと。
具体的に示された`FaceDetector`モデルの実行時間の比較では、

- 実行環境: MacBookPro 2019
- 概ねWebGLの2倍以上高速

とのことで、また`MobileNet`モデルでも同様の結果とのこと。
また、これらの比較試験から

- 小さいモデルほど、`WebAssembly`の方が（パフォーマンス上の）メリットが大きい
- 大きいモデルほど、`WebGL`によりGPUで実行するほうがパフォーマンスが向上する

などの傾向も確認できたとのこと。

#### `TensorFlow.js`が（ついに!）`TensorFlow Lite`モデルをサポートするぞ！！
従来`TensorFlow.js`で既製モデルを使うには、`TensorFlow.js`用に作られた（数少ない）モデルを使うか、Python版`TensorFlow`で作られたフルサイズの（バカでかい）モデルを[変換して](https://github.com/tensorflow/tfjs-converter)使うかしかなく、モバイルや組み込み、IoTなどのデバイスの環境用に低レイテンシでバイナリサイズを抑えられた`TensorFlow Lite`モデルは`TensorFlow.js`から使うことが（なぜか）出来なかった。（Webこそ、こういうのに一番シビアなのに..）
それが今回ようやくサポートされるようになり、Web環境にもクライアント環境で実行するのに適した性能のモデルを導入する選択肢がとても大きく広がったのである。（バンザーイ！勝ち勝ちｨｨｨ）

そして、[`TFJS Benchmarking`](https://tensorflow.github.io/tfjs/e2e/benchmarks/local-benchmark/index.html)ツールの紹介。
様々なデバイスで`TensorFlow.js`モデルの動作を理解するのに役立つツールで、ツールの読み込み元を指定できたり、ベンチマークを実行するバックエンドと環境の指定も可能。
また、[`BrowserStack`](https://www.browserstack.com/)を介したテストもサポートしており、さまざまなデバイスからリモートで複数の結果を収集出来るとのこと。
`TensorFlow.js`チームもこのツール使ってるってよ。

### TensorFlowにコントリビュートするには。っていうお話
まず、分科会を結成したとのこと。

- Benchmarking & Performance（ベンチマークとパフォーマンス）
- Platform Support（プラットフォームサポート）
- New Models & Application areas（新しいモデルと応用領域）
- Tooling & Infrastructure（ツールとインフラ）
- Model security（モデルのセキュリティ）
- Server-side execution with TFJS-Node（TensorFlow.js-Nodeによるサーバサイドでの実行）

どちらも積極的に活動してるから、関心のある人は参加してね。新しい分野の提案も歓迎です。とのこと。

また、以下のワーキンググループが発足され月1回で会合を開いているとのこと。

- Leading presentation and meetups in your local area（居住地域に対するプレゼンテーションやミートアップの主導）
- Prototype creation and inspiration（プロトタイプ作成やアイデア出し）
- Blog posts & tutorials（ブログ投稿やチュートリアル）
- Education / online cources（`TensorFlow.js`関連の教育）
- Videos / Show & Tell sessions（動画や発表会）
- Internationalisation（コンテンツの国際化）
- And more !

「お住まいの国で`TensorFlow.js`の啓発活動を行いたい方は私まで直接ご連絡ください」by [Jason Mayes](https://www.google.com/search?q=Jason+Mayes)氏（スピーカー）とのこと。

他には、

- [TensorFlow.js Show & Tell](https://www.google.com/search?q=TensorFlow.js+Show+%26+Tell)
- [`#MadeWithTFJS`](https://twitter.com/hashtag/MadeWithTFJS)ハッシュタグ

などが紹介された。

以上、　Google I/O 2021 フロントエンド 個人的まとめでした。