Hugging Face's logo

Spaces:
Jayan12321
/
rag-engine
Running

App Files Community
rag-engine
File size: 10,338 Bytes
ac594b6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG Engine - Interactive Architecture Showcase</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="brand">
                <div class="brand-icon">🧠</div>
                <div class="brand-info">
                    <h2>RAG Engine</h2>
                    <span class="badge">Architecture Showcase</span>
                </div>
            </div>

            <nav class="nav-menu">
                <button class="nav-item active" onclick="switchTab('ask')">
                    <span class="icon">💬</span> Ask & Retrieve
                </button>
                <button class="nav-item" onclick="switchTab('inspector')">
                    <span class="icon">🔬</span> Pipeline Inspector
                </button>
                <button class="nav-item" onclick="switchTab('knowledge')">
                    <span class="icon">📚</span> Knowledge Base
                </button>
                <button class="nav-item" onclick="switchTab('architecture')">
                    <span class="icon">📐</span> How RAG Works
                </button>
            </nav>

            <div class="sidebar-stats">
                <h4>Knowledge Base Stats</h4>
                <div class="stat-row">
                    <span>Documents:</span>
                    <strong id="stat-docs">3</strong>
                </div>
                <div class="stat-row">
                    <span>Indexed Chunks:</span>
                    <strong id="stat-chunks">6</strong>
                </div>
                <div class="stat-row">
                    <span>Retrieval:</span>
                    <strong>Hybrid (Vector + BM25)</strong>
                </div>
            </div>

            <div class="sidebar-footer">
                <a href="https://github.com/JayanGupta/RAG-Engine" target="_blank" class="github-link">
                    <svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
                    View Python Source Code
                </a>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main class="main-content">
            <!-- Tab 1: Ask & Retrieve -->
            <section id="tab-ask" class="tab-content active">
                <header class="content-header">
                    <h1>Ask Grounded Questions</h1>
                    <p>Enter any query to see hybrid semantic search, context augmentation, and answer synthesis in real time.</p>
                </header>

                <div class="sample-queries">
                    <span>Try asking:</span>
                    <button class="sample-pill" onclick="setQuery('What temperature must superconducting qubits operate at?')">Quantum: Operating Temperature?</button>
                    <button class="sample-pill" onclick="setQuery('What is the primary mirror of the James Webb Space Telescope made of?')">JWST: Mirror Composition?</button>
                    <button class="sample-pill" onclick="setQuery('What technologies are used for long-duration energy storage exceeding 8 hours?')">Energy: Long-Duration Storage?</button>
                </div>

                <div class="search-box-card">
                    <div class="search-input-wrapper">
                        <input type="text" id="query-input" placeholder="Ask a question based on indexed knowledge..." value="What temperature must superconducting qubits operate at?">
                        <button class="btn-primary" onclick="runQuery()">Execute Query</button>
                    </div>
                </div>

                <div id="answer-section" class="answer-section">
                    <!-- Populated dynamically -->
                </div>
            </section>

            <!-- Tab 2: Pipeline Inspector -->
            <section id="tab-inspector" class="tab-content">
                <header class="content-header">
                    <h1>🔬 RAG Pipeline Inspector</h1>
                    <p>Observe how the query is broken down across Dense Vector Search, Sparse BM25 Keyword Search, and Reciprocal Rank Fusion (RRF).</p>
                </header>

                <div class="inspector-grid">
                    <div class="inspector-card">
                        <h3>1️⃣ Dense Vector Search</h3>
                        <p class="subtitle">Measures semantic similarity via cosine distance.</p>
                        <div id="dense-results-list" class="results-mini-list"></div>
                    </div>

                    <div class="inspector-card">
                        <h3>2️⃣ Sparse BM25 Search</h3>
                        <p class="subtitle">Captures exact lexical matches and keyword occurrences.</p>
                        <div id="bm25-results-list" class="results-mini-list"></div>
                    </div>
                </div>

                <div class="rrf-section">
                    <h3>3️⃣ Reciprocal Rank Fusion (RRF) Merge</h3>
                    <p class="subtitle">Combines dense and sparse rankings: <code>Score = sum( weight / (60 + rank) )</code></p>
                    <div id="fused-results-list" class="fused-table-card"></div>
                </div>
            </section>

            <!-- Tab 3: Knowledge Base -->
            <section id="tab-knowledge" class="tab-content">
                <header class="content-header">
                    <h1>📚 Knowledge Base Manager</h1>
                    <p>View pre-loaded articles or add your own custom notes to test real-time client-side chunking and indexing.</p>
                </header>

                <div class="kb-layout">
                    <div class="kb-list-pane">
                        <h3>Indexed Documents</h3>
                        <div id="kb-docs-list" class="kb-docs-list"></div>
                    </div>

                    <div class="kb-add-pane">
                        <h3>Index a New Document</h3>
                        <input type="text" id="new-doc-title" placeholder="Document Title (e.g. Transformers in Deep Learning)" class="form-input">
                        <textarea id="new-doc-text" placeholder="Paste document text here..." class="form-textarea" rows="6"></textarea>
                        <button class="btn-primary" onclick="addNewDocument()">Index into Knowledge Base</button>
                    </div>
                </div>
            </section>

            <!-- Tab 4: How RAG Works -->
            <section id="tab-architecture" class="tab-content">
                <header class="content-header">
                    <h1>📐 How Retrieval-Augmented Generation Works</h1>
                    <p>A transparent breakdown of the architecture, trade-offs, and why hybrid search outperforms naive vector-only systems.</p>
                </header>

                <div class="architecture-cards-grid">
                    <div class="arch-card">
                        <div class="arch-step">Step 1</div>
                        <h3>Document Chunking</h3>
                        <p>Embedding a 50-page document into a single vector averages out specific facts. We split text into overlapping windows (~400 words with 50-word overlap) to preserve local semantic meaning.</p>
                    </div>
                    <div class="arch-card">
                        <div class="arch-step">Step 2</div>
                        <h3>Dual Indexing</h3>
                        <p>Chunks are indexed in two distinct data structures: a <strong>vector index</strong> for conceptual similarity and a <strong>BM25 index</strong> for exact identifiers and numerical values.</p>
                    </div>
                    <div class="arch-card">
                        <div class="arch-step">Step 3</div>
                        <h3>Hybrid Retrieval & RRF</h3>
                        <p>Dense search finds synonyms; BM25 finds exact terms. Reciprocal Rank Fusion (RRF) merges both lists without requiring score normalization.</p>
                    </div>
                    <div class="arch-card">
                        <div class="arch-step">Step 4</div>
                        <h3>Prompt Augmentation</h3>
                        <p>The top ranked passages are injected into the LLM system prompt. The LLM is instructed to answer strictly from the retrieved evidence and cite sources.</p>
                    </div>
                </div>

                <div class="transparency-card">
                    <h3>🛠️ Engineering Transparency Note</h3>
                    <p>
                        This project was built and documented by <strong>Jayan Gupta</strong>. AI coding tools were used for rapid scaffolding. The hybrid retrieval logic, mathematical RRF formulation, and evaluation pipeline were designed and validated to provide a clear, educational reference implementation.
                    </p>
                    <p>
                        <strong>GitHub Repository:</strong> <a href="https://github.com/JayanGupta/RAG-Engine" target="_blank">github.com/JayanGupta/RAG-Engine</a>
                    </p>
                </div>
            </section>
        </main>
    </div>

    <script src="app.js"></script>
</body>
</html>