---
title: Techカンファレンスの セッション情報を話す RAGを作ってみた話
tags:  #openai #rag #llm  
author: [Hidetaka Okamoto](https://convert.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://convert.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


