【完全版】Dify - LINE Bot連携 考え方と実用テクニック

2024.10.10のLINE DC Generative AI Meetup #3での発表資料です。
Difyを活用したLINEメッセージ＆ビデオ通話ができるAIキャラクターの開発方法についての解説です。

Transcript

1. 【完全版】Dify - LINE Bot連携 考え⽅と実⽤テクニック 〜メッセージ＆ビデオ通話ができるAIキャラクターの開発⽅法〜 2024.10.10 うな技研 うえぞう LINE DC Generative AI Meetup #3
2. ⾃⼰紹介 うえぞう うな技研 代表／プログラマー LINE API Expert ⾦融DXコンサルタント ⾼校卒業後に単⾝上京。バリスタの⾒習いをしながら独学でプロ グラミングを習得。 その後⾦融業界に転⾝し、三井住友海上と三菱UFJ銀⾏にて各種 デジタルトランスフォーメーション案件をリード。現在は⽇本 IBMにて⾦融業界向けAIソリューションの事業責任者を務めるほ か、総務省地⽅公共団体経営・財務マネジメント強化事業にてDX 分野のアドバイザーを務める。近年は⽣成AIとXR関連技術を活⽤ したAIアシスタントの開発や書籍・記事の執筆等を中⼼に活動。 uezo uezo uezo @uezochan
3. ChatGPTに関する書籍を執筆 ベストセラー1位 amazon 表計算ソフトカテゴリー 2023年9⽉7⽇時点 l Excel上で動作する対話型のアシスタントツールの作成 l アンケート回答⼀覧から重要なキーワードと聴講者の要 望を⼀括で抽出 l 問い合わせを分類し、内容に応じて商品在庫の確認など を⾃動化 l 1つの製品を元に、その競合製品を⽐較した表を⾃動⽣成 l 複数のWebページの情報を要約してワークシートに転記 l マニュアルの内容など事実に基づいたQ&Aやコンテンツ の作成 ＼次世代の⽣産性Hack／ ChatGPT API×Excel VBAで業務を徹底的に効率化！ ✅ChatGPT APIがゼロからわかる ✅Excelと組み合わせて⾝近な業務に役⽴てられる ✅応⽤テクニックで業務全体を⾃動化できる ChatGPTを現場で⾃ら活⽤することにこだわり抜いた内容です。考え⽅から実践的テク ニックまでこれ⼀冊で幅広く網羅。 業務担当者やデジタル担当者、エンジニアなどあらゆる⽅々にお役⽴ていただけます！ l ChatGPTを使った⼤量データの処理 や業務⾃動化の⽅法を知りたい⼈ l ChatGPTのより便利な活⽤⽅法を知 りたい⼈ l Excel VBAを実務で使っていて、 ChatGPTと組み合わせる⼿法を知り たい⼈ l ChatGPT APIを使ってみたい⼈ ▼本書で解説している内容の⼀例 ▼このような⽅におすすめ 詳細 / Amazon商品ページ https://www.amazon.co.jp/dp/429501768X
4. 横須賀市メタバースの「えーあいそーだんいん」を開発
5. いもうとBOT2.0 – 妹とLINEやビデオ通話でおしゃべり
6. いもうとBOT2.0 l かわいい妹とLINEやビデオ通話でおしゃべりできるLINE Bot l 性格を調整できるツンデレスライダー、義妹モード（要課⾦）など本格派も納得の機能を搭載 l リマインダーやWeb検索、天気予報といったエージェント機能も搭載。今後も拡充する予定 l バックエンドにはDifyを利⽤し、着想から1ヶ⽉程度でリリース https://news.livedoor.com/article/detail/27005702/ @imoutobot
8. 本⽇お話しすること 1. Dify連携のメリット 2. アーキテクチャー超ざっくり解説 3. Dify-LINE Bot連携各論 ① セッション管理 ② さまざまな要求メッセージへの対応（テキスト、画像、スタンプほか） ③ さまざまな応答メッセージへの対応（Flex、Quick Reply、スタンプほか） ④ ⼊⼒引数（プロンプト可変値、LINEユーザーIDほか） 4. ビデオ通話⾵キャラクター対話連携 ① ビデオ通話⾵インターフェイスの仕組み ② チャネルを跨いだコンテキストの共有 5. まとめ
9. 00 Difyとは
10. DEMO
11. 参考：Difyのセットアップ l SaaSとセルフホストの2種類があるが、コミュニティー版をセルフホストするのもとても簡単 なので、PCや仮想マシン上にホストしてみるのもおすすめ https://github.com/langgenius/dify?tab=readme-ov-file#quick-start
12. 01 Dify連携のメリット
13. Why Dify × LINE Bot l 対話フロー制御、スキル実⾏、応答メッセージ⽣成（キャラクターの⼀貫性管理）といった LINE Botの主要な処理をほぼフルカバー l 開発・実⾏・運⽤それぞれの環境もオールインワンで提供 l ログ取得や利⽤状況モニタリングといった運⽤上必要な機能も充実 ⇨Time-to-Marketの⼤幅な短縮が可能 開発環境（ノーコード） 実⾏環境（API/画⾯）
14. Why Dify × LINE Bot（続き・運⽤環境） モニタリング 会話ログ/処理トレース
15. 02 アーキ超ざっくり解説
16. アーキテクチャー超ざっくり解説 l LINEからのWebhookをDifyで受け取るのが難しい（多分無理？） l LINEへの各種応答メッセージを作って送信するのが難しい（コードブロックでギリできる？） l 要求から応答までを⾮同期的に処理するのが難しい（頑張ればできそう？） 対話フロー制御 スキル実⾏ 応答メッセージ⽣成 ⽂脈管理 LLM呼び出し制御 リマインダーAPI 天気予報API Web検索API LINE Dify 外部機能（Tools） LINEからのWebhook データを読み取るのし んどい LINEへの返信メッ セージ作るのしんどい
17. アーキテクチャー超ざっくり解説（続き） l LINE-Difyインテグレーション層を設け、主にLINE⇄Difyの⼊出⼒マッピングを⾏う l その他、ユーザー管理やセッション管理などDifyの外で管理したいものもこの層で⾏う l Difyのアプリタイプはユースケース次第だが、マルチスキルであればAgentが柔軟性⾼そう セッション管理 要求メッセージ処理 応答メッセージ処理 その他イベント処理等 対話フロー制御 スキル実⾏ 応答メッセージ⽣成 ⽂脈管理 LLM呼び出し制御 リマインダーAPI 天気予報API Web検索API LINE LINE-Dify インテグレーション層 Dify 外部機能（Tools）
18. 03 Dify-LINE Bot連携各論
19. Difyにおける⽂脈管理 l Difyでは会話ID（conversation_id）をキーに会話の履歴が管理されている l リクエスト時に会話IDを指定することで⽂脈に沿って会話を継続することができる ①セッション管理
20. LINEユーザー毎の⽂脈管理の実現⽅法 l 会話の⽂脈はDify側で⾃動的に管理されるが、LINEとDifyをそのまま接続するとすべてのユー ザーが1つの⽂脈を共有してしまう l そのため、LINEのUserIDごとに会話（conversation_id）を割り当てる対応が必須 LINE LINE-Dify インテグレーション層 Dify line_uid conv_id updated_at U1234 D9876 xxx U2345 D8765 xxx U3456 D7654 xxx ： ： ： U2345 D8765 conv_id 会話履歴 D7654 xxxx D8765 U2345との会話履歴 D9876 xxxx D1111 U9999との会話履歴 （新規） U9999 (なし) ①セッション管理
21. ⽂脈の破棄 l ⽂脈に異常があるときやシステムプロンプトを更新したいとき、その他⼀定時間が経過して⽂ 脈を継続するのが不⾃然なときなどのために、⽂脈を強制的に破棄させるための機構が必要 l たとえばLINEユーザーID・Dify会話IDのマッピングに有効期限を設定する対応が考えられる LINE LINE-Dify インテグレーション層 Dify line_uid conv_id updated_at U1234 D9876 xxx U2345 D8765 (1時間前) U3456 D7654 xxx ： ： ： U2345 conv_id 会話履歴 D7654 xxxx D8765 U2345との会話履歴 D9876 xxxx D2222 U2345との会話履歴 （新規） (なし) ①セッション管理
22. LINEからの要求（メッセージイベント） l エンドユーザーからのメッセージは、LINEサーバーからWebhookとして⾃社サーバーに送信 l message.typeで指定されているメッセージ種類に応じて処理⽅法を変更 LINE ⾃社サーバー テキストメッセージ処理 画像メッセージ処理 スタンプメッセージ処理 位置メッセージ処理 Webhook ②要求メッセージ
23. テキストメッセージの処理 l LINEからのtextをDifyにqueryとして渡し、Difyからの応答⽂をLINEにtextと渡す LINEからの要求メッセージ LINEへの返信メッセージ Difyへの要求メッセージ LINEアプリのやりとり Difyからの応答メッセージ ②要求メッセージ
24. テキストメッセージの処理（続き） l 2ターン⽬からはconversation_idを付与することで⽂脈のある会話を実現 LINEアプリのやりとり ②要求メッセージ
25. 画像メッセージ l LINEからのメッセージIDをキーに画像データを取得 l 画像データをアップロードしてファイルIDを取得し、リクエストに含めて送信 LINEアプリのやりとり LINEからの要求メッセージ 画像データを取得して事前にDifyにアップロード Difyへの要求メッセージ ②要求メッセージ
26. ロケーションメッセージ l LINEからのロケーション情報をテキスト情報（query）としてDifyに送信 l 送信する位置情報の取り扱いについての指⽰もqueryに含むと良い LINEアプリのやりとり LINEからの要求メッセージ Difyへの要求メッセージ ロケーション名、住所、緯度経度情 報をテキスト本⽂としてDifyに送信 ②要求メッセージ
27. ステッカーメッセージ（スタンプ） l スタンプの画像そのものはAPIからは取得できないため、メタ情報として付与されているキー ワードをテキスト情報（query）としてDifyに送信 l 送信するキーワードがスタンプのものであることもあわせてqueryに含むようにする LINEアプリのやりとり LINEからの要求メッセージ Difyへの要求メッセージ ステッカーのキーワード情報をテキ スト本⽂としてDifyに送信 ②要求メッセージ
28. FlexMessage等による応答 l より利⽤しやすくリッチなユーザー体験を創出するためには、Flex Message、Template Message、Quick Reply等のUIを組み合わせることが望ましい l Difyからの応答に含まれる情報を利⽤して、プログラムでメッセージを組み⽴てる { "event": "agent_thought", "conversation_id": ”xxxxxxxxxxx", : 中略 “observation”: “{¥”createReminder¥“: ¥”{¥“message¥”: ¥“{¥”id¥“:123,¥”user_id¥“:¥”U123456789¥“,¥”reminder_datetime¥“:¥”2024-08- 30T03:00:00¥“,¥”content¥“:¥”お昼にパンを買うよ！¥",¥"notified¥":false}¥", ¥"status_code¥": 200}¥"}", "tool": "createReminder", "tool_labels": { "createReminder": { "en_US": "createReminder", "zh_Hans": "createReminder" } }, "tool_input": "{¥"createReminder¥": {¥"text¥": ¥"お昼にパンを買うよ！¥", ¥"user_id¥": ¥”U123456789¥", ¥"reminder_datetime_utc¥": ¥"2024-08- 30T03:00:00Z¥"}}", "message_files": [] } Difyからの応答（チャンク） インテグレーション層で Template Message組⽴ ③応答メッセージ
29. FlexMessage等による応答（実装例） l Difyからの応答メッセージを使⽤したFlexMessageの組み⽴て例 “observation”: “{¥”createReminder¥“: ¥”{¥“message¥”: ¥“{¥”id¥“:123,¥”user_id¥“:¥”U123456789¥“,¥”reminder_datetime¥“:¥”2024-08-30T03:00:00¥“, ¥”content¥“:¥”お昼にパンを買うよ！¥",¥"notified¥":false}¥", ¥"status_code¥": 200}¥"}", "tool": "createReminder" ③応答メッセージ
30. スタンプによる応答 l AIにスタンプを送信すべきタイミングとその内容を検討させ、必要に応じて[sticker]タグを挿⼊ するようにプロンプトで指⽰ l タグで指⽰された内容に基づき、スタンプまたはスタンプを模した画像を返信 インテグレーション層で画像 ⽣成＆画像メッセージ組⽴ Difyでのプロンプト設定 ③応答メッセージ
31. スタンプによる応答（実装例） l ステッカータグのキーワード情報を元にDALL-Eを使⽤して都度⽣成する⽅式の実装例 l 個⼈的には事前に⽣成したものから選ばせる⽅式の⽅が品質・処理コスト双⽅で優れると認識 わあ、たい焼きだい 好き♡[sticker:yum] Difyからの応答 ステッカータグのキーワード からスタンプ画像を⽣成 ③応答メッセージ
32. ⼊⼒引数 l DifyのAPIで inputs にあたる⼊⼒引数を使⽤してユーザー情報や設定情報をDifyに送信 l Toolでユーザーを特定するためのキー情報を渡す際には漏洩することを前提とした対策が必須 l 会話（conversation_id単位）の初回に送信した（しなかった）値は以後更新できない点に注意 { "inputs": { "user_id": "U123456789" }, “query”: "おはよう", "response_mode": "streaming", "user": "myuser", "auto_generate_name": False, } 会話の初回ターン ここに「U123456789」が埋め込まれる Difyでのプロンプト設定 ④⼊⼒引数
33. キャラクターの性格の切り替え l 会話ルールや基本的な振る舞いを共通プロンプトとしてDify上に設定し、性格やセリフ例などの キャラクター依存部分を⼊⼒引数とすることで、⼀つのアプリで複数キャラクターの運⽤が可能 l 好感度等に応じて性格を変化させるときは会話IDの変更が必要な点に注意 ## 全体にわたる指⽰ （ロールプレイであること、共通的な世界観など） ## 会話のルールと制約 （表現の共通的なルールや情報の取り扱いなど） ## ステッカー （[sticker:{keywords}]タグの説明） ## ビデオ通話 （[call:video]タグの説明） {{character_prompt}} Dify上のプロンプト設定（共通プロンプト） 🦔ツンツンな性格・セリフ例 ツンでもデレでもない性格・セリフ例 🐯ツンデレな性格・セリフ例 ❤デレ気味な性格・セリフ例 ❤🩹病みの⼊ったデレな性格・セリフ例 キャラクター差分プロンプト ⼊⼒引数 ④⼊⼒引数
34. 04 ビデオ通話⾵キャラクター 対話連携
35. https://youtube.com/shorts/VFzmqJc_dTY?feature=share
36. ⾳声通話の全体像 l いもうとBOT2.0では、LINEメッセージとビデオ通話（LIFF）とで⽂脈を共有 l Difyアプリはそれぞれに⽤意し、ビデオ通話起動時にはLINEメッセージ⽂脈情報を⽤いて会話 を初期化、ビデオ通話の会話ターン毎に要求・応答をLINEメッセージの⽂脈にフィードバック することでコンテキストの相互共有を実現 Dify Agent for Video Call Dify Agent for LINE Bot チャネルブリッジ LIFF ⽂脈情報 要求・応答 LIFF Token conversation_id ①初期化要求 ③通話初期化 conversation_id ④会話 conversation_id ⑤会話内容の通知 要求・応答のコピー 要求・応答のコピー ⑤ʼ会話内容の通知 ⽂脈情報 ②⽂脈取得
37. ビデオ通話⾵インターフェイスの仕組み l ブラウザーで動作するキャラクター⾳声対話アプリをLIFFとして表⽰ l 今回はUnity WebGLで実装したが、ブラウザーで動作すれば実装⽅式は問わない l 【超重要】ユーザー情報はLIFFアクセストークンを使⽤してサーバーサイドで取得する 呼び出し画⾯表⽰ LIFF初期化 WebGLロード 呼び出し画⾯消去 then then LIFFの初期化処理の中でリダイレク トが発⽣するため、WebGLのロード は必ず初期化後に⾏う点に注意 読んでね: https://developers.line.biz/ja/docs/liff/overview/
38. 参考：ChatdollKit - AIキャラクター開発フレームワーク l ⾳声対話AIキャラクター開発フレームワーク。ユーザーとの対話のための⼊出⼒、対話制御、 3Dモデル制御を統合して提供 How is the weather today in Tokyo? Itʼs fine today!
39. 参考：ChatdollKit - AIキャラクター開発フレームワーク l ⾳声対話AIキャラクター開発フレームワーク。ユーザーとの対話のための⼊出⼒、対話制御、 3Dモデル制御を統合して提供 How is the weather today in Tokyo? Itʼs fine today! 聞く・⾒る・感じる 考える・働く・返事書く しゃべる・⾝振り⼿振り・表情 右 の 要 素 を う ま い こ と 繋 げ る 🥳🥳🥳🥳🥳 3Dモデルと声を⽤意してキャラク ター設定を書けば、どこでも動く AIキャラクターのできあがり 🥳🥳🥳🥳🥳
40. https://youtu.be/rS5RmNeuNQk
41. チャネルを跨いだコンテキストの共有 l LINE・ビデオ通話双⽅で⽂脈を引き継いだ会話を⾏う
42. コンテキスト共有⽅式の検討 l 純粋に⽂脈を共有するだけであればDifyの会話IDを共有することで対応可能だが、LINEメッ セージと通話では会話の作法が異なるため、今回は別個のDifyアプリの会話IDを間接的に連携 させる⽅式で対応 表情 モーション 声⾊ 映像取得 絵⽂字 スタンプ 通話開始 Systemプロンプトに LINE・通話の指⽰が混在 LINE履歴 通話履歴 LINE・通話が混在する指⽰と履歴 に基づいて⽣成される応答😣 単⼀コンテキストによる対応 表情 モーション 声⾊ 映像取得 LINE特化の Systemプロンプト LINE履歴 LINEの指⽰と履歴 に基づいた応答🥰 LINE履歴 表情 モーション 声⾊ 映像取得 通話特化の Systemプロンプト 通話履歴 通話の指⽰と履歴に 基づいた応答🥰 通話履歴 複数コンテキスト連携による対応 連携 共通Difyアプリ LINE Difyアプリ 通話Difyアプリ
43. コンテキスト間の情報共有例 l LINE→ビデオ通話は、会話履歴を初回ターンで内部的に送信して会話IDを取得 l ビデオ通話→LINEは、⾳声対話のターン毎にLINEメッセージにコンテキストを追加（これで動いて いるが、LINEの会話IDをキーにバッファしておき、LINEの会話再開時にコンテキスト追加する⽅がスマートと思われる😅） 通 話 →LINE の コ ン テ キ ス ト 共 有 LINE→ 通 話 の コ ン テ キ ス ト 共 有 LINE Difyアプリの履歴 通話Difyアプリの履歴
44. ⾳声通話の全体像（再掲） l いもうとBOT2.0では、LINEメッセージとビデオ通話（LIFF）とで⽂脈を共有 l Difyアプリはそれぞれに⽤意し、ビデオ通話起動時にはLINEメッセージ⽂脈情報を⽤いて会話 を初期化、ビデオ通話の会話ターン毎に要求・応答をLINEメッセージの⽂脈にフィードバック することでコンテキストの相互共有を実現 Dify Agent for Video Call Dify Agent for LINE Bot チャネルブリッジ LIFF ⽂脈情報 要求・応答 LIFF Token conversation_id ①初期化要求 ③通話初期化 conversation_id ④会話 conversation_id ⑤会話内容の通知 要求・応答のコピー 要求・応答のコピー ⑤ʼ会話内容の通知 ⽂脈情報 ②⽂脈取得
45. 05 まとめ
46. まとめ l DifyはLINE Botに必要な制御をフルカバーするほか、開発・実⾏・運⽤ という各局⾯をサポートしているため、Time-to-Marketを⼤幅に短縮 l インテグレーション層を設けることで、ユーザー毎に異なる⽂脈の管理 やLINEらしいユーザー体験に繋がるメッセージの調整を⾏う l マルチチャンネル連携のような仕組みも、マネージドコードの⼤幅な削 減により超短期間に構築・リリース ⇨Difyは、LINE Botを「どう作るか」ではなく「どんなLINE Botを作る か」「LINE Botでどんな価値を提供するか」への集中を可能にする
47. おみやげ https://github.com/uezo/linedify linedify on GitHub 🚀Quick Startのコード l 本⽇ご紹介したLINE-Dify間連携の実装を「linedify」というライブラリーとしてGitHubに公開 l そのままでも実装の参考にでもお好きなようにご利⽤ください
48. Thank you👋 うな技研 うえぞう uezo uezo uezo @uezochan