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>ContextAware — AI Document Intelligence</title>7 <meta name="description" content="AI-powered document intelligence with source-grounded answers">8 <script src="https://cdn.tailwindcss.com"></script>9 <link rel="stylesheet" href="/static/style.css">10</head>11<body>12 13<!-- Particle Canvas Background -->14<canvas id="particleCanvas"></canvas>15 16<!-- Subtle Mesh Glow -->17<div class="bg-mesh"></div>18 19<div class="app-layout">20 21 <!-- ═══ SIDEBAR ═══ -->22 <aside class="sidebar glass-panel" id="sidebar">23 <div class="p-5 flex flex-col h-full gap-4 relative">24 25 <!-- Close mobile btn -->26 <button class="md:hidden absolute top-4 right-4 text-gray-500 hover:text-white transition-colors" onclick="toggleSidebar()">✕</button>27 28 <!-- Brand -->29 <div class="flex items-center justify-between mb-4">30 <div class="flex items-center gap-3">31 <div class="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg transition-all duration-300 border border-[rgba(0,229,255,0.15)] bg-[rgba(0,229,255,0.06)] hover:rotate-[15deg] hover:shadow-[0_0_20px_rgba(0,229,255,0.15)]" style="animation: pulse-glow 3s ease-in-out infinite;">32 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-[#00e5ff]">33 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>34 <polyline points="14 2 14 8 20 8"></polyline>35 <circle cx="12" cy="14" r="3"></circle>36 <path d="M12 11v-1"></path>37 <path d="M12 18v-1"></path>38 <path d="M9 14H8"></path>39 <path d="M16 14h-1"></path>40 </svg>41 </div>42 <div>43 <h1 class="text-xl font-black tracking-tight uppercase text-white">Context<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00e5ff] to-[#b388ff]">Aware</span></h1>44 </div>45 </div>46 </div>47 48 <!-- Chat History (scoped to active doc) -->49 <div class="mt-2 flex-1 flex flex-col" id="chatHistorySection">50 <div class="text-[10px] font-bold uppercase tracking-[0.15em] text-[var(--text-muted)] mb-3 pl-1">Recent Conversations</div>51 <button onclick="newChat()" class="w-full py-3 px-4 rounded-xl btn-glass flex justify-between items-center mb-3 group hover:shadow-[0_0_15px_rgba(0,229,255,0.06)] transition-all border border-[var(--glass-border)]">52 <span class="font-bold text-[var(--text-main)] group-hover:text-[#00e5ff] transition-colors">Start New Chat</span> <span class="bg-[rgba(0,229,255,0.06)] text-[#00e5ff] rounded p-1 group-hover:rotate-12 transition-transform">✨</span>53 </button>54 <div id="chatList" class="flex-1 overflow-y-auto space-y-2 pr-1">55 <div class="text-xs text-center py-8 text-[var(--text-muted)] leading-relaxed">No past chats.<br>Select a document from the gateway to begin.</div>56 </div>57 </div>58 59 <!-- Nav -->60 <div class="pt-3 border-t border-[var(--glass-border)] flex gap-2">61 <a href="/static/roadmap.html" class="flex-1 text-center py-2 text-xs font-semibold rounded-xl btn-glass hover:text-[#00e5ff]">Roadmap</a>62 <a href="/static/change.html" class="flex-1 text-center py-2 text-xs font-semibold rounded-xl btn-glass hover:text-[#b388ff]">Algorithm Shift</a>63 </div>64 </div>65 </aside>66 67 <!-- ═══ MAIN AREA ═══ -->68 <main class="main-area glass-panel">69 70 <!-- Header / Active Doc Bar -->71 <div class="h-14 border-b border-[var(--glass-border)] flex items-center justify-between px-6 backdrop-blur-md z-10 sticky top-0">72 <div class="flex items-center gap-3">73 <button class="md:hidden btn-glass w-10 h-10 flex items-center justify-center p-0 rounded-xl" onclick="toggleSidebar()">☰</button>74 <div id="activeDocBadge" class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-[var(--glass-bg)] border border-[var(--glass-border)]">75 <span class="text-xs font-bold text-[var(--text-muted)] uppercase tracking-wider">No document selected</span>76 </div>77 </div>78 79 <div class="flex items-center gap-4">80 <div id="optimizerBadge" class="hidden sm:flex text-xs font-semibold px-3 py-1.5 rounded-lg bg-[rgba(0,230,118,0.06)] text-[#00e676] border border-[rgba(0,230,118,0.12)] items-center gap-1.5" style="display:none;">81 <span class="w-2 h-2 rounded-full bg-[#00e676] animate-pulse"></span> Multi-Objective Optimizer Active82 </div>83 <div class="flex items-center gap-2">84 <span id="userDisplay" class="text-xs font-bold text-white uppercase tracking-wider bg-[rgba(255,255,255,0.05)] border border-[var(--glass-border)] px-2.5 py-1.5 rounded-lg">Guest</span>85 <button onclick="handleLogout()" class="btn-glass p-2 rounded-lg hover:text-red-400 hover:border-red-400/20 transition-all text-xs font-bold flex items-center justify-center" title="Log Out">86 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">87 <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>88 <polyline points="16 17 21 12 16 7"></polyline>89 <line x1="21" y1="12" x2="9" y2="12"></line>90 </svg>91 </button>92 </div>93 </div>94 </div>95 96 <!-- ═══ DOC SELECTION GATEWAY (shown on start) ═══ -->97 <div class="flex flex-col items-center justify-center flex-1 p-6 text-center" id="docGateway">98 <div class="w-24 h-24 mb-6 floating flex items-center justify-center rounded-3xl shadow-2xl" style="background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(179,136,255,0.15)); border: 1px solid rgba(0,229,255,0.1); box-shadow: 0 0 40px rgba(0,229,255,0.1);">99 <span class="text-4xl">📄</span>100 </div>101 <h2 class="text-3xl md:text-4xl font-extrabold mb-3 tracking-tight text-white">Choose a Document to Query</h2>102 <p class="text-[var(--text-muted)] text-lg max-w-lg mb-8">Each chat session is tied to a specific document for precise, grounded answers.</p>103 104 <div class="gateway-options w-full max-w-3xl">105 <!-- Option 1: Select existing doc -->106 <div class="gateway-card p-6 text-left flex flex-col justify-center cursor-pointer group" onclick="openDocSearchModal()">107 <div class="flex items-center gap-4 mb-3">108 <div class="w-14 h-14 rounded-2xl bg-[rgba(0,229,255,0.06)] border border-[rgba(0,229,255,0.1)] flex items-center justify-center text-3xl group-hover:scale-110 transition-transform group-hover:shadow-[0_0_20px_rgba(0,229,255,0.1)]">📚</div>109 <div>110 <div class="font-bold text-xl text-white">Select Document</div>111 <div class="text-sm text-[var(--text-muted)] mt-1">Search the knowledge base</div>112 </div>113 </div>114 <div class="mt-4 py-3 text-center rounded-xl font-bold text-sm shadow-lg transition-all" style="background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(179,136,255,0.15)); color: #00e5ff; border: 1px solid rgba(0,229,255,0.15);">115 Open Search 🔍116 </div>117 </div>118 119 <!-- Option 2: Upload new doc -->120 <div class="gateway-card p-6 text-left flex flex-col justify-center">121 <div class="flex items-center gap-4 mb-4">122 <div class="w-14 h-14 rounded-2xl bg-[rgba(179,136,255,0.06)] border border-[rgba(179,136,255,0.1)] flex items-center justify-center text-3xl">⬆️</div>123 <div>124 <div class="font-bold text-xl text-white">Upload New</div>125 <div class="text-sm text-[var(--text-muted)] mt-1">Add a PDF to the database</div>126 </div>127 </div>128 <div class="gateway-upload-zone flex-1 flex flex-col justify-center" id="gatewayUploadZone">129 <input type="file" id="gatewayFileInput" accept=".pdf">130 <div class="text-white font-semibold text-sm">Drop PDF or Click</div>131 <div class="text-xs text-[var(--text-muted)] mt-1">Max 50MB</div>132 </div>133 <div id="gatewayUploadStatus"></div>134 </div>135 </div>136 </div>137 138 <!-- ═══ CHAT WELCOME (shown after doc is selected) ═══ -->139 <div class="flex flex-col items-center justify-center flex-1 p-6 text-center welcome" id="welcome" style="display:none;">140 <div class="w-24 h-24 mb-6 floating flex items-center justify-center rounded-3xl shadow-2xl" style="background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(179,136,255,0.15)); border: 1px solid rgba(0,229,255,0.1); box-shadow: 0 0 40px rgba(0,229,255,0.1);">141 <span class="text-4xl">✨</span>142 </div>143 <h2 class="text-4xl md:text-5xl font-extrabold mb-3 tracking-tight text-white">How can I help you?</h2>144 <p class="text-[var(--text-muted)] text-lg max-w-lg mb-2" id="welcomeDocName"></p>145 146 <div class="w-full max-w-2xl mt-8">147 <div class="chat-input-wrapper shadow-2xl border border-[var(--glass-border)]">148 <textarea id="welcomeInput" rows="1" placeholder="Message ContextAware..." autocomplete="off" class="text-lg"></textarea>149 <button id="welcomeSendBtn" class="send-btn" disabled>150 <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>151 </button>152 </div>153 </div>154 </div>155 156 <!-- Chat Messages -->157 <div class="chat-messages" id="chatMessages"></div>158 159 <!-- Floating Chat Input (initially locked) -->160 <div class="chat-input-area" id="chatInputArea" style="display:none;">161 <div class="chat-input-wrapper max-w-4xl mx-auto border border-[var(--glass-border)]">162 <textarea id="chatInput" rows="1" placeholder="Ask a follow-up question..." autocomplete="off"></textarea>163 <button id="sendBtn" class="send-btn" disabled>164 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>165 </button>166 </div>167 </div>168 </main>169 170</div>171 172<!-- ═══ DOCUMENT SEARCH MODAL ═══ -->173<div class="modal-overlay hidden" id="docSearchModal" onclick="closeDocSearchModal(event)">174 <div class="modal-content glass-panel w-full max-w-2xl max-h-[80vh] flex flex-col m-4">175 <div class="p-5 border-b border-[var(--glass-border)] flex items-center justify-between">176 <h3 class="text-xl font-bold text-white">Knowledge Base</h3>177 <button onclick="closeDocSearchModal(true)" class="w-8 h-8 rounded-lg bg-[var(--glass-bg)] border border-[var(--glass-border)] text-[var(--text-muted)] flex items-center justify-center hover:text-white hover:border-[rgba(0,229,255,0.2)] transition-colors">✕</button>178 </div>179 180 <div class="p-5 border-b border-[var(--glass-border)]">181 <div class="relative w-full">182 <span class="absolute left-3 top-2.5 text-gray-500">🔍</span>183 <input type="text" id="modalSearchInput" placeholder="Search by filename..." 184 class="w-full bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl py-2.5 pl-10 pr-4 text-[var(--text-main)] outline-none focus:border-[rgba(0,229,255,0.3)] transition-colors"185 onkeyup="filterModalDocs(this.value)">186 </div>187 </div>188 189 <div class="flex-1 overflow-y-auto p-3" id="modalDocList">190 <!-- Populated by JS -->191 </div>192 </div>193</div>194 195<!-- Particle Animation Script -->196<script>197(function() {198 const canvas = document.getElementById('particleCanvas');199 const ctx = canvas.getContext('2d');200 let particles = [];201 let animId;202 const PARTICLE_COUNT = 60;203 const CONNECTION_DIST = 120;204 205 function resize() {206 canvas.width = window.innerWidth;207 canvas.height = window.innerHeight;208 }209 resize();210 window.addEventListener('resize', resize);211 212 class Particle {213 constructor() {214 this.x = Math.random() * canvas.width;215 this.y = Math.random() * canvas.height;216 this.vx = (Math.random() - 0.5) * 0.3;217 this.vy = (Math.random() - 0.5) * 0.3;218 this.radius = Math.random() * 1.5 + 0.5;219 this.opacity = Math.random() * 0.3 + 0.1;220 }221 update() {222 this.x += this.vx;223 this.y += this.vy;224 if (this.x < 0 || this.x > canvas.width) this.vx *= -1;225 if (this.y < 0 || this.y > canvas.height) this.vy *= -1;226 }227 draw() {228 ctx.beginPath();229 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);230 ctx.fillStyle = `rgba(0, 229, 255, ${this.opacity})`;231 ctx.fill();232 }233 }234 235 for (let i = 0; i < PARTICLE_COUNT; i++) {236 particles.push(new Particle());237 }238 239 function animate() {240 ctx.clearRect(0, 0, canvas.width, canvas.height);241 242 for (let i = 0; i < particles.length; i++) {243 particles[i].update();244 particles[i].draw();245 246 for (let j = i + 1; j < particles.length; j++) {247 const dx = particles[i].x - particles[j].x;248 const dy = particles[i].y - particles[j].y;249 const dist = Math.sqrt(dx * dx + dy * dy);250 251 if (dist < CONNECTION_DIST) {252 const opacity = (1 - dist / CONNECTION_DIST) * 0.08;253 ctx.beginPath();254 ctx.moveTo(particles[i].x, particles[i].y);255 ctx.lineTo(particles[j].x, particles[j].y);256 ctx.strokeStyle = `rgba(0, 229, 255, ${opacity})`;257 ctx.lineWidth = 0.5;258 ctx.stroke();259 }260 }261 }262 animId = requestAnimationFrame(animate);263 }264 animate();265})();266</script>267 268<!-- ═══ AUTHENTICATION OVERLAY ═══ -->269<div id="authOverlay" class="fixed inset-0 z-50 flex items-center justify-center bg-[#0a0c10]/80 backdrop-blur-xl transition-all duration-300">270 <div class="glass-panel w-full max-w-md p-8 m-4 flex flex-col items-center text-center shadow-[0_0_50px_rgba(0,229,255,0.08)] border border-[rgba(0,229,255,0.15)] animate-fade-in">271 <!-- Icon / Logo -->272 <div class="w-16 h-16 mb-6 flex items-center justify-center rounded-2xl border border-[rgba(0,229,255,0.2)] bg-[rgba(0,229,255,0.06)] shadow-[0_0_20px_rgba(0,229,255,0.1)]">273 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="text-[#00e5ff]">274 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>275 <polyline points="14 2 14 8 20 8"></polyline>276 <circle cx="12" cy="14" r="3"></circle>277 <path d="M12 11v-1"></path>278 <path d="M12 18v-1"></path>279 <path d="M9 14H8"></path>280 <path d="M16 14h-1"></path>281 </svg>282 </div>283 284 <h2 class="text-2xl font-black uppercase text-white tracking-wide mb-1">Context<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#00e5ff] to-[#b388ff]">Aware</span></h2>285 <p class="text-xs text-[var(--text-muted)] font-bold tracking-widest uppercase mb-6">AI Document Intelligence</p>286 287 <!-- Switcher -->288 <div class="flex w-full bg-[rgba(255,255,255,0.03)] border border-[var(--glass-border)] rounded-xl p-1 mb-6">289 <button id="tabLogin" class="flex-1 py-2 text-sm font-bold rounded-lg text-[#00e5ff] bg-[var(--glass-bg)] transition-all" onclick="switchAuthTab('login')">Sign In</button>290 <button id="tabRegister" class="flex-1 py-2 text-sm font-semibold rounded-lg text-[var(--text-muted)] hover:text-white transition-all" onclick="switchAuthTab('register')">Sign Up</button>291 </div>292 293 <!-- Auth Form -->294 <form id="authForm" class="w-full space-y-4" onsubmit="handleAuthSubmit(event)">295 <div class="text-left">296 <label class="block text-xs font-bold uppercase tracking-wider text-[var(--text-muted)] mb-1.5 pl-1">Username</label>297 <input type="text" id="authUsername" required placeholder="Enter username..." 298 class="w-full bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl py-3 px-4 text-[var(--text-main)] outline-none focus:border-[rgba(0,229,255,0.3)] transition-colors">299 </div>300 301 <div class="text-left">302 <label class="block text-xs font-bold uppercase tracking-wider text-[var(--text-muted)] mb-1.5 pl-1">Password</label>303 <input type="password" id="authPassword" required placeholder="Enter password..." 304 class="w-full bg-[var(--glass-bg)] border border-[var(--glass-border)] rounded-xl py-3 px-4 text-[var(--text-main)] outline-none focus:border-[rgba(0,229,255,0.3)] transition-colors">305 </div>306 307 <!-- Action Button -->308 <button type="submit" id="authSubmitBtn" class="w-full py-3 mt-2 rounded-xl font-extrabold text-sm shadow-lg border border-[rgba(0,229,255,0.15)] bg-gradient-to-r from-[rgba(0,229,255,0.2)] to-[rgba(179,136,255,0.2)] text-[#00e5ff] hover:shadow-[0_0_20px_rgba(0,229,255,0.15)] transition-all">309 Sign In310 </button>311 </form>312 313 <!-- Error/Status Info -->314 <div id="authError" class="text-red-400 text-xs font-semibold mt-4 hidden h-4"></div>315 316 <div class="w-full border-t border-[var(--glass-border)] my-5 flex items-center justify-center relative">317 <span class="bg-[#0f121a] px-3 text-[10px] font-bold text-[var(--text-muted)] uppercase tracking-widest">Or</span>318 </div>319 320 <!-- Guest Option -->321 <button onclick="handleGuestLogin()" class="w-full py-3 rounded-xl font-bold text-sm btn-glass text-white hover:text-[#b388ff] hover:shadow-[0_0_15px_rgba(179,136,255,0.1)] transition-all">322 Continue as Guest323 </button>324 325 <div class="mt-6 text-[10px] text-[var(--text-muted)] leading-normal flex items-start gap-1.5 text-left border border-[rgba(0,229,255,0.06)] bg-[rgba(0,229,255,0.02)] p-3.5 rounded-xl">326 <span class="text-sm">💡</span>327 <span><strong>Info:</strong> Guest mode creates a temporary session. Any uploaded documents and chats are scoped exclusively to your session and <strong>wiped when you close the tab</strong>.</span>328 </div>329 </div>330</div>331 332<script src="/static/app.js"></script>333</body>334</html>335