Teachable Machineを使って間違えやすい野菜を見極めてもらった

# 間違えやすい野菜をTeachable Machineに見極めてもらいたい
　私は小売業でネット販売の運営を仕事としております。今回はTeachable Machineを使って、ネットスーパーでお客さまごとに仕分けする際に間違えやすい野菜のパターンのトップ３を見極めてもらうプログラム作成に挑戦しました。

# 1.なぜこの野菜に見極めに必要なのか
　ネットスーパーの新人が間違えやすい野菜をシステムに確認して答えてもらえると大きなサポートとなります。出荷時間が決められている中、ネットスーパーのお客さまのご注文ごとの商品仕分けで間違えやすいのが、 1番目にらと小ねぎ、 2番目サニーレタスとグリーンリーフ、 3番目じゃがいも（だんしゃく）とじゃがいも（きたあかり）です。売場からお客さまがご注文した商品を集める時は売場のPOPがついているのでほぼ間違えませんが、お客さまごとに商品を仕分けする時は作業場所の広さの関係上、POPはついていない場所にまとめて置くことと、袋に商品名が書いていない場合もあります。作業場所では売場と違い、商品を見極めるヒントが減るので見間違えが発生します。いずれの商品もJANコードが産地で違ったり、バラ売りということでシステム対応が難しい商品群のため、画像認識の力を使って間違えを減らしたいと思います。
## 2.Teachable Machineでの制作
にら、小ねぎ、サニーレタス、クリーンリーフ、じゃがいも（だんしゃく）、じゃがいも（きたあかり）をTeachable Machineに画像記憶させます。
それぞれの野菜に応じて特徴となる色合い、形状の部分を念入りに記憶させました。
例としてサニーレタス、グリーンリーフの画像を掲載しました。見分けのポイントは葉っぱ色の違いですが、商品は袋に入って濡れており見えずらくなっており見間違えそうになります。

サニーレタスの画像
![サニーレタス.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2624365/7a1dc102-61b8-fed3-a70a-4e7a0147a583.jpeg)

グリーンリーフの画像
![グリーンリーフ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2624365/f1ae6aea-4ae3-0304-79c6-3766d43dcab5.jpeg)


Teachable Machineで作成した画像
小ねぎをパソコンカメラに向けると小ねぎという正しい判定結果で表示が出ています。
![野菜判定.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2624365/7e1e6ccf-90bf-e5d5-8029-cfd8af5abb13.jpeg)

## CodePenでの制作
スマートフォンで動くようにCodePenを使ってTeachable Machineで作ったコードをHTMLにしてからURLをつくりました。スマートフォンで動かした結果は、[〇]じゃがいも（きたあかり）[〇]グリーンリーフ[△]小ねぎの結果となりました。

<iframe width="320" height="434" src="https://www.youtube.com/embed/mIias5aFMgE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

【URL】

https://teachablemachine.withgoogle.com/models/vDUc_tSNc/

<div>Teachable Machine Image Model - p5.js and ml5.js</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script type="text/javascript">
  // Classifier Variable
  let classifier;
  // Model URL
  let imageModelURL = 'https://teachablemachine.withgoogle.com/models/vDUc_tSNc/';
  
  // Video
  let video;
  let flippedVideo;
  // To store the classification
  let label = "";

  // Load the model first
  function preload() {
    classifier = ml5.imageClassifier(imageModelURL + 'model.json');
  }

  function setup() {
    createCanvas(320, 260);
    // Create the video
    video = createCapture(VIDEO);
    video.size(320, 240);
    video.hide();

    flippedVideo = ml5.flipImage(video);
    // Start classifying
    classifyVideo();
  }

  function draw() {
    background(0);
    // Draw the video
    image(flippedVideo, 0, 0);

    // Draw the label
    fill(255);
    textSize(16);
    textAlign(CENTER);
    text(label, width / 2, height - 4);
  }

  // Get a prediction for the current video frame
  function classifyVideo() {
    flippedVideo = ml5.flipImage(video)
    classifier.classify(flippedVideo, gotResult);
    flippedVideo.remove();

  }

  // When we get a result
  function gotResult(error, results) {
    // If there is an error
    if (error) {
      console.error(error);
      return;
    }
    // The results are in an array ordered by confidence.
    // console.log(results[0]);
    label = results[0].label;
    // Classifiy again!
    classifyVideo();
  }
</script>

### 3.筆者の後記
今回はTeachable MachineとCodePenを使って、ネットスーパーで間違えやすいにら、小ねぎ、サニーレタス、クリーンリーフ、じゃがいも（だんしゃく）、じゃがいも（きたあかり）の野菜を記憶して間違わないように判定してもらうプログラムを作成しました。小ねぎ、にらはスマートフォンのカメラを使った段階で正確性が下がりました。正確性を高めるには覚えさせる人が野菜の特徴を理解して見極めるポイントを記憶させないと正確性が上がらないとを感じました。今後は商品群、仕様用途を広げて新人のサポートになるように活用していきたいと思います。