Spaces:
Running
Running
Download index.html from reranker/reranker-explorer: direct link, hf CLI and curl.
- Browser
- Download file 26.4 kB
-
https://huggingface.co/spaces/reranker/reranker-explorer/resolve/main/index.html
- Command line
-
hf download hf://spaces/reranker/reranker-explorer/index.html
-
curl -L -o index.html https://huggingface.co/spaces/reranker/reranker-explorer/resolve/main/index.html
26.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Reranker Explorer: an interactive guide to reranking models, cross-encoders, listwise rerankers, RAG, retrieval quality, evaluation metrics and deployment."> | |
| <meta name="keywords" content="reranker, reranking, cross encoder, RAG, retrieval, search relevance, nDCG, MRR, MAP, recall, semantic search"> | |
| <title>Reranker Explorer</title> | |
| <style> | |
| :root{--bg:#f7f9fc;--card:#fff;--text:#101828;--muted:#667085;--line:#e4e7ec;--blue:#2563eb;--indigo:#4f46e5;--shadow:0 18px 50px rgba(16,24,40,.08)} | |
| *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 10% 0%,rgba(37,99,235,.10),transparent 30%),radial-gradient(circle at 92% 8%,rgba(79,70,229,.09),transparent 28%),var(--bg)} | |
| .wrap{max-width:1180px;margin:auto;padding:0 22px}header{padding:64px 0 34px}.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #c7d7fe;background:#f5f8ff;border-radius:999px;font-size:13px;font-weight:800;color:#344054}.dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--indigo))} | |
| h1{font-size:clamp(44px,7vw,76px);line-height:1;letter-spacing:-.055em;margin:22px 0 16px}.gradient{background:linear-gradient(90deg,var(--blue),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:20px;line-height:1.7;color:#475467;max-width:900px} | |
| .card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;margin-top:28px}.hero-card{padding:25px}.hero-card h3{margin:0 0 9px}.hero-card p{margin:0;color:var(--muted);line-height:1.65} | |
| .pipeline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}.pipe{padding:9px 11px;border-radius:999px;background:#f2f4f7;font-size:12px;font-weight:800;color:#475467}.arrow{color:#98a2b3;font-weight:900}.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.quick div{padding:17px;border-radius:16px;background:linear-gradient(145deg,#f8fbff,#f5f3ff);border:1px solid #e0e7ff}.quick strong{display:block;font-size:23px}.quick span{font-size:12px;color:var(--muted)} | |
| nav{position:sticky;top:0;z-index:20;background:rgba(247,249,252,.88);backdrop-filter:blur(16px);border-top:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec}nav .inner{display:flex;gap:8px;overflow:auto;padding:11px 22px;max-width:1180px;margin:auto}nav a{white-space:nowrap;text-decoration:none;color:#344054;font-size:13px;font-weight:800;padding:8px 11px;border-radius:999px}nav a:hover{background:#fff} | |
| section{padding:52px 0}.section-title{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:22px}.section-title h2{font-size:34px;letter-spacing:-.035em;margin:0}.section-title p{margin:0;max-width:650px;line-height:1.6;color:var(--muted)}.definition{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.definition .card{padding:24px}.quote{font-size:20px;line-height:1.6;font-weight:800;padding:22px;border:1px solid #c7d7fe;background:linear-gradient(135deg,#eff6ff,#eef2ff);border-radius:18px}.small{font-size:14px;line-height:1.7;color:var(--muted)} | |
| .arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.arch{padding:19px}.arch h3{margin:0 0 7px;font-size:16px}.arch p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.arch .best{display:inline-block;margin-top:12px;padding:6px 8px;border-radius:999px;background:#eff4ff;color:#1849a9;font-size:11px;font-weight:800} | |
| .controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}input[type=search]{flex:1;min-width:260px;border:1px solid #d0d5dd;border-radius:14px;padding:14px 16px;font-size:15px;outline:none;background:#fff}.filters{display:flex;gap:8px;flex-wrap:wrap}button{border:1px solid #d0d5dd;background:#fff;color:#344054;border-radius:999px;padding:10px 13px;font-size:13px;font-weight:800;cursor:pointer}button:hover,button.active{border-color:#84adff;background:#eff4ff;color:#1849a9} | |
| .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.topic{padding:21px;cursor:pointer;transition:.18s}.topic:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(16,24,40,.11)}.kicker{text-transform:uppercase;font-size:11px;letter-spacing:.12em;font-weight:900;color:var(--blue)}.topic h3{margin:8px 0 7px;font-size:18px}.topic p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.tag{font-size:11px;padding:5px 8px;border-radius:999px;background:#f2f4f7;color:#475467} | |
| .metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{padding:18px}.metric strong{display:block;font-size:16px;margin-bottom:6px}.metric span{font-size:13px;color:var(--muted);line-height:1.55}.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.flow .card{padding:17px;min-height:145px}.flow .n{font-size:11px;font-weight:900;color:var(--blue)}.flow h3{font-size:16px;margin:8px 0 6px}.flow p{font-size:12px;line-height:1.55;color:var(--muted);margin:0} | |
| .matrix{overflow:auto}table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden}th,td{padding:14px 15px;border-bottom:1px solid #eaecf0;text-align:left;font-size:13px;vertical-align:top}th{background:#f9fafb;color:#344054}td{color:#475467} | |
| .empty{display:none;text-align:center;padding:30px;color:var(--muted)}.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(16,24,40,.5);padding:24px;z-index:99}.modal.open{display:flex}.modal-box{max-width:760px;width:100%;max-height:86vh;overflow:auto;background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 80px rgba(16,24,40,.28)}.modal-head{display:flex;justify-content:space-between;gap:16px}.modal-head h3{margin:0;font-size:26px}.close{border-radius:12px;padding:8px 11px}.modal-body{color:#475467;line-height:1.7}.modal-body h4{color:#101828;margin:20px 0 6px}.callout{padding:16px 18px;border-left:4px solid var(--blue);background:#f8faff;border-radius:12px;margin-top:16px} | |
| .footer{padding:35px 0 65px;color:#667085;font-size:13px}.footer .inner{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} | |
| @media(max-width:980px){.hero-grid,.definition{grid-template-columns:1fr}.grid,.metric-grid{grid-template-columns:repeat(2,1fr)}.arch-grid{grid-template-columns:repeat(2,1fr)}.flow{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.grid,.metric-grid,.arch-grid,.flow,.quick{grid-template-columns:1fr}.section-title{display:block}.section-title p{margin-top:10px}.wrap{padding:0 16px}} | |
| </style> | |
| </head> | |
| <body> | |
| <header><div class="wrap"> | |
| <span class="badge"><span class="dot"></span> Reranker · Technical Explorer</span> | |
| <h1>Understand the <span class="gradient">reranking layer.</span></h1> | |
| <p class="lead">A practical, vendor-neutral guide to second-stage ranking models, cross-encoders, listwise reranking, retrieval quality, RAG pipelines, search relevance and production evaluation.</p> | |
| <div class="hero-grid"> | |
| <div class="card hero-card"><h3>What is a reranker?</h3><p>A reranker is a second-stage ranking model that re-scores retrieved candidates and produces a better ordering for downstream search, RAG or agent workflows.</p><div class="pipeline"><span class="pipe">Query</span><span class="arrow">→</span><span class="pipe">Retrieve</span><span class="arrow">→</span><span class="pipe">Rerank</span><span class="arrow">→</span><span class="pipe">Use top results</span></div></div> | |
| <div class="card hero-card"><div class="quick"><div><strong>36</strong><span>technical concepts</span></div><div><strong>9</strong><span>topic categories</span></div><div><strong>4</strong><span>architecture families</span></div><div><strong>6</strong><span>core evaluation metrics</span></div></div></div> | |
| </div></div></header> | |
| <nav><div class="inner"><a href="#definition">Definition</a><a href="#architectures">Architectures</a><a href="#explorer">Explorer</a><a href="#metrics">Metrics</a><a href="#pipeline">Pipeline</a><a href="#matrix">Trade-offs</a></div></nav> | |
| <main> | |
| <section id="definition"><div class="wrap"><div class="section-title"><h2>Reranking, precisely defined</h2><p>A reranker normally does not search the entire corpus. It improves a candidate set already returned by a faster first-stage retriever.</p></div><div class="definition"><div class="card"><div class="quote">A reranker is a second-stage ranking model that re-scores and reorders retrieved candidates to improve relevance, precision and downstream answer quality.</div></div><div class="card small">A typical architecture separates <strong>candidate generation</strong> from <strong>expensive relevance scoring</strong>. The first stage maximizes recall efficiently; the reranker spends more computation on a smaller candidate set to improve ordering.<br><br>This pattern is common in search, RAG, enterprise retrieval, recommendation and agent systems.</div></div></div></section> | |
| <section id="architectures"><div class="wrap"><div class="section-title"><h2>Core reranker architectures</h2><p>Different architectures trade quality, latency, context handling and operational complexity differently.</p></div><div class="arch-grid"> | |
| <div class="card arch"><h3>Cross-Encoder</h3><p>Scores query-document pairs jointly, often delivering strong relevance at higher compute cost.</p><span class="best">Strong precision</span></div> | |
| <div class="card arch"><h3>Late Interaction</h3><p>Uses richer token-level interactions while retaining more retrieval efficiency than full cross-encoding.</p><span class="best">Quality / efficiency</span></div> | |
| <div class="card arch"><h3>Listwise Reranker</h3><p>Evaluates multiple candidates together and reasons about their relative ordering.</p><span class="best">Contextual ordering</span></div> | |
| <div class="card arch"><h3>LLM Reranker</h3><p>Uses a generative or instruction-tuned model to score, compare or reorder candidates.</p><span class="best">Flexible reasoning</span></div> | |
| </div></div></section> | |
| <section id="explorer"><div class="wrap"><div class="section-title"><h2>Explore the reranking ecosystem</h2><p>Search concepts or filter by technical layer. Select a card for a deeper explanation.</p></div><div class="controls"><input id="search" type="search" placeholder="Search: cross-encoder, nDCG, RAG, latency, multilingual..."><div class="filters" id="filters"></div></div><div class="grid" id="grid"></div><div class="empty" id="empty">No matching topic.</div></div></section> | |
| <section id="metrics"><div class="wrap"><div class="section-title"><h2>Evaluation metrics that matter</h2><p>Reranking should be measured on ordering quality, not only model accuracy in isolation.</p></div><div class="metric-grid"> | |
| <div class="card metric"><strong>nDCG@k</strong><span>Rewards relevant results appearing higher and supports graded relevance.</span></div> | |
| <div class="card metric"><strong>MRR</strong><span>Measures how early the first relevant result appears.</span></div> | |
| <div class="card metric"><strong>MAP</strong><span>Summarizes precision across multiple relevant results and ranking positions.</span></div> | |
| <div class="card metric"><strong>Recall@k</strong><span>Measures whether relevant items survive into the candidate set or final top-k.</span></div> | |
| <div class="card metric"><strong>Precision@k</strong><span>Measures how many of the top-k results are relevant.</span></div> | |
| <div class="card metric"><strong>Latency / cost</strong><span>Balances relevance gain against added compute, throughput and response time.</span></div> | |
| </div></div></section> | |
| <section id="pipeline"><div class="wrap"><div class="section-title"><h2>Production reranking pipeline</h2><p>A useful reranker is one layer in a complete retrieval system.</p></div><div class="flow"> | |
| <div class="card"><span class="n">01</span><h3>Query</h3><p>User, application or agent creates a retrieval query.</p></div> | |
| <div class="card"><span class="n">02</span><h3>Retrieve</h3><p>BM25, embeddings or hybrid search returns candidates.</p></div> | |
| <div class="card"><span class="n">03</span><h3>Rerank</h3><p>A stronger relevance model re-scores the candidates.</p></div> | |
| <div class="card"><span class="n">04</span><h3>Select</h3><p>Only the strongest top-k results continue downstream.</p></div> | |
| <div class="card"><span class="n">05</span><h3>Use</h3><p>Results feed search UI, RAG generation, tools or agent decisions.</p></div> | |
| </div></div></section> | |
| <section id="matrix"><div class="wrap"><div class="section-title"><h2>Architecture trade-offs</h2><p>There is no universally best reranker. Choice depends on candidate count, quality target, hardware and latency budget.</p></div><div class="card matrix"><table><thead><tr><th>Approach</th><th>Quality potential</th><th>Latency</th><th>Best fit</th><th>Main caution</th></tr></thead><tbody> | |
| <tr><td>Cross-Encoder</td><td>High</td><td>Medium to high</td><td>Top-k precision, RAG, enterprise search</td><td>Cost scales with query-document pairs</td></tr> | |
| <tr><td>Late Interaction</td><td>High</td><td>Medium</td><td>Large-scale semantic retrieval</td><td>More complex indexing and serving</td></tr> | |
| <tr><td>Listwise</td><td>Potentially very high</td><td>High</td><td>Small candidate sets, nuanced ordering</td><td>Context limits and cost</td></tr> | |
| <tr><td>LLM-based</td><td>Flexible</td><td>High</td><td>Reasoning-heavy relevance tasks</td><td>Consistency, cost and reproducibility</td></tr> | |
| </tbody></table></div></div></section> | |
| </main> | |
| <footer class="footer"><div class="wrap inner"><div><strong>Reranker Explorer</strong><br>Vendor-neutral technical guide to reranking and retrieval quality.</div><div>Cooperations & partnerships:<br><strong>agenten@magenta.de</strong></div></div></footer> | |
| <div class="modal" id="modal"><div class="modal-box"><div class="modal-head"><h3 id="modalTitle"></h3><button class="close" id="close">Close</button></div><div class="modal-body" id="modalBody"></div></div></div> | |
| <script> | |
| const topics=[{cat:'Foundations',title:'Candidate generation',desc:'The first retrieval stage that produces a broad candidate set.',tags:'retrieval, recall'.split(', '),detail:'Candidate generation is optimized for speed and recall using lexical, dense or hybrid retrieval.',why:'A reranker can only improve items that survive the first stage.'}, | |
| {cat:'Foundations',title:'Second-stage ranking',desc:'A stronger model re-scores a smaller candidate set.',tags:'ranking, top-k'.split(', '),detail:'Second-stage ranking concentrates compute on retrieved items instead of the entire corpus.',why:'This is the core reason reranking can improve relevance without making search prohibitively expensive.'}, | |
| {cat:'Foundations',title:'Relevance score',desc:'A numerical estimate of query-candidate relevance.',tags:'score, ordering'.split(', '),detail:'Reranker scores are often most useful for relative ordering rather than cross-model calibration.',why:'Do not compare raw scores across unrelated models without calibration.'}, | |
| {cat:'Foundations',title:'Top-k selection',desc:'The number of candidates retained after retrieval or reranking.',tags:'top-k, context'.split(', '),detail:'Larger k improves coverage but increases latency and may add noise.',why:'Tune k together with context budget and answer-quality metrics.'}, | |
| {cat:'Architectures',title:'Cross-Encoder',desc:'Jointly encodes query and document for rich interaction.',tags:'cross-encoder, pairwise'.split(', '),detail:'Cross-encoders often provide strong precision because every candidate is scored with the query.',why:'A standard production choice when candidate sets are modest.'}, | |
| {cat:'Architectures',title:'Late Interaction',desc:'Uses token-level representations with efficient interaction.',tags:'ColBERT, token-level'.split(', '),detail:'Late interaction aims to retain rich matching while reducing the cost of full joint encoding.',why:'Useful when scale and quality both matter.'}, | |
| {cat:'Architectures',title:'Listwise reranking',desc:'Scores or reorders multiple candidates together.',tags:'listwise, ordering'.split(', '),detail:'Listwise models consider relationships among candidates rather than treating each one independently.',why:'Useful when redundancy, diversity or relative comparison matters.'}, | |
| {cat:'Architectures',title:'LLM reranking',desc:'Uses a generative model to judge or reorder candidates.',tags:'LLM, reasoning'.split(', '),detail:'LLMs can rerank through scoring, pairwise comparisons or listwise prompts.',why:'Flexible, but latency, consistency and cost need careful evaluation.'}, | |
| {cat:'Retrieval',title:'BM25 + reranker',desc:'Lexical retrieval followed by semantic reranking.',tags:'BM25, lexical'.split(', '),detail:'BM25 is fast and exact-match friendly; a semantic reranker refines final order.',why:'A strong baseline for enterprise and domain search.'}, | |
| {cat:'Retrieval',title:'Dense retrieval + reranker',desc:'Vector retrieval followed by stronger relevance scoring.',tags:'embeddings, vector search'.split(', '),detail:'Dense retrieval finds semantically similar candidates; reranking improves final precision.',why:'Common in RAG pipelines.'}, | |
| {cat:'Retrieval',title:'Hybrid search',desc:'Combines lexical and semantic candidates before reranking.',tags:'hybrid, BM25, dense'.split(', '),detail:'Hybrid retrieval merges keyword and vector results before final scoring.',why:'Can improve robustness across exact-match and semantic queries.'}, | |
| {cat:'Retrieval',title:'Query expansion',desc:'Rewrites or expands the query before retrieval.',tags:'rewrite, recall'.split(', '),detail:'Expanded queries can improve recall but also add noise.',why:'Reranking is especially useful after broader retrieval.'}, | |
| {cat:'RAG',title:'Reranking for RAG',desc:'Reorders retrieved chunks before generation.',tags:'RAG, LLM'.split(', '),detail:'Reranking increases evidence density and can reduce irrelevant context.',why:'Better context selection can improve answer quality without changing the generator.'}, | |
| {cat:'RAG',title:'Chunk-level reranking',desc:'Scores passages or chunks rather than whole documents.',tags:'chunks, passages'.split(', '),detail:'Useful when only parts of long documents are relevant.',why:'Can improve context efficiency if chunking is well designed.'}, | |
| {cat:'RAG',title:'Document-level reranking',desc:'Ranks whole documents before passage selection.',tags:'documents, hierarchical'.split(', '),detail:'A coarse first rerank can reduce the search space before deeper passage scoring.',why:'Useful in large enterprise corpora.'}, | |
| {cat:'RAG',title:'Context compression',desc:'Uses ranking to reduce downstream context volume.',tags:'context, efficiency'.split(', '),detail:'Fewer, better passages can reduce tokens and generation cost.',why:'Useful when long prompts hurt latency or answer focus.'}, | |
| {cat:'Evaluation',title:'nDCG',desc:'Measures ranking quality with graded relevance.',tags:'metric, graded relevance'.split(', '),detail:'nDCG rewards relevant items more when they appear near the top.',why:'Strong metric for top-of-list quality.'}, | |
| {cat:'Evaluation',title:'MRR',desc:'Emphasizes the position of the first relevant result.',tags:'metric, first hit'.split(', '),detail:'MRR is useful when users mainly need one strong result.',why:'Pair with other metrics when multiple relevant results matter.'}, | |
| {cat:'Evaluation',title:'MAP',desc:'Summarizes precision across ranking positions and queries.',tags:'metric, precision'.split(', '),detail:'MAP captures quality when several results are relevant.',why:'Useful for multi-answer retrieval tasks.'}, | |
| {cat:'Evaluation',title:'Recall@k',desc:'Measures whether relevant items survive into the candidate set.',tags:'metric, recall'.split(', '),detail:'Recall@k is especially important for first-stage retrieval.',why:'No reranker can recover a document that was never retrieved.'}, | |
| {cat:'Production',title:'Latency budget',desc:'The response-time budget available for reranking.',tags:'latency, SLA'.split(', '),detail:'Candidate count, model size, batching and hardware determine added delay.',why:'Measure quality gain against latency cost.'}, | |
| {cat:'Production',title:'Batching',desc:'Scores many query-document pairs together.',tags:'throughput, GPU'.split(', '),detail:'Batching improves accelerator utilization.',why:'Watch p95/p99 latency, not only average throughput.'}, | |
| {cat:'Production',title:'Caching',desc:'Reuses scores or intermediate results.',tags:'cache, cost'.split(', '),detail:'Useful for repeated queries or stable candidate sets.',why:'Include model version in cache keys.'}, | |
| {cat:'Production',title:'Candidate count',desc:'Number of retrieved items passed to the reranker.',tags:'top-n, cost'.split(', '),detail:'More candidates improve coverage but increase compute.',why:'One of the most important quality-cost knobs.'}, | |
| {cat:'Models',title:'Multilingual rerankers',desc:'Score relevance across multiple languages.',tags:'multilingual, cross-lingual'.split(', '),detail:'Can support multilingual and cross-language retrieval depending on training.',why:'Evaluate each target language separately.'}, | |
| {cat:'Models',title:'Domain-specific rerankers',desc:'Adapted to fields such as legal, medical, code or science.',tags:'domain, fine-tuning'.split(', '),detail:'Specialized training can improve terminology and domain relevance.',why:'Narrow specialization can outperform larger general models.'}, | |
| {cat:'Models',title:'Small rerankers',desc:'Compact models optimized for latency and cost.',tags:'efficient, edge'.split(', '),detail:'Useful for high-volume or low-latency systems.',why:'The smallest model meeting quality targets can be the best production choice.'}, | |
| {cat:'Models',title:'Large rerankers',desc:'Larger models used when relevance quality dominates latency.',tags:'quality, reasoning'.split(', '),detail:'Can improve nuanced relevance judgments.',why:'Gains should be justified with task-specific evaluation.'}, | |
| {cat:'Training',title:'Pointwise training',desc:'Predicts an independent score for each query-document pair.',tags:'training, score'.split(', '),detail:'Simple objective for relevance prediction.',why:'Does not directly optimize relative ordering.'}, | |
| {cat:'Training',title:'Pairwise training',desc:'Learns which of two candidates should rank higher.',tags:'training, preference'.split(', '),detail:'A common ranking objective using positive/negative pairs.',why:'Hard-negative quality matters greatly.'}, | |
| {cat:'Training',title:'Listwise training',desc:'Optimizes ordering over multiple candidates together.',tags:'training, listwise'.split(', '),detail:'Closer to the final ranking task.',why:'More complex but potentially better aligned with ranked-list quality.'}, | |
| {cat:'Training',title:'Hard negatives',desc:'Difficult non-relevant examples used during training.',tags:'negatives, training'.split(', '),detail:'Hard negatives force the model to learn finer relevance distinctions.',why:'Poor negative sampling can produce brittle rerankers.'}, | |
| {cat:'Search',title:'Enterprise search',desc:'Reranks policies, tickets, knowledge bases and repositories.',tags:'enterprise, knowledge'.split(', '),detail:'Useful in corpora with duplication and near-similar documents.',why:'Relevance quality directly affects trust in internal search.'}, | |
| {cat:'Search',title:'E-commerce search',desc:'Reranks products for search intent and business context.',tags:'commerce, products'.split(', '),detail:'Can combine semantic relevance with business constraints.',why:'Pure semantic similarity is rarely the only objective.'}, | |
| {cat:'Search',title:'Code search',desc:'Reranks code snippets, files or repositories.',tags:'code, developers'.split(', '),detail:'Can consider identifiers, comments and semantic intent.',why:'High precision matters because developers inspect few results.'}, | |
| {cat:'Search',title:'Agent retrieval',desc:'Reranks memories, tools, documents or actions for agents.',tags:'agents, memory'.split(', '),detail:'Agents can narrow large candidate sets before planning or acting.',why:'Better ranking can reduce irrelevant context and improve decisions.'}]; | |
| const cats=["All",...new Set(topics.map(t=>t.cat))]; | |
| const filters=document.getElementById("filters");let active="All"; | |
| cats.forEach(c=>{const b=document.createElement("button");b.textContent=c;if(c==="All")b.classList.add("active");b.onclick=()=>{active=c;[...filters.children].forEach(x=>x.classList.remove("active"));b.classList.add("active");render();};filters.appendChild(b);}); | |
| const grid=document.getElementById("grid"),search=document.getElementById("search"),empty=document.getElementById("empty"); | |
| function render(){const q=search.value.trim().toLowerCase();const rows=topics.filter(t=>{const ok=active==="All"||t.cat===active;const txt=(t.cat+" "+t.title+" "+t.desc+" "+t.tags.join(" ")+" "+t.detail+" "+t.why).toLowerCase();return ok&&(!q||txt.includes(q));});grid.innerHTML="";rows.forEach(t=>{const el=document.createElement("article");el.className="card topic";el.innerHTML=`<div class="kicker">${t.cat}</div><h3>${t.title}</h3><p>${t.desc}</p><div class="tags">${t.tags.map(x=>`<span class="tag">${x}</span>`).join("")}</div>`;el.onclick=()=>openModal(t);grid.appendChild(el);});empty.style.display=rows.length?"none":"block";} | |
| search.addEventListener("input",render); | |
| function openModal(t){document.getElementById("modalTitle").textContent=t.title;document.getElementById("modalBody").innerHTML=`<div class="kicker">${t.cat}</div><p><strong>${t.desc}</strong></p><h4>Technical explanation</h4><p>${t.detail}</p><h4>Why it matters</h4><p>${t.why}</p><div class="callout">Reranking quality should always be tested on your own retrieval data, candidate-generation strategy and latency budget.</div>`;document.getElementById("modal").classList.add("open");} | |
| function closeModal(){document.getElementById("modal").classList.remove("open")} | |
| document.getElementById("close").onclick=closeModal;document.getElementById("modal").onclick=e=>{if(e.target.id==="modal")closeModal()};document.addEventListener("keydown",e=>{if(e.key==="Escape")closeModal()}); | |
| render(); | |
| </script> | |
| </body> | |
| </html> | |