はじめに
こんにちは!私はスーパーの物流部門で働いているものです。
皆さんはスーパーで多いクレームが何か知っていますでしょうか。
それは、野菜や果物の鮮度に関するクレームです。
その為、スーパーでは担当者が巡回パトロールして、鮮度の落ちた商品を確認していますが、商品を1つ1つ見ていくのは大変で時間も掛かります(;´･ω･)
もっと簡単に鮮度の良し悪しを確認できる方法は無いのか。
今回、Teachable Machineで良い野菜と悪い野菜の写真を学習させておき、スマホを通して良い野菜と悪い野菜を判定できるアプリを作ってみました。
使ったサービス
下記のサービスを使用しました。
◆Teachable Machine
◆CodePen
出来上がり
スマホで野菜をかざすとよい野菜か、悪い野菜かを判定します。
— 白川圭司 (@KTNZrtzqWVRmEjI) September 24, 2022
作り方
1.Teachable Machineを使用して、良い野菜と悪い野菜を覚えさせます。
今回は、トマト、レタス、キュウリ、キャベツ、ジャガイモ、玉ねぎ 計6種類の野菜の良い画像と悪い画像を学習しました。
2.パソコンのカメラで判定できることを確認して、モデルをエクスポートします。
エクスポートによって、URLとプログラミング言語(javascript、p5.js)が自動で生成されます。
3.エクスポートされたp5.jsを使用して、CodePenのHTMLにコピペします。パソコンのカメラを介して、正しく判定されている事を確認します。
See the Pen 野菜判定用Teachable Machine4 by 白川圭司 (@ktnzrtzqwvrmeji) on CodePen.
4.このままだと素っ気ないので、コードを加筆します。
・見出しタグ（h1/h2/h3/h4/h5/h6）を使用してタイトルと説明を付けます。
・divタグで括られたコード名にも加筆します。
・CSSに加筆して、カメラの位置をセンターにします。
See the Pen 野菜判定Teachable Machine2 by 白川圭司 (@ktnzrtzqwvrmeji) on CodePen.
5.「ChangeView」ボタンで「FullPageView」を選択し、コード編集部分を隠して出来上がり。URLをスマホで開けば、屋外でも使用できます。
おわりに
TeachableMachineの学習では写真画像を使用しましたが、データ量が少なかった事は反省です。
その影響で、野菜の角度確度や向き、光の当たり方によっては、正しく判定されない事がありますので、改善が必要です(;´Д｀)
また、時間を費やして調べたにも関わらず、次の点が出来なかったのは心残りです(;´･ω･)
・アウトカメラで判定できるようにしたかったが、判定結果の文字が消えてしまった事
・ビデオ画像からデータを残せるようできなかった事
やりたい事を実現する為には、もっと色々と勉強する必要があると感じました。
あと、あまり説明せずに、他の人に使って頂いたのですが、野菜の品目が限定されていることから、説明も追加したいと必要と考えています。
最後に、お店で展開する場合は、店内の監視カメラを通して商品の良し悪しを自動で判定すると共に、担当者にスマホやタブレットで売り場のどこにその商品があるか、画像を見せて通知できれば、実用的になるのではないかと考えています。
あと、物流センターに入ってきた商品に対しても、店舗に配送する前に、同様のことができるのではないかと考えています。