「このクーポンは使える？」AIが即座に答えるクーポン判別アプリを作ってみた！

1週間チャレンジ第2弾！
前回は1週間でLINE Botを作成してみました。

今回は、AIを利用した業務改善アプリを1週間で作成してみました。

1週間でできたAIアプリがこちら

クーポンが使用可能かどうか判断してくれるアプリができた☺️
紙でもスマホの画面でも判別できた！
背景のたくさんの「ひらめき店員さん」は、日頃こんなに問い合わせがあることを示しています笑#protoout #teachablemachine pic.twitter.com/lISHxLNtBW

— Narumi Ishii (@Rs_n_ishii) July 18, 2023

なぜ「クーポンの判別」アプリを作成しようと思ったのか

私が働く会社は数百店舗をフランチャイズ運営・管理する会社です。
毎月多数のクーポンがいろいろな媒体から発信され、店舗からは「このクーポンは使えるの？」「このクーポンは何？」等の問い合わせが月に数十件寄せられます。
特に管理している店舗数が多い担当者にはより多くの連絡が寄せられます…。

現在発行されているクーポンは21種類…
電話で聞かれてもすぐに答えられません！！！
そこでAIの力を借りようと思い立ちました！

作成手順

それでは作り方を説明します！
今回は実際のクーポンではなく、サンプルのクーポン5種類を用意し、判別できるように学習させました。

用意したクーポンと条件

①②は「使用可能　利用期限2023年」・・・紙のタイプのクーポン
③は「使用不可」・・・紙のタイプ。②と色味が似ているものを用意
④⑤は「使用可能　利用期限なし」・・・スマホの画面提示

使ったもの

• Teachable Machine　
  ⇒独自の画像、音声、ポーズを認識するようコンピュータをトレーニングします。
• CodePen
  ⇒ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスです。

たったこれだけです！想像以上に簡単でした！

Teachable Macineの学習

まずは各クーポンの写真を撮影し、学習データを作成します。
項目を設定し、各クーポン100枚ずつ程度撮影します。
100枚も？！と思いますが、パソコンのカメラで連写ができるのであっという間です。

似ている色のクーポンはたくさんいろんな角度で撮影したほうがより精度が高まりました。

作成したモデルをエクスポートをして、
p5.jsの方のタブを選択、コードをコピーします。

CodePenの設定

アカウントを作成し、HTMLの部分に先ほどコピーしたコードを貼り付けます！
そして少し待つと…下の画面にカメラと判定結果が出てきます。
ほぼこれで完成です。

リンクをコピーすればスマホでもPCでも使用できました！

実際のコードはこちらです。

See the Pen クーポン判別 by NarumiIshii (@NarumiIshii) on CodePen.

こちらの記事を参考に作成しました。
fumiyaさんの記事
CodePenの使い方(知らない人向け)

作成してみて

正直びっくりするくらい簡単で驚きました。
AIって何かわからないけどすごいもの、くらいに思っていたので今回の挑戦でとても身近に感じました！

また、実際に職場の人に見てもらったところ、「高齢の店舗スタッフでも簡単に使えるのがとてもいい！！」と言ってもらえました！

今回はCodePenへの連携で終わりましたが、LINEへの連携なども可能らしいので、もっと実用的な挑戦をしてみたいと思います。