あらゆるサイトを クイズにするサイトをつくった

当日のLTとは一部変更を行なっています

Transcript

1. ugo (yukyu)
 あらゆるサイトを
 クイズにするサイトをつくった
 フレッシュメンLT #0 夏祭り

2. 自己紹介
 ugo (yukyu)
 2022年卒で入社2二年目
 GMOペパボのSUZURIのエンジニア
 業務で使う言語はRails、React
 最近ではLLMを使った機能を開発をしてます
 
 X
 @yukyu30
 BlueSky
 @yukyu.net
 Blog
 https://yukyu.net
 Zenn
 @yu_9

3. インプットに対する悩み事

4. 技術記事を読んで、理解した気になっている
 悩み事
 • 記事を読んで実践してみたら、実は前提条件を満たしていなかった 
 • なんとなくで終えてしまい、身についた気がしてしまう 
 • そもそも読み終えられない 

5. 理解度を測るなら...🤔

6. 🙆 クイズだ 󰢄

7. 技術記事からクイズを自動生成できたら...

8. あらゆるサイトをクイズにするサイト とは
 URLを入力するとそのサイトのコンテンツを読み込みクイズが生成される 
 https://yukyu.net/posts/2023-06-28

9. デモ
 https://quizbite.yukyu.net/　
 これだけ多くの人が同時に使ったことないから落ちるかも 

10. アプリケーションについて 
 構成
 • バックエンド
 ◦ Python、FastAPI、LangChain
 ◦ クイズAPIサーバー
 ◦ OpenAI APIでGPT-4を利用
 • フロント
 ◦ Next.js
 ◦ クイズAPIサーバーへリクエストを送る 
 • データベース
 ◦ Supabase
 ◦ 生成したクイズを保存して使い回す 
 • LLMのログ管理
 ◦ LangSmith
 ◦ LangChainでのログを保存
 Frontend
 Backend
 LangChain
 DB
 Log(LLM)
 LangSmith
 GPT-4

11. 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

12. LLMが適切に応答しているのか分からん！
 レスポンスタイムは大体N秒くらいかな〜
 (PaaSによってはX秒以内にレスポンスがないとタイムアウトエラーになることもあ る)
 LMMを使ったアプリケーションあるある 

13. LangChainのログをみたい 
 LangSmithをいれて、LLMのログを保存
 • https://docs.smith.langchain.com/
 • LLMの実行ログを保存、閲覧 
 ◦ 応答がみれるようになった 
 • LLMのレスポンスタイム、 Tokenの消費量が見れる
 ◦ アプリケーション、環境ごとに APIに利用料金がわかる

14. LangSmith
 実際のログ

15. ログから改善のアクション

16. ログから改善策 
 DB使う
 • Tokenの消費が多いので、 APIの料金を節約できるなら、 DBつかうのはありだと判断できた 
 ◦ Supabaseにクイズを保存する
 ◦ 同じURLに対して再度クイズを生成する必要がなくなる 
 • レスポンスタイムも２回目からは早くなる 
 ◦ DBから取得する時間 <<<<<<<<<< クイズを生成する時間
 

17. ログから改善策 
 エラーがおおい → 最適な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/より引用

18. LLMを利用したアプリケーションとその運用 
 まとめ
 • LangChainを使うとLLMを利用したアプリケーションがつくりやすい 
 • LLMの挙動は想像できないのでログを取ると良い 
 ◦ 最適なLLMのモデルの選定
 ◦ 利用料金の把握

19. ご清聴ありがとうございました！！