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

2.5K Views

August 29, 24

スライド概要

profile-image

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

シェア

またはPlayer版

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

会社概要 社員の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

4.

Beluga シリーズ ソーシャルメディアを活用して企業のファンを増やすマーケティングツールを提供 Copyright ©Unique Vision Company, All Rights Reserved. 4

5.

X Marketing Partners 国内7社 広告をリッチな体験を伴う 楽しいキャンペーンに変える! Copyright ©Unique Vision Company, All Rights Reserved. 5

6.

LINEで応募 OMO Technology Partner 国内4社 Copyright ©Unique Vision Company, All Rights Reserved. 6

7.

生成 AI に関わりの深い事例 https://www.uniquevision.co.jp/case/belugacampaign-sokubakukareshi Copyright ©Unique Vision Company, All Rights Reserved. 7

8.

本日のテーマ

9.

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

10.

本発表で伝えたいこと • Cloudflare Queue を使った非同期処理 • Cloudflare Workers AI の使い方 • 非常に便利な AI Gateway の紹介 Copyright ©Unique Vision Company, All Rights Reserved. 10

11.

本発表で伝えたいこと Cloudflare Workers を使って 本気で LLM アプリを作る方法、教えます! Copyright ©Unique Vision Company, All Rights Reserved. 11

12.

注意 本発表では Paid Plan の機能を使用します Copyright ©Unique Vision Company, All Rights Reserved. 12

13.

注意 詳細はあとで記事書きます! 時間取れなかった。。。 Copyright ©Unique Vision Company, All Rights Reserved. 13

14.

題材

15.

無駄口たたく BOT

16.

無駄口をたたく LINE BOT 恐れ入りました 恐れ入谷の鬼子母神 Copyright ©Unique Vision Company, All Rights Reserved. 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.

おしらせ あとで記事書きます! 今日は雰囲気だけお話します Copyright ©Unique Vision Company, All Rights Reserved. 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.

Queue を使って応答を非同期にする Copyright ©Unique Vision Company, All Rights Reserved. 22

23.

シンプルなエコーBOTの実装 fetch の中で 返信している! Copyright ©Unique Vision Company, All Rights Reserved. 23

24.

Queue を使った実装 (1/2) fetch の中では Queue への送信だけ Copyright ©Unique Vision Company, All Rights Reserved. 24

25.

Queue を使った実装 (2/2) queue の中で 返信する!!! Copyright ©Unique Vision Company, All Rights Reserved. 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.

Cloudflare は有力なモデルプロバイダー! Copyright ©Unique Vision Company, All Rights Reserved. 27

28.

Cloudflare Workers から使うのは簡単 Copyright ©Unique Vision Company, All Rights Reserved. 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.

AI Gateway とは アプリケーションとモデルプロバイダーを 中継して機能をアドオンする 1. メトリクス・ログの分析 2. キャッシュ レスポンス 3. レートリミットの設定 Copyright ©Unique Vision Company, All Rights Reserved. 30

31.

メトリクスの分析 リクエスト数やトークン数 キャッシュヒット率など 分析可能 Copyright ©Unique Vision Company, All Rights Reserved. 31

32.

リアルタイムログが表示される Copyright ©Unique Vision Company, All Rights Reserved. 32

33.

使用方法も簡単! baseURL を 設定するだけ! Copyright ©Unique Vision Company, All Rights Reserved. 33

34.

最終的な挙動 こんにちは 心配いらないよ こんにちわっしょい! 心配いらない余裕 Copyright ©Unique Vision Company, All Rights Reserved. 34

35.

まとめ

36.

まとめ • Cloudflare Workers で実用レベルの LINE BOT を作る際の留意点を紹介 • Cloudflare は LLM アプリを作るうえでも有力 • ただし、有料プランを使用する必要がある Copyright ©Unique Vision Company, All Rights Reserved. 36

37.

ありがとうございました 質問・感想お待ちしております! Xのフォローお願いします 採用してます • 今日の発表について • ユニークビジョン • Rustについて • コードレビューの工夫 • 開発リーダーのお悩み • 東京ヤクルトスワローズ etc… Copyright ©Unique Vision Company, All Rights Reserved. 37