【簡単】TeachableMachineを利用して「ゴクリAI認識」webアプリを作ろう

# ➊はじめに
この記事は「[NTTテクノクロス Advent Calendar2020](https://qiita.com/advent-calendar/2020/ntt-tx)」の17日目の記事です。

2020年12月17日、今年も残すところ、あと少しになりましたね🥺ぴえん
本アカウントは完全個人アカウントですが、このたび所属している会社の方で「[Advent Calendar2020](https://qiita.com/advent-calendar/2020)」に参加するということで、お試しで私もエントリしてみることとしました。本記事が**少しでもみなさまのお役に立てれば**と思っております。よろしくお願い致します。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/929c6566-21a1-a454-5d39-7eab5f5a9a26.gif)<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/7a9e92ed-2a17-1c0d-5476-dfedec540f4e.png' width=200><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/5cdedc39-7858-a1bb-1cc4-a3ec02576912.png' width=60><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/5cdedc39-7858-a1bb-1cc4-a3ec02576912.png' width=50><img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/5cdedc39-7858-a1bb-1cc4-a3ec02576912.png' width=70>

# ➋今回やること
microsoft [`Lobe`](https://lobe.ai/)の[Watch Tour](https://youtu.be/Mdcw3Sb98DA)のような認識アプリをいとも簡単に作り上げるサマを見て、**衝撃**を受けました[^1]。今回はこの様なwebアプリをライバルのGoogle [`Teachable Machine`](https://teachablemachine.withgoogle.com/)で作ってみたいと思います。
![sample](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/7111dc23-96ad-f2fc-4ba3-d78242426674.gif)

> 「ツール作るのメンドクセ」という方はこちらからすぐに遊べます。
> <font color="DeepPink"><strong>HEROKUへデプロイしました。すぐに遊べます😊！</strong></font>
> https://gokuri-counter.herokuapp.com/
> ※HEROKU無料枠のため、サーバがSLEEPしている場合、初回起動のみ45秒程度時間がかかります。

今回やることの**ポイント**をまとめると以下になります。

- [Teachable Machine](https://teachablemachine.withgoogle.com/)を使用し、**コーディングなしでモデルを作成**。
- **Tensorflow.js形式**で、モデルをエキスポート。
- [Tensorflow.jsライブラリ](https://www.tensorflow.org/js?hl=ja)を使用し、**モデルの読み込みや推論をブラウザ側で動作**させるwebアプリケーションを作成。
- 作成するwebアプリケーションは、「**ゴクリ・カウンタ**」とする。

# ➌Teachable Machineとは
[`Teachable Machine`](https://teachablemachine.withgoogle.com/)とは**Googleが提供している無料のwebサービス**です。このwebサービスは、機械学習コードを作成せずに、画像、音声、ポーズを認識するようコンピュータをトレーニングでき、作成したモデルは、独自のプロジェクト（サイト、アプリなど）で使用可能です。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/5b0c59c4-ef06-b267-b96e-97d4fb9bd37d.png)


# ➍モデル作成
新しいプロジェクトから[`画像プロジェクト`]を選択します。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/e3439346-340d-c728-ac7a-2d5abbe0731c.png)

### (1)クラスを定義
今回は、「`Not Drinking：飲んでない`」と「`Drinking：飲んでいる`」の2クラスを作成します。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/641309d1-944a-f9c6-71b8-2ebf4c32052f.png)

### (2)クラスに沿った写真を撮る
それぞれウェブカメラから**バシバシ**写真を撮ります。私が写真を撮ったときの注意点を記載します。

#### ●Not Drinkingの画像工夫点
>・コップを手に持っただけ。
>・コップを顔の周りに持っていく。
>・手を口に持っていく。
>・コップの横、コップの底を見せるけど飲まない。
>・両手同じ様なことを実施。
![Not Drinking](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/37ff67c6-b825-c1bf-cc9b-813a69fd463e.png)

#### ●Drinkingの画像工夫点
>・コップを口に持っていく。
>・色んな角度から写真を撮る。
>・コップの横、コップの底を見せて飲む。
>・両手同じ様なことを実施。
![Drinking](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/a1713ea1-58a6-e24a-948e-a1ba4c515eee.png)

※汎化性能を上げるために「もうちょっと学習したいよ」と思う方は、コップ、服装、照明、背景を変えたり、人物を替えたりしてみてください。

### (3)モデル作成
[`モデルをトレーニングする`]を押下して、クラスに沿った画像を学習していきます。学習が終わるとその時点で、プレビューができます。ここで色々なポーズを試してみましょう。例えば口に手を近づけたり、マスクをかけてみたり。ここに映った映像から認識誤りがあるポーズなどがあれば、クラスに画像を追加し、再度学習させていきます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/7834c665-8aae-3da7-5761-917afc5b56e6.png)
→ (2)と(3)を繰り返して、正しく認識してくれるモデルを作りましょう😊

# ➎モデル・エクスポート
### (1)エクスポート
今回はお遊びなので、大体できたなと思ったら[`モデルをエクスポートする`]を押下します。

### (2)モデルのアップロード
エクスポート先をクラウド(無料)かダウンロードか選択できます。今回は、[`Tensorflow.js`]タブのところで、[`アップロード(共有可能なリンク)`]を押下します。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/9229f223-781a-cb1f-d1d4-a4e58489d7d3.png)

> ちなみに、エクスポートしたモデルをクラウドへアップロードしてもモデルの作成に使用したサンプル画像は公開されません。公開されるのは、クラスを予測する数理プログラム(モデル)のみです。セキュリティ的にも安心ですね。

### (3)モデルのホスト
[`共有可能なリンク`]のところに、`Tensorflow.js形式`のモデル(model.json、metadata.json、model.weights.bin)がホストされます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/0ab34d74-82da-14ce-9916-8fc4a3a49e39.png)

### (4)ホストしたモデルをお試し
Browserで[共有可能なリンク]を開くと、**webアプリの試走**(こんな感じのwebアプリになったよということ)と、**エクスポートしたモデルの説明**を見ることができます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/d33b244a-4eec-7d35-c732-112e4006b6e6.png)
共有可能なリンク：https://teachablemachine.withgoogle.com/models/LTfad3GbC/

|モデル|説明|(今回の参考値)サイズ|
|:--|:--|--:|
|/model.json|TensorFlow.jsライブラリで使用されるモデルアーキテクチャ。トポロジと、重みファイルへの参照が含まれています。|244Byte|
|/metadata.json|クラスラベルやライブラリのバージョンなどのモデルメタデータが含まれます。|約90KB|
|/model.weights.bin|モデルの重みを含むTensorFlow.jsバイナリファイル。|約2.1MB|

# ➏JSライブラリ
### (1)Tensorflow.jsとは
**[TensorFlow.js](https://github.com/tensorflow/tfjs)とは、機械学習用のJavaScriptライブラリ**です。
Tensorflowでモデルを保存する形式として「`saved_model形式`」を使うと、モデルの読み込みなどをする推論側は、Tensorflowライブラリを利用できる言語(Python、Go、Java、C言語、C++)に限られます。そのため、webベースのアプリケーションだと主にサーバ側で推論を行うことになります。しかし、モデルの保存形式として「`Tensorflow.js形式`」を使うと、javascript言語でモデルを扱うことができるので、**ブラウザ側(クライアント側)で学習や推論が可能**となります。今回は、「Tensorflow.js形式」を使います。

> 「Tensorflow.js」の詳細については、[GitHub](https://github.com/tensorflow/tfjs)をご参照ください。
> 本ライブラリは、Apache License Version 2.0です。

### (2)Teachable Machineライブラリとは
**「[**Teachable Machineライブラリ**](https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries)」とは、Teachable Machineで作成されたモデルを使用するための便利なライブラリ**です。Teachable Machineのサービスに応じて、「IMAGE、AUDIO、POSE」と三種用意されています。今回は、「[Teachable MachineライブラリのIMAGE](https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image)」を使用します。

> 「Teachable Machineライブラリ(IMAGE)」の詳細については、[GitHub](https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image)をご参照ください。
> 本ライブラリは、Apache License Version 2.0です。

### (3)ライブラリの使用方法
ライブラリの使用方法について簡単に説明します。
#### ●ライブラリの読み込み
Tensorflow.js形式のモデルを扱うため、以下の2つのライブラリをを読み込みます。
・「[TensorFlow.js](https://github.com/tensorflow/tfjs)」
・「[Teachable Machineライブラリ(IMAGE)](https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image)」

``` .html:html
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8.3/dist/teachablemachine-image.min.js"></script>
```

#### ●モデルの読み込み
今回は「tmImage.load()」を使用しますが、モデルをダウンロードした場合は、「tmImage.loadFromFiles()」を使用します。
・「modelURL」は、エクスポートされた「model.json」のURLを指定します。
・「metadataURL」は、エクスポートされた「metadata.json」のURLを指定します。

``` .js:javascript
model = await tmImage.load('path/to/modelURL', 'path/to/metadataURL');
```

#### ●推論
「model.predict()」は、画像、ビデオ、またはcanvasのhtml要素を取り込むことができます。

``` .js:javascript
const prediction = await model.predict(HTMLImageElement | HTMLVideoElement | HTMLCanvasElement | ImageBitmap);
```

# ➐webアプリ作成
### (1)ゴクリ・カウンタの仕様
今回は「ゴクリ・カウンタ」というwebアプリを作成します。簡単に仕様も定めておきます。

- 「Drinking」と認識精度80%以上で認識され、かつ、ある程度連続した時間「Drinking」となった場合、「ゴクリ回数」をカウントアップする。
- 60分を5等分し、現時刻の時間帯により「ゴクリ回数」を分計できるようにする。

### (2)ゴクリ・カウンタwebアプリの作成
javascript言語を使ってwebアプリを作っていきます。モデル読み込みや推論部はほぼサンプル・スニペットで出来上がっているので、**ユーザはアプリケーション開発に注力**することができます。追加した内容は、推論結果の棒グラフや、ある程度「Drinking」と認識したときにゴクリ回数をカウントアップさせるという処理を主に追加しました。

> 棒グラフは [`Chart.js`](https://github.com/chartjs/Chart.js)を利用しました。
> 本ライブラリは、MIT Licenseです。

### (3)ソースコード
ソースコードは、GitHubに置いてありますので、必要な方はこちらをご参照ください。
> Github : https://github.com/PoodleMaster/gokuri_counter

``` .bat:command
git clone https://github.com/PoodleMaster/gokuri_counter
```

# ➑実行 及び 実行結果
「gokuri_counter」配下の「`index.html`」をブラウザで開いてください。以下の様に飲んでいないときは「**Not Drinking**」となり、コップを使って水を飲んだときに「**Drinking**」となり、ゴクリカウンタがカウントアップすれば成功です！

### ■ 飲んでないとき
コップを見せても「**Not Drinking**」と認識されます。ゴクリ回数は変化しません。
![Not Drinking](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/2e73a526-96c5-7467-e417-ed309ea528c1.png)

### ■ 飲んでるとき
「**Drinking**」と認識されます。「Drinking」の状態が少し続くとゴクリ音♪が鳴り、ゴクリ回数がカウントアップしていきます。**連続ゴキュゴキュ**もできます。
![Drinking](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/43dc5761-f0d3-8ca4-8d67-d8570e4753ad.png)

> 条件を変えてモデルのトレーニングをあまりしていないため、**汎化性能はあまり良くない**です。自分で**オレのモデル**を作り、モデルを入れ替えて遊んでみると楽しいと思います。

# ➒以上
[`Teachable Machine`](https://teachablemachine.withgoogle.com/)を用いることで**すっごく簡単**に「ゴクリ・カウンタ」を作ることができました。[`Lobe`](https://lobe.ai/)を使っていたので**コーディングなしでAIモデルを作成**できることへのビックリ耐性はあったものの、[`Teachable Machine`](https://teachablemachine.withgoogle.com/)を使ってみて、「学習～モデル作成～推論」まで**全てブラウザ内で出来てしてしまう**ということで、これまた**ビックリ**[^2]しました！AIでできることがどんどん増え、より身近になっていくことでしょう。

お疲れ様でした。

# 参考・引用
記事内で使用した一部の画像は、以下のサイトを参考、または、引用しております。
・[Teachable Machine](https://teachablemachine.withgoogle.com/)
・[いらすとや](https://www.irasutoya.com/)

[^1]: Microsoftさんスゴイよぉー😊
[^2]: Googleさんスゴ過ぎだよぉー😭