LINE + 生成AI + Difyでレシートを読み取って家計簿をつける

## はじめに

いとうと申します。
都内の会社でエンジニアをしています。
お世話になっております。

この記事は、たまたま先日Xで見かけた、Ichikawaさんの「【Difyハンズオン】LINEとOpenAIで作る次世代の名刺管理システム」を参考に作成しました。
https://note.com/jun_ichikawa/n/nf154656e80bf#443121db-a2f3-4e43-8892-58568a5013e3
[動画](https://www.youtube.com/watch?v=Uqp0Q6KzFQ8)も拝見しましたが非常にわかりやすく、且つ有用でした。この場を借りてお礼申し上げます。

読み取り対象を名刺→レシートに変え、
使用モデルをOpen AI→Gemini に変え、
Google フォームをすっ飛ばしてスプシに書くなどの改造をしました。

####  Open AI と Gemini のベンチマーク

以下の3種類のモデルで、レシートから合計金額を読み取りにかかる時間を測ったところ、Gemini 1.5 FLashが一番速かったため、使うことにしました。
 
| モデル名 | レスポンスタイム | 使用トークン数 |
|:-----------|------------:|:------------:|
|gpt-4o-mini|4.128s|1015 Tokens|
|Gemini 1.5 Pro |3.747s |286 Tokens|
|**Gemini 1.5 FLash**| **1.692s** |288 Tokens|

他にもOpenAI o1 や Gemini2.0 も試してみたかったのですが、Difyの仕様？でJsonフォーマットの出力設定ができなかったので、次回以降に持ち越します。

### 仕様

1. LINE アプリの「レシート管理Bot」のトーク画面で、スーパーのレシートの写真を送ると、ごちゃっとした中から生成AIが合計金額を探して読み取ってくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/24e4e0c7-76c2-71aa-3e57-f787d1de96b1.png)

<br>

2.Google スプレッドシートに記入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/e3fcd98c-66bd-2ad8-26bd-66a25df42c6a.png)

3.ユーザーに金額とGoogle スプレッドシートのURLを送るので、もしまちがってたらスマホやPCから編集できます。



## 作り方

### 使うもの

- Gemini API Key
- LINE アプリ
- LINE Developers 
- Dify 
- Google Apps Script
- Google スプレッドシート

### 1. Gemini API Key の取得

- [Google AI for Developers](https://ai.google.dev/) にログイン or アカウント作成
- [説明ページ](https://ai.google.dev/gemini-api/docs/api-key?hl=ja) >「Gemini API キーを取得する」> 「Get API Key」＞「キー APIキーを作成」
- 払い出されたAPIキーをメモっておく

#### ※ Gemini って無料で使えるの？
 [Geminiの費用](https://ai.google.dev/pricing?hl=ja#1_5flash)を見ると、無料枠と従量課金枠があるようです。アカウント作成当初などの無料期間を活用すると良いでしょう。


### 2. Difyの設定

#### まずグランドメニューで Gemini のAPI Keyを設定

- [Dify](https://cloud.dify.ai/) にログイン or アカウント作成 
- [ダッシュボード](https://cloud.dify.ai/apps)の右上の「Dify」> 設定 > モデルプロバイダー > Gemini 
- 1で取得した Gemini API Keyを入力

#### ワークフローの作成


- DifyのワークフローはDSLの形でエキスポート/インポートできるので、自分が作ったdify_receipt.ymlを[こちらからダウンロードしてください](https://github.com/sitopp/line_dify_receipt/blob/main/dify_receipt.yml) 

- Difyの[ダッシュボード](https://cloud.dify.ai/apps) > 「DSLファイルをインポート」＞ dify_receipt.ymlをアップロードしてください

#### 検証

- スマホでレシートの写真を撮っておく
    - 例：<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/841ce422-a189-ad47-7457-ceb3dc3678a7.png" width=30%>

- 「実行」 > 「ローカルアップロード」で写真をアップ > 「実行を開始」
- 「結果」に合計金額を含んだJsonが表示されればOK
    - 例：![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/41d40743-fe7a-268e-3b34-1156d4ba56fc.png)


#### 公開

- 右上の「公開する」＞ 「公開」を実施

- 続けて、同じプルダウンの中にある「APIリファレンスにアクセス」をクリック
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/8ea95358-1dbe-649e-b83e-d68acd147988.png)

- 開いたページ右上の「APIキー」＞「新しいシークレットキーを作成」
- このAPIキーは 後で Google Apps Scriptで使うのでメモっておく


### 2. Google スプレッドシートを作成

- [Google スプレッドシート](https://docs.google.com/spreadsheets/)にアクセスし、「＋ 空白のスプレッドシート」をクリックして空のシートを作成
- シート名：list
- 3つの項目を設定
    - A列：タイムスタンプ
    - B列：金額
    - C列：メモ
    A,Bは必須。Cはなくても良いし、D以降も追加しても良い。
- スプレッドシート名：「お買物レシート」など
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/110aa2ea-5d29-595b-f50e-4ad36d1b7e2b.png)


- 右上の「共有」から
    - 共有 > 一般的なアクセス > リンクを知っている人全員 > 編集者 > 完了 

### 3. LINE の設定

- [LINE Developers](https://developers.line.biz/)にアクセスし、新規プロバイダとチャネルを作成

    - チャネル種類：「Messaging API」
    - LINE公式アカウント名：「レシート管理Bot」
    - メールアドレス：自分のメアド
    - 業種：個人 > 個人（その他）
    - チャネルができたら、[LINE Developers](https://developers.line.biz/)に戻る
    - 「レシート管理Bot」を開き、「Messaging API設定」＞「チャネルアクセストークン（長期）」を発行。後で使うのでメモしておく

- [LINE Official Account Manager](https://manager.line.biz/)で、「レシート管理Bot」を選択
    - 左枠の「応答設定」＞「チャット」と「Webhook」をオン
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/5ebd63d2-af97-d1f3-76c2-b543976f7fc8.png)


### 4. Google Apps Scriptを作成

#### コードの編集

- [Apps Script](https://script.google.com/) > 新しいプロジェクト > コード.gsのエディタが開く
![スクリーンショット 2024-12-23 1.12.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/9a8a3264-efca-220b-5d8e-ef274a1aef10.png)

- [こちらからGASのコードをゲットして](https://github.com/sitopp/line_dify_receipt/blob/main/gas_receipt.gs) 、上図の赤い枠の部分を消して上書きする
    
#### スクリプトプロパティを設定
- Google Apps Scriptの画面左側、歯車アイコンをクリック
- 「スクリプトのプロパティ」セクションで「スクリプト プロパティを追加」をクリックして、3つの項目を作る
    - 1個目
        - プロパティ： LINE_ACCESS_TOKEN
        - 値：先ほどLINE Developersで取得したアクセストークン
    - 2個目
        - プロパティ： DIFY_API_KEY
        - 値：先ほどDifyで取得したAPIキーを入力 
    - 3個目
        - プロパティ： RESULT_SHEET_ID
        - 値：先ほど作成したGoogle スプレッドシートのURL「ttps://docs.google.com/spreadsheets/d/★★★/edit?gid=0#gid=0」の★★★の部分

    - 「スクリプトのプロパティを保存」をクリック


#### デプロイ

- 「無題のプロジェクト」 を「レシート管理」等の分かりやすい名前に書き換える

- デプロイ > 一番上の「新しいデプロイ」を選択
    -「種類の選択」の右の歯車をクリックし、「ウェブアプリ」を選択
    -「説明」は任意で記入
    -「次のユーザーとして実行」：自分（自分のメールアドレス）
    -「アクセスできるユーザー」：全員
    -デプロイをクリック
- （初回のみ、承認フロー）アクセスを承認 > ユーザー選択 > 安全でないほにゃららと表示されたら、「Advanced」＞「Go to レシート管理(unsafe)」＞「レシート管理 wants to access your Google Account」> Allow > 「デプロイしました」 
- 発行された「ウェブアプリURL」をメモっておく


#### Tips  

スクリプトのプロパティを変更しても、デプロイし直す必要はありません。便利ですね。


### 5. LINE の設定 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/860fc429-d1f1-eb0c-c9a9-461a6f1cb61b.png)

- [LINE Developers](https://developers.line.biz/)で先ほど作ったチャネルに移動し、「Messaging API設定」の「Webhook URL」に、4.で発行したGoogle Apps ScriptのウェブアプリURLを記入する
- 「Webhookの利用」をオンにする
- QRコードからフレンド登録する
 
 #### Tips

- Google Apps Scriptは、デプロイし直すたびにウェブアプリURLが変化するため、LINE側のWebhookのURL設定も毎回上書き変更する必要があります。

### 6. 動作確認

以上で完成です。

LINEトークアプリで、「レシート管理Bot」を開き、レシートを撮影して送付してみてください。
合計金額を読み取ってGoogle スプレッドシートに記入し、金額とURLを返信してくれるはずです。

デモ動画
https://youtube.com/shorts/-rvdgWtFkP8

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173392/33d1c2f0-7855-3c0d-f4f4-cc0201d88a9d.png" width=30%>



## まとめ

- コード
    - https://github.com/sitopp/line_dify_receipt/tree/main
- 思ったこと
    - 読み取りだけならOCRでも良さそうだが、レシートは情報量が多いので、「合計金額」を探して読み取る必要がある。そこらへんを自動でやってくれたのは何気にすごすぎる。
    - 開発は半日くらいでできた。Dify便利すぎる。
    - GASを書くのは5年ぶり。長いGASはデバッグが大変な印象があったが、[こちら](https://arukt.blog-portal.net/index.php/2023/12/10/100/#google_vignette)を参考にログを出し、出力されたエラーを片っ端からVSCodeのCopilotチャットに聞いたら、スイスイできた。

- 発展してみたいこと
    - レシート全体を読み込んで買った物をリストアップし、要約して家計簿につける手間を省きたい。
    - 買い物のバイアスを見抜き、健康状態をチェックしたりしたい。
    - ガッツリ買い物するとレシートが長すぎて一枚に収まらない。どうしたものか。
    - 最新モデルGemini 2.0とOpen AI o1も比較してみたい。


以上です。
アドベントカレンダー駆動型開発、大変楽しかったです。ありがとうございました！