精度の高いRAG実装のためのテックスタックとSupabaseの評価

#### 精度の高いRAG実装のための推奨テックスタック 精度の高いRAG実装のための推奨テックスタックは、データベース、LLMとモデル、API、フロントエンド、UI、クラウド、ツールの各要素から構成されています。具体的には、データベースにはMongoDBとPrisma、LLMとモデルにはChaGPTとHuggingface Sentence Transformer、APIにはFastAPI、フロントエンドにはNext.jsとReact、UIにはMaterial UI、Semantic UI、Radix UI、クラウドにはGoogle Cloud PlatformとVercel、ツールにはLlamaIndexが使用されます。これらの技術を組み合わせることで、RAGアプリケーションのインジェストとリトリーバルジェネレーションのプロセスを効率的に実装できます。 #### 精度の高いRAG実装のためのテックスタック選定の考察 RAGアーキテクチャの実装において、精度を高めるためのテックスタック選定は重要です。まず、データベースとしてMongoDBとPrismaを選ぶことで、ベクトル検索とORMの機能を活用できます。次に、LLMとモデルにはChaGPTとHuggingface Sentence Transformerを使用することで、高度な自然言語処理能力を持つモデルを利用できます。APIにはFastAPIを選ぶことで、高速かつスケーラブルなAPIを構築できます。フロントエンドにはNext.jsとReactを使用し、ユーザーインターフェースにはMaterial UI、Semantic UI、Radix UIを組み合わせることで、直感的で使いやすいUIを提供できます。クラウドにはGoogle Cloud PlatformとVercelを利用し、スケーラビリティと信頼性を確保します。最後に、ツールとしてLlamaIndexを使用することで、PDF文書の読み取りとチャンク作成、エンベディングの生成と保存を効率的に行えます。これらの技術を組み合わせることで、RAGアーキテクチャの精度と効率を最大化できます。 #### RAG（Retrieval Augmented Generation）アプリケーションのフルスタック実装 [https://medium.com/@nelsonlin0321/full-stack-implementation-to-build-an-rag-retrieval-augmented-generation-application-68611a6ffec6](https://medium.com/@nelsonlin0321/full-stack-implementation-to-build-an-rag-retrieval-augmented-generation-application-68611a6ffec6) --- #### 概要 Retrieval-Augmented Generation（RAG）は、大規模言語モデル（LLM）アプリケーションの効果を高めるためのアーキテクチャ手法です。具体的には、特定の質問やタスクに関連するデータや文書を取得し、それをLLMのコンテキスト情報として利用します。このブログでは、以下の技術スタックを使用してRAGアプリケーションを開発するための包括的なソリューションを紹介します。 #### 技術スタック - **データベース**: MongoDB（Atlasベクトル検索）、Prisma（ORM） - **LLMとモデル**: ChaGPT、Huggingface Sentence Transformer - **API**: FastAPI - **フロントエンド**: Next.js（React） - **UI**: Material UI、Semantic UI、Radix UI - **クラウド**: Google Cloud Platform、Vercel - **ツール**: LlamaIndex #### アーキテクチャ概要 - **バックエンドGitHub**: [https://github.com/Nelsonlin0321/webdev-rag-backend-api](https://github.com/Nelsonlin0321/webdev-rag-backend-api) - **フロントエンドGitHub**: [https://github.com/Nelsonlin0321/webdev-nextjs-rag](https://github.com/Nelsonlin0321/webdev-nextjs-rag) --- #### バックエンド バックエンドでは、インジェストとリトリーバルジェネレーションがRAGアプリケーションの主要な部分です。 ##### インジェスト インジェストの目的は、PDF文書から関連情報を効果的に取得するために、テキストを意味のあるチャンクに変換し、それを数値表現（エンベディング）にエンコードしてベクトル検索データベースに保存することです。 - **PDFの読み取りとチャンク作成**: LlamaIndexを使用してPDFを読み取り、抽出されたテキストを小さな意味のあるセグメントに分割します。 - **文のエンベディングへのエンコード**: Sentence Transformersを使用して文を固定長の数値表現（エンベディング）に変換します。 - **ベクトル検索データベースへのエンベディングのロード**: MongoDB Atlas Vector Searchを使用してエンベディングを効率的に保存および検索します。 ```python @app.post(f"{PREFIX}/ingest") async def ingest_file(file: UploadFile = File(...)): try: if not mongo_db_engine.file_exist(file_name=file.filename): save_file_path = utils.save_file(file=file) doc_meta_list = embedding_generator(save_file_path) mongo_db_engine.insert_embedding(doc_meta_list) mongo_db_engine.insert_document(file_name=file.filename) os.remove(save_file_path) return {"message": f"The file: {file.filename} has been successfully ingested and processed!"} except Exception as e: raise HTTPException(status_code=500, detail=str(e)) from e ``` ##### リトリーバルジェネレーション リトリーバルジェネレーションは、情報検索と言語生成モデルの能力を組み合わせて、会話や質問応答システムでの応答生成を強化します。 - **ユーザークエリのエンベディング**: テキストクエリを固定長の数値表現に変換します。 - **ベクトル検索による情報検索**: MongoDB Atlas Searchを使用して類似アイテムを効率的に検索します。 - **プロンプト生成**: 取得した文書からプロンプトを生成し、質問応答ステップのコンテキストとして使用します。 - **質問応答**: OpenAI GPT-3.5 Turboモデルを使用して、生成されたプロンプトとユーザーの質問に基づいて回答を生成します。 ```python @app.post(f"{PREFIX}/retrieval_generate") async def retrieval_generate(pay_load: PayLoad): query_vector = embedding_generator.model.encode(pay_load.question).tolist() retrieved_results = mongo_db_engine.vector_search(query_vector=query_vector, file_name=pay_load.file_name) prompt = utils.generate_prompt(retrieved_results) completion = client.chat.completions.create( model='gpt-3.5-turbo', messages=[ {'role': 'system', 'content': prompt}, {"role": "user", "content": pay_load.question} ], temperature=0, stream=False ) return {"question": pay_load.question, "file_name": pay_load.file_name, "answer": completion.choices[0].message.content, "uuid": str(uuid4())} ``` --- #### フロントエンド フロントエンドは、Next.jsとReactを使用して実装され、RadixとSemantic UIに基づいています。主要なコンポーネントは以下の通りです。 ##### 1. ファイルアップロード ファイルアップロードコンポーネントは、API `api/ingest` をトリガーしてファイルをインジェストし、処理し、文書チャンクのエンベディングをベクトルデータベースにロードします。 ```javascript const FileUploader = () => { const [file, setFile] = useState<File>(); const [isSubmitting, setSubmitting] = useState(false); const router = useRouter(); const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if (!file) return; if (!file.name.endsWith(".pdf")) { toast.error("Only PDF document supported", { duration: 1000 }); return; } setSubmitting(true); try { const data = new FormData(); data.set("file", file); await apiClient.post("/api/ingest", data, { headers: { "Content-Type": "multipart/form-data" }, }); router.refresh(); toast.success("File uploaded successfully!", { duration: 1000 }); } catch (error) { const response = (error as AxiosError).response?.data; const message = (response as { message: string }).message; const errorMessage = message || "File Uploading Failed!"; toast.error(errorMessage, { duration: 1000 }); } finally { setSubmitting(false); } }; return ( <div className="w-full"> <form onSubmit={onSubmit}> <input className="mb-2 block w-full cursor-pointer rounded-lg border dark:border-gray-300" type="file" name="file" onChange={(e) => { if (e.target.files !== null) { setFile(e.target.files[0]); } }} /> <Button type="submit" className="cursor-pointer" color="blue"> {isSubmitting ? "Processing File" : "Upload and Process File"} {isSubmitting && <Spinner />} </Button> </form> <Toaster /> </div> ); }; export default FileUploader; ``` ##### 2. ファイル検索 ファイル検索コンポーネントは、ユーザーが質問する文書を選択するための重要なコンポーネントです。Material UIのオートコンプリートコンポーネントを使用して、文書を迅速に検索できます。 ```javascript const FileSearcher = ({ fileNames, setFileName }: Props) => { const [value, setValue] = useState<string | null>(fileNames[0]); const [inputValue, setInputValue] = useState<string | undefined>(fileNames[0]); return ( <Autocomplete value={value} onChange={(event: any, newValue: string | null) => { setValue(newValue); }} inputValue={inputValue} onInputChange={(event: any, newInputValue) => { setInputValue(newInputValue); setFileName(newInputValue); }} className="rounded-lg border w-full" disablePortal id="combo-box-demo" options={fileNames} renderInput={(params) => ( <TextField size="small" InputLabelProps={params.InputLabelProps} InputProps={{ ...params.InputProps, startAdornment: ( <InputAdornment position="start"> <SearchIcon /> Search PDF </InputAdornment> ), }} id={params.id} inputProps={params.inputProps} fullWidth={params.fullWidth} /> )} /> ); }; export default FileSearcher; ``` ##### 3. 質問と回答 このコンポーネントは、質問の入力とチャット履歴の管理を行います。質問入力コンポーネントでは、`api/retrieval-generate` APIをトリガーしてチャット記録の状態を更新します。 ```javascript const QuestionField = ({ fileName, fileNames, chatRecords, setChatRecords }: Props) => { const questionRef = useRef<HTMLInputElement>(null); const [isLoading, setLoading] = useState(false); const submitData = { question: "", file_name: fileName }; return ( <div className="w-full"> <form onSubmit={async (event) => { event.preventDefault(); if (questionRef.current != null) { if (questionRef.current.value.split(" ").length < 3) { toast.error("The question requires at least 3 words"); return; } if (!fileNames.includes(fileName)) { toast.error("The selected PDF document doesn't exist!"); return; } submitData.question = questionRef.current.value; setLoading(true); try { await apiClient.post<chatRecord>("/api/retrieval_generate", submitData).then((res) => { setChatRecords([res.data, ...chatRecords]); setLoading(false); }); } catch (error) { const errorMessage = "Unexpected Error"; toast.error(errorMessage, { duration: 1000 }); } finally { setLoading(false); } } }} > <div> <span>Please write down your question related to selected PDF Document</span> <TextField.Root className="mb-2"> <TextField.Input placeholder="Example Question: What are steps to take when finding projects to build your AI experience ?" ref={questionRef} /> </TextField.Root> <Button type="submit" className="cursor-pointer" color="blue"> Ask {isLoading && <Spinner />} </Button> </div> </form> <Toaster /> </div> ); }; export default QuestionField; ``` チャット履歴を表示するために、Semantic UIのアコーディオンコンポーネントを使用します。これにより、長い回答を折りたたんで表示できます。 ```javascript const ChatHistory = ({ chatRecords }: Props) => { const [activeIndex, setActiveIndex] = useState(0); useEffect(() => { setActiveIndex(0); }, [chatRecords]); return ( <Accordion fluid styled> {chatRecords.map((message, index) => ( <div key={index}> <Accordion.Title active={activeIndex === index} onClick={() => { if (activeIndex == index) { setActiveIndex(-1); } else { setActiveIndex(index); } }} > <Icon name="dropdown" /> {message.question} <div> <Label color="orange" ribbon="right"> <p style={{ maxWidth: 256 }} className="truncate"> {message.file_name} </p> </Label> </div> </Accordion.Title> <Accordion.Content active={activeIndex === index}> <Text className="text-gray-800 mb-4 whitespace-pre-line"> {message.answer} </Text> </Accordion.Content> </div> ))} </Accordion> ); }; export default ChatHistory; ``` --- このブログでは、RAGアプリケーションの開発に必要な技術スタックと具体的な実装方法を詳細に説明しています。詳細なコードや実装手順については、[バックエンドGitHubリポジトリ](https://github.com/Nelsonlin0321/webdev-rag-backend-api)および[フロントエンドGitHubリポジトリ](https://github.com/Nelsonlin0321/webdev-nextjs-rag)を参照してください。