皆さん、こんにちは！
私は、小規模ですが食品の小売業を運営をしているTWIN-LEAFです
さてさて、今回は増加するインバウンド需要に対応するアプリを作ってみたのでご紹介いたします！
海外旅行に行った際、食品を買うのって割とハードル高いときありませんか？
自分のアレルギー成分が入っているのか？
日本に持ち帰ってはいけない、お肉などの食品が含まれていないか？などなど、、、
それは外国人も日本で旅行するうえで同じ思いを抱えています。
特にここ最近のインバウンド需要の高まりで増え続ける外国人旅行客、私が運営しているお店は特にアジアと欧米のお客さまが多数来店されます
宗教やビーガン食の選択は日本は少ないと言われているので、余計大変かもしれません。
お店の商品の調理方法や成分をスタッフに聞いたり、Google レンズで翻訳して調べたり、購入まで中々大変な思いをされていることをお見掛けします。
そんなお客さまを助けたい！
この想いをもとに商品情報を簡単に翻訳できるアプリを作成しました！
🧭 アプリの概要
本記事で紹介するアプリは、店舗で扱う商品の商品コードを入力すると、その商品の情報を英語・中国語（簡体字）・韓国語に自動翻訳して出力する業務支援ツールです。
🎯 解決できる課題
- 商品説明の外国語対応が属人化しており、即時対応が難しい
- 観光客の増加により、翻訳対応のニーズが急増
- 手作業での翻訳・POP作成にかかる時間を削減したい
🔧 使用したもの
👀 利用イメージ
- アプリ上に商品コード（例：40625）を入力
- Googleスプレッドシート内の商品データを取得
- 以下の情報を、多言語で整形して返答：
- 商品説明
- 原材料・成分
- 栄養成分
- 商品説明（別欄）
- メーカーまたはブランド名
🧑🍳 出力フォーマット例（英・中・韓）
完成形
Dify
Make
この2つを今回は使用していきます。
※最初、LLMはChatGPTを使用していましたが、クレジット不足でGeminiに途中変更しました。
Makeの用意
まずは、Makeから作成
今回はgoogleのスプレッドシートと繋ぎます。
方法はこちらの記事を参考にしました。
AddからWebhookモジュールを選択、Dify連携用としてAPI keyをメモしておきます。
商品情報の載ったスプレッドシートも用意
Google Sheetsのモジュールと繋げて内容を入れていきます
Google SheetsのモジュールをArray aggregaterと接続
こちらも内容を設定していきます
再度に返す用のWebhookを接続
内容はこのように設定しました
正直、Array aggregaterとWebhookの内容がなぜこのように設定しなければいけないかが不明です、、。
作成中に見ていた記事の内容そのままで進んでいます、、。
もっと、勉強せねばと思いますが、できてはいるはずなのでこれでMakeの設定は一旦終わり！
Difyの用意
今回は、チャットフローで作成しました。
最初に開始の入力フィールドを編集していきます
次にHTTPリクエストのモジュールと繋ぎ、先ほど設定したMakeのWebhookを入力します。
ここでChatGPT登場
LLMに入れるテンプレートを提案してもらしました！
提案されたものがこちら
📘 多言語翻訳用のSystemプロンプト
あなたは多言語対応に優れたカスタマーサポートAIです。
以下の日本語のデータをもとに、英語・中国語（簡体字）・韓国語に翻訳してください：
- 商品説明: {{db.商品説明}}
- 原材料・成分: {{db.原材料・成分}}
- 栄養成分: {{db.栄養成分}}
- 商品説明（別欄）: {{db.商品説明（別欄）}}
- メーカーまたはブランド: {{db.メーカーまたはブランド}}
出力形式は以下のとおりです：
【英語】
・Product Description: ...
・Ingredients: ...
・Nutrition Facts: ...
・Additional Description: ...
・Brand: ...
【中国語】
・产品说明：...
・成分：...
・营养成分：...
・补充说明：...
・品牌：...
【韓国語】
・제품 설명: ...
・성분: ...
・영양 성분: ...
・추가 설명: ...
・브랜드: ...
入れてみましたが、ここでエラーが発生
プロンプトに変数が入力必要とのこと
プロンプトに下記を追加して、文章も追加しました。
ユーザーの問い合わせ：q
コンテキスト：コンテキスト
変更したテキストはこちら
あなたは多言語対応に優れたカスタマーサポートAIです。ユーザーがB列の{{商品コード}}を入力してきたら、英語・中国語（簡体字）・韓国語にで下記の情報を翻訳して返してください。
- 商品説明: {{商品説明}}
- 原材料・成分: {{原材料}}
- 栄養成分: {{栄養成分}}
- 商品説明（別欄）: {{商品説明2}}
- メーカーまたはブランド: {{メーカーまたはブランド}}
出力形式は以下のとおりです：
【英語】
・Product Description: ...
・Ingredients: ...
・Nutrition Facts: ...
・Additional Description: ...
・Brand: ...
【中国語】
・产品说明：...
・成分：...
・营养成分：...
・补充说明：...
・品牌：...
【韓国語】
・제품 설명: ...
・성분: ...
・영양 성분: ...
・추가 설명: ...
・브랜드: ...
最後に終了モジュールを繋げて出力変数をLLM/textstringにします。
実行！
返ってきました！
実際動かしてみたのはこんな感じ。
できなかったこと・改善したい点
商品コードを打ち込むのはめんどくさいので、本当はGoogle レンズのように物をカメラで写すと、商品を判別してくれる仕様にしたかった
一応、再翻訳して何となくあってそうと思いましたが、確証はなし、、。
正しい翻訳がされているか不安です。
この中では1回しか登場してませんが、画像の判別の件から色々と相談しました。
私のプロンプトが悪かったので、期待できる回答が得られなかったのが正直なところ、、
途中、Difyの初心者向けYoutubeみたりして学びました。
終わりに
今回は、ChatGPTがうまく活用できなかったことが大きな反省。
もっとうまく相談できていれば、画像認識のところまで進んだのでは？と思っています。
ChatGPTの回答で専門用語が出て来た際に、さらに質問してもっと深掘りできれば解決できたのかもしれないです。
ただ、店舗の課題解決に繋がりそうなアプリを動くまで作成できたのは大きな一歩だと思います！
これからアップデートしていきます！