| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Document Intelligence RAG System</title> |
| <style> |
| :root { --bg:#f7f7f5; --fg:#1d1d1b; --muted:#5f5f5a; --line:#d9d9d4; --card:#ffffff; --accent:#2d5b8a; --warn:#8a5a2d; --bad:#8a2d2d; --ok:#2d6b3f; } |
| @media (prefers-color-scheme: dark) { :root { --bg:#161615; --fg:#ececea; --muted:#a3a39c; --line:#3a3a37; --card:#1f1f1d; --accent:#7fb0e0; --warn:#e0b07f; --bad:#e08a8a; --ok:#8fd0a0; } } |
| * { box-sizing: border-box; } |
| body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; } |
| header { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; } |
| header h1 { font-size:18px; margin:0; } |
| header .caps { color:var(--muted); font-size:13px; } |
| main { display:grid; grid-template-columns: 360px 1fr; gap:16px; padding:16px 20px; } |
| @media (max-width: 900px) { main { grid-template-columns: 1fr; } } |
| section { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:14px; } |
| h2 { font-size:15px; margin:0 0 10px; } |
| label { display:block; margin:8px 0 4px; color:var(--muted); font-size:13px; } |
| input[type=text], textarea, select { width:100%; padding:7px 8px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--fg); font:inherit; } |
| textarea { min-height:64px; resize:vertical; } |
| button { padding:7px 12px; border:1px solid var(--accent); border-radius:4px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; } |
| button.secondary { background:transparent; color:var(--accent); } |
| button.danger { background:transparent; color:var(--bad); border-color:var(--bad); } |
| button:disabled { opacity:.5; cursor:default; } |
| .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } |
| ul.docs { list-style:none; margin:0; padding:0; max-height:320px; overflow:auto; } |
| ul.docs li { padding:8px; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:flex-start; } |
| ul.docs li:last-child { border-bottom:0; } |
| .meta { color:var(--muted); font-size:12px; } |
| .status { display:inline-block; padding:1px 6px; border-radius:3px; font-size:12px; border:1px solid var(--line); } |
| .status.ready { color:var(--ok); border-color:var(--ok); } |
| .status.failed, .status.provider_error { color:var(--bad); border-color:var(--bad); } |
| .status.unverified_citations, .status.insufficient_evidence, .status.excerpts_only, .status.indexing { color:var(--warn); border-color:var(--warn); } |
| .answer { white-space:pre-wrap; padding:10px; border:1px solid var(--line); border-radius:4px; background:var(--bg); } |
| .hit { border:1px solid var(--line); border-radius:4px; padding:10px; margin:8px 0; } |
| .hit.used { border-color:var(--accent); } |
| .hit pre { white-space:pre-wrap; margin:6px 0 0; font:13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; } |
| .scores { color:var(--muted); font-size:12px; } |
| .notes { color:var(--warn); font-size:13px; } |
| .empty { color:var(--muted); font-style:italic; } |
| .error { color:var(--bad); } |
| details summary { cursor:pointer; color:var(--muted); font-size:13px; } |
| a { color:var(--accent); } |
| .sr-only { position:absolute; left:-9999px; } |
| </style> |
| </head> |
| <body> |
| <header> |
| <h1>Document Intelligence RAG System</h1> |
| <span class="caps" id="caps" aria-live="polite">Loading capabilities…</span> |
| <span class="caps"><a href="/docs">API docs</a></span> |
| </header> |
| <main> |
| <section aria-labelledby="docs-h"> |
| <h2 id="docs-h">Documents</h2> |
| <form id="upload-form" class="row"> |
| <label for="file" class="sr-only">Choose a file</label> |
| <input id="file" type="file" accept=".txt,.md,.rst,.pdf" required> |
| <button type="submit" id="upload-btn">Upload and index</button> |
| </form> |
| <p class="meta">Supported: .txt, .md, .rst, .pdf (text layer). Identical bytes are deduplicated.</p> |
| <div id="upload-result" class="meta" aria-live="polite"></div> |
| <ul class="docs" id="doc-list" aria-label="Indexed documents"><li class="empty">Loading…</li></ul> |
| <details id="chunk-panel" hidden> |
| <summary>Chunks of selected document</summary> |
| <div id="chunk-view"></div> |
| </details> |
| </section> |
|
|
| <section aria-labelledby="ask-h"> |
| <h2 id="ask-h">Search and ask</h2> |
| <form id="ask-form"> |
| <label for="question">Question or search text</label> |
| <textarea id="question" required placeholder="e.g. How many days do customers have to request a refund?"></textarea> |
| <div class="row"> |
| <div> |
| <label for="mode">Retrieval mode</label> |
| <select id="mode"> |
| <option value="hybrid">hybrid (dense + lexical)</option> |
| <option value="lexical">lexical (BM25)</option> |
| <option value="vector">vector (dense)</option> |
| </select> |
| </div> |
| <div> |
| <label for="topk">Top k</label> |
| <input id="topk" type="text" inputmode="numeric" value="5" size="3" aria-describedby="topk-help"> |
| </div> |
| <div> |
| <label for="rerank">Reranker</label> |
| <select id="rerank"><option value="false">off</option><option value="true">on (if configured)</option></select> |
| </div> |
| <div> |
| <label for="generate">Answer</label> |
| <select id="generate"><option value="true">generate (if provider configured)</option><option value="false">excerpts only</option></select> |
| </div> |
| </div> |
| <label>Scope: <span id="scope-label" class="meta">whole corpus</span> <button type="button" class="secondary" id="clear-scope" hidden>clear</button></label> |
| <div class="row" style="margin-top:8px"> |
| <button type="submit" id="ask-btn">Run</button> |
| <span id="ask-status" class="meta" aria-live="polite"></span> |
| </div> |
| </form> |
|
|
| <h2 style="margin-top:16px">Answer</h2> |
| <div id="answer-status"></div> |
| <div id="answer" class="answer empty">No question asked yet.</div> |
| <div id="citations"></div> |
| <div id="notes" class="notes"></div> |
|
|
| <h2 style="margin-top:16px">Retrieved passages</h2> |
| <p class="meta">Scores are per stage and only comparable within one request. Highlighted passages entered the model context.</p> |
| <div id="hits"><p class="empty">Nothing retrieved yet.</p></div> |
| </section> |
| </main> |
| <script> |
| (function () { |
| const $ = (id) => document.getElementById(id); |
| const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({"&":"&","<":"<",">":">",'"':""","'":"'"}[c])); |
| const state = { scope: null, scopeName: null, apiKey: null }; |
| |
| async function api(path, options = {}) { |
| const headers = Object.assign({}, options.headers || {}); |
| if (state.apiKey) headers["X-API-Key"] = state.apiKey; |
| const res = await fetch(path, Object.assign({}, options, { headers })); |
| let body = null; |
| try { body = await res.json(); } catch (e) { body = null; } |
| if (res.status === 401 && !state.apiKey) { |
| state.apiKey = window.prompt("This server requires an API key (X-API-Key):") || null; |
| if (state.apiKey) return api(path, options); |
| } |
| if (!res.ok) { |
| const msg = (body && (body.error || body.detail)) ? (body.error || JSON.stringify(body.detail)) : res.statusText; |
| throw new Error(`${res.status}: ${msg}`); |
| } |
| return body; |
| } |
| |
| function fmt(n) { return (n === null || n === undefined) ? "–" : (typeof n === "number" ? n.toFixed(3) : String(n)); } |
| |
| async function loadCapabilities() { |
| try { |
| const h = await api("/health"); |
| const c = h.capabilities || {}; |
| const parts = [ |
| `storage: ${c.storage_mode || "?"}`, |
| `dense: ${c.dense_retrieval ? c.embedding_identity + (c.embedding_semantic ? "" : " (non-semantic test embeddings)") : "unavailable"}`, |
| `reranker: ${c.reranker_mode || "none"}`, |
| `generation: ${h.generation_available ? c.generation_provider : "unavailable (excerpts only)"}`, |
| `auth: ${h.auth}`, |
| ]; |
| $("caps").textContent = parts.join(" · "); |
| if (h.startup_error) $("caps").textContent = "Startup error: " + h.startup_error; |
| if (!c.dense_retrieval) { $("mode").value = "lexical"; } |
| } catch (e) { $("caps").textContent = "Health check failed: " + e.message; } |
| } |
| |
| async function loadDocuments() { |
| const list = $("doc-list"); |
| try { |
| const docs = await api("/api/v1/documents"); |
| if (!docs.length) { list.innerHTML = '<li class="empty">No documents indexed. Upload one to begin.</li>'; return; } |
| list.innerHTML = ""; |
| for (const d of docs) { |
| const li = document.createElement("li"); |
| li.innerHTML = `<div style="flex:1"><strong>${esc(d.filename)}</strong> <span class="status ${esc(d.status)}">${esc(d.status)}</span> |
| <div class="meta">v${d.version} · ${d.chunk_count} chunks${d.page_count ? ` · ${d.page_count} pages` : ""} · ${esc(d.doc_id.slice(0, 8))}…${d.error ? ` · <span class="error">${esc(d.error)}</span>` : ""}</div></div>`; |
| const scopeBtn = document.createElement("button"); scopeBtn.className = "secondary"; scopeBtn.textContent = "scope"; scopeBtn.title = "Restrict retrieval to this document"; |
| scopeBtn.onclick = () => { state.scope = [d.doc_id]; state.scopeName = d.filename; $("scope-label").textContent = d.filename; $("clear-scope").hidden = false; }; |
| const chunksBtn = document.createElement("button"); chunksBtn.className = "secondary"; chunksBtn.textContent = "chunks"; |
| chunksBtn.onclick = () => showChunks(d); |
| const delBtn = document.createElement("button"); delBtn.className = "danger"; delBtn.textContent = "delete"; |
| delBtn.onclick = async () => { |
| if (!window.confirm(`Delete ${d.filename} and all of its indexed data?`)) return; |
| try { const r = await api(`/api/v1/documents/${encodeURIComponent(d.doc_id)}`, { method: "DELETE" }); $("upload-result").textContent = `Deleted ${d.filename}: ${r.removed_chunks} chunks, ${r.removed_vectors} vectors, file removed: ${r.file_removed}.`; } |
| catch (e) { $("upload-result").innerHTML = `<span class="error">${esc(e.message)}</span>`; } |
| if (state.scope && state.scope[0] === d.doc_id) $("clear-scope").click(); |
| loadDocuments(); |
| }; |
| li.append(scopeBtn, chunksBtn, delBtn); |
| list.appendChild(li); |
| } |
| } catch (e) { list.innerHTML = `<li class="error">${esc(e.message)}</li>`; } |
| } |
| |
| async function showChunks(d) { |
| const panel = $("chunk-panel"); panel.hidden = false; panel.open = true; |
| $("chunk-view").innerHTML = '<p class="empty">Loading…</p>'; |
| try { |
| const r = await api(`/api/v1/documents/${encodeURIComponent(d.doc_id)}/chunks?limit=200`); |
| $("chunk-view").innerHTML = `<p class="meta">${esc(d.filename)} v${r.version}: ${r.chunk_count} chunks (showing ${r.chunks.length})</p>` + |
| r.chunks.map(c => `<div class="hit"><div class="meta">#${c.ordinal} · chars ${c.location.char_start}–${c.location.char_end}${c.location.page ? ` · page ${c.location.page}${c.location.page_end && c.location.page_end !== c.location.page ? "–" + c.location.page_end : ""}` : ""}${c.location.section ? ` · ${esc(c.location.section)}` : ""}</div><pre>${esc(c.text)}</pre></div>`).join(""); |
| } catch (e) { $("chunk-view").innerHTML = `<p class="error">${esc(e.message)}</p>`; } |
| } |
| |
| $("clear-scope").onclick = () => { state.scope = null; state.scopeName = null; $("scope-label").textContent = "whole corpus"; $("clear-scope").hidden = true; }; |
| |
| $("upload-form").onsubmit = async (ev) => { |
| ev.preventDefault(); |
| const file = $("file").files[0]; if (!file) return; |
| $("upload-btn").disabled = true; $("upload-result").textContent = `Indexing ${file.name}…`; |
| const form = new FormData(); form.append("file", file); |
| try { |
| const r = await api("/api/v1/documents/upload", { method: "POST", body: form }); |
| const d = r.document; |
| $("upload-result").textContent = r.created ? `Indexed ${d.filename}: ${d.chunk_count} chunks${r.warnings.length ? " · warnings: " + r.warnings.join("; ") : ""}.` : `Identical content already indexed as ${d.filename}.`; |
| } catch (e) { $("upload-result").innerHTML = `<span class="error">${esc(e.message)}</span>`; } |
| $("upload-btn").disabled = false; $("file").value = ""; |
| loadDocuments(); |
| }; |
| |
| $("ask-form").onsubmit = async (ev) => { |
| ev.preventDefault(); |
| const topk = parseInt($("topk").value, 10); |
| if (!Number.isInteger(topk) || topk < 1) { $("ask-status").textContent = "Top k must be a positive integer."; return; } |
| const payload = { text: $("question").value, mode: $("mode").value, top_k: topk, use_reranker: $("rerank").value === "true", generate: $("generate").value === "true" }; |
| if (state.scope) payload.doc_ids = state.scope; |
| $("ask-btn").disabled = true; $("ask-status").textContent = "Running…"; |
| $("answer-status").innerHTML = ""; $("citations").innerHTML = ""; $("notes").textContent = ""; |
| try { |
| const r = await api("/api/v1/query", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload) }); |
| render(r); |
| $("ask-status").textContent = `${r.processing_ms} ms · mode ${r.retrieval.mode_effective}${r.retrieval.mode_effective !== r.retrieval.mode_requested ? ` (requested ${r.retrieval.mode_requested})` : ""} · rerank ${r.retrieval.rerank_status}`; |
| } catch (e) { |
| $("answer").className = "answer error"; $("answer").textContent = e.message; $("ask-status").textContent = "Request failed."; |
| $("hits").innerHTML = '<p class="empty">Nothing retrieved.</p>'; |
| } |
| $("ask-btn").disabled = false; |
| }; |
| |
| const STATUS_TEXT = { |
| answered: "Generated answer; every citation resolves to a passage that was in the model context.", |
| unverified_citations: "Generated answer, but citations are missing or do not resolve. Treat as unverified.", |
| insufficient_evidence: "No sufficient evidence in the selected scope; no answer generated.", |
| excerpts_only: "No generation provider configured or generation disabled; showing supporting excerpts instead of an answer.", |
| provider_error: "The generation provider failed; retrieval still succeeded.", |
| }; |
| |
| function render(r) { |
| $("answer-status").innerHTML = `<span class="status ${esc(r.status)}">${esc(r.status)}</span> <span class="meta">${esc(STATUS_TEXT[r.status] || "")}${r.generation.cached ? " · served from cache" : ""}${r.generation.model ? " · " + esc(r.generation.model) : ""}</span>`; |
| const ans = $("answer"); |
| if (r.answer) { ans.className = "answer"; ans.textContent = r.answer; } |
| else if (r.status === "excerpts_only") { ans.className = "answer"; ans.innerHTML = r.excerpts.map(c => `<div><strong>[${esc(c.label)}]</strong> ${esc(c.filename)}${c.location.page ? `, page ${c.location.page}` : ""}${c.location.section ? `, ${esc(c.location.section)}` : ""}<pre style="white-space:pre-wrap;margin:4px 0 10px">${esc(c.text)}</pre></div>`).join(""); } |
| else { ans.className = "answer empty"; ans.textContent = r.generation.error || "No answer."; } |
| if (r.citations.length) { |
| $("citations").innerHTML = "<p class=\"meta\">Citations: " + r.citations.map(c => `<strong>[${esc(c.label)}]</strong> ${esc(c.filename)}${c.location.page ? ` p.${c.location.page}` : ""} (chunk #${c.ordinal})`).join(" · ") + "</p>"; |
| } |
| if (r.unknown_citations.length) $("citations").innerHTML += `<p class="error">Unknown citation labels: ${esc(r.unknown_citations.join(", "))}</p>`; |
| const notes = [...(r.retrieval.notes || [])]; |
| if (r.context.truncated) notes.push(`Context budget reached: ${r.context.hits_used} of ${r.context.hits_considered} retrieved passages entered the model context.`); |
| $("notes").textContent = notes.join(" "); |
| const used = new Set(r.context.blocks.map(b => b.chunk_id)); |
| const labels = Object.fromEntries(r.context.blocks.map(b => [b.chunk_id, b.label])); |
| if (!r.sources.length) { $("hits").innerHTML = '<p class="empty">Nothing retrieved for this query and scope.</p>'; return; } |
| $("hits").innerHTML = r.sources.map(h => { |
| const s = h.scores; const loc = h.location; |
| return `<div class="hit ${used.has(h.chunk_id) ? "used" : ""}"> |
| <div><strong>#${h.rank}</strong> ${used.has(h.chunk_id) ? `<strong>[${esc(labels[h.chunk_id])}]</strong> ` : ""}${esc(h.filename)} <span class="meta">chunk #${h.ordinal}${loc.page ? ` · page ${loc.page}${loc.page_end && loc.page_end !== loc.page ? "–" + loc.page_end : ""}` : ""}${loc.section ? ` · ${esc(loc.section)}` : ""} · chars ${loc.char_start}–${loc.char_end}</span></div> |
| <div class="scores">lexical ${fmt(s.lexical_score)} (rank ${fmt(s.lexical_rank)}) · vector sim ${fmt(s.vector_similarity)} (rank ${fmt(s.vector_rank)}) · fusion ${fmt(s.fusion_score)} · rerank ${fmt(s.rerank_score)}</div> |
| <pre>${esc(h.text)}</pre></div>`; |
| }).join(""); |
| } |
| |
| loadCapabilities(); loadDocuments(); |
| })(); |
| </script> |
| </body> |
| </html> |
|
|
