File size: 9,106 Bytes
4a90885 74f2b46 4a90885 74f2b46 4a90885 74f2b46 eff14fc 74f2b46 4a90885 74f2b46 eff14fc 74f2b46 eff14fc 74f2b46 eff14fc 74f2b46 4a90885 | 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 | <!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>
|