feat: add compare pipeline tab + has_context badge in UI

api.py

@@ -31,6 +31,7 @@ class Source(BaseModel):
     page: int
     rrf_score: float
     rerank_score: float
+    has_context: bool = False
 
 
 class QueryResponse(BaseModel):
@@ -107,6 +108,18 @@ async def stream(req: QueryRequest):
                              headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"})
 
 
+@app.post("/compare")
+def compare(req: QueryRequest):
+    """So sánh Text RAG vs ColPali retrieval trên cùng câu hỏi."""
+    from src.colpali_retriever import query as colpali_query
+    _, text_sources = retrieve(req.question, top_k=req.top_k)
+    try:
+        colpali_hits = colpali_query(req.question, top_k=req.top_k)
+    except Exception as e:
+        colpali_hits = []
+    return {"text_rag": text_sources, "colpali": colpali_hits}
+
+
 @app.get("/health")
 def health():
     return {"status": "ok"}

src/rag.py

@@ -48,6 +48,7 @@ def retrieve(question: str, top_k: int = 5):
             "page": c["metadata"]["page"],
             "rrf_score": round(c["score"], 3),
             "rerank_score": round(c["rerank_score"], 3),
+            "has_context": c["metadata"].get("has_context", False),
         }
         for c in contexts
     ]

static/index.html

@@ -120,6 +120,33 @@
     .cursor { animation: blink 0.8s step-end infinite; color: var(--primary); }
     @keyframes blink { 50% { opacity: 0; } }
     .uploaded-badge { display: inline-block; background: var(--green-bg); color: var(--green-text); border-radius: 4px; padding: 1px 5px; font-size: 0.68rem; font-weight: 600; margin-left: 4px; }
+    .ctx-badge { display: inline-block; background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 5px; font-size: 0.65rem; font-weight: 600; margin-left: 4px; }
+    [data-theme="dark"] .ctx-badge { background: #3a2a0a; color: #fbbf24; }
+
+    /* Tabs */
+    .tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--border); }
+    .tab-btn { padding: 8px 16px; font-size: 0.85rem; font-weight: 600; border: none; background: none; color: var(--text2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
+    .tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
+    .tab-btn:hover:not(.active) { color: var(--text); }
+    .tab-panel { display: none; }
+    .tab-panel.active { display: block; }
+
+    /* Compare panel */
+    .compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
+    .compare-col h4 { font-size: 0.8rem; font-weight: 700; padding: 8px 12px; border-radius: 8px 8px 0 0; margin-bottom: 0; }
+    .col-text h4 { background: var(--primary-light); color: var(--primary); }
+    .col-colpali h4 { background: #fef3c7; color: #92400e; }
+    [data-theme="dark"] .col-colpali h4 { background: #3a2a0a; color: #fbbf24; }
+    .compare-result { background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 8px 8px; padding: 10px; min-height: 80px; }
+    .compare-hit { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.78rem; }
+    .compare-hit:last-child { border-bottom: none; }
+    .compare-hit .hit-source { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .compare-hit .hit-meta { color: var(--text3); font-size: 0.7rem; margin-top: 2px; }
+    .compare-empty { color: var(--text3); font-size: 0.76rem; text-align: center; padding: 16px 0; }
+    .compare-loading { color: var(--text3); font-size: 0.76rem; text-align: center; padding: 16px 0; }
+    @media (max-width: 680px) {
+      .compare-cols { grid-template-columns: 1fr; }
+    }
 
     /* Mobile */
     @media (max-width: 680px) {
@@ -173,11 +200,41 @@
     </div>
 
     <div class="chat-area">
-      <div id="history">
-        <div class="empty-state">
-          <div class="icon">💬</div>
-          <h2>Hãy đặt câu hỏi về tài liệu</h2>
-          <p>Hóa đơn bán lẻ · Báo cáo tài chính · hoặc upload PDF của bạn</p>
+      <div class="tabs">
+        <button class="tab-btn active" onclick="switchTab('chat')">💬 Chat</button>
+        <button class="tab-btn" onclick="switchTab('compare')">⚖️ So sánh Pipeline</button>
+      </div>
+
+      <div id="tab-chat" class="tab-panel active">
+        <div id="history">
+          <div class="empty-state">
+            <div class="icon">💬</div>
+            <h2>Hãy đặt câu hỏi về tài liệu</h2>
+            <p>Hóa đơn bán lẻ · Báo cáo tài chính · hoặc upload PDF của bạn</p>
+          </div>
+        </div>
+      </div>
+
+      <div id="tab-compare" class="tab-panel">
+        <div class="card">
+          <h3>⚖️ So sánh Text RAG vs ColPali Visual Retrieval</h3>
+          <p style="font-size:0.78rem;color:var(--text2);margin-bottom:12px">Nhập câu hỏi và xem 2 pipeline truy xuất tài liệu như thế nào khác nhau.</p>
+          <div style="display:flex;gap:8px">
+            <input type="text" id="cmp-q" placeholder="Nhập câu hỏi để so sánh..." style="flex:1;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:0.88rem;background:var(--surface2);color:var(--text);outline:none" onkeydown="if(event.key==='Enter')runCompare()">
+            <button onclick="runCompare()" style="padding:8px 16px;background:var(--primary);color:white;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.85rem">So sánh</button>
+          </div>
+          <div id="compare-result">
+            <div class="compare-cols">
+              <div class="compare-col col-text">
+                <h4>📝 Text RAG (BM25 + Vector + Rerank)</h4>
+                <div class="compare-result"><div class="compare-empty">Nhập câu hỏi để xem kết quả</div></div>
+              </div>
+              <div class="compare-col col-colpali">
+                <h4>🖼️ ColPali Visual Retrieval (MaxSim)</h4>
+                <div class="compare-result"><div class="compare-empty">Nhập câu hỏi để xem kết quả</div></div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -193,6 +250,39 @@
   </div>
 
   <script>
+    // Tabs
+    function switchTab(name) {
+      document.querySelectorAll('.tab-btn').forEach((b, i) => b.classList.toggle('active', ['chat','compare'][i] === name));
+      document.getElementById('tab-chat').classList.toggle('active', name === 'chat');
+      document.getElementById('tab-compare').classList.toggle('active', name === 'compare');
+    }
+
+    // Compare
+    async function runCompare() {
+      const q = document.getElementById('cmp-q').value.trim();
+      if (!q) return;
+      const cols = document.querySelectorAll('#compare-result .compare-result');
+      cols.forEach(c => c.innerHTML = '<div class="compare-loading">Đang tìm kiếm...</div>');
+      try {
+        const res = await fetch('/compare', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({question: q, top_k: 5}) });
+        const data = await res.json();
+        // Text RAG
+        cols[0].innerHTML = data.text_rag.length ? data.text_rag.map((s,i) =>
+          `<div class="compare-hit">
+            <div class="hit-source">[${i+1}] 📄 ${s.source}${s.has_context ? '<span class="ctx-badge">✦ context</span>' : ''}</div>
+            <div class="hit-meta">Trang ${s.page} · RRF ${s.rrf_score} · Rerank ${s.rerank_score}</div>
+          </div>`).join('') : '<div class="compare-empty">Không có kết quả</div>';
+        // ColPali
+        cols[1].innerHTML = data.colpali.length ? data.colpali.map((s,i) =>
+          `<div class="compare-hit">
+            <div class="hit-source">[${i+1}] 🖼️ ${s.source || 'N/A'}</div>
+            <div class="hit-meta">Trang ${s.page || '?'} · Score ${s.score || 'N/A'}</div>
+          </div>`).join('') : '<div class="compare-empty">Không có kết quả (ColPali chạy local)</div>';
+      } catch(e) {
+        cols.forEach(c => c.innerHTML = `<div class="compare-empty">Lỗi: ${e.message}</div>`);
+      }
+    }
+
     // Theme
     function toggleTheme() {
       const html = document.documentElement;
@@ -280,9 +370,10 @@
         const rrfPct = Math.min(s.rrf_score * 3000, 100).toFixed(0);
         const rerankPct = Math.min(s.rerank_score * 150, 100).toFixed(0);
         const badge = s.uploaded ? '<span class="uploaded-badge">uploaded</span>' : '';
+        const ctxBadge = s.has_context ? '<span class="ctx-badge">✦ context</span>' : '';
         return `<div class="source-item">
           <div>
-            <div class="source-name">📄 ${s.source}${badge}</div>
+            <div class="source-name">📄 ${s.source}${badge}${ctxBadge}</div>
             <div class="source-page">Trang ${s.page}</div>
           </div>
           <div class="score-wrap">