2.5K Views
August 29, 24
スライド概要
ユニークビジョン株式会社 テックリード。 業務でRust書きつつ、チームの生産性を向上させるような改善を推し進めています。 取るに足らないツイートが多いですが、技術的な話や最近勉強したことをつぶやきます。 第25回世界コンピュータ将棋選手権 9位。 ヤクルトスワローズ/将棋/キャンプ/DQW/謎解き/リアル脱出ゲーム
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
Beluga シリーズ ソーシャルメディアを活用して企業のファンを増やすマーケティングツールを提供 Copyright ©Unique Vision Company, All Rights Reserved. 4
X Marketing Partners 国内7社 広告をリッチな体験を伴う 楽しいキャンペーンに変える! Copyright ©Unique Vision Company, All Rights Reserved. 5
LINEで応募 OMO Technology Partner 国内4社 Copyright ©Unique Vision Company, All Rights Reserved. 6
生成 AI に関わりの深い事例 https://www.uniquevision.co.jp/case/belugacampaign-sokubakukareshi Copyright ©Unique Vision Company, All Rights Reserved. 7
本日のテーマ
Cloudflare Workers × LLM 実用的な LINE BOT の作り方
本発表で伝えたいこと • Cloudflare Queue を使った非同期処理 • Cloudflare Workers AI の使い方 • 非常に便利な AI Gateway の紹介 Copyright ©Unique Vision Company, All Rights Reserved. 10
本発表で伝えたいこと Cloudflare Workers を使って 本気で LLM アプリを作る方法、教えます! Copyright ©Unique Vision Company, All Rights Reserved. 11
注意 本発表では Paid Plan の機能を使用します Copyright ©Unique Vision Company, All Rights Reserved. 12
注意 詳細はあとで記事書きます! 時間取れなかった。。。 Copyright ©Unique Vision Company, All Rights Reserved. 13
題材
無駄口たたく BOT
無駄口をたたく LINE BOT 恐れ入りました 恐れ入谷の鬼子母神 Copyright ©Unique Vision Company, All Rights Reserved. 16
最終的なシステム構成 ① 文章を送信 ⑩ 画像を表示 ⑨ 返信を送信 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
ステップバイステップで解説します 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
おしらせ あとで記事書きます! 今日は雰囲気だけお話します Copyright ©Unique Vision Company, All Rights Reserved. 19
本編
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
Queue を使って応答を非同期にする Copyright ©Unique Vision Company, All Rights Reserved. 22
シンプルなエコーBOTの実装 fetch の中で 返信している! Copyright ©Unique Vision Company, All Rights Reserved. 23
Queue を使った実装 (1/2) fetch の中では Queue への送信だけ Copyright ©Unique Vision Company, All Rights Reserved. 24
Queue を使った実装 (2/2) queue の中で 返信する!!! Copyright ©Unique Vision Company, All Rights Reserved. 25
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
Cloudflare は有力なモデルプロバイダー! Copyright ©Unique Vision Company, All Rights Reserved. 27
Cloudflare Workers から使うのは簡単 Copyright ©Unique Vision Company, All Rights Reserved. 28
非常に便利な 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
AI Gateway とは アプリケーションとモデルプロバイダーを 中継して機能をアドオンする 1. メトリクス・ログの分析 2. キャッシュ レスポンス 3. レートリミットの設定 Copyright ©Unique Vision Company, All Rights Reserved. 30
メトリクスの分析 リクエスト数やトークン数 キャッシュヒット率など 分析可能 Copyright ©Unique Vision Company, All Rights Reserved. 31
リアルタイムログが表示される Copyright ©Unique Vision Company, All Rights Reserved. 32
使用方法も簡単! baseURL を 設定するだけ! Copyright ©Unique Vision Company, All Rights Reserved. 33
最終的な挙動 こんにちは 心配いらないよ こんにちわっしょい! 心配いらない余裕 Copyright ©Unique Vision Company, All Rights Reserved. 34
まとめ
まとめ • Cloudflare Workers で実用レベルの LINE BOT を作る際の留意点を紹介 • Cloudflare は LLM アプリを作るうえでも有力 • ただし、有料プランを使用する必要がある Copyright ©Unique Vision Company, All Rights Reserved. 36
ありがとうございました 質問・感想お待ちしております! Xのフォローお願いします 採用してます • 今日の発表について • ユニークビジョン • Rustについて • コードレビューの工夫 • 開発リーダーのお悩み • 東京ヤクルトスワローズ etc… Copyright ©Unique Vision Company, All Rights Reserved. 37