##この3体のガンダム、見分けつきますか？
さて、いきなりですがクイズです。
上の画像の3体のガンダム。あなたは見分けることができますか？
正解は左から「ガンダム」「ガンダム7号機」「オーガンダム」です。
ガンダム好きにとっては簡単でしたかね？
しかしながら、日々増えていくガンダム。
このままいくと本気で見分けがつかないものも出てくるでしょう。
（というか、私も突然見せられたら全部分かる自信無いです。）
このままではマズいっ！
ということで、今回はAIの力を借りてガンダムを見分けるアプリケーションに挑戦しました。
##そうして完成した「教えて！アストナージさん」
そうしてできあがったのが「教えて！アストナージさん」というWebアプリケーションです。
名前を知りたいガンダムの画像をアップロードすると、我らがアストナージさんが名前を教えてくれます。
（アストナージさんについて知らない人はこちらを見て下さい。）
↓ここから実際に触れます。
こんな感じの仕組みでできてます。
使っているライブラリやツールは以下の通り。
■ml5.js
HTML上で簡単に機械学習モデルを扱えるようにするライブラリ。
プリセットされたモデルの他、自分で用意した学習済みモデルも使用できる。
■Teachable Machine
Googleが提供しているWebアプリ形式の機械学習プラットフォームです。
画像や音声の分類モデルなどをブラウザ上で簡単に作成できます。
■Python3 + OpenCV3
学習に使う画像を増やすために使用。
OpenCVを使って元画像に変化を付けながら画像を増やしました。
##アストナージさんに覚えてもらったガンダムたち
今回アストナージさんに覚えていただいたのは以下のガンダムたちです。
（1体あたり300枚程度の画像データで学習しました。）
| 機体 | 登場作品 |
|---|---|
| ガンダム | 機動戦士ガンダム |
| 陸戦型ガンダム ガンダムEz8 |
機動戦士ガンダム 第08MS小隊 |
| ガンダムNT-1 | 機動戦士ガンダム0080 ポケットの中の戦争 |
| ガンダム7号機 | 機動戦士ガンダム戦記 |
| ガンダム試作1号機 ガンダム試作3号機 |
機動戦士ガンダム0083 STARDUST MEMORY |
| ガンダムMk-II Zガンダム |
機動戦士Zガンダム |
| ZZガンダム | 機動戦士ガンダムZZ |
| νガンダム | 機動戦士ガンダム 逆襲のシャア |
| ユニコーンガンダム | 機動戦士ガンダムUC |
| Ξガンダム | 機動戦士ガンダム 閃光のハサウェイ |
| ガンダムF91 | 機動戦士ガンダムF91 |
| Vガンダム V2ガンダム |
機動戦士Vガンダム |
| シャイニングガンダム ゴッドガンダム |
機動武闘伝Gガンダム |
| ウイングガンダム ウイングガンダムゼロ |
新機動戦記ガンダムW |
| ウイングガンダムゼロ(EW版) | 新機動戦記ガンダムW Endless Walts |
| ガンダムエックス ガンダムダブルエックス |
機動新世紀ガンダムX |
| ∀ガンダム | ∀ガンダム |
| ストライクガンダム フリーダムガンダム |
機動戦士ガンダムSEED |
| インパルスガンダム デスティニーガンダム ストライクフリーダムガンダム |
機動戦士ガンダムSEED DESTINY |
| スターゲイザーガンダム | 機動戦士ガンダムSEED C.E.73 -STARGAZER- |
| ガンダムエクシア ダブルオーガンダム オーガンダム |
機動戦士ガンダム00 |
| ダブルオークアンタ | 劇場版 機動戦士ガンダム00 -A wakening of the Trailblazer- |
| ガンダムAGE-1 ガンダムAGE-2 ガンダムAGE-3 ガンダムAGE-FX |
機動戦士ガンダムAGE |
| G-セルフ | Gのレコンギスタ |
| ガンダムバルバトス ガンダムバルバトスルプス ガンダムバルバトスルプスレクス |
機動戦士ガンダム 鉄血のオルフェンズ |
##作り方
ここからは作り方を紹介していきます。
###①学習データの準備
最初に機械学習に用いる画像を集めていきます。
先ほど紹介したガンダムたちの画像をGoogle画像検索でそれぞれ20枚ほど集めました。
集める際に気をつけたのが、「なるべく全身が写っている」「他に余計なものが写っていない」という点です。
各ガンダムの画像が用意できたら、OpenCVの力でちょっとずつ変化を加えながら画像を増やしていきます。
詳しいやり方は別記事にまとめたのでこちらを参照してください。
これで学習データの準備は完了です。
###②モデルの生成
Teachable Machineで分類モデルを作っていきます。
トップページで「使ってみる」を選択
プロジェクトの作成画面になるので今回は「画像プロジェクト」を選択
学習画面になるので、必要な数（今回だと42個）のクラスを作成して、画像をアップロードし、トレーニングを実行
モデルアップロードを選択後、共有可能なリンクを控えておく
これで分類モデルの準備まで完了
###Webアプリケーションの作成
作成した機械学習モデルを実行するWebアプリケーションを作成していきます。
コード全文はCodePenで貼っておきます。(モデルのURLだけ変えれば使えます。)
ライブラリはml5.jsとBootstrap4.5を使用。
See the Pen 教えて！アストナージさん by shoito66 (@shoito66) on CodePen.
今回はアップロードした画像に対してモデルを適用している。
この辺りの解説は別記事を書いたのでそちらを見てください。
##結局アストナージさんはガンダムを分類できるようになったのか
ちょっと確認してみました。
2勝1敗でした。
ただ、上げる画像によっては全然違う答えを返したりもします。
人間からすると全く違うガンダムでもAIから見ると意外と似ていたりするのかも知れません。
今後は学習画像のバリエーションなど、工夫することで精度が上がらないか色々考えてみたいと思います。