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

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に対して再度クイズを生成する必要がなくなる   • レスポンスタイムも２回目からは早くなる   ◦ 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のモデルの選定  ◦ 利用料金の把握 

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

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

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

ugo

More Decks by ugo

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

🙆 クイズだ 󰢄

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

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

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

アプリケーションについて   構成  • バックエンド  ◦ Python、FastAPI、LangChain  ◦ クイズAPIサーバー  ◦

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

LangChainのログをみたい   LangSmithをいれて、LLMのログを保存  • https://docs.smith.langchain.com/  • LLMの実行ログを保存、閲覧   ◦ 応答がみれるようになった

LangSmith  実際のログ

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

ログから改善策   DB使う  • Tokenの消費が多いので、 APIの料金を節約できるなら、 DBつかうのはありだと判断できた   ◦ Supabaseにクイズを保存する

ログから改善策   エラーがおおい → 最適なModelの選定  • GPT-3.5-Turboではトークン数が足りない (max 4,096 tokens)

LLMを利用したアプリケーションとその運用   まとめ  • LangChainを使うとLLMを利用したアプリケーションがつくりやすい   • LLMの挙動は想像できないのでログを取ると良い   ◦

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

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

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

More Decks by ugo

Other Decks in Programming

Featured

Transcript

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

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