Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>SafeOCR Verification Playground</title> | |
| <style> | |
| :root{color-scheme:dark;--bg:#090c12;--panel:#111722;--panel2:#151d2a;--text:#edf3ff;--muted:#9ca9bc;--line:#263247;--blue:#7aa2ff;--green:#4bd69c;--amber:#ffcb6b;--red:#ff7a90} | |
| *{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% -10%,#17233e 0,transparent 35%),var(--bg);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)} | |
| a{color:var(--blue)}.wrap{max-width:1180px;margin:auto;padding:32px 20px 64px}.top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:28px}.brand{display:flex;gap:14px;align-items:center}.mark{width:48px;height:48px;border:1px solid #385287;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#1b2a49,#101724);font-weight:800;font-size:22px}.eyebrow{color:var(--blue);font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:800}h1{margin:2px 0 4px;font-size:30px;line-height:1.15}p{margin:6px 0}.muted{color:var(--muted)}.badge{border:1px solid #5b4823;background:#2b2112;color:#ffd98c;border-radius:999px;padding:7px 11px;font-size:12px;white-space:nowrap} | |
| .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:18px}.card{background:linear-gradient(180deg,var(--panel),#0e141e);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 15px 45px #0005}.card h2{font-size:16px;margin:0 0 14px}.sample{background:var(--panel2);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:16px}.sample-head{padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between}.lab{width:100%;border-collapse:collapse}.lab th,.lab td{padding:10px 12px;text-align:left;border-bottom:1px solid #223047}.lab th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.lab tr:last-child td{border-bottom:0}.selected{background:#18233a} | |
| .controls{display:grid;grid-template-columns:1fr 1fr;gap:9px}.gate{display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid var(--line);background:#101722;border-radius:11px}.gate input{accent-color:#7aa2ff;width:16px;height:16px}.gate span{font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 4px}button{border:1px solid #334563;background:#162238;color:var(--text);border-radius:10px;padding:8px 11px;cursor:pointer;font:inherit}button:hover{background:#1c2b47}.primary{background:#23478e;border-color:#365fae}.state{padding:16px;border-radius:14px;border:1px solid var(--line);margin-bottom:14px}.state strong{display:block;font-size:21px;margin:2px 0}.state small{color:var(--muted)}.verified{border-color:#275d49;background:#0e2a21}.verified strong{color:var(--green)}.review{border-color:#6a5224;background:#2a210e}.review strong{color:var(--amber)}.abstain{border-color:#70313d;background:#2d1218}.abstain strong{color:var(--red)} | |
| .kv{display:grid;grid-template-columns:150px 1fr;gap:7px 12px;font-size:13px;margin:14px 0}.kv div:nth-child(odd){color:var(--muted)}pre{white-space:pre-wrap;word-break:break-word;background:#090d14;border:1px solid var(--line);border-radius:12px;padding:13px;max-height:300px;overflow:auto;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:#cdd9ef}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.metric{border:1px solid var(--line);border-radius:13px;padding:13px;background:#101620}.metric b{font-size:21px;display:block}.metric span{color:var(--muted);font-size:12px}.foot{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:12px} | |
| @media(max-width:850px){.grid{grid-template-columns:1fr}.top{flex-direction:column}.controls{grid-template-columns:1fr}.results{grid-template-columns:1fr}.badge{white-space:normal}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="top"> | |
| <div class="brand"> | |
| <div class="mark">S</div> | |
| <div> | |
| <div class="eyebrow">SafeOCR v0.1</div> | |
| <h1>Verification Playground</h1> | |
| <p class="muted">Explore the frozen fail-closed decision contract using synthetic laboratory evidence.</p> | |
| </div> | |
| </div> | |
| <div class="badge">Synthetic data only · no patient uploads</div> | |
| </div> | |
| <div class="grid"> | |
| <section class="card"> | |
| <h2>Synthetic laboratory field</h2> | |
| <div class="sample"> | |
| <div class="sample-head"><span>SafeOCR-LabGold example</span><span>PHI-free synthetic record</span></div> | |
| <table class="lab"> | |
| <thead><tr><th>Analyte</th><th>Result</th><th>Unit</th><th>Reference</th></tr></thead> | |
| <tbody> | |
| <tr><td>Sodium</td><td>139</td><td>mmol/L</td><td>135–145</td></tr> | |
| <tr class="selected"><td>Potassium</td><td>3.4</td><td>mmol/L</td><td>3.5–5.1</td></tr> | |
| <tr><td>Creatinine</td><td>1.1</td><td>mg/dL</td><td>0.6–1.3</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <h2>Verification gates</h2> | |
| <div class="controls" id="controls"></div> | |
| <div class="actions"> | |
| <button class="primary" onclick="scenario('verified')">All gates pass</button> | |
| <button onclick="scenario('disagree')">Second engine disagrees</button> | |
| <button onclick="scenario('unit')">Unit invalid</button> | |
| <button onclick="scenario('runtime')">Runtime failure</button> | |
| <button onclick="scenario('missing')">No grounded candidate</button> | |
| </div> | |
| <div class="results"> | |
| <div class="metric"><b>72.57%</b><span>Frozen SafeOCR verified coverage on LabGold</span></div> | |
| <div class="metric"><b>0/209</b><span>Observed errors among SafeOCR accepts</span></div> | |
| <div class="metric"><b>0/288</b><span>Primary OCR errors — no safety-gain claim</span></div> | |
| </div> | |
| </section> | |
| <aside class="card"> | |
| <h2>Terminal decision</h2> | |
| <div id="state" class="state"></div> | |
| <div class="kv"> | |
| <div>Field</div><div>Potassium = 3.4 mmol/L</div> | |
| <div>Criticality</div><div>CRITICAL</div> | |
| <div>Policy</div><div>SafeOCR v0.1 deterministic gate policy</div> | |
| <div>FHIR export</div><div id="export"></div> | |
| <div>Failed gates</div><div id="failed"></div> | |
| </div> | |
| <h2>Evidence record preview</h2> | |
| <pre id="json"></pre> | |
| <div class="foot"> | |
| This static Space mirrors the terminal decision policy; it does not run PaddleOCR or Tesseract and does not accept clinical documents. | |
| For the full implementation, OCR adapters, evidence reports, FHIR export gate, and evaluation artifacts, use | |
| <a href="https://github.com/AbdulazizShehri/SafeOCR" target="_blank" rel="noopener">GitHub</a>. | |
| </div> | |
| </aside> | |
| </div> | |
| </div> | |
| <script> | |
| const defs=[ | |
| ["candidate_present","Candidate present"], | |
| ["visual_grounded","Pixel evidence grounded"], | |
| ["independent_agreement","Second-engine agreement"], | |
| ["perturbation_stable","Perturbation stable"], | |
| ["structural_association","Structural association"], | |
| ["numeric_parse_unambiguous","Numeric parse unambiguous"], | |
| ["unit_valid","Unit syntax valid"], | |
| ["patient_linkage_unambiguous","Patient/document linkage unambiguous"], | |
| ["runtime_healthy","Runtime healthy"] | |
| ]; | |
| const reviewGates=["independent_agreement","perturbation_stable","structural_association","numeric_parse_unambiguous","unit_valid","patient_linkage_unambiguous"]; | |
| const controls=document.getElementById("controls"); | |
| for(const [key,label] of defs){ | |
| const el=document.createElement("label"); | |
| el.className="gate"; | |
| el.innerHTML='<input type="checkbox" id="'+key+'" checked><span>'+label+'</span>'; | |
| controls.appendChild(el); | |
| document.getElementById(key).addEventListener("change",render); | |
| } | |
| function decide(){ | |
| const v=Object.fromEntries(defs.map(([k])=>[k,document.getElementById(k).checked])); | |
| if(!v.candidate_present)return ["ABSTAINED",["candidate_present"],v]; | |
| if(!v.visual_grounded)return ["ABSTAINED",["visual_grounded"],v]; | |
| if(!v.runtime_healthy)return ["ABSTAINED",["runtime_healthy"],v]; | |
| const failed=reviewGates.filter(k=>!v[k]); | |
| if(failed.length)return ["REVIEW_REQUIRED",failed,v]; | |
| return ["VERIFIED_AUTO",[],v]; | |
| } | |
| function render(){ | |
| const [state,failed,v]=decide(); | |
| const box=document.getElementById("state"); | |
| box.className="state "+(state==="VERIFIED_AUTO"?"verified":state==="REVIEW_REQUIRED"?"review":"abstain"); | |
| const message=state==="VERIFIED_AUTO"?"All required verification gates passed.":state==="REVIEW_REQUIRED"?"Plausible field, but evidence is insufficient or inconsistent.":"Fail-closed: no reliable automated value may be released."; | |
| box.innerHTML="<small>Decision</small><strong>"+state+"</strong><span>"+message+"</span>"; | |
| document.getElementById("export").textContent=state==="VERIFIED_AUTO"?"Permitted by policy (subject to FHIR validation)":"Blocked"; | |
| document.getElementById("failed").textContent=failed.length?failed.join(", "):"None"; | |
| const payload={field:{analyte_text:"Potassium",value_text:"3.4",unit_text:"mmol/L",criticality:"CRITICAL"},signals:v,decision:{state,failed_gates:failed},policy_version:"safeocr-v0.1-demo",synthetic:true}; | |
| document.getElementById("json").textContent=JSON.stringify(payload,null,2); | |
| } | |
| function scenario(name){ | |
| for(const [k] of defs)document.getElementById(k).checked=true; | |
| if(name==="disagree")document.getElementById("independent_agreement").checked=false; | |
| if(name==="unit")document.getElementById("unit_valid").checked=false; | |
| if(name==="runtime")document.getElementById("runtime_healthy").checked=false; | |
| if(name==="missing")document.getElementById("candidate_present").checked=false; | |
| render(); | |
| } | |
| render(); | |
| </script> | |
| </body> | |
| </html> | |