Introduction / index.html
BinKhoaLe1812's picture
Upload 6 files
a747c59 verified
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="MedSwin presents an auditable clinical evidence system that combines patient EMR, guideline retrieval, biomedical reranking, specialist agents, and traceable answers." />
<title>MedSwin · Clinical Specialist</title>
<link rel="icon" href="assets/logo.png" type="image/png" />
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<canvas id="abyssCanvas" class="abyss-canvas" aria-hidden="true"></canvas>
<div class="deep-glow" aria-hidden="true"></div>
<div class="grid-noise" aria-hidden="true"></div>
<div class="read-progress" id="readProgress" aria-hidden="true"></div>
<header class="site-header" id="top">
<a class="brand" href="#top" aria-label="MedSwin home">
<span class="brand-orb"><img class="logo-mark" src="assets/logo.png" alt="" /></span>
<span>
<b>MedSwin</b>
<small>Evidence Observatory</small>
</span>
</a>
<button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false">Menu</button>
<nav class="nav" id="siteNav" aria-label="Primary navigation">
<a href="#overview">Overview</a>
<a href="#architecture">Architecture</a>
<a href="#specialist">Specialist</a>
<a href="#retrieval">Retrieval</a>
<a href="#agents">Agents</a>
<a href="#evaluation">Evaluation</a>
<a href="#release">Release</a>
</nav>
</header>
<aside class="depth-map" aria-label="Depth map">
<span>Depth map</span>
<a href="#overview" data-section="overview">01</a>
<a href="#architecture" data-section="architecture">02</a>
<a href="#specialist" data-section="specialist">03</a>
<a href="#retrieval" data-section="retrieval">04</a>
<a href="#agents" data-section="agents">05</a>
<a href="#evaluation" data-section="evaluation">06</a>
<a href="#release" data-section="release">07</a>
</aside>
<main>
<section class="hero section" id="overview" aria-labelledby="heroTitle">
<div class="hero-copy reveal">
<p class="eyebrow">Clinical RAG · EMR + CPG · audit trail</p>
<h1 id="heroTitle">MedSwin grounds clinical answers in patient records and guideline evidence.</h1>
<p class="lede">MedSwin combines patient-specific EMR retrieval, clinical practice guidelines, biomedical reranking, specialist critique, and provenance tracking so each answer can be traced back to the evidence that shaped it.</p>
<div class="hero-actions">
<a class="button primary" href="#architecture">Start system dive</a>
<a class="button secondary" href="#evaluation">Inspect metrics</a>
</div>
</div>
<div class="hero-visual reveal card high-impact">
<div class="panel-title">
<div>
<p class="eyebrow">Live evidence sonar</p>
<h2>Clinical channels under audit</h2>
</div>
<span class="depth-pill">4,895 m</span>
</div>
<div class="sonar" id="sonar">
<div class="sonar-sweep"></div>
<div class="sonar-ring ring-1"></div>
<div class="sonar-ring ring-2"></div>
<div class="sonar-ring ring-3"></div>
<div class="sonar-core"><img class="logo-mark" src="assets/logo.svg" alt="" /><b>MedSwin</b><span>evidence lock</span></div>
<button class="sonar-node node-emr" data-copy="Patient-specific history, labs, medications, comorbidities, allergies, notes, and provenance timestamps.">EMR</button>
<button class="sonar-node node-cpg" data-copy="Clinical practice guideline sections, recommendation strength, eligible population, version, and update metadata.">CPG</button>
<button class="sonar-node node-safety" data-copy="Contraindications, adverse events, drug interactions, exclusions, and high-severity safety checks.">Safety</button>
<button class="sonar-node node-audit" data-copy="Source IDs, section tags, chunk offsets, calibrated relevance scores, facet coverage, and contradiction status.">Audit</button>
</div>
<p class="sonar-readout" id="sonarReadout">Hover a beacon to inspect an evidence channel.</p>
<div class="stat-grid">
<div><strong class="counter" data-target="7">0</strong><span>B student</span></div>
<div><strong class="counter" data-target="27">0</strong><span>B teacher</span></div>
<div><strong class="counter" data-target="6">0</strong><span>agents</span></div>
<div><strong class="counter" data-target="100">0</strong><span>% Recall@10</span></div>
</div>
</div>
</section>
<section class="section" aria-labelledby="principlesTitle">
<div class="section-heading reveal">
<p class="eyebrow">System principles</p>
<h2 id="principlesTitle">MedSwin separates retrieval, evidence quality, safety critique, and answer synthesis.</h2>
<p>The system tracks provenance, calibrated relevance, facet sufficiency, contradiction handling, agent reliability, benchmark performance, and release artifacts as distinct parts of the clinical evidence workflow.</p>
</div>
<div class="principle-grid reveal">
<article class="card compact"><span class="card-index">01</span><h3>Evidence-first generation</h3><p>Answer generation only follows an accepted EMR/CPG evidence bundle, rather than raw top-K context.</p></article>
<article class="card compact"><span class="card-index">02</span><h3>Calibrated inclusion</h3><p>Reranker logits are converted to calibrated probabilities for threshold-based policy checks.</p></article>
<article class="card compact"><span class="card-index">03</span><h3>Safety is a first-class facet</h3><p>Contraindications, interactions, exclusions, and contradictions remain visible throughout selection.</p></article>
<article class="card compact"><span class="card-index">04</span><h3>Auditability over confidence</h3><p>Each claim keeps source metadata, score context, evidence grade, and facet role.</p></article>
</div>
</section>
<section class="section" id="architecture" aria-labelledby="architectureTitle">
<div class="section-heading reveal">
<p class="eyebrow">Architecture animation</p>
<h2 id="architectureTitle">Trace a clinical query through the evidence chamber.</h2>
<p>A clinician query is decomposed into patient context and guideline evidence, reranked with biomedical relevance signals, checked for sufficiency, and returned with a grounded answer plus audit trail.</p>
</div>
<div class="card reveal architecture-card">
<div class="panel-title">
<div>
<p class="eyebrow">Pipeline playback</p>
<h3 id="archCaption">Clinician query enters the chamber.</h3>
</div>
<div class="button-row">
<button class="button primary small" id="playArchitecture">Play path</button>
<button class="button secondary small" id="resetArchitecture">Reset</button>
</div>
</div>
<div class="svg-frame architecture-frame">
<svg id="architectureSvg" viewBox="0 0 1000 850" role="img" aria-label="MedSwin architecture flow diagram">
<defs>
<linearGradient id="archPanel" x1="0" x2="1" y1="0" y2="1"><stop offset="0" stop-color="#102845"/><stop offset="1" stop-color="#061225"/></linearGradient>
<linearGradient id="archBlue" x1="0" x2="1"><stop offset="0" stop-color="#49b7ff"/><stop offset="1" stop-color="#74f7dc"/></linearGradient>
<linearGradient id="archOrange" x1="0" x2="1"><stop offset="0" stop-color="#ff9a5f"/><stop offset="1" stop-color="#ffd166"/></linearGradient>
<linearGradient id="archGreen" x1="0" x2="1"><stop offset="0" stop-color="#67f2aa"/><stop offset="1" stop-color="#b8ffe8"/></linearGradient>
<filter id="archGlow"><feGaussianBlur stdDeviation="5" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
<marker id="archArrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" fill="#74f7dc"/></marker>
<marker id="archArrowOrange" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" fill="#ffd166"/></marker>
<marker id="archArrowGreen" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" fill="#67f2aa"/></marker>
<marker id="archArrowPurple" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" fill="#a99cff"/></marker>
</defs>
<rect class="arch-shell" x="20" y="20" width="960" height="800" rx="26"/>
<g class="arch-lock" fill="none" stroke="#b0c4de" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M 12,14
L 32,14
A 6,6 0 0,1 37,19
L 37,38
C 37,48 27,57 22,60
C 17,57 7,48 7,38
L 7,19
A 6,6 0 0,1 12,14 Z" />
<path d="M 17,26 V 20 A 5,5 0 0,1 27,20 V 26" />
<rect x="14" y="26" width="16" height="15" rx="3" />
</g>
<text class="arch-caption" x="50" y="50">Private Clinical System</text>
<g class="arch-node top blue" data-step="1" transform="translate(292, 76)">
<rect width="416" height="132" rx="18" fill="none" stroke="#25a5e3" stroke-width="2"/>
<text class="title" x="208" y="34" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="18" fill="#ffffff">Clinician Input / Case Query</text>
<g transform="translate(104, 46)">
<g class="arch-icon" fill="none" stroke="#25a5e3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="20" cy="14" r="10"/>
<path d="M2 38c0-10 8-18 18-18s18 8 18 18"/>
</g>
<text class="sub" x="20" y="66" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="14" fill="#ffffff">Patient ID</text>
</g>
<g transform="translate(272, 46)">
<g class="arch-icon" fill="none" stroke="#25a5e3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="0" y="0" width="44" height="34" rx="12"/>
<path d="M10 11h24M10 18h24M10 25h14"/>
<path d="M28 34l8 8v-8"/>
</g>
<text class="sub" x="22" y="66" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="14" fill="#ffffff">Case query</text>
</g>
</g>
<path class="flow-path blue" data-step="1" d="M500 220 L500 250" marker-end="url(#archArrow)"/>
<g class="arch-node branch teal" data-step="2" transform="translate(56 242)">
<rect width="286" height="178" rx="18" fill="none" stroke="#5EEAD4" stroke-width="2"/>
<text class="title" x="143" y="34" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="18" fill="#ffffff">Patient-Specific EMR</text>
<g class="arch-mini" transform="translate(24 60)">
<rect width="238" height="46" rx="23" fill="none" stroke="#5EEAD4" stroke-width="2"/>
<g transform="translate(14, 8) scale(0.7)" fill="none" stroke="#5EEAD4" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="20" cy="14" r="10"/>
<path d="M2 38c0-10 8-18 18-18s18 8 18 18"/>
<path d="M42 10v16M34 18h16" stroke-width="3.5"/>
</g>
<text x="75" y="23" font-family="sans-serif" font-weight="bold" font-size="14" fill="#ffffff" dominant-baseline="middle">Patient</text>
</g>
<g class="arch-mini" transform="translate(24 116)">
<rect width="238" height="46" rx="23" fill="none" stroke="#5EEAD4" stroke-width="2"/>
<g transform="translate(16, 10) scale(0.7)" fill="none" stroke="#5EEAD4" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M0 0h28l12 12v28H0z"/>
<circle cx="20" cy="22" r="7"/>
<path d="M26 28l10 10"/>
</g>
<text x="75" y="23" font-family="sans-serif" font-weight="bold" font-size="14" fill="#ffffff" dominant-baseline="middle">Grounded EMR</text>
</g>
</g>
<g class="arch-node branch purple" data-step="3" transform="translate(658 242)">
<rect width="286" height="178" rx="18" fill="none" stroke="#C084FC" stroke-width="2"/>
<text class="title" x="143" y="34" text-anchor="middle" font-family="sans-serif" font-weight="bold" font-size="18" fill="#ffffff">CPG / Guidelines</text>
<g class="arch-mini" transform="translate(24 60)">
<rect width="238" height="46" rx="23" fill="none" stroke="#C084FC" stroke-width="2"/>
<g transform="translate(16, 8) scale(0.7)" fill="none" stroke="#C084FC" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">
<rect x="0" y="0" width="36" height="44" rx="4"/>
<path d="M8 12h20M8 22h20M8 32h12"/>
<!-- <path d="M34 10l6 6 12-14" stroke="#ffffff" stroke-width="4"/> -->
</g>
<text x="75" y="23" font-family="sans-serif" font-weight="bold" font-size="14" fill="#ffffff" dominant-baseline="middle">Guideline Support</text>
</g>
<g class="arch-mini" transform="translate(24 116)">
<rect width="238" height="46" rx="23" fill="none" stroke="#C084FC" stroke-width="2"/>
<g transform="translate(16, 10) scale(0.7)" fill="none" stroke="#C084FC" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="16" cy="16" r="14"/>
<path d="M26 26l14 14"/>
<path d="M10 16h12M16 10v12" stroke-width="2"/>
</g>
<text x="75" y="23" font-family="sans-serif" font-weight="bold" font-size="14" fill="#ffffff" dominant-baseline="middle">Query + EMR Context</text>
</g>
</g>
<path class="flow-path teal" data-step="2" d="M342 330 C398 330 410 330 448 330" marker-end="url(#archArrow)"/>
<path class="flow-path purple" data-step="3" d="M658 330 C602 330 590 330 552 330" marker-end="url(#archArrow)"/>
<g class="arch-node center blue" data-step="4" transform="translate(398 264)">
<rect width="204" height="132" rx="18"/>
<text class="title" x="102" y="36" text-anchor="middle">Orchestrator</text>
<g class="arch-icon hub" transform="translate(68 56)">
<circle cx="34" cy="34" r="17"/>
<circle cx="34" cy="4" r="5"/>
<circle cx="62" cy="18" r="5"/>
<circle cx="62" cy="50" r="5"/>
<circle cx="6" cy="18" r="5"/>
<circle cx="6" cy="50" r="5"/>
<circle cx="34" cy="64" r="5"/>
<path d="M34 9v18M34 41v18M14 20l15 10M54 20 39 30M14 48l15-10M54 48 39 38"/>
</g>
</g>
<path class="flow-path blue" data-step="4" d="M500 396 L500 436" marker-end="url(#archArrow)"/>
<g class="arch-node wide orange" data-step="5" transform="translate(170 438)">
<rect width="660" height="76" rx="18"/>
<g class="arch-icon search" transform="translate(34 17)">
<circle cx="20" cy="20" r="16"/>
<path d="M33 33l18 18"/>
<circle cx="14" cy="16" r="2"/><circle cx="22" cy="21" r="2"/><circle cx="18" cy="28" r="2"/>
</g>
<text class="title" x="330" y="31" text-anchor="middle">Stage 1: Hybrid Biomedical Retrieval</text>
<text class="sub" x="330" y="56" text-anchor="middle">EMR candidates + CPG candidates</text>
</g>
<path class="flow-path orange" data-step="5" d="M500 514 L500 548" marker-end="url(#archArrowOrange)"/>
<g class="arch-node orange" data-step="6" transform="translate(170 548)">
<rect width="660" height="66" rx="18"/>
<g class="arch-icon filter" transform="translate(50 18)">
<path d="M0 0h38l-14 16v13l-10 6V16z"/>
<path d="M52 7h40M52 20h32M52 33h24"/>
</g>
<text class="title" x="330" y="41" text-anchor="middle">Stage 2: Biomedical Reranker</text>
</g>
<path class="flow-path orange" data-step="6" d="M500 614 L500 648" marker-end="url(#archArrowOrange)"/>
<g class="arch-node wide orange reasoning-loop" data-step="7" transform="translate(170 648)">
<rect width="660" height="82" rx="18"/>
<text class="title" x="330" y="49" text-anchor="middle">Iterative Reasoning Loop</text>
<!-- <path class="loop-arrows" d="M274 54c34-24 78-24 112 0M386 67c-34 24-78 24-112 0"/> -->
<!-- <text class="loop-label" x="330" y="61" text-anchor="middle">MedSwin LLM Agents</text> -->
</g>
<path class="flow-path feedback" data-step="7" d="M830 690 C925 650 920 532 835 506" marker-end="url(#archArrowOrange)"/>
<!-- <text class="arch-note retrieve-note" x="782" y="616">Recall evidence</text> -->
<!-- Motivation vs Logic: the retrieve-more path should read as a concrete evidence refresh, not an abstract loop. Animated packets reuse the existing EMR/CPG/orchestrator paths so viewers see new evidence returning to the reasoning loop. -->
<g class="arch-evidence-flow" data-step="7" aria-hidden="true">
<path id="emrEvidenceRoute" class="evidence-route" d="M342 330 C398 330 448 330 500 330 C610 330 740 360 740 438 L740 648"/>
<path id="cpgEvidenceRoute" class="evidence-route" d="M658 330 C602 330 552 330 500 330 C610 330 740 360 740 438 L740 648"/>
<circle class="evidence-packet emr" r="6">
<animateMotion dur="2.6s" begin="0s" repeatCount="indefinite" rotate="auto">
<mpath href="#emrEvidenceRoute"/>
</animateMotion>
</circle>
<circle class="evidence-packet emr ghost" r="4">
<animateMotion dur="2.6s" begin=".8s" repeatCount="indefinite" rotate="auto">
<mpath href="#emrEvidenceRoute"/>
</animateMotion>
</circle>
<circle class="evidence-packet cpg" r="6">
<animateMotion dur="2.8s" begin=".25s" repeatCount="indefinite" rotate="auto">
<mpath href="#cpgEvidenceRoute"/>
</animateMotion>
</circle>
<circle class="evidence-packet cpg ghost" r="4">
<animateMotion dur="2.8s" begin="1.05s" repeatCount="indefinite" rotate="auto">
<mpath href="#cpgEvidenceRoute"/>
</animateMotion>
</circle>
</g>
<path class="flow-path green" data-step="8" d="M500 730 L500 746" marker-end="url(#archArrowGreen)"/>
<g class="arch-node answer green" data-step="8" transform="translate(260 746)">
<rect width="480" height="50" rx="18"/>
<g class="arch-icon check" transform="translate(32 13)">
<!-- <path d="M4 14l10 10 24-24"/> -->
<!-- <rect x="48" y="0" width="1" height="28"/> -->
</g>
<text class="title" x="250" y="32" text-anchor="middle">Grounded Clinical Answer</text>
</g>
</svg>
</div>
<div class="architecture-notes" id="architectureNotes"></div>
</div>
</section>
<section class="section" id="specialist" aria-labelledby="specialistTitle">
<div class="section-heading reveal">
<p class="eyebrow">Medical specialist</p>
<h2 id="specialistTitle">Training, distillation, and model merging are displayed as separate mechanisms.</h2>
<p>The specialist model is built from supervised biomedical instruction data, teacher-student distillation, and training-free merge operators that control destructive interference between updates.</p>
</div>
<div class="two-column reveal">
<div class="card">
<div class="panel-title"><div><p class="eyebrow">SFT mixture</p><h3>Biomedical supervision sources</h3></div><span class="chip">augmented</span></div>
<div class="dataset-bars" id="datasetBars"></div>
</div>
<div class="card distill-card">
<div class="panel-title"><div><p class="eyebrow">Hybrid SFT + KD</p><h3>Teacher-student transfer</h3></div><span class="chip">QLoRA</span></div>
<div class="transfer-diagram">
<div class="orb teacher"><strong>27B</strong><span>Teacher</span></div>
<div class="transfer-lines"><span>hard labels</span><span>top-k soft logits</span><span>uncertainty transfer</span></div>
<div class="orb student"><strong>7B</strong><span>Student</span></div>
</div>
<div class="formula">L<sub>t</sub> = α CE + (1 − α)τ² KL(p<sub>T</sub>(·|τ) ∥ p<sub>S</sub>(·))</div>
</div>
</div>
<div class="card reveal merge-card">
<div class="panel-title">
<div><p class="eyebrow">Interference-aware composition</p><h3>Merge operators reduce destructive update conflict.</h3></div>
<span class="chip">training-free</span>
</div>
<div class="merge-layout">
<div id="mergeControls" class="merge-controls"></div>
<div class="svg-frame merge-frame"><svg id="mergeSvg" viewBox="0 0 1000 500" role="img" aria-label="Model merge visualisation"></svg></div>
</div>
</div>
</section>
<section class="section" id="retrieval" aria-labelledby="retrievalTitle">
<div class="section-heading reveal">
<p class="eyebrow">Retrieval and sufficiency</p>
<h2 id="retrievalTitle">Evidence is selected by clinical utility, not by raw top-K truncation.</h2>
<p>Each retrieval stage uses a responsive diagram, and the sufficiency simulator animates toward threshold when more evidence is retrieved.</p>
</div>
<div class="retrieval-grid reveal">
<div class="card retrieval-card">
<div class="stage-tabs" id="retrievalTabs" role="tablist" aria-label="Retrieval stages"></div>
<div class="svg-frame retrieval-frame"><svg id="retrievalSvg" viewBox="0 0 920 430" role="img" aria-label="Retrieval stage diagram"></svg></div>
<div class="stage-caption" id="stageCaption"></div>
</div>
<div class="card sufficiency-card">
<div class="panel-title">
<div><p class="eyebrow">Facet sufficiency simulator</p><h3>Build an evidence bundle</h3></div>
<button class="button primary small" id="retrieveMore">Retrieve more</button>
</div>
<div id="facetBars" class="facet-bars"></div>
<div class="mini-chart-shell"><svg id="coverageSvg" viewBox="0 0 760 210" role="img" aria-label="Facet coverage history chart"></svg></div>
<div id="bundleList" class="bundle-list"></div>
<div id="policyStatus" class="policy-status">Critical facets are below acceptance threshold.</div>
</div>
</div>
</section>
<section class="section" id="agents" aria-labelledby="agentsTitle">
<div class="section-heading reveal">
<p class="eyebrow">Multi-agent coordination</p>
<h2 id="agentsTitle">The MAC layer behaves like a specialist dive team.</h2>
<p>Agents explore different hypotheses, return claim-level ledgers, and are aggregated through reliability-weighted evidence selection.</p>
</div>
<div class="agent-grid reveal">
<div class="agent-hive" id="agentHive"></div>
<div class="card ledger-card">
<div class="panel-title"><div><p class="eyebrow">Claim-level ledger</p><h3>Every claim keeps its source role.</h3></div><span class="chip">audit artifact</span></div>
<div class="table-wrap">
<table>
<thead><tr><th>Facet</th><th>Role</th><th>Polarity</th><th>Grade</th><th>Trace</th></tr></thead>
<tbody>
<tr><td>Guideline concordance</td><td>Recommendation</td><td><span class="pill support">supports</span></td><td>CPG</td><td>doc · version · section</td></tr>
<tr><td>Patient applicability</td><td>Lab / comorbidity</td><td><span class="pill qualify">qualifies</span></td><td>EMR</td><td>encounter · timestamp</td></tr>
<tr><td>Safety risk</td><td>Contraindication</td><td><span class="pill contradict">conflicts</span></td><td>Safety</td><td>severity · source</td></tr>
<tr><td>Uncertainty</td><td>Contradiction pair</td><td><span class="pill preserve">preserved</span></td><td>Mixed</td><td>adjudication status</td></tr>
</tbody>
</table>
</div>
<div class="notice"><strong>Contradictions are not averaged away.</strong><span>High-grade conflicts are preserved until the critic or final synthesiser explicitly adjudicates them.</span></div>
</div>
</div>
</section>
<section class="section" id="evaluation" aria-labelledby="evaluationTitle">
<div class="section-heading reveal">
<p class="eyebrow">Evaluation dashboard</p>
<h2 id="evaluationTitle">QA, reranking, and audit metrics are inspected separately.</h2>
<p>Overlap metrics, semantic similarity, retrieval quality, latency, and audit completeness are kept in separate views so answer similarity is not mistaken for deployment readiness.</p>
</div>
<div class="card reveal evaluation-card">
<div class="eval-toolbar">
<div class="tabs" role="tablist" aria-label="Evaluation views">
<button class="tab active" data-tab="qa" role="tab" aria-selected="true">QA benchmarks</button>
<button class="tab" data-tab="rerank" role="tab" aria-selected="false">Reranker</button>
<button class="tab" data-tab="audit" role="tab" aria-selected="false">System audit</button>
</div>
<div class="select-group" id="qaControls">
<label>Dataset<select id="datasetSelect"><option value="medquad" selected>MedQuAD</option><option value="healthbench">HealthBench</option></select></label>
<label>Rank by<select id="metricSort"><option value="bert" selected>BERTScore-F1</option><option value="rouge">ROUGE-L F1</option><option value="tok">Token F1</option><option value="uni">Unigram precision</option><option value="bi">Bigram precision</option></select></label>
</div>
</div>
<div class="tab-panel active" id="tab-qa" role="tabpanel">
<div class="chart-meta" id="chartMeta"></div>
<div id="metricBars" class="metric-bars"></div>
<div class="table-wrap compact-table"><table id="qaTable"><thead><tr><th>Model</th><th>ROUGE-L</th><th>BERT-F1</th><th>Token F1</th><th>Uni Prec</th><th>Bi Prec</th></tr></thead><tbody></tbody></table></div>
</div>
<div class="tab-panel" id="tab-rerank" role="tabpanel"><div id="rerankGrid" class="rerank-grid"></div></div>
<div class="tab-panel" id="tab-audit" role="tabpanel">
<div class="audit-layout">
<div class="svg-frame audit-frame"><svg id="auditSvg" viewBox="0 0 560 520" role="img" aria-label="System audit radar chart"></svg></div>
<div><p class="eyebrow">MSAS component families</p><h3>Auditability is separated from answer similarity.</h3><ul id="auditMetrics" class="audit-list"></ul></div>
</div>
</div>
</div>
<div class="card reveal caveat"><h3>Clinical interpretation boundary</h3><p>Overlap and semantic metrics are useful signals, but unsupported claims, unsafe omissions, missing provenance, and unresolved contradictions are tracked separately because answer similarity alone is not enough for deployment safety.</p></div>
</section>
<section class="section" id="release" aria-labelledby="releaseTitle">
<div class="section-heading reveal">
<p class="eyebrow">Reproducibility and release scope</p>
<h2 id="releaseTitle">The final build presents MedSwin as a reconstructable pipeline.</h2>
<p>The release path covers data filters, teacher-label utilities, QLoRA scripts, merge specifications, retrieval policy packages, and evaluation harnesses.</p>
</div>
<div id="releaseTimeline" class="release-timeline reveal"></div>
</section>
<section class="section closing">
<div class="card closing-card reveal">
<p class="eyebrow">Grounded clinical assistant</p>
<h2>MedSwin returns evidence-linked answers rather than unsupported narratives.</h2>
<p>The final system keeps patient context, guideline passages, sufficiency decisions, contradiction handling, and provenance together so clinicians can inspect how an answer was formed.</p>
<a class="button primary" href="#top">Return to surface</a>
</div>
</section>
</main>
<script src="assets/app.js"></script>
</body>
</html>