Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Takafumi Umemoto

July 18, 2023
Tweet

Other Decks in Technology

Transcript

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

    View Slide

  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

    View Slide

  3. なぜ登壇に至ったか
    ChatGPT APIとCloudflareを使って過去の会話を覚えてるLINEボットを構築する
    という記事を書きました
    ChatGPT API出始めのときに多
    くの方に見て頂きました!

    View Slide

  4. 目次
    ● ChatGPT APIを使うLINEボットのデモ
    ● Cloudflare Workersって何、どうやって使う
    ● ボットAPIの要件とソリューション(今日のメイン)
    ● まとめ

    View Slide

  5. システム構成
    ChatGPT API
    (Chat Completions API)
    LINE
    (Messaging API)
    本日はこの構成について
    詳しく見ていくよ

    View Slide

  6. デモ

    View Slide

  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

    View Slide

  8. Cloudflare Workers どうやって使う?
    ● WorkersのGet started guide
    a. プロジェクト生成
    ■ npm create [email protected]
    b. ローカル起動
    ■ npx wrangler dev
    c. コード書く
    ■ src/workers.js
    d. デプロイ
    ■ npx wrangler deploy
    参考: https://developers.cloudflare.com/workers/get-started/guide/

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  12. Cloudflare Queues
    ● Workers と統合されたメッセージング
    キュー
    ○ 異なるサービス間で非同期データ連携
    ● 2つのWorker
    ○ Producer Worker
    ■ リクエストを受けてメッセージを送る
    (処理を委譲する)
    ■ リクエスト元にレスポンスを返す
    ○ Consumer Worker
    ■ メッセージを受けて処理する
    ● その他
    ○ 2023/7現在、Open Beta
    ○ 要Paid Plan($5/月)
    Producer Worker
    Consumer Worker

    View Slide

  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
    ● ユーザー入力内容
    ● 返信用トークン

    View Slide

  14. まとめ
    ● Cloudflare Workers(と統合されたサービス)でChatGPT APIを用いたLINEボットを
    実装
    ○ Cloudflare D1
    ■ ユーザーの入力とChatGPT APIの応答を永続化
    ○ Cloudflare Queues
    ■ LINEに200のレスポンスを返しつつ、ユーザーの応答に必要な処理を非同期で実施
    ● LINEボットはCloudflare Workers(とChatGPT API)始めに最適
    ○ チャットUIはLINEにお任せ
    ○ ユーザーへの応答内容は ChatGPTにお任せ

    View Slide

  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
    レスポンス返したあ
    とも実行できる

    View Slide

  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と比べるとまだ目を通せそうなボリューム ?

    View Slide

  17. 時間に余裕があったら

    View Slide

  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

    View Slide