わんちゃんに逃げられる私、、わんちゃんと仲良くなりたい！を叶えてくれるアプリを作りました。

わんちゃんと戯れたいだけなのに、逃げられる私

私は飼っていませんが、わんちゃんが大好きです。
しかし、完全に一方的な片思い。街中で会うわんちゃんみんなが、私を避けていくのです。
なぜでしょう。接し方が悪いのでしょうか。
それとも犬猿の仲という諺の通り、猿の遺伝子を残しすぎているのでしょうか。後者の方だったら諦めますが、接し方なら改められるはず！
ということで、犬種を判別して、接し方を教えてくれるアプリを作成しました。

出来上がったアプリがこちら

スマホで使用することを想定して作成しました。
わんちゃんを発見したら、わんちゃんを発見ボタンを押してください。
推論結果と目の前のわんちゃんが一致していたら、性格・接し方欄を参考に、わんちゃんと戯れましょう。
推論が外れていたら、もう一回！ボタンを押せば再度読み込み、推論を行います。

環境

Teachable Machine
ml5.js
Vue.js
Bootstrap
Codepen

解説

至ってシンプルな構造になっています。

See the Pen ワンダフルアプリ by Masahiro Nishiguchi (@Masaedge) on CodePen.

①Teachable Machineでわんちゃんを分類できるように設定。
今回はペットとして人気な５種（トイプードル、チワワ、柴犬、ポメラニアン、ミニチュアダックスフンド）を選別してくれるモデルを作成しました。

②Vue.jsでモデルを読み込み、カメラで撮影したわんちゃんを推論
コードは以下の部分。

 async start() {
      //項目を初期化
      this.messe ='';
      this.messe1='';
      this.messe2='';
      this.messe3='';
      this.loading='';
      this.dog='';
      this.img_name='';
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: { width: 400, height: 250, facingMode: 'environment' },
        // フロントカメラ優先 { facingMode: "user" }
        // リアカメラ優先 { facingMode: "environment" }
    });
    console.log("スタート");
    this.loading='わんちゃんを読み込み中…';
  
  // 「id="webcam"」となっているパーツ（videoタグ）を取得
    const video = document.getElementById('webcam');
  
  // videoにカメラ映像ストリームをセット
    video.srcObject = stream;
  
   // Googleのサーバーにアップロードした自作モデルを読み込みにいきます
      this.imageModelURL = 'https://teachablemachine.withgoogle.com/models/jLLyXr_Rv/';
      const classifier = ml5.imageClassifier(this.imageModelURL + 'model.json', video, () => {
        // 読み込みが完了次第ここが実行されます
        console.log('モデルの読み込みが完了しました');
        this.loop(classifier);
      });
    },

③推論結果に応じてわんちゃんの正確、接し方を記載
最後に正確・接し方を記載し、Bootstrapで体裁を整えれば完成。

使ってみた感想

トイプードル（正確にはマルプー）を飼っている知人にアプリを使用してもらったところ、無事トイプードルと判定してくれたようです。
これでわんちゃんとのワンダフルライフを送れるはずですね！！
これでダメなら自分の中にいる猿の遺伝子を排除しようと思います！！