Blame for index.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>GraphRAG CodeAudit Explorer</title>
<style>
:root{--paper:#f7f5f2;--ink:#161616;--muted:#6b655d;--line:#e4e0da;--accent:#067647}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 ui-sans-serif,system-ui,sans-serif}
main{max-width:980px;margin:0 auto;padding:48px 24px}h1{font-size:40px;line-height:1.05;letter-spacing:-.03em;margin:0 0 12px}
.lead{color:var(--muted);max-width:72ch}.mono{font-family:ui-monospace,SFMono-Regular,monospace}
.layout{display:grid;grid-template-columns:300px 1fr;gap:18px;margin-top:24px}@media(max-width:760px){.layout{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
button{display:block;width:100%;text-align:left;min-height:48px;margin:0 0 8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:13px/1.4 inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.active{border-color:var(--accent);background:#ecfdf3}
.answer{white-space:pre-wrap;font-size:14px;line-height:1.65}.meta{font-size:12px;color:var(--muted);margin-top:12px}
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}td,th{padding:6px 0;border-bottom:1px solid var(--line);text-align:left}
.tag{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:2px 8px;font-size:12px;margin-right:6px}
a{color:var(--accent)}code{font-family:ui-monospace,monospace;font-size:12px}
</style></head><body><main>
<p class="mono" style="color:var(--accent);font-size:12px;letter-spacing:.18em;text-transform:uppercase">GraphRAG-CodeAudit · local-to-global</p>
<h1>Ask a codebase <span style="color:var(--accent)">for its risk shape</span></h1>
<p class="lead">Extract entities, typed edges, and security claims; partition the graph into communities; answer through entity neighbourhoods or community reports. The sample repository is synthetic and the judge is deterministic.</p>
<div class="layout">
 <div class="card"><p class="mono" style="font-size:12px;color:var(--muted)">SAMPLE QUESTIONS</p><div id="buttons"></div><p class="meta" id="meta"></p></div>
 <div class="card"><h2 id="q" style="margin-top:0;font-size:18px"></h2><div class="answer" id="answer"></div><p class="meta" id="citations"></p></div>
</div>
<div class="card" style="margin-top:18px"><h2 style="margin-top:0;font-size:18px">GraphRAG vs flat vector RAG</h2><table><thead><tr><th>Metric</th><th>GraphRAG</th><th>Flat</th></tr></thead><tbody id="metrics"></tbody></table><p class="meta" id="summary"></p></div>
<p class="meta"><span class="tag">arXiv:2404.16130</span> Source: <a href="https://github.com/itsoumya-d/GraphRAG-CodeAudit">GraphRAG-CodeAudit</a> · Dataset: <a href="https://huggingface.co/datasets/itssoumyad/graphrag-questions-100">graphrag-questions-100</a></p>
</main>
<script>
fetch('./demo.json').then(r=>r.json()).then(data=>{
 const buttons=document.getElementById('buttons'); let active=0;
 const render=(i)=>{active=i;const d=data.queries[i];document.getElementById('q').textContent=d.question;document.getElementById('answer').textContent=d.answer;document.getElementById('citations').textContent='Mode: '+d.mode+' · Citations: '+d.citations.join(', ')+' · Communities: '+(d.communities.join(', ')||'—');
 [...buttons.children].forEach((b,j)=>b.classList.toggle('active',j===i));};
 data.queries.forEach((q,i)=>{const b=document.createElement('button');b.type='button';b.textContent=q.question;b.addEventListener('click',()=>render(i));buttons.appendChild(b)});
 document.getElementById('meta').textContent='Method: '+data.method+' · '+data.communities+' communities';
 const body=document.getElementById('metrics');for(const k of ['comprehensiveness','diversity','empowerment','directness']){const tr=document.createElement('tr');tr.innerHTML='<td>'+k+'</td><td>'+data.graph[k].toFixed(2)+'</td><td>'+data.flat[k].toFixed(2)+'</td>';body.appendChild(tr)}
 const tr=document.createElement('tr');tr.innerHTML='<td><strong>average</strong></td><td><strong>'+((data.graph.comprehensiveness+data.graph.diversity+data.graph.empowerment+data.graph.directness)/4).toFixed(2)+'</strong></td><td><strong>'+((data.flat.comprehensiveness+data.flat.diversity+data.flat.empowerment+data.flat.directness)/4).toFixed(2)+'</strong></td>';body.appendChild(tr);
 document.getElementById('summary').textContent='Win rate: '+(data.win_rate*100).toFixed(1)+'% on 100 synthetic questions. Deterministic rubric, not the paper LLM judge.';
 render(0);
}).catch(e=>{document.getElementById('answer').textContent='Demo data failed to load: '+e});
</script></body></html>