| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>RustVital-AMD | Zero-Trust Medical AI Gateway</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> |
| <script src="https://unpkg.com/htmx.org@1.9.12"></script> |
| </head> |
| <body class="min-h-screen bg-slate-950 text-slate-100"> |
| <div class="mx-auto max-w-7xl px-4 py-6 lg:px-8" x-data="{}" x-init="window.initRustVital && window.initRustVital()"> |
| <header class="overflow-hidden rounded-[2rem] border border-white/10 bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900 p-6 shadow-2xl lg:p-8"> |
| <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"> |
| <div> |
| <div class="mb-3 inline-flex items-center gap-2 rounded-full border border-emerald-400/20 bg-emerald-400/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-emerald-300">AMD MI300X | HIPAA-ready demo</div> |
| <h1 class="text-4xl font-black tracking-tight text-white lg:text-6xl">RustVital-AMD</h1> |
| <p class="mt-3 max-w-3xl text-sm leading-7 text-slate-300 lg:text-base">A zero-trust medical AI triage gateway: deterministic PII shielding first, AMD-backed inference second, cryptographic audit third.</p> |
| </div> |
| <div class="grid gap-3 sm:grid-cols-3 lg:w-[32rem]"> |
| <div class="rounded-3xl border border-white/10 bg-white/5 p-4"><div class="text-xs uppercase tracking-[0.25em] text-slate-400">Status</div><div id="status-pill" class="mt-2 text-lg font-semibold text-emerald-300">Checking...</div></div> |
| <div class="rounded-3xl border border-white/10 bg-white/5 p-4"><div class="text-xs uppercase tracking-[0.25em] text-slate-400">Triage count</div><div id="triage-count" class="mt-2 text-lg font-semibold text-white">0</div></div> |
| <div class="rounded-3xl border border-white/10 bg-white/5 p-4"><div class="text-xs uppercase tracking-[0.25em] text-slate-400">Model</div><div id="model-name" class="mt-2 text-lg font-semibold text-white">Qwen2.5-7B</div></div> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="mt-6 grid gap-6 lg:grid-cols-[1.2fr_.8fr]"> |
| <section class="space-y-6"> |
| <div class="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl"> |
| <div class="flex flex-wrap items-center justify-between gap-3"> |
| <div><div class="text-xs uppercase tracking-[0.25em] text-slate-400">Consent gate</div><h2 class="mt-1 text-2xl font-semibold text-white">Doctor-approved triage request</h2></div> |
| <div class="rounded-full border border-sky-400/20 bg-sky-400/10 px-3 py-1 text-xs font-semibold text-sky-300">PHI never reaches GPU</div> |
| </div> |
|
|
| <form class="mt-6 grid gap-4" hx-post="/triage/html" hx-target="#triage-result" hx-swap="innerHTML"> |
| <div class="grid gap-4 md:grid-cols-2"> |
| <label class="block"><span class="text-sm text-slate-300">Patient ID</span><input name="patient_id" required class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white outline-none ring-0 focus:border-sky-400" placeholder="PAT-2048" /></label> |
| <label class="block"><span class="text-sm text-slate-300">Clinical reason</span><input name="reason" required class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-white outline-none focus:border-sky-400" placeholder="ED triage, chest pain, pediatric trauma..." /></label> |
| </div> |
| <label class="block"><span class="text-sm text-slate-300">Clinical note</span><textarea name="note" required rows="7" class="mt-2 w-full rounded-[1.5rem] border border-white/10 bg-slate-950/70 px-4 py-3 font-mono text-sm text-slate-100 outline-none focus:border-sky-400">Patient John Morrison, 67 yo, MRN 847291A, SSN 123-45-6789. Presents with acute substernal chest pain radiating to left arm. ECG shows ST elevation in leads II, III, aVF. Troponin pending.</textarea></label> |
| <div class="grid gap-4 md:grid-cols-2"> |
| <label class="block"><span class="text-sm text-slate-300">Consent hash</span><input name="consent_hash" required class="mt-2 w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 font-mono text-white outline-none focus:border-sky-400" placeholder="9f12..." /></label> |
| <div class="flex items-end"><button class="w-full rounded-2xl bg-gradient-to-r from-sky-500 to-cyan-400 px-5 py-3 font-semibold text-slate-950 transition hover:scale-[1.01]">Run Zero-Trust Triage</button></div> |
| </div> |
| </form> |
| </div> |
|
|
| <div class="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl"> |
| <div class="flex items-center justify-between gap-3"> |
| <div><div class="text-xs uppercase tracking-[0.25em] text-slate-400">DICOM uploader</div><h2 class="mt-1 text-2xl font-semibold text-white">Header + burned-in text redaction</h2></div> |
| <div class="rounded-full border border-violet-400/20 bg-violet-400/10 px-3 py-1 text-xs font-semibold text-violet-300">Mock OCR redaction</div> |
| </div> |
| <form class="mt-5 flex flex-col gap-4" hx-post="/dicom/redact" hx-target="#dicom-result" hx-swap="innerHTML" hx-encoding="multipart/form-data"> |
| <input type="file" name="dicom" accept=".dcm,.dicom,.txt" class="block w-full rounded-2xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-slate-300" /> |
| <button class="rounded-2xl bg-white/10 px-5 py-3 font-semibold text-white transition hover:bg-white/15">Redact DICOM</button> |
| </form> |
| <div id="dicom-result" class="mt-4"></div> |
| </div> |
|
|
| <div id="triage-result"></div> |
| </section> |
|
|
| <aside class="space-y-6"> |
| <div class="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl"> |
| <div class="text-xs uppercase tracking-[0.25em] text-slate-400">Agent observability</div> |
| <h2 class="mt-1 text-2xl font-semibold text-white">Shield | Triage | Audit</h2> |
| <div class="mt-4 grid gap-3"> |
| <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4"><div class="font-semibold text-white">ShieldAgent</div><div id="agent-shield" class="text-sm text-slate-400">waiting...</div></div> |
| <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4"><div class="font-semibold text-white">TriageAgent</div><div id="agent-triage" class="text-sm text-slate-400">waiting...</div></div> |
| <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4"><div class="font-semibold text-white">AuditAgent</div><div id="agent-audit" class="text-sm text-slate-400">waiting...</div></div> |
| </div> |
| </div> |
|
|
| <div class="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl"> |
| <div class="flex items-center justify-between"><div><div class="text-xs uppercase tracking-[0.25em] text-slate-400">Memory dashboard</div><h2 class="mt-1 text-2xl font-semibold text-white">Recent triages</h2></div><button class="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-200" hx-get="/dashboard" hx-target="#history-list" hx-swap="innerHTML">Refresh</button></div> |
| <div id="history-list" class="mt-4 text-sm text-slate-300" hx-get="/dashboard" hx-trigger="load"></div> |
| </div> |
|
|
| <div class="rounded-[2rem] border border-white/10 bg-white/5 p-6 shadow-xl"> |
| <div class="text-xs uppercase tracking-[0.25em] text-slate-400">On-chain</div> |
| <h2 class="mt-1 text-2xl font-semibold text-white">Audit consortium</h2> |
| <div class="mt-4 space-y-3 text-sm text-slate-300"> |
| <div>Base Sepolia anchor, CID commitment, and three simulated hospital attestations.</div> |
| <button class="w-full rounded-2xl bg-emerald-400 px-4 py-3 font-semibold text-slate-950" hx-post="/trigger-federated-tune" hx-target="#tune-result" hx-swap="innerHTML">Trigger federated LoRA job</button> |
| <div id="tune-result"></div> |
| </div> |
| </div> |
| </aside> |
| </main> |
| </div> |
|
|
| <script> |
| window.initRustVital = function() { |
| fetch('/status').then(r => r.json()).then(data => { |
| document.getElementById('status-pill').textContent = data.status + ' · ' + data.device; |
| document.getElementById('triage-count').textContent = data.triage_count; |
| document.getElementById('model-name').textContent = data.model; |
| }); |
| |
| const proto = location.protocol === 'https:' ? 'wss://' : 'ws://'; |
| const ws = new WebSocket(proto + location.host + '/agents/status'); |
| ws.onmessage = (event) => { |
| const msg = JSON.parse(event.data); |
| const key = (msg.agent || '').toLowerCase().replace('agent', ''); |
| const el = document.getElementById('agent-' + key); |
| if (el) el.textContent = msg.phase + ': ' + msg.message; |
| }; |
| }; |
| </script> |
| </body> |
| </html> |
|
|
