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

by ugo

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

🙆 クイズだ 󰢄 

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

LangSmith  実際のログ 

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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