Natnael B. Haile
Cursor
feat: complete IR Studio with Git LFS tracking for all binary assets and NFCorpus index
fbad523 | import React, { useState } from 'react'; | |
| import { Search, Zap, Layers, Sparkles } from 'lucide-react'; | |
| export const MathInspectorTab: React.FC = () => { | |
| const [selectedParadigm, setSelectedParadigm] = useState<'sparse' | 'dense' | 'learned-sparse' | 'cross-encoder'>('dense'); | |
| return ( | |
| <div className="space-y-5 max-w-5xl"> | |
| {/* Overview Card */} | |
| <div className="border border-zinc-800 bg-zinc-900/40 p-4 rounded-lg space-y-2.5 font-sans"> | |
| <div className="flex items-center justify-between"> | |
| <h2 className="text-base font-semibold text-zinc-100"> | |
| The Unified Inner-Product Formulation | |
| </h2> | |
| <span className="text-[11px] font-mono text-zinc-500"> | |
| Lin et al. (2021) | |
| </span> | |
| </div> | |
| <p className="text-xs text-zinc-400 leading-relaxed"> | |
| Modern information retrieval maps both lexical and neural models to a unified mathematical objective: | |
| <strong> Maximum Inner Product Search (MIPS)</strong> over vector spaces. | |
| Sparse, dense, and learned sparse methods differ primarily in dimensionality, sparsity, and indexing data structures. | |
| </p> | |
| {/* Math Equation */} | |
| <div className="p-3 bg-zinc-950 border border-zinc-850 rounded font-mono text-center text-xs text-zinc-200 my-1"> | |
| Score(q, d) = ⟨ E<sub>Q</sub>(q), E<sub>D</sub>(d) ⟩ = ∑<sub>i</sub> E<sub>Q</sub>(q)<sub>i</sub> · E<sub>D</sub>(d)<sub>i</sub> | |
| </div> | |
| </div> | |
| {/* Paradigm Tabs */} | |
| <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs"> | |
| <button | |
| onClick={() => setSelectedParadigm('sparse')} | |
| className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${ | |
| selectedParadigm === 'sparse' | |
| ? 'bg-amber-100 dark:bg-amber-500/10 border-amber-400 dark:border-amber-500/50 text-amber-950 dark:text-amber-200 ring-1 ring-amber-400/40 font-semibold dark:font-medium' | |
| : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900' | |
| }`} | |
| > | |
| <Search className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'sparse' ? 'text-amber-700 dark:text-amber-400' : 'text-zinc-400 dark:text-zinc-500'}`} /> | |
| <div> | |
| <div className="font-semibold">Unsupervised Sparse</div> | |
| <div className="text-[11px] text-zinc-500 mt-0.5">BM25 / Lucene Postings</div> | |
| </div> | |
| </button> | |
| <button | |
| onClick={() => setSelectedParadigm('dense')} | |
| className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${ | |
| selectedParadigm === 'dense' | |
| ? 'bg-cyan-100 dark:bg-cyan-500/10 border-cyan-400 dark:border-cyan-500/50 text-cyan-950 dark:text-cyan-200 ring-1 ring-cyan-400/40 font-semibold dark:font-medium' | |
| : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900' | |
| }`} | |
| > | |
| <Zap className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'dense' ? 'text-cyan-700 dark:text-cyan-400' : 'text-zinc-400 dark:text-zinc-500'}`} /> | |
| <div> | |
| <div className="font-semibold">Supervised Dense</div> | |
| <div className="text-[11px] text-zinc-500 mt-0.5">BGE / Faiss HNSW</div> | |
| </div> | |
| </button> | |
| <button | |
| onClick={() => setSelectedParadigm('learned-sparse')} | |
| className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${ | |
| selectedParadigm === 'learned-sparse' | |
| ? 'bg-purple-100 dark:bg-purple-500/10 border-purple-400 dark:border-purple-500/50 text-purple-950 dark:text-purple-200 ring-1 ring-purple-400/40 font-semibold dark:font-medium' | |
| : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900' | |
| }`} | |
| > | |
| <Layers className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'learned-sparse' ? 'text-purple-700 dark:text-purple-400' : 'text-zinc-400 dark:text-zinc-500'}`} /> | |
| <div> | |
| <div className="font-semibold">Learned Sparse</div> | |
| <div className="text-[11px] text-zinc-500 mt-0.5">SPLADE / Lucene Impact</div> | |
| </div> | |
| </button> | |
| <button | |
| onClick={() => setSelectedParadigm('cross-encoder')} | |
| className={`p-3 rounded-lg border text-left transition flex items-start space-x-2 cursor-pointer ${ | |
| selectedParadigm === 'cross-encoder' | |
| ? 'bg-emerald-100 dark:bg-emerald-500/10 border-emerald-400 dark:border-emerald-500/50 text-emerald-950 dark:text-emerald-200 ring-1 ring-emerald-400/40 font-semibold dark:font-medium' | |
| : 'bg-zinc-100/60 dark:bg-zinc-950 border-zinc-300 dark:border-zinc-850 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-900' | |
| }`} | |
| > | |
| <Sparkles className={`w-4 h-4 mt-0.5 shrink-0 ${selectedParadigm === 'cross-encoder' ? 'text-emerald-700 dark:text-emerald-400' : 'text-zinc-400 dark:text-zinc-500'}`} /> | |
| <div> | |
| <div className="font-semibold">Cross-Encoder</div> | |
| <div className="text-[11px] text-zinc-500 mt-0.5">RankLLM / Full Attention</div> | |
| </div> | |
| </button> | |
| </div> | |
| {/* Details Box */} | |
| <div className="border border-zinc-800 bg-zinc-900/30 p-4.5 rounded-lg space-y-3.5 text-xs font-sans"> | |
| {selectedParadigm === 'sparse' && ( | |
| <div className="space-y-3"> | |
| <h3 className="text-sm font-semibold text-amber-200"> | |
| Unsupervised Sparse Retrieval (BM25) | |
| </h3> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]"> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Dimensionality:</span> | |
| <span className="text-zinc-200 font-medium">|V| ≈ 30,000+ words</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Sparsity:</span> | |
| <span className="text-zinc-200 font-medium">> 99.9% zeros</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Index Structure:</span> | |
| <span className="text-zinc-200 font-medium">Inverted Posting Lists (Lucene)</span> | |
| </div> | |
| </div> | |
| <p className="text-zinc-400 leading-relaxed"> | |
| In BM25, query and document vectors lie in high-dimensional lexical vocabulary space. | |
| Only non-zero entries correspond to tokens present in the document. | |
| The dot product is evaluated via inverted posting lists without scanning non-matching documents. | |
| </p> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850 font-mono text-[11px] text-amber-200/90"> | |
| E_Q(q)_i = 1 (if token i ∈ q, else 0)<br /> | |
| E_D(d)_i = IDF(i) · [ TF(i,d)·(k₁+1) / (TF(i,d) + k₁·(1 - b + b·|D|/avgdl)) ] | |
| </div> | |
| </div> | |
| )} | |
| {selectedParadigm === 'dense' && ( | |
| <div className="space-y-3"> | |
| <h3 className="text-sm font-semibold text-cyan-200"> | |
| Supervised Dense Retrieval (Bi-Encoder) | |
| </h3> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]"> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Dimensionality:</span> | |
| <span className="text-zinc-200 font-medium">d = 768 continuous floats</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Sparsity:</span> | |
| <span className="text-zinc-200 font-medium">0% zeros (fully dense)</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Index Structure:</span> | |
| <span className="text-zinc-200 font-medium">HNSW Proximity Graph (Faiss)</span> | |
| </div> | |
| </div> | |
| <p className="text-zinc-400 leading-relaxed"> | |
| Dense retrieval projects text into low-dimensional semantic vector spaces via dual transformers: | |
| <code className="text-cyan-300 font-mono ml-1">E_Q(q) = Transformer_Q(q)</code> and | |
| <code className="text-cyan-300 font-mono ml-1">E_D(d) = Transformer_D(d)</code>. | |
| Because all coordinates are non-zero, inverted lists cannot be used. Instead, approximate nearest neighbor (ANN) search algorithms like | |
| HNSW traverse multi-layer proximity graphs in logarithmic time. | |
| </p> | |
| </div> | |
| )} | |
| {selectedParadigm === 'learned-sparse' && ( | |
| <div className="space-y-3"> | |
| <h3 className="text-sm font-semibold text-purple-950 dark:text-purple-200"> | |
| Learned Sparse Representations (SPLADE) | |
| </h3> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]"> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Dimensionality:</span> | |
| <span className="text-zinc-200 font-medium">|V| = 30,522 (WordPiece Vocab)</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Sparsity:</span> | |
| <span className="text-zinc-200 font-medium">~95% zeros (regularized)</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Index Structure:</span> | |
| <span className="text-zinc-200 font-medium">Lucene Impact Index</span> | |
| </div> | |
| </div> | |
| <p className="text-zinc-400 leading-relaxed"> | |
| SPLADE combines the efficiency of inverted indexes with deep contextual vocabulary expansion. | |
| A masked language model predicts non-negative weights over the full vocabulary, expanding terms with synonyms and related concepts. | |
| In Anserini, floating-point weights are quantized to integers and indexed directly in Lucene as synthetic term frequencies. | |
| </p> | |
| </div> | |
| )} | |
| {selectedParadigm === 'cross-encoder' && ( | |
| <div className="space-y-3"> | |
| <h3 className="text-sm font-semibold text-emerald-200"> | |
| Cross-Encoder Listwise Reranking (RankLLM / monoT5) | |
| </h3> | |
| <div className="grid grid-cols-1 md:grid-cols-3 gap-2 font-mono text-[11px]"> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Architecture:</span> | |
| <span className="text-zinc-200 font-medium">Joint Full Attention (q × d)</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Complexity:</span> | |
| <span className="text-zinc-200 font-medium">O((|q| + |d|)² · L) per document</span> | |
| </div> | |
| <div className="p-2.5 bg-zinc-950 rounded border border-zinc-850"> | |
| <span className="text-zinc-500 block">Index Structure:</span> | |
| <span className="text-zinc-200 font-medium">None (2nd-stage reranker on Top-K)</span> | |
| </div> | |
| </div> | |
| <p className="text-zinc-400 leading-relaxed"> | |
| Unlike bi-encoders which compute independent representations, cross-encoders concatenate query and passage | |
| into a single transformer context. Every token attends directly to every other token, capturing nuanced nuances, | |
| negation, and syntactic dependencies at higher inference cost. | |
| </p> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| }; | |