| let DATA; |
| const $=q=>document.querySelector(q); |
| async function boot(){ |
| DATA=await (await fetch('./demo-data.json')).json(); |
| $('#metrics').innerHTML=DATA.metrics.map(([l,v])=>`<div class="metric"><b>${v}</b><span>${l}</span></div>`).join(''); |
| const s=DATA.scenario; |
| $('#question').textContent=s.question; |
| $('#conditions').innerHTML=Object.entries(s.conditions).map(([k,v])=>`<div class="condition"><b>${k}</b>${v}</div>`).join(''); |
| draw('#retrieval',DATA.retrieval,['Dense baseline','Section-aware','Hybrid RRF — selected','Reranker ablation']); |
| draw('#agent',DATA.agent,['Analytical tools','Agentic investigation','Agentic + verifier — final']); |
| } |
| function draw(sel,items,labels){ |
| $(sel).innerHTML=items.map(([v,s],i)=>`<div class="row"><div class="row-head"><strong>${v} · ${s}%</strong><span>${labels[i]}</span></div><div class="bar"><i style="width:${s}%"></i></div></div>`).join(''); |
| } |
| function runDemo(){ |
| $('#placeholder').style.display='none'; |
| $('#result').classList.remove('active'); |
| $('#loading').classList.add('active'); |
| const stages=['Retrieving historical incidents...','Running bounded analytics...','Assessing evidence sufficiency...','Generating ranked hypotheses...','Verifying claims and citations...']; |
| let i=0; $('#loading-status').textContent=stages[0]; |
| const timer=setInterval(()=>{i++;if(i<stages.length){$('#loading-status').textContent=stages[i]}else{clearInterval(timer);showResult()}},320); |
| } |
| function showResult(){ |
| const s=DATA.scenario; |
| $('#loading').classList.remove('active'); |
| $('#root').textContent=s.root_cause; |
| $('#summary').textContent=s.summary; |
| $('#confidence').textContent='Confidence '+s.confidence.toFixed(2); |
| $('#support').textContent=s.support; |
| $('#verification').textContent='Verification '+s.verification; |
| $('#timeline').innerHTML=s.timeline.map(t=>`<div class="step"><div class="dot"></div>${t}</div>`).join(''); |
| $('#evidence').innerHTML=s.evidence.map(([c,t,x])=>`<div class="ev"><code>${c}</code><p>${x}</p></div>`).join(''); |
| $('#analytics').innerHTML=s.analytics.map(([n,v,d])=>`<div class="analytic"><div><b>${n}</b><small>${d}</small></div><strong>${v}</strong></div>`).join(''); |
| $('#result').classList.add('active'); |
| } |
| document.addEventListener('DOMContentLoaded',boot); |
|
|
