こんにちは！
普段はネットスーパーの生鮮食品や加工品などを仕入れる現場で働くtanytomoです。
今回は Teachable Machine × Google Apps Script × Dify で、
「商品クレーム画像を分類＆回答案を自動作成」するプロトタイプを作ってみました。

なぜこの仕組みを作ろうと思ったのか？

普段、カスタマーセンターには毎日のようにお客さまから届いた商品に対するお申し出をいただきます。
内容は、
・カビが生えていた
・変色していた
・破損していた（押されていた）
・異物や虫の混入
・脂身が多かった
などさまざま。
そのたびに商品部へ情報共有したり「どう返答したらいいですか？」と相談の連絡が来たりしていました。
「あれ？日々お申し出の内容を見ていると生鮮食品のほとんどが上の5パターンに分類されるな！」と気づきました。
例えば、トマトで変色発生、玉ねぎで変色発生すればカスタマーセンターの方からすれば別物として扱われているはず。しかし、商品部のバイヤーからすればそれは「傷み」が起きていて、発生する原因は「熟しすぎた」「温度異常」という共通する物であることがあります。
つまり、バラバラの事象・原因と思われていた商品お申し出は実は共通の事象・原因と捉えて処理することができるはずです。

「これ、カスタマーセンター側で一次判定して返答案も作れたらもっと早くなるのでは？」

…そう考えて今回のプロジェクトを始めました。

現場で感じていた課題をまとめたら…

・クレーム内容を見ても、何の不良なのかカスタマーセンター側では即答できない
・過去事例を探しにくいので毎回ほぼゼロベースで文章作成
・返答には商品部の確認や知識を借りないといけないときがある → ボトルネック化
・結果、お客さまへの返答が遅くなる

今回作ったフロー

1.カスタマーセンターが品質不良画像をブラウザからアップロード
  ↓
2.Teachable Machineが不良種別を分類
  ↓
3.GAS経由でDify APIに送信
  ↓
4.Difyが返答案を3案生成
  ↓
5.生成結果をUIに即表示＋Googleスプレッドシートに記録
  ↓
6.商品部に案を確認してもらい、お客さまへ回答

Difyへのプロンプト内容
あなたは食品・日用品のクレーム対応を支援するネットスーパーのカスタマーセンター担当者です。
ユーザーから「品質不良画像」と「画像から分類された品質不良パターン」と「お客さまからのお申し出原文」が送られます。
これをもとに、お客さまへの返信案を3つ作成してください。

条件：
1. 想定される原因を簡潔に述べる
2. 再発防止策や倉庫保管方法への言及
3. 丁寧語で300文字以内

苦戦したポイント

今回ももちろん苦戦しました（笑）
ChatGPTとは本当に切っても切れない関係性になっていて、やり取りの嵐。
あなたがないとマジで何もできない私。うまくいかなくてマジでキレそうになる5秒前。

1.Teachable Machineのモデル読み込み

最初はCodePenで試しましたが、Teachable Machine Image の読み込み順や失敗が続出。
処理の順番を固定して解決しました。

2.Power Automate断念

HTTPトリガーが使えない環境だったので、Dify APIをGASから直接呼び出す構成に変更。
結果的に構成がシンプルになり、安定性も向上。

3.APIキーの安全管理

フロントに直書きすると誰でも見えてしまうため、必ずGAS側に保持。
フロントからはGASのdoPost経由で安全に送信するようにしました。

4.判定結果のUI表示

スプレッドシート保存だけでなく、カスタマーセンター担当者が即時に案を見られるようUIにも返答案を反映。
ボタンを押してから返答を待つ間に画面に何も変化がないと「裏で動いているのかわからない」という不安にかられる性分なので…

実際の画面イメージ

1分36秒くらいの動画です。簡単に動画編集しました。

得られる効果

・カスタマーセンターが一次判定可能に → 商品部への依頼が簡潔に
・返答案の自動化 → 文章作成時間の短縮
・商品部の負担軽減 → 確認・修正のみ
・ナレッジ蓄積 → スプレッドシートで過去事例検索可能
・対応スピード向上 → お客さま満足度UP

まとめ

「まずは動くものを作って現場で試す」
これが本当に大事だと再確認しました。そして、可能な限りシンプルに。

今回のプロトタイプは、
・無料ツール（TM、GAS）
・外部AIサービス（Dify）
・ブラウザだけで完結するUI
というシンプル構成ながら、十分に現場課題を解消できるポテンシャルを持っています。