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
410
あらゆるサイトを クイズにするサイトをつくった
当日のLTとは一部変更を行なっています
ugo
August 25, 2023
Tweet
Share
More Decks by ugo
See All by ugo
3Dモデル作成から販売までを行うWebアプリケーションの裏側 BuriKaigi 2025
yukyu30
0
510
Notionで拍手できるようにした話
yukyu30
0
520
Other Decks in Programming
See All in Programming
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
10k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
780
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
170
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
180
Is Xcode slowly dying out in 2025?
uetyo
1
280
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Docker and Python
trallard
44
3.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Side Projects
sachag
455
42k
Building Applications with DynamoDB
mza
95
6.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building an army of robots
kneath
306
45k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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のモデルの選定 ◦ 利用料金の把握
ご清聴ありがとうございました!!