File size: 26,369 Bytes
e02496f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<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>