--- title: Techカンファレンスの セッション情報を話す RAGを作ってみた話 tags: #openai #rag #llm author: [Hidetaka Okamoto](https://www.docswell.com/user/hideokamoto) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/VENGN5RDJ8.jpg?width=480 description: ChatGPT Osaka vol2 published: May 24, 24 canonical: https://www.docswell.com/s/hideokamoto/51JPV4-2024-05-24-194227 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/VENGN5RDJ8.jpg) Techカンファレンスの セッション情報を話す RAGを作ってみた話 ChatGPT Meetup Osaka #2 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/Y79WRYM873.jpg) Hidetaka Okamoto (@hidetaka_dev) - WordCamp Kyoto 2017 WordCamp Kansai 2024 Stripe DevRel AWS Samurai 2017 Alexa Champions https://hidetaka.dev # Page. 3 ![Page Image](https://bcdn.docswell.com/page/G78NW6LZJD.jpg) 今日の話 ● RAGは「検索」と「回答文生成」の２つで構成されている ● 「期待する回答文」を作れる「検索結果」を作ろう ● 検索用のインデックスをどう構成するかも重要 ● みんなで行こう、RAG / LLM沼 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/L7LPN9L1JR.jpg) 作ってみたもの # Page. 5 ![Page Image](https://bcdn.docswell.com/page/4EM4XZM5JW.jpg) # Page. 6 ![Page Image](https://bcdn.docswell.com/page/PERWN6VZJ9.jpg) RAG Retrieval Augmented Generation 検索 によって 拡張 された 生成 処理 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/P7XPNMZ1JX.jpg) RAGの処理フロー # Page. 8 ![Page Image](https://bcdn.docswell.com/page/37KDNG8MED.jpg) 要はこういうこと # Page. 9 ![Page Image](https://bcdn.docswell.com/page/LJ3RVN22E5.jpg) 前提知識と質問をプレースホルダーにする # Page. 10 ![Page Image](https://bcdn.docswell.com/page/8JDY8WZ6JG.jpg) contextに「必要な情報を詰め込む」 ● LLMには「トークン数制限」がある ● {context}情報が多すぎると、制限に引っかかる恐れがある ○ ● ● 詳細に解説している記事ほど、contextに使い辛い 「関係性の高い部分だけ」を{context}に渡したい ○ 記事を細かく分割 ○ 質問に関係性の高い部分だけを取得する 「関連性・類似性」で検索できる、ベクトル検索が選ばれやすい # Page. 11 ![Page Image](https://bcdn.docswell.com/page/VEP689YZ78.jpg) RAGアプリ開発のポイント ● {context} に効率よく参考情報を詰め込む ○ 文章の分割・再構成 ○ 検索手法の検討 ● 言語やユースケースにあったLLMを採用する ● 検索や回答生成時間の短縮と、 Event Streamを利用したインタラクションの提供 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/27V3NMGMJQ.jpg) 作ってみたもの # Page. 13 ![Page Image](https://bcdn.docswell.com/page/5JG3KG8XEL.jpg) カンファレンス セッション情報アプリ - Cloudflare Workers AI - Cloudflare Vectorize - Cloudflare Workers + Hono(v4) + LangChain.js https://github.com/hideokamoto/react-wordpress-template # Page. 14 ![Page Image](https://bcdn.docswell.com/page/47Q5NX95EP.jpg) Step1: データのインデックス Step2: RAGアプリの構築 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/KE49G6XVJ1.jpg) Step1: データのインデックス Step2: RAGアプリの構築 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/L71KDVN4EG.jpg) WordPressから データを取得 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/G7WDYL4ZE2.jpg) そのままでは、 装飾用のHTMLが ノイズになる # Page. 18 ![Page Image](https://bcdn.docswell.com/page/4JZGXM2L73.jpg) 不要な情報を除去し、Markdownで再構成 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/YE6Y4NVMJV.jpg) Embeddingできる分量で、コンテンツを分割 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/GE5GQ5DQE4.jpg) https://www.langchain.com/ # Page. 21 ![Page Image](https://bcdn.docswell.com/page/972YPN8W7R.jpg) LangChain.jsで具体的な処理を抽象化 ● テキストの分割: TextSplitter クラス ● 保存する文書データ: Document クラス ● ベクトルデータへの変換: Embeddingsクラス ● ベクトルDBへの保存処理: VectorStore クラス ● 検索処理: Retriever クラス ● 文章生成: LLM / Chat クラス ● etc.. # Page. 22 ![Page Image](https://bcdn.docswell.com/page/DJYG5P69JM.jpg) 事前処理の流れ（ざっくり） # Page. 23 ![Page Image](https://bcdn.docswell.com/page/V7NGN5ZDE8.jpg) Step1: データのインデックス Step2: RAGアプリの構築 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/YJ9WRYZ8J3.jpg) RAGの処理フロー（おさらい） # Page. 25 ![Page Image](https://bcdn.docswell.com/page/GJ8NW61ZED.jpg) LangChainが 処理を管理する # Page. 26 ![Page Image](https://bcdn.docswell.com/page/LJLPN9Q1ER.jpg) RunnableXXXで プロンプトや モデル・引数を 指定 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/47M4XZ15EW.jpg) RunnableMapで、 検索結果と回答文 両方を返す # Page. 28 ![Page Image](https://bcdn.docswell.com/page/P7RWN6LZE9.jpg) Honoの jsxRendererと HTMLモジュールで GUIを作成 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/PJXPNMW1EX.jpg) 作ってみた感想 ● 事前処理を頑張ると、検索の精度は10 - 20%くらいあげれる ○ 検索スコアが見れる検索を使おう ○ embeddingとインデックスを何回も繰り返すので、 いきなり大量のデータを投入しないほうがよさそう ● 回答生成のモデルを変えるだけでも、生成結果が変化する ○ ● 検索と回答生成それぞれで検証・評価を行おう いきなり全部やるのは、慣れるまで大変かも # Page. 30 ![Page Image](https://bcdn.docswell.com/page/3JKDNGVM7D.jpg) 勝手に考える実装の流れ ● ● ● 回答生成処理の実装 ○ 検索結果をプロンプトにベタ書きする ○ 「どんな文章をプロンプトに入れるべきか？」を検証する データの前処理・インデックス ○ 欲しいフォーマットで、テキストをインデックスする ○ ベクトルの次元やチャンクサイズを検証する 結合・Retrieverを作り込む # Page. 31 ![Page Image](https://bcdn.docswell.com/page/LE3RVNM275.jpg) Q: なんでそんなに頑張ってるの？ A: 自分の過去記事・資料を活かしたい # Page. 32 ![Page Image](https://bcdn.docswell.com/page/8EDY8W66EG.jpg) 過去記事が増えすぎて把握しきれていない ● ● 個人ブログで1,000記事、Stripe Qiitaで200+記事 + 登壇資料 etc.. ○ 「この説明書いたのどの記事だっけ・・・？」 ○ 「前に書いた記事に古い情報あるか調べたい」 ○ 「過去記事を組み合わせた記事作りたい」 全文検索( Algolia / OpenSearch )とベクトル検索を活用したい ○ まずはテキスト記事から ○ 画像（キャプチャ）やPDF資料も将来的には # Page. 33 ![Page Image](https://bcdn.docswell.com/page/V7P68XZZJ8.jpg) 記事の 公開・更新・削除で インデックスを 操作するWF # Page. 34 ![Page Image](https://bcdn.docswell.com/page/2JV3NLWMEQ.jpg) 今こんな感じ # Page. 35 ![Page Image](https://bcdn.docswell.com/page/5EG3KXDX7L.jpg) まとめ ● RAGは「検索」と「回答文生成」の２つで構成されている ● 「期待する回答文」を作れる「検索結果」を作ろう ● 検索用のインデックスをどう構成するかも重要 ● みんなで行こう、RAG / LLM沼 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/4JQ5N8157P.jpg) Thank you! - x.com/@hidetaka_dev - wp.org/hideokamoto - hidetaka.dev