バイク博士爆誕！？機械学習させたAIアプリでバイクメーカーを判定する！ #バイク好き

だいたい良いなって思って見ちゃうのは大きいバイク（≒ハーレー）なのですが、チョイノリできるバイクが欲しいので、バイクチェックに余念がないのです。

そんなバイクチェック中、バイクを見たときに気になるのは、まずメーカーです。
みなさんもメーカーが気になるのではないでしょうか？！え？そんなことない？
**いいえ！私は気になります！**
メーカーロゴが見えにくいバイクもあり、これはどこのメーカーかなぁ～なんて見ていたりします。
メーカー等がわからないと調べることもできないので、<font color="#ff1493">**自分のためのバイクメーカー判定アプリ**</font>を作成して、調べることの簡素化につなげたいと思います。

#「バイク博士」爆誕しました！
アプリにバイク画像をアップロードすると「バイク博士」にバイクメーカーを判定してもらうことができます。

https://determined-goldstine-7eee39.netlify.app/

#バイクのメーカー判定はいかに！？
ちゃんと動きまして「**さすが博士！**」と言いたくなるように正しく判定されることもあれば、自信満々で間違えて「**エセ博士ぇ・・・**」なときもあるので、ちょっとツッコミどころ満載になってしまいましたが、バイク博士のキャラクターに愛着がわきました:heart:

##さすが博士！～正しい判定バージョン～

|HONDA|YAMAHA|SUZUKI|KAWASAKI|HARLEY-DAVIDSON|
|:-:|:-:|:-:|:-:|:-:|
|![20211124_134658000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/a9f99c82-584a-ed0f-8b64-feb9837e9e9f.png)|![20211124_134607000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/4f1723a7-3441-7a2c-80af-df652cafd64d.png)|![20211124_134538000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/6a099429-284f-db07-0b8d-1b4169c49a91.png)|![20211124_134553000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/2accf684-3879-a4a0-c00d-7a2cff831b1c.png)|![20211124_133012000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/c2c4afa8-cf37-cbf4-924d-5d9743107138.png)|

##エセ博士ぇ・・・～間違えた判定バージョン～
自信なさげに間違えてくるのが可愛く見えてきたことに加え、自信満載に間違えてくるところも可愛く見えてきました。
博士の表情も変えられたらいいんですかね。メガネしてるから表情も何もないか・・・

|HONDA|YAMAHA|SUZUKI|KAWASAKI|HARLEY-DAVIDSON|
|:-:|:-:|:-:|:-:|:-:|
|自信満々なところ失礼します。<br>これはCB750Fです！<br>SUZUKIじゃないですよ！<br>![20211124_235300000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/f9bc9dc7-0b55-ad88-90bd-4092c411d0fd.png)|迷ってるけど、これはKAWASAKIじゃないですよ！<br>![20211124_235011000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/21d2b896-c4d3-9d2f-bebd-7209fef29f28.png)|博士～これは隼です。HONDAじゃなくてSUZUKIですよ！なんでそんなに自信満々なの？<br>![20211124_130831000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/65404e13-0446-3d25-1d56-a816a8e4048f.png)|えーっと・・・博士？<br>自信ないのが正解です。これはHONDAじゃないです^^；<br>![20211124_235203000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/f4d2db7a-e13f-7b7c-8d6d-3144eb335547.png)|博士ぇぇ<br>これは私の愛車でHARLEY-DAVIDSONですよ？<br>![20211124_133147000_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/d05d74f2-ec44-b831-8b86-08e50a0a01f6.png)|

#バイク博士の作り方
##1.博士の顔を作ろう。
図形を使ってバイク博士のビジュアルを作成します。
なんだか帽子しか博士っていう感じがしない:sweat_drops:
結果的に若干のエセ感がにじみ出てるからこれはこれでいいのかもしれない:grin:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/727d0289-6113-072c-c32d-0cb48d75ca90.jpeg" width=20%>

##2.バイクデータを教え込もう。
[TeachableMachine](https://teachablemachine.withgoogle.com/)を使ってバイク博士にバイクメーカーと画像を学習させます。
今回は国産メーカー4社と私の愛車メーカー1社、計5社メーカーを学習させることにしました。

TeachableMachineの操作については、別記事に記載したのでそちらを参照ください。
[【TeachableMachine】画像プロジェクトの操作方法](https://qiita.com/yui-kouy/items/4b0870eb4ed38de98aba)

画像は以下のとおり各メーカ社ごとに20枚前後のバイク写真をアップロードしています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/c57cbdb3-59a9-61ea-d8ca-92b570d6a595.jpeg" width=70%>

##3.CodePenで博士が動くようにしよう。
全体のコードはCodePenからご確認いただければと思います。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="JjyQPjR" data-user="yui-ko" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yui-ko/pen/JjyQPjR">
  バイク博士におまかせ！</a> by yui-ko (<a href="https://codepen.io/yui-ko">@yui-ko</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

##4.分析結果の%によって話し方を変えよう。
60%未満：ちょっと自信なさそうに話す:disappointed_relieved:
80%超：自信満々に話す:triumph:
60%以上80%以下：間違えている可能性もあるように話す:smirk:

```javascript
  //バイク博士が結果をしゃべるための処理（吹き出し内の指定）
  function gotResult(error, results) {
    if (error) {
      console.error(error);
    }
    console.log(results);

    //取り込んだデータの解析した％数値によって自信の有無を変える
    let msgM = " ";
    let msgNum = parseFloat(results[0].confidence * 100).toFixed(2)
 
    //一番高い割合のメーカーの割合によって言い方を変える
    if (msgNum < 60) {
      msgM = "\n" + "ちょっと自信ないんじゃが・・・" + msgNum + "%くらいかのぉ。あってるかのぉ・・・"
    } else if (msgNum > 80) {
      msgM = "\n" + "これは自信あるんじゃ！" + msgNum + "%じゃ！そうに決まっておる！"
    } else {
      msgM = msgNum + "%くらいじゃ。間違えていたらすまんのぉ～。"
    }
    //自信が一番高い割合のメーカーを表示
    let resultText = "ふむふむ。このバイクのメーカーは「" +
        results[0].label + "」だと思うんじゃよ。" + "\n" + msgM;

    text.textContent = resultText;
  }
```

#使ってみて。
家族や友人等に使ってみてもらったところ、ちゃんとメーカー判定されたり、「このバイクこそこのメーカーだろぉい！」というものが違うメーカーに判定されるという不服の判定が起きていましたが、肯定的なご意見をたくさんもらうことができました。
◆**いただいたご意見**
・画像から自動判定して教えてくれるのはイイね！
・メーカーだけじゃなくて、バイクの車体名・車種名がわかるといいな～
どっちも私もそう思います。**特に車体名等が出る方が私も欲しい。とても欲しい。**
バージョンアップしていくことにしますのでご期待ください:sparkles::sparkles::sparkles:

#考察
メーカー等が間違えて判定されると間違えて調べてしまい時間の無駄になりそうです。
簡素化につながらないパターンも出てしまうのが問題だなと思います。
機械学習で登録したデータが少ないのと、メーカーごとにしたため、車体種類や色のブレが生じた結果だと考えています。
オートマとマニュアルでも車体が違う傾向がありますので、それも精度を下げた原因と考えています。
また、メーカーごとに車体の色に特徴があったりするので、色が近い場合は違うメーカー判定されている傾向になりました。
特にKAWASAKIは黄緑色が多いので、他のメーカーで黄緑色の車体の場合はKAWASAKI判定されたりしました。
バイクの型ごとにクラスを作成して学習させていった方が精度が高いものができると思いますし、私が欲しいものはそちらになると考えています。学習データが膨大になってきますので、独自では限界もあると思いますがチャレンジしていきたいです。

#参考
めっちゃ参考にさせていただきました。
むしろほぼ使わせていただいたんじゃないか・・・というくらい参考にさせていただきました。
ありがとうございます。

https://qiita.com/shoito66/items/1b8f0ceed254f4f73f8e

#今回実装に組み込んだメーカー5社のホームページ
https://www.honda.co.jp/motor/?from=navi_header

https://www.yamaha-motor.co.jp/mc/

https://www1.suzuki.co.jp/motor/

https://www.kawasaki-motors.com/mc/

https://www.harley-davidson.com/jp/ja/products/bikes.html