こんにちは！小売業で働く一般男性こと、まぬるです。
前回の記事はこちら https://qiita.com/dhssk2026/items/02b91235cbb1429e9b5e
今回は初めて画像判別ができるアプリを作ってみました！
商品間違えを防ぎたい
私の職場はスーパーの店内で肉を加工してパックし売場にお出ししています。なんと商品の品番を入力し、機械にセットすることでラップして値札を印刷し貼ってくれる機械があり（オートパッカー）日々それを使っているわけですが・・・
たまに品番や商品自体を間違えて違う商品としてラップしてしまうことがあるのです。大抵は売場へ出す前に他の人が見て気がつくのですが、万が一値札と違う商品が売場に出てしまったら信用問題になります。
そこでパックする前に出そうとしている商品が正しいかチェックできたらなと思い作ってみました。
完成品
使用ツール
・Teachable Machine（https://teachablemachine.withgoogle.com/）
・CodePen（https://codepen.io/your-work）
・コードを書いてもらう生成AI（今回copilot）
Teachable Machineに学習させる
まずはTeachable MachineのWebサイトへ、今回は画像を識別したいので画像プロジェクトから標準画像モデルを選択。
進んでいくと名前を入力するところと撮影ボタンがあるので名前を編集します。今回鶏肉を識別したいので「むねにく」「ももにく」「かたにく」と三つのボックスを作ります。
webカメラを用いて撮影します。「長押しで録画」というボタンがありますが単押しだと写真が撮影できます。だいたい学習に必要なのは最低100枚なので100枚撮ります。
３個揃ったら「トレーニング」というボタンを押します。そうすると機械学習されます。学習が終了したら右側にプレビュー画面が表示されるので、実際に対象の商品を映してみて、正しく判別できているか確認してみます。うまくできていれば、右上のモデルをエクスポートをクリックします。
「モデルをアップロード」とあるので、アップロードすると共有可能なリンクにURLが表示されます。このURLはコピーしておいてください。
ロゴがある左上のメニューから、「ドライブにプロジェクトを保存」もしくは「プロジェクトをファイルとしてダウンロード」して、プロジェクトの保存ができます。googleドライブにも保存ができます。保存しておかないと改修もできないので
これでTeachable Machineの処理は完了です。
CodePenで画像を判別させる！！
ここではcodepenでカメラを起動させ撮影と判別を行い名前を表示させます。
HTML、CSS、JavaScript（JS）の3つに分かれています。HTMLはWEBページを作成するための言語、CSSはレイアウトをデザインするための言語Webページに「動的な機能」や「インタラクティブな表現」を追加するために使用されるログラミング言語です。
copilotで「Teachable Machineとcodepenを使って画像判別ができるアプリを作りたい。作業場にPCは持ちもめないのでスマホで動かす前提でコード書いて」と言ってみたところ以下のコードになりました。
See the Pen 識別 by 佐藤数馬 (@lxrzfmek-the-encoder) on CodePen.
実際に写してみると？
見事にもも肉とちゃんと認識しています！（下スクロールするとみきれてしまう・・・）他のものもしっかり認識しました！
実際に職場で使ってみたところ、パートさん達からは関心してくれましたが常にこのアプリを起動させておくのか？似たような商品はたくさんあるからどうするのかというフィードバックをもらいました。確かに同じむね肉でも銘柄鶏とかもあるのでそこをどう識別させるかは課題になりそうです。
最後までご覧いただき、ありがとうございました！！