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
430
あらゆるサイトを クイズにするサイトをつくった
当日のLTとは一部変更を行なっています
ugo
August 25, 2023
Tweet
Share
More Decks by ugo
See All by ugo
3Dモデル作成から販売までを行うWebアプリケーションの裏側 BuriKaigi 2025
yukyu30
0
520
Notionで拍手できるようにした話
yukyu30
0
530
Other Decks in Programming
See All in Programming
JetBrainsのAI機能の紹介 #jjug
yusuke
0
190
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
240
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
37
11k
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
4
2.5k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
0
170
Jakarta EE Meets AI
ivargrimstad
0
600
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
210
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
240
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Visualization
eitanlees
146
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Six Lessons from altMBA
skipperchong
28
3.9k
Bash Introduction
62gerente
614
210k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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のモデルの選定 ◦ 利用料金の把握
ご清聴ありがとうございました!!