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

精度の高いRAG実装のための推奨テックスタック

精度の高いRAG実装のためのテックスタック選定の考察

RAG（Retrieval Augmented Generation）アプリケーションのフルスタック実装

概要

技術スタック

• データベース: 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
• フロントエンドGitHub: https://github.com/Nelsonlin0321/webdev-nextjs-rag

バックエンド

インジェスト

• PDFの読み取りとチャンク作成: LlamaIndexを使用してPDFを読み取り、抽出されたテキストを小さな意味のあるセグメントに分割します。
• 文のエンベディングへのエンコード: Sentence Transformersを使用して文を固定長の数値表現（エンベディング）に変換します。
• ベクトル検索データベースへのエンベディングのロード: MongoDB Atlas Vector Searchを使用してエンベディングを効率的に保存および検索します。

@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モデルを使用して、生成されたプロンプトとユーザーの質問に基づいて回答を生成します。

@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](https://thenewstack.io/freshen-up-llms-with-retrieval-augmented-generation/).message.content, "uuid": str(uuid4())}

フロントエンド

1. ファイルアップロード

api/ingest

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](https://thenewstack.io/freshen-up-llms-with-retrieval-augmented-generation/));
                        }
                    }}
                />
                <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. ファイル検索

const FileSearcher = ({ fileNames, setFileName }: Props) => {
    const [value, setValue] = useState<string | null>(fileNames[0](https://thenewstack.io/freshen-up-llms-with-retrieval-augmented-generation/));
    const [inputValue, setInputValue] = useState<string | undefined>(fileNames[0](https://thenewstack.io/freshen-up-llms-with-retrieval-augmented-generation/));
    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

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;

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;

SupabaseのVector DBに対するRedditでの評価

SupabaseのVector DBに対する評価の考察

PGVectorは信じられないほど優れています : r/Supabase - Reddit

業界で広く使用されているベクターデータベースとその適用例

LangChainについて

PgvectorとSupabase

その他のリソース

• LangChainのRedditコミュニティ
• LangChainの公式サイト

Supabase Vector StoreにおけるIDベースのRAG

• Supabase公式サイト
• GitHubリポジトリ
• Discordコミュニティ
• Twitterアカウント

ドキュメント処理とOpenAI Embeddings

ユーザーはLangChainを使用してドキュメントを処理し、その後OpenAI Embeddingsを生成してSupabase Vector Storeに保存しています。以下の画像はその例です：

ドキュメントの分離とID管理

メタデータの使用とSQLベースの解決策

ユーザーは多くの検索を行った結果、最も一般的な解決策としてメタデータにすべてのIDを入れる方法を見つけましたが、これはSQLベースのデータベースには適していないと考えています。以下の画像はその例です：

RAGの高度な実装と最適化の概要

RAGの高度な実装と最適化に関する考察

Advanced RAG implementations : r/LocalLLaMA - Reddit

• Advanced RAGの実装にはどのような高度な機能がありますか？
• 基本的なYouTubeチュートリアルに基づいて1日で動作させることができるRAGを超えた次のレベルに質問応答ツールを進化させるための機能は何ですか？
• 良いリソースやGithubの実装例はありますか？

Secrets to Optimizing RAG LLM Apps for Better Performance ...

1. アプリ全体の応答速度はどの程度か？つまり、ユーザーが入力クエリを入力してからアプリが応答するまでの時間はどのくらいか？
2. ベクトルの作成と保存のコストと複雑さをどのように削減できるか？
3. RAGパイプラインからLLMに供給される結果の精度はどの程度か？この品質をさらに向上させる方法はあるか？