Upload index.html with huggingface_hub

index.html

@@ -0,0 +1,186 @@
+<!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>