| <!DOCTYPE html>
|
| <html lang="tr">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>RAG Gate İstatistiği</title>
|
| <script src="https://cdn.jsdelivr.net/npm/plotly.js-dist-min@2.35.2/plotly.min.js"></script>
|
| <style>
|
| :root{--bg:#f6f8fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--line:#e5e7eb;--accent:#2563eb;--green:#15803d;--red:#b91c1c}
|
| @media (prefers-color-scheme:dark){:root{--bg:#0f172a;--card:#111827;--text:#e5e7eb;--muted:#9ca3af;--line:#374151;--accent:#60a5fa;--green:#4ade80;--red:#f87171}}
|
| *{box-sizing:border-box}
|
| body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
|
| .wrap{max-width:1100px;margin:0 auto;padding:24px 16px 60px}
|
| h1{font-size:28px;margin:0 0 6px}h2{font-size:20px;margin:0 0 10px}
|
| .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:16px 0}
|
| .muted{color:var(--muted);font-size:14px}
|
| label{font-size:14px;margin-right:12px}select,input{font:inherit;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text)}
|
| table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}th:first-child,td:first-child{text-align:left}
|
| .ok{color:var(--green);font-weight:700}.bad{color:var(--red);font-weight:700}
|
| .badges span{display:inline-block;margin:4px 6px 0 0;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font-size:13px}
|
| .plot{width:100%;height:380px}
|
| .scroll{overflow-x:auto}
|
| </style>
|
| </head>
|
| <body>
|
| <div class="wrap">
|
| <h1>Regression gate yazı-tura mı atıyor?</h1>
|
| <p class="muted">Proje 01 · Küçük golden setlerde PASS/FAIL kararlarının istatistiği. Bütün sayılar yayımlanmış sonuç Dataset'inden okunur; bu sayfa hesaplama yapmaz (hesaplayıcı hariç).</p>
|
| <div class="card"><h2>Ön-kayıtlı hipotezler</h2><div class="badges" id="hyp"></div></div>
|
|
|
| <div class="card">
|
| <h2>1. Mutlak eşik gate'i (G1) ne sıklıkla yanılır?</h2>
|
| <p class="muted">x: gerçek değer ile eşik arasındaki fark d (pozitif = sistem gerçekte eşiğin üstünde). y: karar hata oranı. Her çizgi bir golden set boyutu n. Dört sistem havuzlanmıştır.</p>
|
| <label>Veri seti <select id="g1ds"></select></label><label>Metrik <select id="g1m"></select></label><label>Gerçek <select id="g1t"></select></label>
|
| <div id="g1plot" class="plot"></div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>2. Gate'ler aynı değişikliğe ne der?</h2>
|
| <p class="muted">PASS oranları. G1: eşik = baseline − 0.05. G2/G3/G3u/G3′: marj m = 0.02. "Kabul edilebilir" = gerçek Δ ≥ −0.02. Yeşil: doğru karar çoğunlukta; kırmızı: yanlış karar çoğunlukta.</p>
|
| <label>Veri seti <select id="gds"></select></label><label>n <select id="gn"></select></label><label>Metrik <select id="gm"></select></label>
|
| <div class="scroll"><table id="gtab"></table></div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>3. HNSW ekleme sırası gürültüsü</h2>
|
| <p class="muted">10 farklı ekleme sırasıyla kurulan HNSW indekslerinde popülasyon Recall@10 farklarının 95. persentili.</p>
|
| <div id="hnswplot" class="plot"></div>
|
| </div>
|
|
|
| <div class="card" id="latcard">
|
| <h2>4. Latency: P95, P50'den ne kadar belirsiz?</h2>
|
| <p class="muted">FiQA, 2 iş parçacığı, 10 koşu ortalaması. Göreli CI genişliği = (üst − alt) / tahmin.</p>
|
| <div class="scroll"><table id="lattab"></table></div>
|
| </div>
|
|
|
| <div class="card">
|
| <h2>5. Kaç soru yeter?</h2>
|
| <p class="muted">Eşleştirilmiş, tek yönlü test için normal yaklaşım: MDE = (z<sub>1−α</sub> + z<sub>güç</sub>) · sd(d) / √n. sd(d) = iki sistemin soru başına fark skorlarının standart sapması; aşağıdan hazır bir senaryo seçebilir ya da elle girebilirsin.</p>
|
| <label>Hazır senaryo <select id="preset"></select></label><br><br>
|
| <label>sd(d) <input id="sd" type="number" step="0.01" value="0.30" style="width:80px"></label>
|
| <label>Fark δ <input id="delta" type="number" step="0.005" value="0.02" style="width:80px"></label>
|
| <label>α <select id="alpha"><option>0.05</option><option>0.01</option><option>0.10</option></select></label>
|
| <label>Güç <select id="power"><option>0.8</option><option>0.9</option></select></label>
|
| <label>n <input id="nin" type="number" value="100" style="width:80px"></label>
|
| <p id="calc" style="font-size:18px"></p>
|
| <p class="muted">Mutlak eşik gate'i (G1) için: gerçek değer eşikten d kadar uzaksa hata oranı ≈ Φ(−|d|·√n / sd). Sonlu popülasyon düzeltmesiyle bu yaklaşım n = 100'de gözlenen hata oranlarından 1 puandan az saptı; hesaplayıcı düzeltmesiz hali (büyük popülasyon) kullanır, bu yüzden küçük popülasyonlarda hatayı biraz yüksek gösterir.</p>
|
| <label>Eşiğe uzaklık d <input id="dist" type="number" step="0.005" value="0.02" style="width:80px"></label>
|
| <p id="g1calc" style="font-size:18px"></p>
|
| <div id="simwrap" style="display:none">
|
| <p class="muted"><b>Uyarı:</b> Farklar az sayıda soruda yoğunlaştığında (örneğin HNSW gürültüsü) ve n küçükken normal yaklaşım G3'ün PASS oranını belirgin şekilde yanlış tahmin ediyor. Seçili senaryo için simülasyon sonuçları (m = 0.02):</p>
|
| <div class="scroll"><table id="simtab"></table></div>
|
| </div>
|
| </div>
|
| <p class="muted">Kaynak veri: BEIR NFCorpus, FiQA-2018, SCIDOCS (lisanslar Dataset kartında). Kod ve ön-kayıt: <a href="https://huggingface.co/bunyamineymen/rag-gate-stats-code">bunyamineymen/rag-gate-stats-code</a>.</p>
|
| </div>
|
| <script>
|
| const Z = {"0.05": 1.6449, "0.01": 2.3263, "0.1": 1.2816, "0.10": 1.2816, "0.8": 0.8416, "0.9": 1.2816};
|
| const $ = id => document.getElementById(id);
|
| const uniq = a => [...new Set(a)];
|
| const fill = (sel, vals, val) => { sel.innerHTML = vals.map(v => `<option${v === val ? " selected" : ""}>${v}</option>`).join(""); };
|
| const css = v => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
|
| const layout = (x, y) => ({margin: {t: 10, r: 10, b: 45, l: 55}, xaxis: {title: x}, yaxis: {title: y},
|
| paper_bgcolor: "rgba(0,0,0,0)", plot_bgcolor: "rgba(0,0,0,0)", font: {color: css("--text")}, legend: {orientation: "h"}});
|
|
|
| fetch("data/summary.json").then(r => r.json()).then(S => {
|
| $("hyp").innerHTML = Object.entries(S.hypotheses).map(([k, v]) =>
|
| `<span class="${v ? "ok" : "bad"}">${k}: ${v ? "desteklendi" : "desteklenmedi"}</span>`).join("");
|
|
|
| const ds = uniq(S.g1_error.map(r => r.dataset));
|
| fill($("g1ds"), ds, ds[0]); fill($("g1m"), uniq(S.g1_error.map(r => r.metric)), "recall@5");
|
| fill($("g1t"), uniq(S.g1_error.map(r => r.truth)), "population");
|
| const drawG1 = () => {
|
| const rows = S.g1_error.filter(r => r.dataset === $("g1ds").value && r.metric === $("g1m").value && r.truth === $("g1t").value);
|
| Plotly.react("g1plot", uniq(rows.map(r => r.n)).map(n => {
|
| const g = rows.filter(r => r.n === n);
|
| return {x: g.map(r => r.d), y: g.map(r => r.error), name: `n=${n}`, mode: "lines+markers"};
|
| }), layout("d = gerçek − eşik", "hata oranı"), {displayModeBar: false, responsive: true});
|
| };
|
| ["g1ds", "g1m", "g1t"].forEach(id => $(id).onchange = drawG1); drawG1();
|
|
|
| fill($("gds"), ds, ds[0]); fill($("gn"), uniq(S.gates.map(r => r.n)).map(String), "100");
|
| fill($("gm"), uniq(S.gates.map(r => r.metric)), "recall@5");
|
| const order = ["G1", "G2", "G3", "G3signflip", "G3u"];
|
| const drawGates = () => {
|
| const rows = S.gates.filter(r => r.dataset === $("gds").value && r.n === +$("gn").value && r.metric === $("gm").value && r.truth === "population");
|
| const pairs = uniq(rows.map(r => `${r.family}|${r.A}|${r.B}`));
|
| let h = `<tr><th>Senaryo</th><th>Gerçek Δ</th>${order.map(g => `<th>${g}</th>`).join("")}</tr>`;
|
| for (const p of pairs) {
|
| const [fam, A, B] = p.split("|"), g = rows.filter(r => `${r.family}|${r.A}|${r.B}` === p);
|
| const ok = g[0].delta_true >= -0.02;
|
| h += `<tr><td>${fam}: ${A} → ${B}</td><td>${g[0].delta_true.toFixed(4)}</td>` + order.map(name => {
|
| const r = g.find(x => x.gate === name && (name !== "G1" || Math.abs(x.param - 0.05) < 1e-9));
|
| if (!r) return "<td>–</td>";
|
| const right = ok ? r.pass_rate >= 0.5 : r.pass_rate < 0.5;
|
| return `<td class="${right ? "ok" : "bad"}">${(100 * r.pass_rate).toFixed(0)}%</td>`;
|
| }).join("") + "</tr>";
|
| }
|
| $("gtab").innerHTML = h;
|
| };
|
| ["gds", "gn", "gm"].forEach(id => $(id).onchange = drawGates); drawGates();
|
|
|
| Plotly.react("hnswplot", ds.map(d => {
|
| const g = S.hnsw.filter(r => r.dataset === d).sort((a, b) => a.ef - b.ef);
|
| return {x: g.map(r => r.ef), y: g.map(r => r.p95_abs_diff), name: d, mode: "lines+markers"};
|
| }), {...layout("ef_search", "|ΔRecall@10| 95. persentil"), xaxis: {title: "ef_search", type: "log", tickvals: [16, 32, 64, 128]}}, {displayModeBar: false, responsive: true});
|
|
|
| if (S.latency) {
|
| $("lattab").innerHTML = "<tr><th>Sistem</th><th>P50 ms</th><th>P95 ms</th><th>P99 ms</th><th>CI genişliği P50</th><th>CI genişliği P95</th></tr>" +
|
| S.latency.map(r => `<tr><td>${r.system}</td><td>${r.p50.toFixed(1)}</td><td>${r.p95.toFixed(1)}</td><td>${r.p99.toFixed(1)}</td><td>${(100 * r.rel_w50).toFixed(1)}%</td><td>${(100 * r.rel_w95).toFixed(1)}%</td></tr>`).join("");
|
| } else { $("latcard").style.display = "none"; }
|
|
|
| const presets = S.mde.map(r => ({label: `${r.dataset}: ${r.A} → ${r.B}`, sd: r.sd_d, ...r}));
|
| $("preset").innerHTML = '<option value="">—</option>' + presets.map((p, i) => `<option value="${i}">${p.label} (sd ${p.sd.toFixed(3)})</option>`).join("");
|
| $("preset").onchange = () => {
|
| if ($("preset").value === "") { $("simwrap").style.display = "none"; return; }
|
| const p = presets[+$("preset").value];
|
| $("sd").value = p.sd.toFixed(3); calc();
|
| const rows = S.gates.filter(r => r.gate === "G3" && Math.abs(r.param - 0.02) < 1e-9 && r.metric === "recall@5" &&
|
| r.dataset === p.dataset && r.A === p.A && r.B === p.B).sort((a, b) => a.n - b.n);
|
| $("simtab").innerHTML = `<tr><th>n</th><th>Gerçek Δ</th><th>G3 PASS (simülasyon)</th><th>G3 PASS (normal yaklaşım)</th></tr>` +
|
| rows.map(r => `<tr><td>${r.n}</td><td>${r.delta_true.toFixed(4)}</td><td>${(100 * r.pass_rate).toFixed(1)}%</td><td>${(100 * r.analytic_pass).toFixed(1)}%</td></tr>`).join("");
|
| $("simwrap").style.display = rows.length ? "" : "none";
|
| };
|
|
|
| const Phi = x => { const t = 1 / (1 + 0.3275911 * Math.abs(x) / Math.SQRT2), y = 1 - (((((1.061405429 * t - 1.453152027) * t) + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * Math.exp(-x * x / 2); return x >= 0 ? (1 + y) / 2 : (1 - y) / 2; };
|
| const calc = () => {
|
| const z = Z[$("alpha").value] + Z[$("power").value], sd = +$("sd").value, d = +$("delta").value, n = +$("nin").value;
|
| $("calc").innerHTML = `δ = ${d} için gereken n ≈ <b>${Math.ceil((z * sd / d) ** 2)}</b> · n = ${n} ile tespit edilebilir en küçük fark ≈ <b>${(z * sd / Math.sqrt(n)).toFixed(4)}</b>`;
|
| $("g1calc").innerHTML = `n = ${n}, d = ${$("dist").value}: G1 hata oranı ≈ <b>${(100 * Phi(-Math.abs(+$("dist").value) * Math.sqrt(n) / sd)).toFixed(1)}%</b>`;
|
| };
|
| ["sd", "delta", "alpha", "power", "nin", "dist"].forEach(id => $(id).oninput = calc); calc();
|
| });
|
| </script>
|
| </body>
|
| </html>
|
|
|
