Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ugo
August 25, 2023

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

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

ugo

August 25, 2023
Tweet

More Decks by ugo

Other Decks in Programming

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に対して再度クイズを生成する必要がなくなる

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

    ○ 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