TeachableMachineを使い、「一般物品」「消耗品」に判別できる？
TeachableMachine codepenを使用して免税販売時に「一般物品」「消耗品」を
スマホカメラで写して判別できるようにしてみました。
スマホカメラで免税販売時の「一般物品」「消耗品」の判別ができるようにしてみた pic.twitter.com/EcHDAkiD7i
— 岡本一郎 (@okamoto0016) August 28, 2023
免税販売時の留意点
免税対応している店舗へ販売応援に行くと、「一般物品」と「消耗品」の区別
ができず、都度、スタッフに確認しなければいけなく手間がかかっていました。
また、店舗スタッフでも社歴の浅い方は、私と同じく「一般物品」と「消耗品」
の区別ができず、私と一緒に右往左往の状態でした。
今回、TeachableMachinを学び、スマホカメラで写すだけで区別できるのではと
思ったのが開発のきっかけです。
免税対象商品には、「一般物品」と「消耗品」に分けられます。
「消耗品」を販売する場合は、「消耗品」と「一般物品」を開封できない袋に
梱包する事が義務づけられています。
売場に「一般物品」と「消耗品」が混在しておりますので、目視にて区別・対応
する必要があり、「消耗品」であるにもかかわらず間違えて「一般物品」にて
対応する事案が発生しがちでした。
スマホカメラで写すだけで「一般物品」と「消耗品」が区別できれば、
このようなミスを撲滅できると考えました。
使用したツール
シンプルに2つのツールです。
・Teachable Machine
・CodePen
全体の流れ
① Teachable Machineで商品の画像と商品名と区分（一般物品 or 消耗品）を
登録します。画像は1つの商品に対して短時間に150枚以上記録してみました。
② Teachable Machineで作成したURLをスマートフォンで開くとCodePen上、
でスマートフォンのカメラで商品カテゴリー・一般物品 or 消耗品 が
表示できるようになります。
Teachable Machineの設定
Teachable MachineはGoogleが提供している機械学習のモデルが作成できる
サービスで「画像」「音声」「ポーズ」の3種類のモデルでAI認識が可能です。
今回のツールでは商品の「画像」を学習させます。
実際に売場をまわってサンプル商品を撮影しました。
商品 区別
キャップ 一般物品
カサ 一般物品
クリーム 消耗品
パターンとして「商品カテゴリー」「一般物品 or 消耗品」を登録しました。
サンプル画像の取込み
１）サンプル商品の画像を撮影していきます。
商品の写真は,表面・裏面・右側面・左側面等最低50枚ずつ登録します。
① 商品の表面
② 商品の裏面
③商品の右側面
④商品の左側面
２）サンプルの登録が終わったらこれらのサンプル写真をTeachable Machine AIに
学習させます。
画面の真ん中にモデルをトレーニングするというボタンがあるのでここを
押します。
ボタンを押してトレーニングが終わると右側にカメラの画像とその下にAIが
画像から判断した結果がパーセンテージが動きながら表示されます。
サンプルの商品どれかをカメラに映して精度高く判断できているか
チェックしました。
写真では右下の部分、（商品カテゴリー）クリーム・（区別）消耗品が
判定されています。表面や裏面、で試してみましたが、高い精度で
判定しました。
ここまでではパソコンのカメラの使用が前提ですので、商品をパソコン
まで持ってこないと活用できず現実的ではありません。
３）スマートフォンカメラで検索できるようにCodePenへ渡すためのTeachable
Machine設定の続きです。
正しく動いているチェックが終わったら、モデルをエクスポートするを
押します。
次のこの画面でモデルをアップロードするを押します。
真ん中くらいに共有可能なリンクがあるのでコードのp5.jsを選択します。
このp5.jsタブにある長いコードをこの後、CodePen設定で使用しますので
コピーしておきます。
CodePenの設定
CodePenはオンライン上でHTML、CSS、Javascriptを書くことができるサービスです。
今回はTeachable Machineとつなげ、スマートフォンカメラで商品を認識できるよう
にしてみました。
１）CodePenを開くと箱が3つ並んでいて左から「HTML」「CSS」「JS」と
並んでいます。使用するのは一番左の箱「HTML」部分です。
ここに先にコピーしておいたTeachable Machineの長いコードを
貼り付けます。
２）CodePenの右上にある四角いボタンを押します。
メニューの中から上から3つめ、FullPage Viewを押すとコード入力の画面が
非表示になります。
スマホにURLを送った後、スマホの画面でFullPage Viewを選択するとコード
が表示されている画面が非表示になります。
無事、スマホカメラで消耗品の判別ができました・・・。店舗スタッフにみてもらったら「これ便利！」と褒めて頂きましたが、「全部の商品を撮影するのは難しいわね」との課題も・・・。
今後の課題
今回はシステムの動きを勉強するため、すぐ役に立ちそうな免税販売時における
「一般物品 or 消耗品」 判別ツールを開発してみました。
Teachable Machineに画像を取り込むとその精度は高く充分実用に耐えると
感じました。
店舗スタッフの「全部の商品ｗｐ撮影すｒのは難しいわね」との課題を頂きましたので
相対的に数の少ない「消耗品」のみを判別し、それ以外の商品の場合を
「一般物品」として判別できるようにすれば、より実用に近く活用できるのでは
と思いました。
また、スマホカメラで写すときに、できればスマホ背面のカメラで写せればと
感じましたが、やり方がわからなかった点は、次回への課題と考えております。
以上、Teachable Machine、CodePenツールによるスマートフォンカメラで
免税販売時における「一般物品 or 消耗品」を自動で区別できるツール開発
の流れでした。
ありがとうございました。