Hugging Face's logo

Spaces:
Jayan12321
/
rag-engine
Running

App Files Community
rag-engine / index.html
Jayan12321's picture
Jayan12321
Upload index.html with huggingface_hub
ac594b6 verified
Raw History Blame Contribute Delete
10.3 kB
<!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>