Skip to content
    Technology

    Building an Advanced RAG System with Re-Ranking and Interactive UI

    MCP Israel Team
    January 20, 2025
    25 min read
    RAG
    Hybrid Search
    Re-Ranking
    Python
    React
    Building an Advanced RAG System with Re-Ranking and Interactive UI
    Share:

    What is RAG and Why Does It Matter?

    RAG is a paradigm that combines Information Retrieval with Text Generation. Instead of relying solely on the model's built-in knowledge, we bring it relevant context from our document repository. Achieve 95% accuracy with RAG versus 60% without, 70% reduction in hallucinations, no Fine-Tuning needed, and instant information updates without retraining.

    RAG Advantages

    • Freshness: Information updates without retraining
    • Accuracy: Answers based on specific sources
    • Transparency: Sources can be displayed to users
    • Cost savings: No expensive fine-tuning needed

    System Architecture

    The system includes three layers: React Frontend with Search Box, Results and Chat Interface. FastAPI Backend with Retriever, Re-Ranker and Generator. And a storage layer with Vector Store (pgvector) and Full-Text Search (BM25).

    Step 1: Setting Up the Environment

    Dependencies include fastapi, uvicorn, openai, sentence-transformers, pgvector, psycopg2-binary, rank_bm25, langchain and langchain-openai.

    Step 2: Document Indexing

    Indexing is the most critical step. We build a pipeline that handles smart chunking with RecursiveCharacterTextSplitter, embeddings with multilingual-e5-large, and dual storage (vector + textual) in PostgreSQL with pgvector.

    Step 3: Hybrid Search

    Hybrid search combines the advantages of vector search (semantic) with keyword search (BM25). Using Reciprocal Rank Fusion (RRF) to combine results gives better results than either method alone.

    Step 4: Re-Ranking with Cross-Encoder

    Re-ranking significantly improves accuracy by directly comparing the query to each document. Cross-Encoder is more computationally expensive, so we run it only on the initial Top-K.

    Step 5: Answer Generation with LLM

    The Generator builds context from retrieved documents, sends them as a prompt to GPT-4o, and receives a source-based answer. Supports streaming for better user experience.

    Step 6: Backend API

    FastAPI provides two endpoints: /search for search only, and /ask for the full RAG pipeline with streaming.

    Step 7: React Frontend

    Interactive Chat interface with source display for each answer, auto-scroll, and loading animations.

    Step 8: Quality Evaluation

    Key metrics: Precision@K, Recall@K, MRR (Mean Reciprocal Rank) and NDCG@K. Systematic evaluation on a test query set.

    Summary

    We built an end-to-end RAG system that includes smart indexing, hybrid search, re-ranking with Cross-Encoder, and a user-friendly interface. The system provides accurate answers based on your documents with full transparency about sources. For Hebrew language, use the intfloat/multilingual-e5-large model which comes with excellent Hebrew support.

    Want to implement this in your business?

    קבעו שיחת ייעוץ חינם של 30 דקות ונבנה יחד תוכנית פעולה מותאמת לצרכים שלכם.

    שלחו הודעה בווטסאפ

    Related Articles

    /* deployed 2026-04-08T12:08 */