File size: 30,120 Bytes
a747c59
 
3a4efe4
a747c59
 
 
 
 
 
3a4efe4
a747c59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315a424
a747c59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315a424
3a4efe4
a747c59
 
 
 
 
3a4efe4
a747c59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3a4efe4
 
315a424
 
a747c59
 
 
 
 
 
 
 
 
 
 
3a4efe4
f039c20
315a424
a747c59
 
 
 
 
 
 
 
 
 
 
315a424
a747c59
 
 
3a4efe4
 
a747c59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3a4efe4
a747c59
315a424
 
 
a747c59
 
 
 
 
 
 
 
 
 
315a424
a747c59
 
 
 
 
 
3a4efe4
a747c59
3a4efe4
 
a747c59
 
 
 
 
 
 
 
3a4efe4
 
f039c20
 
a747c59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315a424
a747c59
 
 
 
315a424
8e6de34
f039c20
 
a747c59
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3a4efe4
a747c59
3a4efe4
 
f039c20
315a424
a747c59
 
 
 
 
 
 
 
 
 
 
 
315a424
a747c59
 
 
315a424
 
a747c59
 
 
 
 
 
 
 
 
 
315a424
 
 
a747c59
315a424
 
a747c59
 
 
 
 
315a424
a747c59
 
315a424
a747c59
 
 
 
 
 
3a4efe4
a747c59
 
 
3a4efe4
a747c59
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
<!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>