LINE BOT × Cloudflare × 生成 AIで無駄口たたく BOT を作ってみた

1.8K Views

August 29, 24

スライド概要

山本一将｜焚き火を愛するエンジニア

ユニークビジョン株式会社テックリード。業務でRust書きつつ、チームの生産性を向上させるような改善を推し進めています。取るに足らないツイートが多いですが、技術的な話や最近勉強したことをつぶやきます。第25回世界コンピュータ将棋選手権 9位。ヤクルトスワローズ/将棋/キャンプ/DQW/謎解き/リアル脱出ゲーム

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 2.17MB)

関連スライド

各ページのテキスト

LINE BOT × Cloudflare × 生成 AIで無駄口たたく BOT を作ってみた LINE DC Generative AI Meetup #2 ユニークビジョン株式会社テックリード山本一将（@kyamamoto9120）

コメント・質問など頂けると嬉しいです！ kyamamoto9120 山本一将ハッシュタグ #LINEDC ユニークビジョン株式会社テックリード LINE API Expert、 Rust愛好家 & チームの生産性向上推進者 2015年世界コンピュータ将棋選手権 9位趣味：ヤクルトスワローズ、将棋、キャンプ、DQW、旅行、謎解き Copyright ©Unique Vision Company, All Rights Reserved. 2

会社概要社員の50%以上がエンジニアのテクノロジー企業です。早い開発スピード・高い開発力へ投資：エンジニア（フルタイム）中心の企業社名ユニークビジョン株式会社代表者白圡良之設立 2008年1月15日所在地東京都渋谷区千駄ケ谷5-34-7 NX新宿ビル2階 SNSプラットフォームベンダーとの密な連携：従業員数 70名認定パートナーとしてキャンペーンメニューの共同開発（Twitter社, LINE社）、迅速な情報共有事業内容ソーシャルメディアを活用して企業のファンを増やすマーケティング事業 SNSマーケティングツールの提供： SNSキャンペーン、SNSアカウントの統合管理（Belugaシリーズ） Copyright ©Unique Vision Company, All Rights Reserved. 3

https://www.uniquevision.co.jp/case/belugacampaign-sokubakukareshi

本日のテーマ

Cloudflare Workers × LLM 実用的な LINE BOT の作り方

10.

11.

12.

13.

14.

題材

15.

無駄口たたく BOT

16.

17.

最終的なシステム構成 ① 文章を送信 ⑩ 画像を表示 ⑨ 返信を送信 Cloudflare R2 ② Webhook 受信 ⑧ 応答メッセージ送信 ⑦ R2 に画像を保存 ⑥ Workers AI で画像生成 Cloudflare Workers Cloudflare Workers Workers AI ④ Queue から受信 ③ Queue に送信 ⑤ GPT-4o が無駄口作成 Cloudflare Queues AI Gateway Copyright ©Unique Vision Company, All Rights Reserved. 17

18.

ステップバイステップで解説します 1. Hello, Cloudflare Workers 2. シンプルな LINE BOT を作る 3. 応答を非同期にする 4. GPT-4o mini との連携 5. Cloudflare Workers AI の利用 6. R2 に画像を保存する 7. AI Gateway を使用する Copyright ©Unique Vision Company, All Rights Reserved. 18

19.

20.

本編

21.

Queue を使って応答を非同期にする ① 文章を送信 ⑩ 画像を表示 ⑨ 返信を送信 Cloudflare R2 ② Webhook 受信 ⑧ 応答メッセージ送信 ⑦ R2 に画像を保存 ⑥ Workers AI で画像生成 Cloudflare Workers Cloudflare Workers Workers AI ④ Queue から受信 ③ Queue に送信 ⑤ GPT-4o が無駄口作成 Cloudflare Queues AI Gateway Copyright ©Unique Vision Company, All Rights Reserved. 21

22.

23.

24.

25.

26.

Cloudflare Workers AI の使い方 ① 文章を送信 ⑩ 画像を表示 ⑨ 返信を送信 Cloudflare R2 ② Webhook 受信 ⑧ 応答メッセージ送信 ⑦ R2 に画像を保存 ⑥ Workers AI で画像生成 Cloudflare Workers Cloudflare Workers Workers AI ④ Queue から受信 ③ Queue に送信 ⑤ GPT-4o が無駄口作成 Cloudflare Queues AI Gateway Copyright ©Unique Vision Company, All Rights Reserved. 26

27.

28.

29.

非常に便利な AI Gateway の紹介 ① 文章を送信 ⑩ 画像を表示 ⑨ 返信を送信 Cloudflare R2 ② Webhook 受信 ⑧ 応答メッセージ送信 ⑦ R2 に画像を保存 ⑥ Workers AI で画像生成 Cloudflare Workers Cloudflare Workers Workers AI ④ Queue から受信 ③ Queue に送信 ⑤ GPT-4o が無駄口作成 Cloudflare Queues AI Gateway Copyright ©Unique Vision Company, All Rights Reserved. 29

30.

31.

32.

33.

34.

35.

まとめ

36.

37.