Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
あらゆるサイトを クイズにするサイトをつくった
Search
ugo
August 25, 2023
Programming
0
200
あらゆるサイトを クイズにするサイトをつくった
当日のLTとは一部変更を行なっています
ugo
August 25, 2023
Tweet
Share
More Decks by ugo
See All by ugo
Notionで拍手できるようにした話
yukyu30
0
340
Other Decks in Programming
See All in Programming
Activities at Cairo Library
cairolibrary720
0
1.2k
Introduction to GitOps
hwchiu
0
110
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
日付と正規化
megmogmog1965
0
140
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Code Reviewing Like a Champion
maltzj
517
39k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
For a Future-Friendly Web
brad_frost
173
9.2k
Adopting Sorbet at Scale
ufuk
71
8.8k
In The Pink: A Labor of Love
frogandcode
139
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Design by the Numbers
sachag
277
18k
Practical Orchestrator
shlominoach
185
10k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Transcript
ugo (yukyu) あらゆるサイトを クイズにするサイトをつくった フレッシュメンLT #0 夏祭り
自己紹介 ugo (yukyu) 2022年卒で入社2二年目 GMOペパボのSUZURIのエンジニア 業務で使う言語はRails、React 最近ではLLMを使った機能を開発をしてます X @yukyu30
BlueSky @yukyu.net Blog https://yukyu.net Zenn @yu_9
インプットに対する悩み事
技術記事を読んで、理解した気になっている 悩み事 • 記事を読んで実践してみたら、実は前提条件を満たしていなかった • なんとなくで終えてしまい、身についた気がしてしまう • そもそも読み終えられない
理解度を測るなら...🤔
🙆 クイズだ
技術記事からクイズを自動生成できたら...
あらゆるサイトをクイズにするサイト とは URLを入力するとそのサイトのコンテンツを読み込みクイズが生成される https://yukyu.net/posts/2023-06-28
デモ https://quizbite.yukyu.net/ これだけ多くの人が同時に使ったことないから落ちるかも
アプリケーションについて 構成 • バックエンド ◦ Python、FastAPI、LangChain ◦ クイズAPIサーバー ◦
OpenAI APIでGPT-4を利用 • フロント ◦ Next.js ◦ クイズAPIサーバーへリクエストを送る • データベース ◦ Supabase ◦ 生成したクイズを保存して使い回す • LLMのログ管理 ◦ LangSmith ◦ LangChainでのログを保存 Frontend Backend LangChain DB Log(LLM) LangSmith GPT-4
Langchainとは 言語モデルを利用したアプリケーションを開発するためのフレームワーク (https://docs.langchain.com/docs/より引用) • LLMを用いた処理をモジュール化 = Chain ◦ Chainを組み合わせることでLLM応答を次のプロンプトに含める
• ドキュメント、Webサイトを読み込む機能もあるので採用 ※https://book.st-hakky.com/docs/chains-of-langchain/ の例を引用 {product}を作る会社の社名 として、何かいいものはない ですか? 日本語の社名でお願いしま す。 {company_name}という 会社名の企業のキャッチ コピーを考えてください。 カラフルな靴 下 足元を彩る、 カラフルソックス工房 カラフルソックス工房 Chain Chain
LLMが適切に応答しているのか分からん! レスポンスタイムは大体N秒くらいかな〜 (PaaSによってはX秒以内にレスポンスがないとタイムアウトエラーになることもあ る) LMMを使ったアプリケーションあるある
LangChainのログをみたい LangSmithをいれて、LLMのログを保存 • https://docs.smith.langchain.com/ • LLMの実行ログを保存、閲覧 ◦ 応答がみれるようになった
• LLMのレスポンスタイム、 Tokenの消費量が見れる ◦ アプリケーション、環境ごとに APIに利用料金がわかる
LangSmith 実際のログ
ログから改善のアクション
ログから改善策 DB使う • Tokenの消費が多いので、 APIの料金を節約できるなら、 DBつかうのはありだと判断できた ◦ Supabaseにクイズを保存する
◦ 同じURLに対して再度クイズを生成する必要がなくなる • レスポンスタイムも2回目からは早くなる ◦ DBから取得する時間 <<<<<<<<<< クイズを生成する時間
ログから改善策 エラーがおおい → 最適なModelの選定 • GPT-3.5-Turboではトークン数が足りない (max 4,096 tokens)
• GPT-3.5-Turbo-16k(max 8,192 tokens) ◦ トークン数は足りた。応答がエラーになりがち • GPT-4 (max 8,192 tokens) ◦ トークン数も足りた。応答エラーも減った 最大トークン数は https://platform.openai.com/docs/models/より引用
LLMを利用したアプリケーションとその運用 まとめ • LangChainを使うとLLMを利用したアプリケーションがつくりやすい • LLMの挙動は想像できないのでログを取ると良い ◦
最適なLLMのモデルの選定 ◦ 利用料金の把握
ご清聴ありがとうございました!!