AIは増えすぎたガンダムを見分けることができるのか？Teachable Machineで作った分類モデルで検証してみた

##この3体のガンダム、見分けつきますか？
![クイズ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264471/09dd59fa-856d-0a67-ed44-9a78576b2ce9.png)

さて、いきなりですがクイズです。
上の画像の3体のガンダム。あなたは見分けることができますか？

正解は左から「**ガンダム**」「**ガンダム7号機**」「**オーガンダム**」です。
ガンダム好きにとっては簡単でしたかね？

しかしながら、日々増えていくガンダム。
このままいくと本気で見分けがつかないものも出てくるでしょう。
（というか、私も突然見せられたら全部分かる自信無いです。）

このままではマズいっ！
ということで、今回は**AIの力を借りてガンダムを見分ける**アプリケーションに挑戦しました。

##そうして完成した「教えて！アストナージさん」
そうしてできあがったのが「**教えて！アストナージさん**」というWebアプリケーションです。
名前を知りたいガンダムの画像をアップロードすると、我らがアストナージさんが名前を教えてくれます。
（アストナージさんについて知らない人は[こちら](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B9%E3%83%88%E3%83%8A%E3%83%BC%E3%82%B8%E3%83%BB%E3%83%A1%E3%83%89%E3%83%83%E3%82%BD)を見て下さい。）

↓ここから実際に触れます。

https://gracious-payne-6b1c49.netlify.app/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264471/32a6b7f7-3b8c-45c5-4b63-e5e53d745736.png)

こんな感じの仕組みでできてます。
![スライド1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264471/f6b03d38-e5ba-b960-087c-eecbb47a427b.jpeg)


使っているライブラリやツールは以下の通り。

■[ml5.js](https://ml5js.org/)
HTML上で簡単に機械学習モデルを扱えるようにするライブラリ。
プリセットされたモデルの他、自分で用意した学習済みモデルも使用できる。

■[Teachable Machine](https://teachablemachine.withgoogle.com/)
Googleが提供しているWebアプリ形式の機械学習プラットフォームです。
画像や音声の分類モデルなどをブラウザ上で簡単に作成できます。

■Python3 + OpenCV3
学習に使う画像を増やすために使用。
OpenCVを使って元画像に変化を付けながら画像を増やしました。


##アストナージさんに覚えてもらったガンダムたち
今回アストナージさんに覚えていただいたのは以下のガンダムたちです。
（**1体あたり300枚程度**の画像データで学習しました。）

| 機体                                                                       | 登場作品                                                      |
|----------------------------------------------------------------------------|-----------------------------------------------------------|
| ガンダム                                                                   | 機動戦士ガンダム                                          |
| 陸戦型ガンダム<br>ガンダムEz8                                                 | 機動戦士ガンダム 第08MS小隊                               |
| ガンダムNT-1                                                               | 機動戦士ガンダム0080 ポケットの中の戦争                   |
| ガンダム7号機                                                              | 機動戦士ガンダム戦記                                      |
| ガンダム試作1号機<br>ガンダム試作3号機                                        | 機動戦士ガンダム0083 STARDUST MEMORY                      |
| ガンダムMk-II<br>Zガンダム                                                    | 機動戦士Zガンダム                                         |
| ZZガンダム                                                                 | 機動戦士ガンダムZZ                                        |
| νガンダム                                                                  | 機動戦士ガンダム 逆襲のシャア                             |
| ユニコーンガンダム                                                         | 機動戦士ガンダムUC                                        |
| Ξガンダム                                                                  | 機動戦士ガンダム 閃光のハサウェイ                         |
| ガンダムF91                                                                | 機動戦士ガンダムF91                                       |
| Vガンダム<br>V2ガンダム                                                       | 機動戦士Vガンダム                                         |
| シャイニングガンダム<br>ゴッドガンダム                                        | 機動武闘伝Gガンダム                                       |
| ウイングガンダム<br>ウイングガンダムゼロ                                      | 新機動戦記ガンダムW                                       |
| ウイングガンダムゼロ(EW版)                                                 | 新機動戦記ガンダムW Endless Walts                         |
| ガンダムエックス<br>ガンダムダブルエックス                                    | 機動新世紀ガンダムX                                       |
| ∀ガンダム                                                                  | ∀ガンダム                                                 |
| ストライクガンダム<br>フリーダムガンダム                                      | 機動戦士ガンダムSEED                                      |
| インパルスガンダム<br>デスティニーガンダム<br>ストライクフリーダムガンダム       | 機動戦士ガンダムSEED DESTINY                              |
| スターゲイザーガンダム                                                     | 機動戦士ガンダムSEED C.E.73 -STARGAZER-                   |
| ガンダムエクシア<br>ダブルオーガンダム<br>オーガンダム                           | 機動戦士ガンダム00                                        |
| ダブルオークアンタ                                                         | 劇場版 機動戦士ガンダム00 -A wakening of the Trailblazer- |
| ガンダムAGE-1<br>ガンダムAGE-2<br>ガンダムAGE-3<br>ガンダムAGE-FX                   | 機動戦士ガンダムAGE                                       |
| G-セルフ                                                                   | Gのレコンギスタ                                           |
| ガンダムバルバトス<br>ガンダムバルバトスルプス<br>ガンダムバルバトスルプスレクス | 機動戦士ガンダム 鉄血のオルフェンズ                       |

##作り方
ここからは作り方を紹介していきます。

###①学習データの準備
最初に機械学習に用いる画像を集めていきます。
先ほど紹介したガンダムたちの画像をGoogle画像検索でそれぞれ20枚ほど集めました。
集める際に気をつけたのが、「**なるべく全身が写っている**」「**他に余計なものが写っていない**」という点です。

各ガンダムの画像が用意できたら、OpenCVの力で**ちょっとずつ変化を加えながら画像を増やしていきます**。

詳しいやり方は別記事にまとめたのでこちらを参照してください。

https://qiita.com/shoito66/items/f28b3752be1b76325588

これで学習データの準備は完了です。

###②モデルの生成
Teachable Machineで分類モデルを作っていきます。
[トップページ](https://teachablemachine.withgoogle.com/)で「**使ってみる**」を選択

プロジェクトの作成画面になるので今回は「**画像プロジェクト**」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264471/58810ed8-5547-cf68-ec42-9aa60227ed54.png)

学習画面になるので、必要な数（今回だと42個）のクラスを作成して、画像をアップロードし、トレーニングを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264471/d1f20caf-92c4-bedd-5de6-e1075fd159ce.png)



モデルアップロードを選択後、共有可能なリンクを控えておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264471/1f684287-e7bc-d3cf-8416-55a7e98f181b.png)

これで分類モデルの準備まで完了

###Webアプリケーションの作成
作成した機械学習モデルを実行するWebアプリケーションを作成していきます。
コード全文はCodePenで貼っておきます。(モデルのURLだけ変えれば使えます。)
ライブラリはml5.jsとBootstrap4.5を使用。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="shoito66" data-slug-hash="ZEexMqE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="教えて！アストナージさん">
  <span>See the Pen <a href="https://codepen.io/shoito66/pen/ZEexMqE">
  教えて！アストナージさん</a> by shoito66 (<a href="https://codepen.io/shoito66">@shoito66</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

今回はアップロードした画像に対してモデルを適用している。
この辺りの解説は別記事を書いたのでそちらを見てください。

https://qiita.com/shoito66/items/553da1fd09991042e2d8

##結局アストナージさんはガンダムを分類できるようになったのか
ちょっと確認してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264471/597be4d6-d5cd-bfd5-ec3b-13e0e71ad9ad.png)

**2勝1敗**でした。
ただ、上げる画像によっては全然違う答えを返したりもします。
人間からすると全く違うガンダムでもAIから見ると意外と似ていたりするのかも知れません。

今後は学習画像のバリエーションなど、工夫することで精度が上がらないか色々考えてみたいと思います。