Teachable Machine×CodePenで商品検索と鮮度管理のwebアプリを作成

こんにちは
スーパーの店員をしていますおじちゃんです。
自己紹介は↓

https://note.com/turimeijin/n/ne8205190e1d4?from=notice

今回は**Teachable MachineとCodePenの力を借りて＜野菜・果物の商品名検索と鮮度管理webアプリ＞**の作成に取り組んでみました。

# **取り組みの背景**



今回は先日、実際に合った事例をもとにプロトタイプを作成していきます。

キウイを買ったお客様がいました。
キウイにはさまざまな種類があり購入したのは中身が赤い**レッドキウイ**でした。
しかしながらそのお客様はキウイと言えば中身が緑のものしか知りません。
そこでお店に電話します。
「キウイを買ったけど中が緑じゃなくて赤い！これは腐っているのか？」

電話を受けたのが入社２年目の若手男性社員のBさん。
部門外のキウイについては全く知識がない。
夜だったので専門知識のある従業員も帰宅した後でした。
そこで彼はそうだ、キウイは緑だ！「お客様それは腐っています！」と答えてしまいました。

正しい回答ができなかったことに彼は落ち込みました。

**商品の名前と鮮度を見極めるアプリがあれば！**

そこで作成してみたのがこちらです。

# **完成したものはこちら**

★カビの生えてしまったキウイをアプリで撮影すると！
![スクリーンショット 2024-06-20 201459.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/50482e60-abe0-2bf3-9929-314702201bac.png)

下記のアプリに腐ったキウイです！と判定されます。
これは販売できませんね。売場から撤去しましょう！
👇
![スクリーンショット 2024-06-20 192904.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/ff937fb9-3780-b5d6-4038-8d20b8292ebd.png)

同様にレッドキウイを撮影してみます。
👇
![スクリーンショット 2024-06-20 202424.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/21bbd561-6e87-69bb-b84d-2d2b22b9449f.png)
👇
![スクリーンショット 2024-06-20 192926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/95d11dec-1fa7-b0d8-50be-22d996fe7d37.png)
はい！ちゃんとレッドキウイと認識してくれました！。
傷んでいない、鮮度の良いレッドキウイですね！


# **今回使用したツール**

★Teachable Machine
★CodePen

# ウェブアプリ作成までの流れ
**⓵Teachable Machineに機械学習をさせる。**
まずは[サイト](https://teachablemachine.withgoogle.com/)にアクセス

![スクリーンショット 2024-06-22 153738.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/de75c046-bc05-e00d-f439-852fc447e526.png)


👇
使ってみる→画像プロジェクト→標準の画像モデルの順にクリックする。

::: note info
今回はキウイ　鮮度不良のキウイ　レッドキウイ　鮮度不良のレッドキウイ
ピーマン　たまねぎ　しいたけ　で検証しました。
:::

👇
![スクリーンショット 2024-06-20 205638.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/83b953cb-3580-05b0-7970-e8fb5f5e6a4f.png)
👇
**これで多くのサンプルから商品名や状態を選別する作業が終わりました。**
うまく機械学習できたか検証します。

ピーマンで試してみましょう！
![スクリーンショット 2024-06-20 193421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/36a85183-632d-235f-0c46-24a9f31a9500.png)
８８％の確率でこれはピーマンです。成功しました。
うまくできましたので次に進みましょう！

**②ウェブアプリを作成します。**

![スクリーンショット 2024-06-20 211255.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/eb9a4b8f-ebf9-2e41-8011-39f214220e6c.png)

👇
![スクリーンショット 2024-06-20 211546.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/cf72a2e4-4c4e-310b-c038-03c86db1c97d.png)
👇
 **CodePenの[テンプレート](https://codepen.io/pen/?template=XWgNxmb)を準備します。**


 
 

 
 ![スクリーンショット 2024-06-20 213454.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/a05f3b2d-8d4c-bafe-85af-4be1488f74e6.png)
タイトル変更/モデルURLの貼り付け
![スクリーンショット 2024-06-20 214445.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3775188/a9da22c7-0e40-67d7-6277-b51d8356d57e.png)

これで完成です！

# **実際に利用してみました！**
実際に職場で様々な担当の方に利用してもらった感想です。

●すごいです！こんなものが個人で短時間作成できるなんてすごいです！。
●魚屋バージョンも作ってよ！ヒラメ、カレイ、サーモン、マスなどで。
●色々可能性が拡がるね！社内で課題となっているラベルの貼り間違えにも使えそうだね！。
●色々な物と掛け合わせれば写真撮影するだけで発注実績とか販売実績も出せるのでは？。
●お客様視点でレシピが返答されれば嬉しいです。
●お客視点でも鮮度が判るのは、助かります。結構主婦でも解ってないです。
●今月、娘の幼稚園で野菜当てゲームしました。ゲームにも使えます！。
ただ答えを言うより携帯で撮影してごらん！なんて楽しめますよ。
●ネットスーパー担当としてはピッキングしたものに誤りがないかのチェックに繋がります。
●鮮度チェック担当としては、人の目に頼りすぎないので個人差が出ず、説得力があると思う。
●スポーツの判定＜VR＞に使えそうですね！。

と業務でも業務以外についても多くの感想をいただけました。

::: note
infoTeachable Machineでは機械学習させる工程が容易でたくさんのサンプルを作成できます。
強みを生かしてほかの食品にも波及させて、どんどん商品検索と鮮度管理の種類を増やしていきたいと思いました。
::: 
職場のメンバーのコメントにもあるように今後も社内の課題解決を実現するアプリを作成してまいります。
特にどの業種も人不足に悩む中で手助けとなる、チェック機能の部分で大きく活躍してくれそうです。