Vizz17/context-aware-rag
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>The Roadmap — ContextAware</title>7 <meta name="description" content="Architecture, pipeline, and technical deep-dive into the ContextAware RAG Engine">8 <script src="https://cdn.tailwindcss.com"></script>9 <link rel="stylesheet" href="/static/style.css">10 <style>11 body { overflow-y: auto; padding: 0; }12 </style>13</head>14<body>15 16 <!-- Particle Canvas Background -->17 <canvas id="particleCanvas"></canvas>18 19 <!-- Animated Background -->20 <div class="bg-mesh"></div>21 22 <div class="page-container mb-12">23 <!-- Back btn -->24 <a href="/" class="inline-flex items-center gap-2 text-sm font-semibold text-[var(--text-main)] hover:text-[#00e5ff] mb-8 btn-glass transition">← Back to Chat</a>25 26 <!-- Hero -->27 <div class="text-center py-8 mb-10 border-b border-[var(--glass-border)]">28 <span class="inline-block bg-[rgba(0,229,255,0.06)] text-[#00e5ff] border border-[rgba(0,229,255,0.12)] rounded-full px-4 py-1.5 text-xs font-bold uppercase tracking-widest mb-4 shadow-[0_0_15px_rgba(0,229,255,0.08)]">🔬 Architecture & Systems Design</span>29 <h1 class="text-5xl font-extrabold tracking-tight mb-4 text-white">System <span class="gradient-text">Architecture</span></h1>30 <p class="text-[var(--text-muted)] mt-2 text-lg max-w-3xl mx-auto">A comprehensive technical overview of the ContextAware Retrieval-Augmented Generation (RAG) framework, detailing ingestion pipelines, retrieval heuristics, and generative orchestration.</p>31 </div>32 33 <!-- Stats -->34 <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-14">35 <div class="doc-card p-5 text-center" style="animation: slideUp 0.5s ease both; animation-delay: 0s;">36 <div class="text-3xl font-extrabold gradient-text">3</div>37 <div class="text-xs font-semibold text-[var(--text-muted)] mt-2 uppercase tracking-wide">Retrieval Stages</div>38 </div>39 <div class="doc-card p-5 text-center" style="animation: slideUp 0.5s ease both; animation-delay: 0.1s;">40 <div class="text-3xl font-extrabold gradient-text">512</div>41 <div class="text-xs font-semibold text-[var(--text-muted)] mt-2 uppercase tracking-wide">Tokens / Chunk</div>42 </div>43 <div class="doc-card p-5 text-center" style="animation: slideUp 0.5s ease both; animation-delay: 0.2s;">44 <div class="text-3xl font-extrabold gradient-text">768</div>45 <div class="text-xs font-semibold text-[var(--text-muted)] mt-2 uppercase tracking-wide">Embedding Dims</div>46 </div>47 <div class="doc-card p-5 text-center" style="animation: slideUp 0.5s ease both; animation-delay: 0.3s;">48 <div class="text-3xl font-extrabold gradient-text">5</div>49 <div class="text-xs font-semibold text-[var(--text-muted)] mt-2 uppercase tracking-wide">LLM Providers</div>50 </div>51 <div class="doc-card p-5 text-center" style="animation: slideUp 0.5s ease both; animation-delay: 0.4s;">52 <div class="text-3xl font-extrabold gradient-text">10+</div>53 <div class="text-xs font-semibold text-[var(--text-muted)] mt-2 uppercase tracking-wide">Modules Built</div>54 </div>55 </div>56 57 <!-- Pipeline -->58 <h2 class="text-2xl font-bold text-white mb-6 border-l-4 border-[#00e5ff] pl-3">Asynchronous Data Processing Pipeline</h2>59 <p class="text-[var(--text-muted)] mb-8 font-medium">The end-to-end operational flow encompassing document ingestion, semantic embedding, vector indexing, and optimal context retrieval for generative inference.</p>60 61 <div class="grid md:grid-cols-2 gap-10 mb-14">62 <!-- Ingestion -->63 <div class="p-6 rounded-2xl border border-[var(--glass-border)] bg-[var(--glass-bg)] shadow-[0_4px_30px_rgba(0,0,0,0.3)]">64 <div class="text-sm font-extrabold text-[#00e5ff] uppercase tracking-widest mb-6 text-center">📥 Phase I: Corpus Ingestion & Indexing</div>65 <div class="space-y-3">66 <div class="doc-card p-4"><span class="mr-2 text-xl">📄</span><span class="font-bold text-white">1. Document Acquisition</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Asynchronous file handling via FastAPI multipart/form-data.</div></div>67 <div class="text-center text-[rgba(0,229,255,0.3)] py-1">↓</div>68 <div class="doc-card p-4"><span class="mr-2 text-xl">🔍</span><span class="font-bold text-white">2. PDF Parsing & Extraction</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">PyMuPDF-driven optical text extraction, preserving spatial metadata and pagination.</div></div>69 <div class="text-center text-[rgba(0,229,255,0.3)] py-1">↓</div>70 <div class="doc-card p-4"><span class="mr-2 text-xl">✂️</span><span class="font-bold text-white">3. Recursive Text Chunking</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Semantic boundary splitting algorithm yielding 512-token chunks with 64-token overlap for contextual continuity.</div></div>71 <div class="text-center text-[rgba(0,229,255,0.3)] py-1">↓</div>72 <div class="doc-card p-4"><span class="mr-2 text-xl">🔢</span><span class="font-bold text-white">4. High-Dimensional Embedding</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Transformation of textual data into 768-dimensional dense vectors utilizing Gemini-Embedding-001.</div></div>73 <div class="text-center text-[rgba(0,229,255,0.3)] py-1">↓</div>74 <div class="doc-card p-4"><span class="mr-2 text-xl">🗄️</span><span class="font-bold text-white">5. Persistent Vector Storage</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Indexing within an isolated ChromaDB HNSW (Hierarchical Navigable Small World) collection optimized for cosine similarity.</div></div>75 </div>76 </div>77 78 <!-- Query -->79 <div class="p-6 rounded-2xl border border-[var(--glass-border)] bg-[var(--glass-bg)] shadow-[0_4px_30px_rgba(0,0,0,0.3)]">80 <div class="text-sm font-extrabold text-[#b388ff] uppercase tracking-widest mb-6 text-center">💬 Phase II: Grounded Retrieval & Generation</div>81 <div class="space-y-3">82 <div class="doc-card p-4"><span class="mr-2 text-xl">❓</span><span class="font-bold text-white">1. User Query Modeling</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Semantic mapping of the user's natural language input into the shared vector space.</div></div>83 <div class="text-center text-[rgba(179,136,255,0.3)] py-1">↓</div>84 <div class="doc-card p-4"><span class="mr-2 text-xl">🎯</span><span class="font-bold text-white">2. Candidate Set Retrieval</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Efficient Approximate Nearest Neighbor (ANN) search isolating the top 30 potential candidate chunks.</div></div>85 <div class="text-center text-[rgba(179,136,255,0.3)] py-1">↓</div>86 <div class="doc-card p-4 border-l-4 border-[#00e676] shadow-[0_0_15px_rgba(0,230,118,0.08)]"><span class="mr-2 text-xl">🧬</span><span class="font-bold text-[#00e676]">3. Multi-Objective Subset Optimization</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Algorithmic selection maximizing: f(S) = α·Relevance + β·Coverage + γ·Support — fundamentally mitigating semantic redundancy.</div></div>87 <div class="text-center text-[rgba(179,136,255,0.3)] py-1">↓</div>88 <div class="doc-card p-4"><span class="mr-2 text-xl">⚡</span><span class="font-bold text-white">4. Cross-Encoder Reranking</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">Secondary validation via ms-marco-MiniLM-L-6-v2 to evaluate strict query-document entailment prior to generation.</div></div>89 <div class="text-center text-[rgba(179,136,255,0.3)] py-1">↓</div>90 <div class="doc-card p-4"><span class="mr-2 text-xl">🤖</span><span class="font-bold text-white">5. Constrained Generative Inference</span><div class="text-xs text-[var(--text-muted)] mt-1 ml-9">LLaMA 3 70B synthesizes a precise response, strictly constrained by the validated context to eliminate parametic hallucination.</div></div>91 </div>92 </div>93 </div>94 95 <!-- Tech Stack -->96 <h2 class="text-2xl font-bold text-white mb-6 border-l-4 border-[#00e5ff] pl-3">Technology Stack</h2>97 <p class="text-[var(--text-muted)] mb-8">Key technologies powering each layer of the application.</p>98 99 <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-14">100 <div class="doc-card p-5">101 <div class="text-[10px] font-bold text-[#00e5ff] mb-2 uppercase tracking-wider">LLM</div>102 <div class="font-bold text-white">Groq LLaMA 3</div>103 <div class="text-xs text-[var(--text-muted)] mt-1">Google Gemini & OpenAI</div>104 </div>105 <div class="doc-card p-5">106 <div class="text-[10px] font-bold text-[#b388ff] mb-2 uppercase tracking-wider">Embedding</div>107 <div class="font-bold text-white">gemini-001</div>108 <div class="text-xs text-[var(--text-muted)] mt-1">768 dim dense vectors</div>109 </div>110 <div class="doc-card p-5">111 <div class="text-[10px] font-bold text-[#00e5ff] mb-2 uppercase tracking-wider">Storage</div>112 <div class="font-bold text-white">ChromaDB</div>113 <div class="text-xs text-[var(--text-muted)] mt-1">HNSW persistent index</div>114 </div>115 <div class="doc-card p-5">116 <div class="text-[10px] font-bold text-[#00e676] mb-2 uppercase tracking-wider">Backend</div>117 <div class="font-bold text-white">FastAPI</div>118 <div class="text-xs text-[var(--text-muted)] mt-1">Async Python REST API</div>119 </div>120 <div class="doc-card p-5">121 <div class="text-[10px] font-bold text-[#ffd740] mb-2 uppercase tracking-wider">Ranking</div>122 <div class="font-bold text-white">ms-marco-L-6</div>123 <div class="text-xs text-[var(--text-muted)] mt-1">CrossEncoder ranking</div>124 </div>125 <div class="doc-card p-5">126 <div class="text-[10px] font-bold text-[#ff80ab] mb-2 uppercase tracking-wider">Frontend</div>127 <div class="font-bold text-white">HTML & Tailwind JS</div>128 <div class="text-xs text-[var(--text-muted)] mt-1">Black Transparent UI</div>129 </div>130 <div class="doc-card p-5">131 <div class="text-[10px] font-bold text-[#ff5252] mb-2 uppercase tracking-wider">Parsing</div>132 <div class="font-bold text-white">PyMuPDF</div>133 <div class="text-xs text-[var(--text-muted)] mt-1">Text/Meta extraction</div>134 </div>135 <div class="doc-card p-5">136 <div class="text-[10px] font-bold text-[#64ffda] mb-2 uppercase tracking-wider">Optimizer</div>137 <div class="font-bold text-white">Multi-Obj Greedy</div>138 <div class="text-xs text-[var(--text-muted)] mt-1">Submodular selection</div>139 </div>140 </div>141 142 <!-- Research Contribution -->143 <h2 class="text-2xl font-bold text-white mb-6 border-l-4 border-[#00e5ff] pl-3">Original Research Contributions</h2>144 <p class="text-[var(--text-muted)] mb-8 font-medium">Contrasting the implemented methodology against standard baseline constraints observed in contemporary RAG systems.</p>145 146 <div class="grid md:grid-cols-2 gap-6 mb-14">147 <div class="p-6 bg-[rgba(255,82,82,0.03)] border border-[rgba(255,82,82,0.12)] rounded-2xl shadow-[0_4px_30px_rgba(0,0,0,0.2)]">148 <div class="font-extrabold text-[#ff5252] mb-4 text-sm uppercase tracking-wider">❌ Standard Baseline: Naïve Top-K Dense Retrieval</div>149 <ul class="text-sm text-[var(--text-muted)] space-y-3 font-medium">150 <li class="flex gap-2"><span class="text-[#ff5252]">•</span> Ranks documents independently by marginal cosine similarity.</li>151 <li class="flex gap-2"><span class="text-[#ff5252]">•</span> Fails to account for inter-document semantic overlap across the retrieved set.</li>152 <li class="flex gap-2"><span class="text-[#ff5252]">•</span> Frequently populates the context window with clustered, highly redundant text chunks.</li>153 <li class="flex gap-2"><span class="text-[#ff5252]">•</span> Induces severe hallucination risk when generative reasoning requires a diverse, multi-perspective synthesis of information.</li>154 </ul>155 </div>156 <div class="p-6 bg-[rgba(0,230,118,0.03)] border border-[rgba(0,230,118,0.12)] rounded-2xl shadow-[0_4px_30px_rgba(0,0,0,0.2)]">157 <div class="font-extrabold text-[#00e676] mb-4 text-sm uppercase tracking-wider">✅ Proposed Method: Submodular Context Optimization</div>158 <ul class="text-sm text-[var(--text-muted)] space-y-3 font-medium">159 <li class="flex gap-2"><span class="text-[#00e676]">•</span> Transitions selection logic from a sorting heuristic to a constrained knapsack optimization sequence.</li>160 <li class="flex gap-2"><span class="text-[#00e676]">•</span> Jointly penalizes semantic redundancy while enforcing query relevance and inter-chunk factual support.</li>161 <li class="flex gap-2"><span class="text-[#00e676]">•</span> Evaluates each candidate dynamically conditioned on the distribution of already-selected chunks.</li>162 <li class="flex gap-2"><span class="text-[#00e676]">•</span> Demonstrably enhances grounding robustness and eliminates systemic generative contradictions.</li>163 </ul>164 </div>165 </div>166 167 </div>168 169 <!-- Particle Animation Script -->170 <script>171 (function() {172 const canvas = document.getElementById('particleCanvas');173 const ctx = canvas.getContext('2d');174 let particles = [];175 const PARTICLE_COUNT = 50;176 const CONNECTION_DIST = 110;177 178 function resize() {179 canvas.width = window.innerWidth;180 canvas.height = window.innerHeight;181 }182 resize();183 window.addEventListener('resize', resize);184 185 class Particle {186 constructor() {187 this.x = Math.random() * canvas.width;188 this.y = Math.random() * canvas.height;189 this.vx = (Math.random() - 0.5) * 0.25;190 this.vy = (Math.random() - 0.5) * 0.25;191 this.radius = Math.random() * 1.2 + 0.4;192 this.opacity = Math.random() * 0.25 + 0.08;193 }194 update() {195 this.x += this.vx;196 this.y += this.vy;197 if (this.x < 0 || this.x > canvas.width) this.vx *= -1;198 if (this.y < 0 || this.y > canvas.height) this.vy *= -1;199 }200 draw() {201 ctx.beginPath();202 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);203 ctx.fillStyle = `rgba(0, 229, 255, ${this.opacity})`;204 ctx.fill();205 }206 }207 208 for (let i = 0; i < PARTICLE_COUNT; i++) particles.push(new Particle());209 210 function animate() {211 ctx.clearRect(0, 0, canvas.width, canvas.height);212 for (let i = 0; i < particles.length; i++) {213 particles[i].update();214 particles[i].draw();215 for (let j = i + 1; j < particles.length; j++) {216 const dx = particles[i].x - particles[j].x;217 const dy = particles[i].y - particles[j].y;218 const dist = Math.sqrt(dx * dx + dy * dy);219 if (dist < CONNECTION_DIST) {220 ctx.beginPath();221 ctx.moveTo(particles[i].x, particles[i].y);222 ctx.lineTo(particles[j].x, particles[j].y);223 ctx.strokeStyle = `rgba(0, 229, 255, ${(1 - dist / CONNECTION_DIST) * 0.06})`;224 ctx.lineWidth = 0.5;225 ctx.stroke();226 }227 }228 }229 requestAnimationFrame(animate);230 }231 animate();232 })();233 </script>234</body>235</html>236