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

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

Transcript

1. ugo (yukyu)

   あらゆるサイトを

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

   フレッシュメンLT #0 夏祭り

   

   View Slide

2. 自己紹介

   ugo (yukyu)

   2022年卒で入社2二年目

   GMOペパボのSUZURIのエンジニア

   業務で使う言語はRails、React

   最近ではLLMを使った機能を開発をしてます

   

   X
 @yukyu30

   BlueSky
 @yukyu.net

   Blog
 https://yukyu.net

   Zenn
 @yu_9

   

   View Slide

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

   

   View Slide

4. 技術記事を読んで、理解した気になっている

   悩み事

   ● 記事を読んで実践してみたら、実は前提条件を満たしていなかった 

   ● なんとなくで終えてしまい、身についた気がしてしまう 

   ● そもそも読み終えられない 

   

   View Slide

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

   

   View Slide

6. 🙆 クイズだ 󰢄

   

   View Slide

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

   

   View Slide

8. あらゆるサイトをクイズにするサイト とは

   URLを入力するとそのサイトのコンテンツを読み込みクイズが生成される 

   https://yukyu.net/posts/2023-06-28

   

   View Slide

9. デモ

   https://quizbite.yukyu.net/　

   これだけ多くの人が同時に使ったことないから落ちるかも
   

   

   View Slide

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

    

    View Slide

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

    

    View Slide

12. LLMが適切に応答しているのか分からん！

    レスポンスタイムは大体N秒くらいかな〜

    (PaaSによってはX秒以内にレスポンスがないとタイムアウトエラーになることもあ
    る)

    LMMを使ったアプリケーションあるある
    

    

    View Slide

13. LangChainのログをみたい 

    LangSmithをいれて、LLMのログを保存

    ● https://docs.smith.langchain.com/

    ● LLMの実行ログを保存、閲覧 

    ○ 応答がみれるようになった
    

    ● LLMのレスポンスタイム、 Tokenの消費量が見れる

    ○ アプリケーション、環境ごとに
    APIに利用料金がわかる

    

    View Slide

14. LangSmith

    実際のログ

    

    View Slide

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

    

    View Slide

16. ログから改善策 

    DB使う

    ● Tokenの消費が多いので、 APIの料金を節約できるなら、 DBつかうのはありだと判断できた 

    ○ Supabaseにクイズを保存する

    ○ 同じURLに対して再度クイズを生成する必要がなくなる
    

    ● レスポンスタイムも２回目からは早くなる 

    ○ DBから取得する時間 <<<<<<<<<< クイズを生成する時間

    

    

    View Slide

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/より引用

    

    View Slide

18. LLMを利用したアプリケーションとその運用 

    まとめ

    ● LangChainを使うとLLMを利用したアプリケーションがつくりやすい 

    ● LLMの挙動は想像できないのでログを取ると良い 

    ○ 最適なLLMのモデルの選定

    ○ 利用料金の把握

    

    View Slide

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

    

    View Slide