ChatGPT APIを使ったLINEボットでCloudflare Workersを使う

Transcript

1. ChatGPT APIを使った LINEボットで Cloudflare Workersを使う nmemoto
2. 自己紹介 • 業務ではAWS • Cloudflareは趣味利用 • 登壇初めて • フロントエンド全然わからん • LLM全然わからん • ぶっちゃけCloudflare全然わからん nmemoto • https://twitter.com/nmemoto • https://bsky.app/profile/nmemoto.bsky.social • https://zenn.dev/nmemoto • https://github.com/nmemoto
3. なぜ登壇に至ったか ChatGPT APIとCloudflareを使って過去の会話を覚えてるLINEボットを構築する という記事を書きました ChatGPT API出始めのときに多 くの方に見て頂きました！
4. 目次 • ChatGPT APIを使うLINEボットのデモ • Cloudflare Workersって何、どうやって使う • ボットAPIの要件とソリューション(今日のメイン) • まとめ
5. システム構成 ChatGPT API (Chat Completions API) LINE (Messaging API) 本日はこの構成について 詳しく見ていくよ
6. デモ
7. Cloudflare Workersって何？ • エッジサーバーで処理を実行するサービス ◦ サーバーレスアプリケーションの構築と世界中に即座にデプロイ • 特徴 ◦ Wrangler ▪ WorkersのCLIツール ▪ プロジェクト作成・テスト・デプロイ ◦ Bindings ▪ WorkersとCloudflareの他のサービスKV, R2, Durable Objects, D1の連携が簡単 ◦ Playground ▪ WorkersのJavaScriptコードをブラウザで直接実行できる環境 ▪ https://developers.cloudflare.com/workers/learning/playground/ > Launch Playground 参考: https://developers.cloudflare.com/workers
8. Cloudflare Workers どうやって使う？ • WorkersのGet started guide a. プロジェクト生成 ▪ npm create cloudflare@latest b. ローカル起動 ▪ npx wrangler dev c. コード書く ▪ src/workers.js d. デプロイ ▪ npx wrangler deploy 参考: https://developers.cloudflare.com/workers/get-started/guide/
9. ChatGPT APIを使うLINEボットのボットAPIの要件 • 会話内容の永続化 ◦ Chat Completions API (ChatGPT API) ▪ これまでの会話の内容をコンテキストと して入力 ◦ Workers単体で永続化の仕組みはない • LINEからのWebhook送信に対して1秒以内の応答 ◦ Webhook受信に関するLINEの仕様 ▪ https://developers.line.biz/ja/docs/messaging-api/receiving-messages/#check-error-reason ◦ メッセージ投稿は別の API ▪ https://developers.line.biz/ja/docs/messaging-api/sending-messages/#reply-messages ◦ ChatGPT APIのレスポンスは1秒を超える可能性が高い curl https://api.openai.com/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer $OPENAI_API_KEY" \ -d '{ "model": "gpt-3.5-turbo", "messages": [ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": "Hello!"} ] }' https://platform.openai.com/docs/api-reference/chat/create
10. ChatGPT APIを使うLINEボットのボットAPIの要件と 私の考えたソリューション • 会話内容の永続化 → Cloudflare D1 ◦ Chat Completions API (ChatGPT API) ▪ これまでの会話の内容をコンテキストと して入力 ◦ Workers単体で永続化の仕組みはない • LINEからのWebhook送信に対して1秒以内の応答 → Cloudflare Queues ◦ Webhook受信に関するLINEの仕様 ▪ https://developers.line.biz/ja/docs/messaging-api/receiving-messages/#check-error-reason ◦ メッセージ投稿は別の API ▪ https://developers.line.biz/ja/docs/messaging-api/sending-messages/#reply-messages ◦ ChatGPT APIのレスポンスは1秒を超える curl https://api.openai.com/v1/chat/completions \ -H "Content-Type: application/json" \ -H "Authorization: Bearer $OPENAI_API_KEY" \ -d '{ "model": "gpt-3.5-turbo", "messages": [ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": "Hello!"} ] }' https://platform.openai.com/docs/api-reference/chat/create
11. Cloudflare D1 • WorkersとPagesからクエリするための サーバーレスSQLデータベース ◦ SQLiteベース • 2023/7現在、Open Alpha ◦ 今後破壊的変更の可能性有 ◦ 本番利用非推奨 ◦ 100MB制限 SELECT文を実行して結果取得 https://developers.cloudflare.com/d1/get-started/#write-queries-within-your-worker 参考: https://developers.cloudflare.com/workers/get-started/guide/
12. Cloudflare Queues • Workers と統合されたメッセージング キュー ◦ 異なるサービス間で非同期データ連携 • 2つのWorker ◦ Producer Worker ▪ リクエストを受けてメッセージを送る (処理を委譲する) ▪ リクエスト元にレスポンスを返す ◦ Consumer Worker ▪ メッセージを受けて処理する • その他 ◦ 2023/7現在、Open Beta ◦ 要Paid Plan($5/月) Producer Worker Consumer Worker
13. Consumer Worker 1. メッセージ受信 2. ChatGPT APIのリクエストボディ 作成 3. ChatGPT APIへリクエスト 4. レスポンス受信 5. ユーザー入力・レスポンス保存 6. メッセージ投稿APIリクエスト 処理の流れ ChatGPT API (Chat Completions API) LINE (Messageing API) Producer Worker 1. webhook受信 2. Consumer Worker にメッセージ送信 3. レスポンス返却 • LINEのユーザーID • ユーザー入力内容 • 返信用トークン
14. まとめ • Cloudflare Workers(と統合されたサービス)でChatGPT APIを用いたLINEボットを 実装 ◦ Cloudflare D1 ▪ ユーザーの入力とChatGPT APIの応答を永続化 ◦ Cloudflare Queues ▪ LINEに200のレスポンスを返しつつ、ユーザーの応答に必要な処理を非同期で実施 • LINEボットはCloudflare Workers(とChatGPT API)始めに最適 ◦ チャットUIはLINEにお任せ ◦ ユーザーへの応答内容は ChatGPTにお任せ
15. Queues使わなくてもwaitUntilで実現できました • waitUntilとは ◦ Workersで使えるコマンド ◦ fetchイベントのライフタイムを拡張 ▪ レスポンスを返しつつ、必要な処理を継続 できる • Paid Planなしでできる • 参考 ◦ https://blog.shibayu36.org/entry/2023/05/26/173000 ◦ https://developers.cloudflare.com/workers/runtime-apis/fetch-event/#waituntil レスポンス返したあ とも実行できる
16. シン・まとめ • ChatGPT APIを用いたLINEボットでCloudflare Workersを使いました ◦ Cloudflare D1 ▪ ユーザーの入力とChatGPT APIの応答を永続化 ◦ Cloudflare Queues ▪ LINEに200のレスポンスを返しつつ、ユーザーの応答に必要な処理を非同期で実施 ▪ Queuesを使わなくても、waitUntilを使って実現できた • LINEボットはCloudflare Workers(とChatGPT API)始めに最適 ◦ チャットUIはLINEにお任せ ◦ ユーザーへの応答内容は ChatGPTにお任せ • ドキュメントをちゃんと読もう ◦ AWSと比べるとまだ目を通せそうなボリューム ?
17. 時間に余裕があったら
18. Cloudflare Workersに関係していそうな最近のトピック紹介 • LangChainJSがCloudflare Workersをサポート ◦ LangChainとはLLMを使ったアプリケーションを作るためのフレームワーク ◦ LangChainJSのESM対応 ◦ ドキュメント ▪ https://blog.cloudflare.com/langchain-and-cloudflare/ ▪ https://blog.langchain.dev/js-envs/ • Cloudflare Workersと他DBサービス(Neon, PlanetScale, Supabase)とのネイティブ統合 (ベータ版) ◦ 埋め込みを使った構成を容易にできる (未検証) ◦ ドキュメント ▪ https://blog.cloudflare.com/announcing-database-integrations/ ▪ https://developers.cloudflare.com/workers/databases/connecting-to-databases/ ▪ https://neon.tech/blog/building-an-ai-powered-chatbot-using-vercel-openai-and-postgres ▪ https://supabase.com/docs/guides/ai/examples/nextjs-vector-search • openai/openai-node のESM対応 ◦ ドキュメント ▪ https://github.com/openai/openai-node/discussions/182