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
480
あらゆるサイトを クイズにするサイトをつくった
当日のLTとは一部変更を行なっています
ugo
August 25, 2023
Tweet
Share
More Decks by ugo
See All by ugo
3Dモデル作成から販売までを行うWebアプリケーションの裏側 BuriKaigi 2025
yukyu30
1
580
Notionで拍手できるようにした話
yukyu30
0
550
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
130
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
実践AIチャットボットUI実装入門
syumai
7
2.5k
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
870
Model Pollution
hschwentner
1
180
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
XP, Testing and ninja testing ZOZ5
m_seki
2
300
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
770
CSC509 Lecture 04
javiergs
PRO
0
290
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
CSC509 Lecture 03
javiergs
PRO
0
330
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Why Our Code Smells
bkeepers
PRO
339
57k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Agile that works and the tools we love
rasmusluckow
331
21k
Raft: Consensus for Rubyists
vanstee
139
7.1k
How to Think Like a Performance Engineer
csswizardry
27
2k
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のモデルの選定 ◦ 利用料金の把握
ご清聴ありがとうございました!!