Spaces:

quickgrid
/

RAG-Visualizer

Running

App Files Files Community

quickgrid commited on 4 days ago

Commit

ff3a191

verified ·

1 Parent(s): afd8fb2

Update index.html

Browse files

Files changed (1) hide show

index.html +1890 -114

index.html CHANGED Viewed

@@ -1,140 +1,1916 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full bg-gray-950 text-gray-100">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>RAG Visualizer • Browser RAG</title>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2"></script>
-  <!-- Add other CDNs if needed: e.g., for charts or flow -->
-  <style>
-    /* Custom styles for highlights, nodes, etc. */
-    .vector-row { transition: all 0.3s; }
-    .highlight { animation: pulse 1.5s; background-color: #4f46e5; }
-    @keyframes pulse { 0%,100% {opacity:1} 50% {opacity:0.7} }
-    .node { border: 2px solid #6366f1; }
-  </style>
 </head>
-<body class="h-screen flex flex-col overflow-hidden">
-  <header class="bg-gray-900 p-4 border-b border-gray-700 flex justify-between">
-    <h1 class="text-2xl font-bold">Browser RAG Visualizer</h1>
-    <div id="status" class="text-sm text-green-400">Models loading...</div>
-  </header>
-  <div class="flex flex-1 overflow-hidden">
-    <!-- Left: Chat -->
-    <div class="w-1/3 border-r border-gray-700 flex flex-col">
-      <div id="chat" class="flex-1 p-4 overflow-y-auto space-y-4"></div>
-      <div class="p-4 border-t border-gray-700">
-        <input id="chatInput" type="text" class="w-full bg-gray-800 p-3 rounded" placeholder="Ask a question...">
       </div>
     </div>
-    <!-- Main Area -->
-    <div class="flex-1 flex flex-col">
-      <!-- Node Flow -->
-      <div class="h-1/3 border-b border-gray-700 p-4 overflow-auto" id="flow">
-        <!-- Simplified nodes: draggable divs or SVG -->
-        <div class="flex gap-4">
-          <div class="node p-4 rounded bg-gray-800 min-w-32">Embed</div>
-          <div class="node p-4 rounded bg-gray-800 min-w-32">Store (VectorDB)</div>
-          <div class="node p-4 rounded bg-gray-800 min-w-32">Retrieve Top-K</div>
-          <div class="node p-4 rounded bg-gray-800 min-w-32">Rerank</div>
-          <div class="node p-4 rounded bg-gray-800 min-w-32">Generate</div>
-        </div>
       </div>
-      <!-- Vector Table & Controls -->
-      <div class="flex-1 p-4 overflow-auto">
-        <h2 class="text-lg mb-2">Vector Database</h2>
-        <button onclick="addEntry()" class="bg-indigo-600 px-4 py-2 rounded mb-4">Add Entry</button>
-        <table class="w-full" id="vectorTable">
-          <thead><tr><th>Text</th><th>Metadata</th><th>Date</th></tr></thead>
-          <tbody></tbody>
-        </table>
       </div>
     </div>
-    <!-- Right: Details -->
-    <div class="w-1/4 border-l border-gray-700 p-4 overflow-y-auto">
-      <h2>Top-K / Context</h2>
-      <div id="topk"></div>
-      <h2 class="mt-6">Reranking</h2>
-      <div id="rerank"></div>
     </div>
   </div>
-  <script>
-    // Global state
-    let vectors = []; // {id, text, embedding, metadata, date}
-    let embedder, generator, reranker;
-    async function initModels() {
-      const status = document.getElementById('status');
-      status.textContent = 'Loading embedding model...';
-      embedder = await pipeline('feature-extraction', 'Xenova/all-MiniLM-L6-v2', { device: 'webgpu' }); // or 'wasm'
-      status.textContent = 'Loading LLM...';
-      // generator = await pipeline('text-generation', 'Xenova/Qwen2.5-0.5B-Instruct', { device: 'webgpu', dtype: 'q4' });
-      status.textContent = 'Ready!';
     }
-    async function getEmbedding(text) {
-      const output = await embedder(text, { pooling: 'mean', normalize: true });
-      return Array.from(output.data);
     }
-    async function addEntry() {
-      const text = prompt("Enter text to add:");
-      if (!text) return;
-      const emb = await getEmbedding(text);
-      vectors.push({
-        id: Date.now(),
-        text,
-        embedding: emb,
-        metadata: { source: "user" },
-        date: new Date().toISOString()
-      });
-      renderTable();
-      // Animate node
     }
-    function cosineSimilarity(a, b) {
-      // Simple implementation
-      let dot = 0, magA = 0, magB = 0;
-      for (let i = 0; i < a.length; i++) {
-        dot += a[i] * b[i];
-        magA += a[i] ** 2;
-        magB += b[i] ** 2;
       }
-      return dot / (Math.sqrt(magA) * Math.sqrt(magB));
     }
-    async function search(query, k=5) {
-      const qEmb = await getEmbedding(query);
-      const scored = vectors.map(v => ({
-        ...v,
-        score: cosineSimilarity(qEmb, v.embedding)
-      })).sort((a,b) => b.score - a.score).slice(0,k);
-      // Highlight in table + show topk
-      renderTopK(scored);
-      // Trigger rerank, etc.
-      return scored;
     }
-    function renderTable() {
-      // Populate tbody with rows, add click handlers
     }
-    // Chat handler: on submit -> search -> (rerank) -> context -> generate -> append to chat
-    // Init
-    window.onload = () => {
-      initModels();
-      // Tailwind script already loaded
-    };
-  </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>RAG Visualizer - Browser-Based RAG Pipeline</title>
+<style>
+:root {
+  --bg-primary: #0d1117;
+  --bg-secondary: #161b22;
+  --bg-tertiary: #1c2333;
+  --bg-card: #1e2a3a;
+  --border: #30363d;
+  --border-active: #58a6ff;
+  --text-primary: #e6edf3;
+  --text-secondary: #8b949e;
+  --text-muted: #6e7681;
+  --accent-blue: #58a6ff;
+  --accent-purple: #bc8cff;
+  --accent-green: #3fb950;
+  --accent-orange: #f0883e;
+  --accent-red: #f85149;
+  --accent-yellow: #d29922;
+  --glow-blue: rgba(88, 166, 255, 0.3);
+  --glow-purple: rgba(188, 140, 255, 0.3);
+  --glow-green: rgba(63, 185, 80, 0.3);
+  --glow-orange: rgba(240, 136, 62, 0.3);
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  height: 100vh;
+  overflow: hidden;
+}
+.app-container {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  grid-template-rows: 50px 1fr;
+  height: 100vh;
+  gap: 1px;
+  background: var(--border);
+}
+.header {
+  grid-column: 1 / -1;
+  background: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 16px;
+  border-bottom: 1px solid var(--border);
+  z-index: 10;
+}
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--accent-blue);
+}
+.header-logo svg { width: 24px; height: 24px; }
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent-red);
+  animation: none;
+}
+.status-dot.ready { background: var(--accent-green); animation: pulse 2s infinite; }
+.status-dot.loading { background: var(--accent-yellow); animation: pulse 1s infinite; }
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.header-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+}
+.btn {
+  padding: 6px 14px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.btn:hover { border-color: var(--accent-blue); background: rgba(88,166,255,0.1); }
+.btn-primary { background: var(--accent-blue); color: #000; border-color: var(--accent-blue); }
+.btn-primary:hover { background: #79b8ff; }
+.btn-danger { border-color: var(--accent-red); color: var(--accent-red); }
+.btn-danger:hover { background: rgba(248,81,73,0.1); }
+.btn-sm { padding: 4px 10px; font-size: 11px; }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.chat-panel {
+  background: var(--bg-secondary);
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border);
+  overflow: hidden;
+}
+.chat-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-tertiary);
+}
+.chat-tab {
+  padding: 10px 16px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+}
+.chat-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
+.chat-tab:hover { color: var(--text-primary); }
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.chat-messages::-webkit-scrollbar { width: 6px; }
+.chat-messages::-webkit-scrollbar-track { background: transparent; }
+.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.message {
+  max-width: 90%;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  animation: fadeIn 0.3s ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.message-user {
+  align-self: flex-end;
+  background: var(--accent-blue);
+  color: #000;
+  border-bottom-right-radius: 4px;
+}
+.message-ai {
+  align-self: flex-start;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 4px;
+}
+.message-context {
+  align-self: flex-start;
+  background: rgba(88,166,255,0.08);
+  border: 1px solid rgba(88,166,255,0.2);
+  border-bottom-left-radius: 4px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.message-context .ctx-label {
+  font-weight: 600;
+  color: var(--accent-blue);
+  margin-bottom: 4px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.message-system {
+  align-self: center;
+  background: rgba(63,185,80,0.1);
+  border: 1px solid rgba(63,185,80,0.2);
+  color: var(--accent-green);
+  font-size: 11px;
+  text-align: center;
+  padding: 6px 12px;
+}
+.chat-input-area {
+  padding: 12px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-tertiary);
+}
+.chat-input-wrapper {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+.chat-input {
+  flex: 1;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  font-size: 13px;
+  resize: none;
+  outline: none;
+  font-family: inherit;
+  min-height: 40px;
+  max-height: 120px;
+}
+.chat-input:focus { border-color: var(--accent-blue); }
+.send-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: none;
+  background: var(--accent-blue);
+  color: #000;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+.send-btn:hover { background: #79b8ff; transform: scale(1.05); }
+.send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.right-panel {
+  background: var(--bg-primary);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.right-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+  padding: 0 12px;
+  flex-shrink: 0;
+}
+.right-tab {
+  padding: 10px 18px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+.right-tab.active { color: var(--accent-purple); border-bottom-color: var(--accent-purple); }
+.right-tab:hover { color: var(--text-primary); }
+.right-content {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+.tab-panel {
+  display: none;
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px;
+}
+.tab-panel.active { display: block; }
+.tab-panel::-webkit-scrollbar { width: 6px; }
+.tab-panel::-webkit-scrollbar-track { background: transparent; }
+.tab-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.section-title svg { width: 18px; height: 18px; }
+/* Vector DB Table */
+.vector-table-container {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-secondary);
+}
+.vector-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+.vector-table th {
+  padding: 10px 12px;
+  text-align: left;
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.vector-table td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-primary);
+  transition: all 0.3s;
+}
+.vector-table tr:hover td { background: rgba(88,166,255,0.05); }
+.vector-table tr.highlighted td {
+  background: rgba(88,166,255,0.15) !important;
+  animation: highlightPulse 1.5s ease;
+}
+@keyframes highlightPulse {
+  0% { background: rgba(88,166,255,0.3); }
+  100% { background: rgba(88,166,255,0.15); }
+}
+.vector-table tr.selected td {
+  background: rgba(63,185,80,0.15) !important;
+  border-left: 3px solid var(--accent-green);
+}
+.vector-preview {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-muted);
+  font-family: monospace;
+  font-size: 11px;
+}
+.score-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  background: rgba(88,166,255,0.15);
+  color: var(--accent-blue);
+}
+.rank-badge {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 24px;
+  font-size: 11px;
+  font-weight: 700;
+}
+.rank-1 { background: rgba(240,136,62,0.2); color: var(--accent-orange); }
+.rank-2 { background: rgba(88,166,255,0.2); color: var(--accent-blue); }
+.rank-3 { background: rgba(188,140,255,0.2); color: var(--accent-purple); }
+.rank-other { background: rgba(139,148,158,0.15); color: var(--text-muted); }
+/* Add Entry Form */
+.add-entry-form {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+.form-group {
+  margin-bottom: 12px;
+}
+.form-label {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-bottom: 6px;
+  font-weight: 500;
+}
+.form-input, .form-textarea, .form-select {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.form-input:focus, .form-textarea:focus, .form-select:focus {
+  border-color: var(--accent-blue);
+}
+.form-textarea { resize: vertical; min-height: 80px; }
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+/* Reranking Section */
+.rerank-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px;
+  margin-bottom: 10px;
+  transition: all 0.3s;
+  position: relative;
+  overflow: hidden;
+}
+.rerank-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: var(--border);
+}
+.rerank-card.rerank-1::before { background: var(--accent-orange); }
+.rerank-card.rerank-2::before { background: var(--accent-blue); }
+.rerank-card.rerank-3::before { background: var(--accent-purple); }
+.rerank-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.rerank-score {
+  font-size: 20px;
+  font-weight: 700;
+}
+.rerank-content {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-primary);
+}
+.rerank-meta {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+/* Node Editor */
+.node-editor-container {
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+.node-canvas {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.node-canvas svg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.node {
+  position: absolute;
+  width: 220px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: grab;
+  transition: box-shadow 0.3s, border-color 0.3s;
+  z-index: 5;
+}
+.node:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
+.node.active { border-color: var(--accent-blue); box-shadow: 0 0 20px var(--glow-blue); }
+.node.processing { border-color: var(--accent-green); box-shadow: 0 0 20px var(--glow-green); animation: nodePulse 1.5s infinite; }
+@keyframes nodePulse {
+  0%, 100% { box-shadow: 0 0 20px var(--glow-green); }
+  50% { box-shadow: 0 0 30px var(--glow-green); }
+}
+.node-header {
+  padding: 10px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid var(--border);
+}
+.node-header .node-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+.node-icon-chat { background: rgba(88,166,255,0.2); color: var(--accent-blue); }
+.node-icon-embed { background: rgba(188,140,255,0.2); color: var(--accent-purple); }
+.node-icon-vectordb { background: rgba(63,185,80,0.2); color: var(--accent-green); }
+.node-icon-rerank { background: rgba(240,136,62,0.2); color: var(--accent-orange); }
+.node-icon-llm { background: rgba(248,81,73,0.2); color: var(--accent-red); }
+.node-icon-output { background: rgba(210,153,34,0.2); color: var(--accent-yellow); }
+.node-body {
+  padding: 10px 12px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  min-height: 60px;
+}
+.node-ports {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 8px;
+  margin-top: 4px;
+}
+.port {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  background: var(--bg-primary);
+  cursor: crosshair;
+  transition: all 0.2s;
+}
+.port:hover { border-color: var(--accent-blue); background: var(--accent-blue); }
+.port.input { margin-top: -6px; }
+.port.output { margin-top: -6px; }
+.node-settings {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  background: rgba(0,0,0,0.2);
+}
+.node-setting {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4px;
+}
+.node-setting label {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.node-setting input, .node-setting select {
+  width: 80px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 10px;
+  outline: none;
+}
+/* Connection lines */
+.connection {
+  stroke: var(--border);
+  stroke-width: 2;
+  fill: none;
+  transition: stroke 0.3s;
+}
+.connection.active {
+  stroke: var(--accent-green);
+  stroke-width: 3;
+  filter: drop-shadow(0 0 4px var(--glow-green));
+}
+.connection.processing {
+  stroke: var(--accent-blue);
+  stroke-width: 3;
+  filter: drop-shadow(0 0 4px var(--glow-blue));
+  animation: flowLine 1s linear infinite;
+  stroke-dasharray: 8 4;
+}
+@keyframes flowLine {
+  to { stroke-dashoffset: -12; }
+}
+/* Stats bar */
+.stats-bar {
+  display: flex;
+  gap: 16px;
+  padding: 12px 16px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+.stat-value {
+  font-weight: 700;
+  color: var(--accent-blue);
+}
+.stat-label {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+/* Progress bar */
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background: var(--bg-primary);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 8px;
+}
+.progress-fill {
+  height: 100%;
+  background: var(--accent-blue);
+  border-radius: 2px;
+  transition: width 0.5s ease;
+  animation: shimmer 2s infinite;
+}
+@keyframes shimmer {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+/* Model loading overlay */
+.model-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(13,17,23,0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  gap: 20px;
+}
+.model-overlay.hidden { display: none; }
+.model-spinner {
+  width: 48px;
+  height: 48px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent-blue);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+.model-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.model-status {
+  font-size: 13px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+.model-progress {
+  width: 300px;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: 3px;
+  overflow: hidden;
+}
+.model-progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
+  border-radius: 3px;
+  transition: width 0.3s;
+}
+/* Vector visualization */
+.vector-viz {
+  display: flex;
+  gap: 2px;
+  align-items: end;
+  height: 40px;
+  padding: 4px 0;
+}
+.vector-bar {
+  width: 4px;
+  background: var(--accent-blue);
+  border-radius: 1px;
+  transition: height 0.3s;
+  opacity: 0.7;
+}
+.vector-bar:nth-child(odd) { background: var(--accent-purple); }
+/* Tooltip */
+.tooltip {
+  position: absolute;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 11px;
+  color: var(--text-primary);
+  z-index: 100;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  max-width: 200px;
+}
+/* Empty state */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  color: var(--text-muted);
+  text-align: center;
+  gap: 12px;
+}
+.empty-state svg { width: 48px; height: 48px; opacity: 0.3; }
+.empty-state p { font-size: 13px; }
+/* Context panel in chat */
+.context-panel {
+  background: rgba(88,166,255,0.05);
+  border: 1px solid rgba(88,166,255,0.15);
+  border-radius: 8px;
+  padding: 10px;
+  margin: 8px 0;
+  font-size: 12px;
+}
+.context-panel h4 {
+  font-size: 11px;
+  color: var(--accent-blue);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.context-item {
+  padding: 6px 8px;
+  background: rgba(0,0,0,0.2);
+  border-radius: 4px;
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: var(--text-secondary);
+  border-left: 2px solid var(--accent-blue);
+}
+.context-item:last-child { margin-bottom: 0; }
+/* Loading animation in chat */
+.typing-indicator {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+}
+.typing-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  animation: typingBounce 1.4s infinite;
+}
+.typing-dot:nth-child(2) { animation-delay: 0.2s; }
+.typing-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes typingBounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}
+/* Responsive */
+@media (max-width: 768px) {
+  .app-container {
+    grid-template-columns: 1fr;
+    grid-template-rows: 50px 1fr;
+  }
+  .chat-panel { display: none; }
+}
+/* Scrollbar global */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+/* Dimension visualization */
+.dim-viz {
+  display: grid;
+  grid-template-columns: repeat(32, 1fr);
+  gap: 1px;
+  max-width: 256px;
+}
+.dim-cell {
+  height: 8px;
+  border-radius: 1px;
+  transition: background 0.3s;
+}
+/* Node editor controls */
+.editor-controls {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  display: flex;
+  gap: 8px;
+  z-index: 10;
+}
+.editor-controls .btn {
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+}
+/* Settings panel */
+.settings-panel {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px;
+  z-index: 10;
+  min-width: 200px;
+}
+.settings-panel h4 {
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: var(--accent-purple);
+}
+/* Entry added animation */
+@keyframes entryAdded {
+  0% { background: rgba(63,185,80,0.3); }
+  100% { background: transparent; }
+}
+.entry-new {
+  animation: entryAdded 2s ease;
+}
+</style>
 </head>
+<body>
+<div class="model-overlay" id="modelOverlay">
+  <div class="model-spinner"></div>
+  <div class="model-title">Loading RAG Pipeline Models</div>
+  <div class="model-status" id="modelStatus">Initializing...</div>
+  <div class="model-progress">
+    <div class="model-progress-fill" id="modelProgressFill" style="width: 0%"></div>
+  </div>
+  <div style="font-size:11px;color:var(--text-muted)">Models are cached after first download</div>
+</div>
+<div class="app-container">
+  <div class="header">
+    <div class="header-logo">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+      </svg>
+      RAG Visualizer
+    </div>
+    <div class="header-status">
+      <div class="status-dot" id="statusDot"></div>
+      <span id="statusText">Loading models...</span>
+    </div>
+    <div class="header-actions">
+      <button class="btn btn-sm" onclick="exportDB()">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        Export
+      </button>
+      <button class="btn btn-sm" onclick="clearAll()">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+        Clear
+      </button>
+    </div>
+  </div>
+  <div class="chat-panel">
+    <div class="chat-tabs">
+      <div class="chat-tab active" data-tab="chat">💬 Chat</div>
+      <div class="chat-tab" data-tab="context">📋 Context</div>
+      <div class="chat-tab" data-tab="history">📜 History</div>
+    </div>
+    <div class="chat-messages" id="chatMessages">
+      <div class="message message-system">
+        🤖 RAG Visualizer loaded. Models: all-MiniLM-L6-v2 (embed), ms-marco-MiniLM-L-6-v2 (rerank), Qwen2.5-0.5B (generate)
       </div>
     </div>
+    <div class="chat-input-area">
+      <div class="chat-input-wrapper">
+        <textarea class="chat-input" id="chatInput" placeholder="Ask a question..." rows="1" onkeydown="handleChatKey(event)"></textarea>
+        <button class="send-btn" id="sendBtn" onclick="sendMessage()">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
+        </button>
       </div>
+    </div>
+  </div>
+  <div class="right-panel">
+    <div class="stats-bar" id="statsBar">
+      <div class="stat-item">
+        <span class="stat-value" id="statEntries">0</span>
+        <span class="stat-label">Entries</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value" id="statTopK">3</span>
+        <span class="stat-label">Top-K</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value" id="statEmbedDim">384</span>
+        <span class="stat-label">Embed Dims</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value" id="statLatency">0ms</span>
+        <span class="stat-label">Latency</span>
       </div>
     </div>
+    <div class="right-tabs">
+      <div class="right-tab active" data-tab="vectors">🗄️ Vector DB</div>
+      <div class="right-tab" data-tab="add">➕ Add Entry</div>
+      <div class="right-tab" data-tab="rerank">🔄 Reranking</div>
+      <div class="right-tab" data-tab="nodes">🔗 Node Editor</div>
+    </div>
+    <div class="right-content">
+      <!-- Vector DB Tab -->
+      <div class="tab-panel active" id="panel-vectors">
+        <div class="section-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
+          Vector Database (LanceDB-style)
+        </div>
+        <div class="vector-table-container">
+          <table class="vector-table" id="vectorTable">
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>ID</th>
+                <th>Content</th>
+                <th>Vector Preview</th>
+                <th>Score</th>
+                <th>Date</th>
+                <th>Metadata</th>
+              </tr>
+            </thead>
+            <tbody id="vectorTableBody">
+            </tbody>
+          </table>
+        </div>
+        <div class="empty-state" id="emptyVectors">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
+          <p>No entries yet. Add entries to get started!</p>
+        </div>
+      </div>
+      <!-- Add Entry Tab -->
+      <div class="tab-panel" id="panel-add">
+        <div class="section-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          Add Entry to Vector DB
+        </div>
+        <div class="add-entry-form">
+          <div class="form-group">
+            <label class="form-label">Content / Text</label>
+            <textarea class="form-textarea" id="addContent" placeholder="Enter the text content to embed and store..."></textarea>
+          </div>
+          <div class="form-row">
+            <div class="form-group">
+              <label class="form-label">Source</label>
+              <input class="form-input" id="addSource" placeholder="e.g., document.pdf, article.md">
+            </div>
+            <div class="form-group">
+              <label class="form-label">Category</label>
+              <select class="form-select" id="addCategory">
+                <option value="general">General</option>
+                <option value="technical">Technical</option>
+                <option value="faq">FAQ</option>
+                <option value="documentation">Documentation</option>
+              </select>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Custom Metadata (JSON, optional)</label>
+            <textarea class="form-textarea" id="addMetadata" placeholder='{"author": "John", "version": "1.0"}' style="min-height:50px"></textarea>
+          </div>
+          <button class="btn btn-primary" onclick="addEntry()" id="addEntryBtn">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+            Embed & Store in Vector DB
+          </button>
+          <div class="progress-bar" id="addProgress" style="display:none">
+            <div class="progress-fill" id="addProgressFill" style="width:0%"></div>
+          </div>
+        </div>
+        <div class="section-title" style="margin-top:20px">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          Quick Add Samples
+        </div>
+        <div style="display:flex;flex-wrap:wrap;gap:8px">
+          <button class="btn btn-sm" onclick="addSample(0)">🤖 AI/ML</button>
+          <button class="btn btn-sm" onclick="addSample(1)">🔧 RAG Pipeline</button>
+          <button class="btn btn-sm" onclick="addSample(2)">📊 Vector Search</button>
+          <button class="btn btn-sm" onclick="addSample(3)">🧠 Neural Networks</button>
+          <button class="btn btn-sm" onclick="addSample(4)">💻 Web Development</button>
+          <button class="btn btn-sm" onclick="addSample(5)"> Security</button>
+        </div>
+      </div>
+      <!-- Reranking Tab -->
+      <div class="tab-panel" id="panel-rerank">
+        <div class="section-title">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+          Reranking Results (Cross-Encoder)
+          <span style="font-size:11px;color:var(--text-muted);font-weight:400">Model: ms-marco-MiniLM-L-6-v2</span>
+        </div>
+        <div id="rerankResults">
+          <div class="empty-state">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+            <p>Send a query to see reranking results</p>
+          </div>
+        </div>
+      </div>
+      <!-- Node Editor Tab -->
+      <div class="tab-panel" id="panel-nodes">
+        <div class="node-editor-container" id="nodeEditor">
+          <div class="node-canvas" id="nodeCanvas">
+            <svg id="connectionSvg"></svg>
+          </div>
+          <div class="editor-controls">
+            <button class="btn" onclick="resetNodePositions()" title="Reset Layout">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>
+            </button>
+            <button class="btn" onclick="runPipeline()" title="Run Pipeline">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
+</div>
+<script type="module">
+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.3/dist/transformers.mjs';
+// ==================== GLOBAL STATE ====================
+window.ragState = {
+  embeddingModel: null,
+  rerankerModel: null,
+  generationModel: null,
+  vectorDB: [],
+  chatHistory: [],
+  topK: 3,
+  isReady: false,
+  isProcessing: false,
+  nodePositions: {},
+  currentContext: []
+};
+// ==================== CONFIG ====================
+const CONFIG = {
+  embedModel: 'Xenova/all-MiniLM-L6-v2',
+  rerankModel: 'Xenova/ms-marco-MiniLM-L-6-v2',
+  genModel: 'onnx-community/Qwen2.5-0.5B-Instruct',
+  embedDim: 384,
+  topK: 3,
+  similarityThreshold: 0.1
+};
+// ==================== SAMPLE DATA ====================
+const SAMPLES = [
+  { content: "Retrieval-Augmented Generation (RAG) is an AI framework that combines retrieval of relevant documents with generative language models. It allows LLMs to access external knowledge bases to produce more accurate, up-to-date, and factually grounded responses. RAG reduces hallucination by grounding responses in retrieved context.", source: "rag_guide.md", category: "technical", metadata: { topic: "RAG", author: "AI Team" }},
+  { content: "Vector databases store data as high-dimensional vectors (embeddings) that capture semantic meaning. Popular vector DBs include LanceDB, ChromaDB, Qdrant, Milvus, and Pinecone. They enable efficient similarity search using algorithms like HNSW, IVF, or brute-force cosine similarity for nearest neighbor retrieval.", source: "vector_db_comparison.md", category: "documentation", meta { topic: "VectorDB", author: "Data Team" }},
+  { content: "Cross-encoder reranking improves retrieval accuracy by scoring query-document pairs directly. Unlike bi-encoders that compute query and document embeddings independently, cross-encoders process both together through a transformer, capturing fine-grained interactions. The ms-marco-MiniLM-L-6-v2 model is a lightweight yet effective reranker.", source: "reranking_guide.md", category: "technical", metadata: { topic: "Reranking", author: "ML Team" }},
+  { content: "Neural networks are computing systems inspired by biological neural networks. They consist of interconnected nodes (neurons) organized in layers: input, hidden, and output. Deep learning uses networks with many hidden layers to learn hierarchical representations of data, enabling breakthroughs in image recognition, NLP, and game playing.", source: "neural_networks.md", category: "technical", meta { topic: "Deep Learning", author: "Research Team" }},
+  { content: "Modern web development involves frameworks like React, Vue, Angular, and Svelte for frontend, and Node.js, Python, Go, or Rust for backend. Static site generators (SSG) like Next.js, Astro, and Hugo enable fast, SEO-friendly websites. WebAssembly (WASM) allows running compiled languages in the browser for near-native performance.", source: "webdev_overview.md", category: "documentation", metadata: { topic: "WebDev", author: "Frontend Team" }},
+  { content: "Cybersecurity best practices include: implementing zero-trust architecture, using multi-factor authentication, regular security audits, encrypting data at rest and in transit, keeping software updated, conducting penetration testing, and following the principle of least privilege. OWASP Top 10 provides guidance on common web vulnerabilities.", source: "security_guide.md", category: "faq", metadata: { topic: "Security", author: "SecOps Team" }}
+];
+// ==================== INITIALIZATION ====================
+async function init() {
+  updateStatus('loading', 'Loading embedding model...');
+  updateProgress(10);
+  try {
+    window.ragState.embeddingModel = await pipeline('feature-extraction', CONFIG.embedModel, {
+      dtype: 'fp32',
+      progress_callback: (p) => updateModelProgress(p, 'Embedding')
+    });
+    updateStatus('loading', 'Loading reranker model...');
+    updateProgress(40);
+    window.ragState.rerankerModel = await pipeline('text-classification', CONFIG.rerankModel, {
+      dtype: 'fp32',
+      progress_callback: (p) => updateModelProgress(p, 'Reranker')
+    });
+    updateStatus('loading', 'Loading Qwen2.5-0.5B generator...');
+    updateProgress(70);
+    window.ragState.generationModel = await pipeline('text-generation', CONFIG.genModel, {
+      dtype: 'q8',
+      progress_callback: (p) => updateModelProgress(p, 'Qwen2.5')
+    });
+    updateProgress(100);
+    window.ragState.isReady = true;
+    updateStatus('ready', 'All models loaded');
+    hideOverlay();
+    initNodeEditor();
+    loadFromStorage();
+    renderVectorTable();
+    addSystemMessage('✅ All models loaded successfully. Ready to chat!');
+  } catch (err) {
+    console.error('Model loading error:', err);
+    updateStatus('loading', 'Error: ' + err.message);
+    addSystemMessage(' Model loading failed: ' + err.message);
+    hideOverlay();
+  }
+}
+// ==================== UI HELPERS ====================
+function updateStatus(state, text) {
+  const dot = document.getElementById('statusDot');
+  const txt = document.getElementById('statusText');
+  dot.className = 'status-dot ' + state;
+  txt.textContent = text;
+}
+function updateProgress(pct) {
+  document.getElementById('modelProgressFill').style.width = pct + '%';
+}
+function updateModelProgress(progress, modelName) {
+  const status = document.getElementById('modelStatus');
+  const statusText = document.getElementById('statusText');
+  if (progress.status === 'progress') {
+    const pct = Math.round(progress.progress * 100);
+    status.textContent = `Loading ${modelName}: ${pct}%`;
+    statusText.textContent = `Loading ${modelName}... ${pct}%`;
+  }
+}
+function hideOverlay() {
+  document.getElementById('modelOverlay').classList.add('hidden');
+}
+function addSystemMessage(text) {
+  const container = document.getElementById('chatMessages');
+  const div = document.createElement('div');
+  div.className = 'message message-system';
+  div.textContent = text;
+  container.appendChild(div);
+  container.scrollTop = container.scrollHeight;
+}
+function addUserMessage(text) {
+  const container = document.getElementById('chatMessages');
+  const div = document.createElement('div');
+  div.className = 'message message-user';
+  div.textContent = text;
+  container.appendChild(div);
+  container.scrollTop = container.scrollHeight;
+}
+function addAIMessage(text) {
+  const container = document.getElementById('chatMessages');
+  const div = document.createElement('div');
+  div.className = 'message message-ai';
+  div.textContent = text;
+  container.appendChild(div);
+  container.scrollTop = container.scrollHeight;
+}
+function addContextMessage(contexts) {
+  const container = document.getElementById('chatMessages');
+  const div = document.createElement('div');
+  div.className = 'message message-context';
+  let html = '<div class="ctx-label">📋 Retrieved Context (Top-' + window.ragState.topK + ')</div>';
+  contexts.forEach((ctx, i) => {
+    html += `<div class="context-item"><strong>Source ${i+1}</strong> (score: ${ctx.score.toFixed(4)}): ${ctx.content.substring(0, 200)}...</div>`;
+  });
+  div.innerHTML = html;
+  container.appendChild(div);
+  container.scrollTop = container.scrollHeight;
+}
+function showTyping() {
+  const container = document.getElementById('chatMessages');
+  const div = document.createElement('div');
+  div.className = 'message message-ai typing-indicator';
+  div.id = 'typingIndicator';
+  div.innerHTML = '<div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div>';
+  container.appendChild(div);
+  container.scrollTop = container.scrollHeight;
+}
+function hideTyping() {
+  const el = document.getElementById('typingIndicator');
+  if (el) el.remove();
+}
+// ==================== VECTOR OPERATIONS ====================
+function cosineSimilarity(a, b) {
+  let dot = 0, normA = 0, normB = 0;
+  for (let i = 0; i < a.length; i++) {
+    dot += a[i] * b[i];
+    normA += a[i] * a[i];
+    normB += b[i] * b[i];
+  }
+  return dot / (Math.sqrt(normA) * Math.sqrt(normB) + 1e-10);
+}
+async function embedText(text) {
+  if (!window.ragState.embeddingModel) throw new Error('Embedding model not loaded');
+  const output = await window.ragState.embeddingModel(text, { pooling: 'mean', normalize: true });
+  return Array.from(output.data);
+}
+async function rerank(query, documents) {
+  if (!window.ragState.rerankerModel) throw new Error('Reranker not loaded');
+  const pairs = documents.map(doc => [query, doc.content]);
+  const results = await window.ragState.rerankerModel(pairs, { topk: 1 });
+  let scored = documents.map((doc, i) => {
+    const res = results[i];
+    const label = res.label || 'LABEL_1';
+    const score = label === 'LABEL_1' ? res.score : 1 - res.score;
+    return { ...doc, rerankScore: score };
+  });
+  scored.sort((a, b) => b.rerankScore - a.rerankScore);
+  return scored;
+}
+function vectorSearch(queryEmbedding, topK = 3) {
+  const db = window.ragState.vectorDB;
+  if (db.length === 0) return [];
+  const scored = db.map(entry => ({
+    ...entry,
+    score: cosineSimilarity(queryEmbedding, entry.vector)
+  }));
+  scored.sort((a, b) => b.score - a.score);
+  return scored.slice(0, topK);
+}
+// ==================== CHAT ====================
+async function sendMessage() {
+  const input = document.getElementById('chatInput');
+  const query = input.value.trim();
+  if (!query || window.ragState.isProcessing) return;
+  input.value = '';
+  addUserMessage(query);
+  window.ragState.isProcessing = true;
+  const startTime = performance.now();
+  try {
+    // Step 1: Embed query
+    animateNode('input');
+    animateNode('embed');
+    const queryEmbedding = await embedText(query);
+    // Step 2: Vector search
+    animateNode('vectordb');
+    const topKResults = vectorSearch(queryEmbedding, window.ragState.topK);
+    // Highlight in table
+    highlightTableRows(topKResults.map(r => r.id));
+    // Step 3: Rerank
+    animateNode('rerank');
+    const rerankedResults = await rerank(query, topKResults);
+    // Update reranking panel
+    renderRerankResults(query, rerankedResults);
+    // Step 4: Build context
+    animateNode('context');
+    const contextTexts = rerankedResults.slice(0, window.ragState.topK).map(r => r.content);
+    const context = contextTexts.join('\n\n---\n\n');
+    window.ragState.currentContext = rerankedResults.slice(0, window.ragState.topK).map(r => ({
+      content: r.content,
+      score: r.score,
+      source: r.source
+    }));
+    addContextMessage(window.ragState.currentContext);
+    // Step 5: Generate response
+    animateNode('llm');
+    showTyping();
+    const systemPrompt = `You are a helpful AI assistant using RAG (Retrieval-Augmented Generation). Answer based on the provided context. If the context doesn't contain relevant information, say so. Be concise and accurate.\n\nContext:\n${context}`;
+    const response = await window.ragState.generationModel(query, {
+      max_new_tokens: 512,
+      temperature: 0.7,
+      do_sample: true,
+      top_p: 0.9,
+      chat_template: true
+    });
+    hideTyping();
+    animateNode('output');
+    const answerText = response[0].generated_text;
+    // Clean up the response
+    const cleanAnswer = answerText.replace(/^.*?(?=Answer|Based|According|The|This|Here|I)/s, '').trim();
+    addAIMessage(cleanAnswer || answerText);
+    // Update latency
+    const latency = Math.round(performance.now() - startTime);
+    document.getElementById('statLatency').textContent = latency + 'ms';
+    // Deactivate nodes
+    setTimeout(() => {
+      clearNodeAnimations();
+    }, 1000);
+  } catch (err) {
+    console.error('Chat error:', err);
+    hideTyping();
+    addSystemMessage('❌ Error: ' + err.message);
+  }
+  window.ragState.isProcessing = false;
+  document.getElementById('sendBtn').disabled = false;
+}
+function handleChatKey(e) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault();
+    sendMessage();
+  }
+}
+// ==================== ADD ENTRY ====================
+async function addEntry() {
+  const content = document.getElementById('addContent').value.trim();
+  const source = document.getElementById('addSource').value.trim() || 'manual';
+  const category = document.getElementById('addCategory').value;
+  const metadataStr = document.getElementById('addMetadata').value.trim();
+  if (!content) {
+    alert('Please enter content');
+    return;
+  }
+  const btn = document.getElementById('addEntryBtn');
+  btn.disabled = true;
+  const progressBar = document.getElementById('addProgress');
+  const progressFill = document.getElementById('addProgressFill');
+  progressBar.style.display = 'block';
+  progressFill.style.width = '20%';
+  try {
+    progressFill.style.width = '40%';
+    const vector = await embedText(content);
+    progressFill.style.width = '70%';
+    let metadata = {};
+    if (metadataStr) {
+      try { metadata = JSON.parse(metadataStr); } catch(e) { metadata = { raw: metadataStr }; }
+    }
+    const entry = {
+      id: 'entry_' + Date.now() + '_' + Math.random().toString(36).substr(2, 5),
+      content: content,
+      vector: vector,
+      score: null,
+      rerankScore: null,
+      date: new Date().toISOString(),
+      source: source,
+      category: category,
+      meta metadata
+    };
+    window.ragState.vectorDB.push(entry);
+    progressFill.style.width = '100%';
+    setTimeout(() => {
+      progressBar.style.display = 'none';
+      progressFill.style.width = '0%';
+    }, 500);
+    renderVectorTable();
+    saveToStorage();
+    updateStats();
+    // Clear form
+    document.getElementById('addContent').value = '';
+    document.getElementById('addSource').value = '';
+    document.getElementById('addMetadata').value = '';
+    addSystemMessage('✅ Entry added to Vector DB: ' + content.substring(0, 50) + '...');
+  } catch (err) {
+    console.error('Add entry error:', err);
+    addSystemMessage(' Failed to add entry: ' + err.message);
+    progressBar.style.display = 'none';
+  }
+  btn.disabled = false;
+}
+function addSample(idx) {
+  const sample = SAMPLES[idx];
+  document.getElementById('addContent').value = sample.content;
+  document.getElementById('addSource').value = sample.source;
+  document.getElementById('addCategory').value = sample.category;
+  document.getElementById('addMetadata').value = JSON.stringify(sample.metadata);
+  // Auto-add
+  setTimeout(() => addEntry(), 100);
+}
+// ==================== RENDERING ====================
+function renderVectorTable() {
+  const tbody = document.getElementById('vectorTableBody');
+  const emptyState = document.getElementById('emptyVectors');
+  const db = window.ragState.vectorDB;
+  if (db.length === 0) {
+    tbody.innerHTML = '';
+    emptyState.style.display = 'flex';
+    document.querySelector('.vector-table-container').style.display = 'none';
+    return;
+  }
+  emptyState.style.display = 'none';
+  document.querySelector('.vector-table-container').style.display = 'block';
+  tbody.innerHTML = db.map((entry, i) => {
+    const vecPreview = entry.vector ? entry.vector.slice(0, 8).map(v => v.toFixed(3)).join(', ') + '...' : '-';
+    const date = new Date(entry.date).toLocaleString();
+    const meta = entry.metadata ? Object.keys(entry.metadata).slice(0, 2).map(k => k + ':' + entry.metadata[k]).join(', ') : '-';
+    return `<tr id="row_${entry.id}" data-id="${entry.id}">
+      <td style="color:var(--text-muted)">${i + 1}</td>
+      <td style="font-family:monospace;font-size:11px;color:var(--accent-blue)">${entry.id.substring(0, 16)}...</td>
+      <td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${entry.content.substring(0, 80)}...</td>
+      <td class="vector-preview">[${vecPreview}]</td>
+      <td>${entry.score !== null ? '<span class="score-badge">' + entry.score.toFixed(4) + '</span>' : '-'}</td>
+      <td style="font-size:11px;color:var(--text-muted)">${date}</td>
+      <td style="font-size:11px;color:var(--text-muted)">${meta}</td>
+    </tr>`;
+  }).join('');
+}
+function highlightTableRows(ids) {
+  // Remove previous highlights
+  document.querySelectorAll('.vector-table tr').forEach(tr => {
+    tr.classList.remove('highlighted', 'selected');
+  });
+  ids.forEach((id, i) => {
+    const row = document.getElementById('row_' + id);
+    if (row) {
+      setTimeout(() => {
+        row.classList.add('highlighted');
+        setTimeout(() => {
+          row.classList.add('selected');
+        }, 500);
+      }, i * 200);
     }
+  });
+}
+function renderRerankResults(query, results) {
+  const container = document.getElementById('rerankResults');
+  if (results.length === 0) {
+    container.innerHTML = '<div class="empty-state"><p>No results to rerank</p></div>';
+    return;
+  }
+  container.innerHTML = '<div style="margin-bottom:12px;font-size:12px;color:var(--text-muted)">Query: <strong style="color:var(--text-primary)">' + query + '</strong></div>' +
+    results.map((r, i) => {
+      const rankClass = i === 0 ? 'rerank-1' : i === 1 ? 'rerank-2' : i === 2 ? 'rerank-3' : '';
+      const rankNum = i + 1;
+      return `<div class="rerank-card ${rankClass}">
+        <div class="rerank-card-header">
+          <span><span class="rank-badge rank-${rankNum <= 3 ? rankNum : 'other'}">${rankNum}</span> <span style="font-size:12px;color:var(--text-secondary)">Score: ${r.rerankScore !== undefined ? r.rerankScore.toFixed(4) : '-'}</span></span>
+          <span style="font-size:11px;color:var(--text-muted)">Original: ${(r.score || 0).toFixed(4)}</span>
+        </div>
+        <div class="rerank-content">${r.content}</div>
+        <div class="rerank-meta">
+          <span>📄 ${r.source || 'unknown'}</span>
+          <span>️ ${r.category || 'general'}</span>
+          <span>📅 ${new Date(r.date).toLocaleDateString()}</span>
+        </div>
+      </div>`;
+    }).join('');
+}
+function updateStats() {
+  document.getElementById('statEntries').textContent = window.ragState.vectorDB.length;
+  document.getElementById('statTopK').textContent = window.ragState.topK;
+}
+// ==================== NODE EDITOR ====================
+const NODES = [
+  { id: 'input', label: 'Chat Input', icon: '', iconClass: 'node-icon-chat', x: 30, y: 150, desc: 'User query input', settings: { maxTokens: 512 }},
+  { id: 'embed', label: 'Embedding', icon: '🔮', iconClass: 'node-icon-embed', x: 280, y: 150, desc: 'all-MiniLM-L6-v2 (384d)', settings: { model: 'all-MiniLM-L6-v2', dims: 384, normalize: true }},
+  { id: 'vectordb', label: 'Vector DB', icon: '🗄️', iconClass: 'node-icon-vectordb', x: 530, y: 150, desc: 'LanceDB - Cosine Search', settings: { metric: 'cosine', topK: 3, index: 'flat' }},
+  { id: 'rerank', label: 'Reranker', icon: '🔄', iconClass: 'node-icon-rerank', x: 780, y: 150, desc: 'ms-marco-MiniLM-L-6-v2', settings: { model: 'ms-marco-MiniLM', topK: 3 }},
+  { id: 'llm', label: 'Qwen2.5-0.5B', icon: '🧠', iconClass: 'node-icon-llm', x: 1030, y: 150, desc: 'Text Generation', settings: { model: 'Qwen2.5-0.5B', maxTokens: 512, temp: 0.7, topP: 0.9 }},
+  { id: 'output', label: 'Response', icon: '✨', iconClass: 'node-icon-output', x: 1280, y: 150, desc: 'Generated answer with context', settings: { format: 'text' }}
+];
+const CONNECTIONS = [
+  { from: 'input', to: 'embed' },
+  { from: 'embed', to: 'vectordb' },
+  { from: 'vectordb', to: 'rerank' },
+  { from: 'rerank', to: 'llm' },
+  { from: 'llm', to: 'output' }
+];
+function initNodeEditor() {
+  const canvas = document.getElementById('nodeCanvas');
+  NODES.forEach(node => {
+    const el = document.createElement('div');
+    el.className = 'node';
+    el.id = 'node_' + node.id;
+    el.style.left = node.x + 'px';
+    el.style.top = node.y + 'px';
+    el.innerHTML = `
+      <div class="node-header">
+        <span class="node-icon ${node.iconClass}">${node.icon}</span>
+        <span>${node.label}</span>
+      </div>
+      <div class="node-body">${node.desc}</div>
+      <div class="node-settings">
+        ${renderNodeSettings(node)}
+      </div>
+      <div class="node-ports">
+        <div class="port input" data-node="${node.id}" data-type="input"></div>
+        <div class="port output" data-node="${node.id}" data-type="output"></div>
+      </div>
+    `;
+    canvas.appendChild(el);
+    // Drag
+    makeDraggable(el, node);
+  });
+  drawConnections();
+}
+function renderNodeSettings(node) {
+  let html = '';
+  for (const [key, val] of Object.entries(node.settings)) {
+    html += `<div class="node-setting">
+      <label>${key}</label>
+      <input value="${val}" data-node="${node.id}" data-key="${key}" onchange="updateNodeSetting('${node.id}','${key}',this.value)">
+    </div>`;
+  }
+  return html;
+}
+function updateNodeSetting(nodeId, key, value) {
+  const node = NODES.find(n => n.id === nodeId);
+  if (node) {
+    node.settings[key] = isNaN(value) ? value : Number(value);
+    if (key === 'topK') {
+      window.ragState.topK = Number(value);
+      document.getElementById('statTopK').textContent = value;
     }
+  }
+}
+function drawConnections() {
+  const svg = document.getElementById('connectionSvg');
+  svg.innerHTML = '';
+  CONNECTIONS.forEach(conn => {
+    const fromEl = document.getElementById('node_' + conn.from);
+    const toEl = document.getElementById('node_' + conn.to);
+    if (!fromEl || !toEl) return;
+    const fromRect = fromEl.getBoundingClientRect();
+    const toRect = toEl.getBoundingClientRect();
+    const canvasRect = document.getElementById('nodeCanvas').getBoundingClientRect();
+    const x1 = fromRect.right - canvasRect.left;
+    const y1 = fromRect.top + fromRect.height / 2 - canvasRect.top;
+    const x2 = toRect.left - canvasRect.left;
+    const y2 = toRect.top + toRect.height / 2 - canvasRect.top;
+    const midX = (x1 + x2) / 2;
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`);
+    path.setAttribute('class', 'connection');
+    path.setAttribute('id', 'conn_' + conn.from + '_' + conn.to);
+    svg.appendChild(path);
+  });
+}
+function makeDraggable(el, node) {
+  let isDragging = false;
+  let startX, startY, startLeft, startTop;
+  el.addEventListener('mousedown', (e) => {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
+    isDragging = true;
+    startX = e.clientX;
+    startY = e.clientY;
+    startLeft = el.offsetLeft;
+    startTop = el.offsetTop;
+    el.style.zIndex = 10;
+    el.style.cursor = 'grabbing';
+    e.preventDefault();
+  });
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+    const dx = e.clientX - startX;
+    const dy = e.clientY - startY;
+    el.style.left = (startLeft + dx) + 'px';
+    el.style.top = (startTop + dy) + 'px';
+    node.x = startLeft + dx;
+    node.y = startTop + dy;
+    drawConnections();
+  });
+  document.addEventListener('mouseup', () => {
+    if (isDragging) {
+      isDragging = false;
+      el.style.cursor = 'grab';
+      el.style.zIndex = 5;
     }
+  });
+}
+function animateNode(nodeId) {
+  const el = document.getElementById('node_' + nodeId);
+  if (el) {
+    el.classList.add('processing');
+    // Activate connections
+    CONNECTIONS.forEach(conn => {
+      if (conn.from === nodeId) {
+        const path = document.getElementById('conn_' + conn.from + '_' + conn.to);
+        if (path) path.classList.add('processing');
+      }
+      if (conn.to === nodeId) {
+        const path = document.getElementById('conn_' + conn.from + '_' + conn.to);
+        if (path) path.classList.add('processing');
+      }
+    });
+  }
+}
+function clearNodeAnimations() {
+  document.querySelectorAll('.node').forEach(n => {
+    n.classList.remove('processing', 'active');
+  });
+  document.querySelectorAll('.connection').forEach(c => {
+    c.classList.remove('processing', 'active');
+  });
+}
+function resetNodePositions() {
+  const defaultPositions = [
+    { id: 'input', x: 30, y: 150 },
+    { id: 'embed', x: 280, y: 150 },
+    { id: 'vectordb', x: 530, y: 150 },
+    { id: 'rerank', x: 780, y: 150 },
+    { id: 'llm', x: 1030, y: 150 },
+    { id: 'output', x: 1280, y: 150 }
+  ];
+  defaultPositions.forEach(pos => {
+    const node = NODES.find(n => n.id === pos.id);
+    if (node) {
+      node.x = pos.x;
+      node.y = pos.y;
+      const el = document.getElementById('node_' + pos.id);
+      if (el) {
+        el.style.left = pos.x + 'px';
+        el.style.top = pos.y + 'px';
       }
     }
+  });
+  drawConnections();
+}
+function runPipeline() {
+  const input = document.getElementById('chatInput').value.trim();
+  if (!input) {
+    addSystemMessage('⚠️ Enter a query in the chat to run the pipeline');
+    return;
+  }
+  sendMessage();
+}
+// ==================== STORAGE ====================
+function saveToStorage() {
+  try {
+    const data = {
+      vectorDB: window.ragState.vectorDB.map(e => ({
+        ...e,
+        vector: e.vector ? Array.from(e.vector) : null
+      })),
+      chatHistory: window.ragState.chatHistory,
+      topK: window.ragState.topK
+    };
+    localStorage.setItem('rag_visualizer_db', JSON.stringify(data));
+  } catch (e) {
+    console.warn('Storage save failed:', e);
+  }
+}
+function loadFromStorage() {
+  try {
+    const data = localStorage.getItem('rag_visualizer_db');
+    if (data) {
+      const parsed = JSON.parse(data);
+      window.ragState.vectorDB = parsed.vectorDB || [];
+      window.ragState.chatHistory = parsed.chatHistory || [];
+      window.ragState.topK = parsed.topK || 3;
+      renderVectorTable();
+      updateStats();
     }
+  } catch (e) {
+    console.warn('Storage load failed:', e);
+  }
+}
+function exportDB() {
+  const data = {
+    vectorDB: window.ragState.vectorDB.map(e => ({
+      ...e,
+      vector: e.vector ? Array.from(e.vector) : null
+    })),
+    chatHistory: window.ragState.chatHistory,
+    exportDate: new Date().toISOString()
+  };
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'rag_visualizer_export_' + Date.now() + '.json';
+  a.click();
+  URL.revokeObjectURL(url);
+  addSystemMessage('📦 Database exported');
+}
+function clearAll() {
+  if (confirm('Clear all data including vector DB and chat history?')) {
+    window.ragState.vectorDB = [];
+    window.ragState.chatHistory = [];
+    localStorage.removeItem('rag_visualizer_db');
+    renderVectorTable();
+    updateStats();
+    document.getElementById('chatMessages').innerHTML = '<div class="message message-system">🤖 RAG Visualizer reset. Models still loaded.</div>';
+    addSystemMessage('️ All data cleared');
+  }
+}
+// ==================== TABS ====================
+document.querySelectorAll('.chat-tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    document.querySelectorAll('.chat-tab').forEach(t => t.classList.remove('active'));
+    tab.classList.add('active');
+  });
+});
+document.querySelectorAll('.right-tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    document.querySelectorAll('.right-tab').forEach(t => t.classList.remove('active'));
+    tab.classList.add('active');
+    const panelId = 'panel-' + tab.dataset.tab;
+    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
+    document.getElementById(panelId).classList.add('active');
+    if (tab.dataset.tab === 'nodes') {
+      setTimeout(drawConnections, 100);
     }
+  });
+});
+// ==================== RESIZE HANDLER ====================
+window.addEventListener('resize', () => {
+  drawConnections();
+});
+// ==================== AUTO-RESIZE TEXTAREA ====================
+document.getElementById('chatInput').addEventListener('input', function() {
+  this.style.height = 'auto';
+  this.style.height = Math.min(this.scrollHeight, 120) + 'px';
+});
+// ==================== START ====================
+init();
+</script>
 </body>
+</html>