TensorFlow Lite のモデルを Web で扱えるという話についてのざっくりなメモ【Google I/O 2021】

内容はタイトルの通りで、先日参加したイベントで聞いた話が元になっています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TensorFlow.js のモデルだけじゃなく、TensorFlow Lite のモデルも Web で使える！！<br>これはめちゃくちゃ気になる！<br><br> <a href="https://twitter.com/hashtag/tfug?src=hash&amp;ref_src=twsrc%5Etfw">#tfug</a> <a href="https://t.co/KVugwHeQm5">pic.twitter.com/KVugwHeQm5</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1401847326214397956?ref_src=twsrc%5Etfw">June 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ちなみに、参加していたイベントというのはこちらです。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">【I/O Extended Japan 2021 - Machine Learning】 <a href="https://twitter.com/hashtag/googleio2021?src=hash&amp;ref_src=twsrc%5Etfw">#googleio2021</a> <a href="https://twitter.com/hashtag/io21jp?src=hash&amp;ref_src=twsrc%5Etfw">#io21jp</a> ML振り返りイベント視聴URLはこちらです！お時間時間あればぜひご覧下さい~ ✨ <a href="https://twitter.com/hashtag/tfug?src=hash&amp;ref_src=twsrc%5Etfw">#tfug</a> <a href="https://twitter.com/hashtag/gdgtokyo?src=hash&amp;ref_src=twsrc%5Etfw">#gdgtokyo</a><a href="https://t.co/oyOa0x2GZ1">https://t.co/oyOa0x2GZ1</a></p>&mdash; Shoco Sato (@satoshoco) <a href="https://twitter.com/satoshoco/status/1401841382227013637?ref_src=twsrc%5Etfw">June 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 今回の話に関する公式の動画
TensorFlow Lite のモデルを Web で扱えるという話の公式の動画を掲載します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/5q8BzYN4rqA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 今回の話に関する公式のデモ
上で掲載した動画の説明欄に、以下の 2つのデモへのリンクが掲載されていました。

Resources:
Demo 1 → https://goo.gle/3vxb62N
Demo 2 → https://goo.gle/3gLY79b

それぞれの内容を見てみると、CodePen上で試せるもので「[TFJS Task API Demo - Movie Review Sentiment Classification](https://codepen.io/jinjingforever/pen/PoWRwqP)」というものと、「[TFJS: TFLite Model Runner Demo](https://codepen.io/jinjingforever/pen/xxgWRaE)」というものでした。
2つ目はページのタイトルから分かりにくいですが、画像の Cartoonize を行うものです。

個人的には、過去にもいろいろ触っている画像分類が気になったので、上記の[公式デモを公開しているアカウント](https://codepen.io/jinjingforever)の Pen にそれがあるかどうか探してみました。

### 画像分類のデモ
そうすると、[以下のツイートに書いているデモページ](https://codepen.io/jinjingforever/pen/VwPOePq)を見つけることができました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画像分類もあった。<br><br>並んでいるボタンを見ると TFLite の MobileNet の下に Custom ってあるけど、EfficientNet-Lite のものとか動いたりするのかな？<br>（前に <a href="https://twitter.com/hashtag/TensorFlow?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlow</a> Lite Model Maker で作ったやつとか）<br><br>●TFJS Task API - Image Classification<br>　<a href="https://t.co/YaTX3up1Pi">https://t.co/YaTX3up1Pi</a><a href="https://twitter.com/hashtag/TensorFlowJS?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlowJS</a> <a href="https://t.co/5vZbrUxRVo">pic.twitter.com/5vZbrUxRVo</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1403748379855757313?ref_src=twsrc%5Etfw">June 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記のツイートに書いている「前に...」と書いているものは、以下の記事を書いたころに試していたものです。
　●TensorFlow Lite Model Maker による転移学習の過程で accuracy・loss を可視化（グラフ化）する - Qiita
　　https://qiita.com/youtoy/items/4f198afb3254613efc75

その後、キーワードで検索をしていて、[カスタムモデルの要件に関する情報をたどれそうなリンク](https://www.npmjs.com/package/@tensorflow-models/tasks)を見つけられました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/TensorFlow?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlow</a> Lite の画像分類のモデルを JavaScript で扱う時、MobileNet じゃないカスタムモデルでどんなモデルが使えるか、ここから情報をたどれそう、というのがあった。<br><br>tensorflow-models/tasks - npm<br>　<a href="https://t.co/JV5lEnDGIR">https://t.co/JV5lEnDGIR</a><a href="https://twitter.com/hashtag/TensorFlowJS?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlowJS</a> <a href="https://t.co/7g2H3tyOoj">pic.twitter.com/7g2H3tyOoj</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1403750414806175748?ref_src=twsrc%5Etfw">June 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そこから[要件が書かれたページ](https://www.tensorflow.org/lite/inference_with_metadata/task_library/image_classifier#model_compatibility_requirements)にとんでみたのですが、今の自分の知識だとぱっと見ではすぐに分からない...
実際のモデルを用意して、デモのソースコードの必要な部分を切り出して動かす、とかやったほうが早そうな予感がします。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">モデルの要件が書いてあるページにたどり着いたけど、<br>自分の場合は、先ほどのデモのページのソースコードを使って実際のモデルを使ってみて、とりあえず動くか試してみる、<br>という進め方のほうが早そうな感じがしてきた。 <a href="https://t.co/6Jo5YGrOdL">pic.twitter.com/6Jo5YGrOdL</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1403751359015391232?ref_src=twsrc%5Etfw">June 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## API の利用方法
[記事の途中に出てきた npm のページ](https://www.npmjs.com/package/@tensorflow-models/tasks)を見てみると、以下のスクリプトタグを記載し、モデルの読み込みの処理を読み込みたいモデルに合わせて書くようです。
　●@tensorflow-models/tasks - npm
　　https://www.npmjs.com/package/@tensorflow-models/tasks
![動作させるための情報.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/77b8fe73-f532-65c5-327e-90ca6713d7e6.jpeg)

上で書いていたカスタムモデルかそうでないかという話についてですが、上記のモデルの読み込み処理（以下に抜き出したもの）を見ると、独自のモデルを外部から読み込むか、あらかじめ準備されているモデルを読み込むかの違いのようでした。

```javascript
// Load the TFJS mobilenet model.
const model1 = await tfTask.ImageClassification.MobileNet.TFJS.load({
  backend: 'wasm'});

// Load the TFLite mobilenet model.
const model2 = await tfTask.ImageClassification.MobileNet.TFLite.load();

// Load a custom image classification TFLite model.
const model3 = await tfTask.ImageClassification.CustomModel.TFLite.load({
  model: 'url/to/your/bird_classifier.tflite'});
```

## おわりに
とりあえず、TensorFlow Lite のモデルを Web で扱えるという話を追っていく前の、ざっくりな情報をメモ的にまとめました。

この後、続きを進めていって記事に書こうと思ってます。

### 【追記】 とりあえず動くものを試してみた
その後、サンプルに手を加えたものをちょっと動かしたりしてみてます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/TensorFlow?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlow</a> Lite のモデルを JavaScript で扱う話のその後。<br><br>とりあえず、静止画に画像分類の推論を行うサンプルに手を加えて、PC のカメラ映像に対して画像分類の推論を行うようにして動かしてみた（iPod 笑）。<br><br>●TFJS Task API - Image Classification<br>　<a href="https://t.co/YaTX3up1Pi">https://t.co/YaTX3up1Pi</a><a href="https://twitter.com/hashtag/TensorFlowJS?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlowJS</a> <a href="https://t.co/EDk3TuEnQr">pic.twitter.com/EDk3TuEnQr</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1403857074258288640?ref_src=twsrc%5Etfw">June 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 【追記】 続きの記事をまず 1つ書きました
●30行未満の HTML＋JavaScript でカスタムモデルを使った画像分類を試す（TFJS Task API を利用） - Qiita
　https://qiita.com/youtoy/items/7b42ce2973a457cc5844

## 【追記】 余談2
そういえば、対応してるモデルを実際に動かして確かめる話は、わざわざ転移学習とかしてモデルを用意しなくても [TensorFlow Hub の TFLite のモデル](https://tfhub.dev/s?deployment-format=lite&module-type=image-classification)をとってくれば良いのでは？、と後から思ったりしました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">そういえば、TFJS Task API で <a href="https://twitter.com/hashtag/TensorFlow?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlow</a> Lite のモデルを試す話、特定のモデルが動くか試してみるだけなら転移学習とかして用意しなくても TensorFlow Hub のモデルを呼び出せば良いのでは、とふと思った。<br><br>●TFLite | TensorFlow Hub<br>　<a href="https://t.co/113ThD2cFk">https://t.co/113ThD2cFk</a><a href="https://twitter.com/hashtag/TensorFlowJS?src=hash&amp;ref_src=twsrc%5Etfw">#TensorFlowJS</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1403834746770124800?ref_src=twsrc%5Etfw">June 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 余談
記事の途中に出てきた以下のページで気になった部分を、最後にいくつかメモしておきます。
　●@tensorflow-models/tasks - npm
　　https://www.npmjs.com/package/@tensorflow-models/tasks

現状、「WORK IN PROGRESS」という状態のようです。
また、インストールについては「この 20K より小さいパッケージのみ利用すれば、依存関係等を気にせず使える」などといった説明が書かれていて、非常に使いやすい構成のようです。
![ページの冒頭.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c5db0fd5-7d64-05b9-d8ad-746c219563cc.jpeg)
【追記】 上記の話、デモのソースコードを見たら、外部から読み込んでるファイルのバージョンで `0.0.1-alpha.8` とか書いてました（まだベータにもなってない、という位置付けっぽい）。

```html
<script src='https://cdn.jsdelivr.net/npm/@tensorflow-models/tasks@0.0.1-alpha.8'></script>
```

対応しているタスク・モデル等の全体像は、以下のようになるようです。
また「(The initial version only supports the web browser environment. NodeJS support is coming soon)」という記載があり、初期バージョンはブラウザ上での動作のみ対応という状態のようです。
![表の前半.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f70948f0-9ef2-4cd1-da3e-72f4d3de686e.jpeg)
![表の後半.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/abcd355a-3c95-ac74-9073-1f723e51e0e7.jpeg)