Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <meta name="color-scheme" content="dark"> | |
| <meta name="theme-color" content="#0a1018"> | |
| <meta name="description" content="PrismAudit: local-first model evaluation, calibration and cohort parity exploration. No backend, no external services."> | |
| <title>PrismAudit | Responsible ML Evaluation Studio</title> | |
| <link rel="stylesheet" href="./styles.css"> | |
| <script type="module" src="./app.mjs"></script> | |
| </head> | |
| <body> | |
| <div class="app-shell"> | |
| <aside class="sidebar" aria-label="Main navigation"> | |
| <div class="brand"><div class="brand-symbol" aria-hidden="true"><span></span><span></span><span></span></div><div><strong>prism<span>audit</span></strong><small>MODEL INTELLIGENCE</small></div></div> | |
| <div class="side-label">WORKSPACE</div> | |
| <nav class="nav" aria-label="Views"> | |
| <button class="nav-btn active" data-page="overview" aria-current="page"><span class="nav-icon">◈</span> Overview <span class="nav-index">01</span></button> | |
| <button class="nav-btn" data-page="threshold"><span class="nav-icon">⌁</span> Threshold explorer <span class="nav-index">02</span></button> | |
| <button class="nav-btn" data-page="fairness"><span class="nav-icon">▥</span> Fairness lens <span class="nav-index">03</span></button> | |
| <button class="nav-btn" data-page="data"><span class="nav-icon">▤</span> Data & methods <span class="nav-index">04</span></button> | |
| </nav> | |
| <div class="side-label datasets-label">DATASETS</div> | |
| <div class="side-panel"><label for="datasetSelect">Active dataset</label><select id="datasetSelect"><option value="support">Support prioritization</option><option value="quality">Quality review</option><option value="education">Training completion</option></select><div class="dataset-meta"><span class="dot"></span><span id="datasetMeta">Synthetic · 720 records</span></div></div> | |
| <div class="side-bottom"><div class="status-dot"></div><span>LOCAL-FIRST ANALYTICS<br><small>Data stays in your browser</small></span></div> | |
| </aside> | |
| <div class="workspace"> | |
| <header class="topbar"><div class="breadcrumb">Portfolio / Project 24 <span>/</span> <b>Model Evaluation</b></div><div class="top-actions"><span class="release-pill">● v1.0 stable</span><button class="btn ghost" id="importTop" type="button">↑ Import CSV</button><button class="btn primary" id="exportReport" type="button">↗ Export audit</button></div></header> | |
| <main> | |
| <div class="hero"><div><div class="eyebrow"><span class="eyebrow-line"></span> EVALUATION WORKSPACE <span class="eyebrow-count">/ 024</span></div><h1>See beyond <em>accuracy.</em></h1><p>Understand classification performance, decision thresholds, calibration and cohort-level disparities, without sending your data anywhere.</p></div><div class="hero-art" aria-hidden="true"><svg viewBox="0 0 190 130" fill="none"><circle cx="92" cy="68" r="56" stroke="#345260" stroke-width="1"/><circle cx="92" cy="68" r="39" stroke="#345260" stroke-width="1"/><path d="M24 99L61 49L92 88L126 33L174 51" stroke="#b9ff84" stroke-width="2.6"/><path d="M24 115L61 90L92 102L126 78L174 84" stroke="#8b8fff" stroke-width="1.7"/><circle cx="126" cy="33" r="5" fill="#b9ff84"/><circle cx="61" cy="90" r="4" fill="#8b8fff"/><path d="M12 68H180M92 5V129" stroke="#243842" stroke-dasharray="3 5"/></svg></div></div> | |
| <div class="demo-note" role="note"><span class="note-icon">i</span><span id="modeNotice"><strong>Demonstration mode.</strong> All records are fictional and algorithmically generated. No ML training happens in this application.</span></div> | |
| <div class="control-strip"><div class="control-title"><div class="control-icon">◉</div><div><b>Decision threshold</b><small>A record is predicted positive when score ≥ threshold</small></div></div><div class="range-group"><span class="range-min">0.00</span><input aria-label="Decision threshold" id="thresholdRange" type="range" min="0" max="100" step="1" value="50"><span class="range-max">1.00</span><output id="thresholdValue" for="thresholdRange">0.50</output></div><button id="resetThreshold" class="btn thin" type="button" title="Restore decision threshold to 0.50">Reset</button></div> | |
| <div id="globalAlert" class="alert" role="status" aria-live="polite" hidden></div> | |
| <section class="page" id="page-overview" aria-label="Overview"> | |
| <div class="section-header"><div><div class="micro">01 / PERFORMANCE</div><h2>Performance snapshot</h2></div><span class="section-detail" id="sampleSize">720 OBSERVATIONS</span></div> | |
| <div class="metric-grid"><article class="metric-card accent-green"><div class="metric-caption">Accuracy <span class="metric-mark">◈</span></div><div class="metric-value" id="metricAccuracy">—</div><div class="metric-desc">Overall correct predictions</div></article><article class="metric-card accent-purple"><div class="metric-caption">F1 score <span class="metric-mark">⌁</span></div><div class="metric-value" id="metricF1">—</div><div class="metric-desc">Precision / recall balance</div></article><article class="metric-card accent-blue"><div class="metric-caption">ROC AUC <span class="metric-mark">◬</span></div><div class="metric-value" id="metricAuc">—</div><div class="metric-desc">Threshold-free discrimination</div></article><article class="metric-card accent-amber"><div class="metric-caption">Brier score <span class="metric-mark">◷</span></div><div class="metric-value" id="metricBrier">—</div><div class="metric-desc">Mean squared score error · lower is better</div></article></div> | |
| <div class="chart-grid"><article class="panel"><div class="panel-head"><div><div class="micro">CLASSIFICATION QUALITY</div><h3>Confusion matrix</h3></div><span class="mini-tag">COUNTS</span></div><div class="confusion-layout"><div class="axis-label">PREDICTED CLASS ↓</div><div class="confusion-matrix"><div class="matrix-headers"><span></span><span>Actual positive</span><span>Actual negative</span></div><div class="matrix-row"><span>Positive</span><div class="matrix-cell positive"><strong id="tpCount">—</strong><small>True positive</small></div><div class="matrix-cell false-positive"><strong id="fpCount">—</strong><small>False positive</small></div></div><div class="matrix-row"><span>Negative</span><div class="matrix-cell false-negative"><strong id="fnCount">—</strong><small>False negative</small></div><div class="matrix-cell negative"><strong id="tnCount">—</strong><small>True negative</small></div></div></div></div><div class="panel-foot" id="confusionFoot">Threshold adjusted classification counts</div></article><article class="panel"><div class="panel-head"><div><div class="micro">DISCRIMINATION</div><h3>ROC curve</h3></div><span class="mini-tag">AUC <span id="aucTag">—</span></span></div><div id="rocChart" class="svg-chart" role="img" aria-label="Receiver operating characteristic curve"></div><div class="chart-legend"><span><i class="legend-dot green"></i> Model ROC</span><span><i class="legend-dot muted"></i> Random baseline</span></div></article></div> | |
| <div class="chart-grid lower"><article class="panel"><div class="panel-head"><div><div class="micro">PROBABILITY QUALITY</div><h3>Reliability diagram</h3></div><span class="mini-tag">ECE <span id="eceTag">—</span></span></div><div id="calChart" class="svg-chart" role="img" aria-label="Predicted confidence versus observed frequency by decile"></div><div class="chart-legend"><span><i class="legend-dot purple"></i> Observed outcome</span><span><i class="legend-dot muted"></i> Perfect calibration</span></div></article><article class="panel insight-panel"><div class="panel-head"><div><div class="micro">AUTOMATED INTERPRETATION</div><h3>Audit signals</h3></div><span class="mini-tag">DESCRIPTIVE</span></div><div id="insightList" class="insight-list" aria-live="polite"></div><div class="panel-foot">Heuristics flag items to investigate; they are not certification, legal advice or causal findings.</div></article></div> | |
| </section> | |
| <section class="page" id="page-threshold" aria-label="Threshold explorer" hidden> | |
| <div class="section-header"><div><div class="micro">02 / DECISION POLICY</div><h2>Threshold explorer</h2><p class="section-sub">Compare alternative operating points with no model retraining.</p></div><span class="section-detail">21 THRESHOLD POINTS</span></div> | |
| <div class="metric-grid compact"><article class="metric-card accent-green"><div class="metric-caption">Precision</div><div class="metric-value" id="metricPrecision">—</div><div class="metric-desc">Correct among predicted positives</div></article><article class="metric-card accent-purple"><div class="metric-caption">Recall</div><div class="metric-value" id="metricRecall">—</div><div class="metric-desc">Captured actual positives</div></article><article class="metric-card accent-blue"><div class="metric-caption">Specificity</div><div class="metric-value" id="metricSpecificity">—</div><div class="metric-desc">Correct among actual negatives</div></article><article class="metric-card accent-amber"><div class="metric-caption">Balanced accuracy</div><div class="metric-value" id="metricBalanced">—</div><div class="metric-desc">Mean of recall and specificity</div></article></div> | |
| <article class="panel full-panel"><div class="panel-head"><div><div class="micro">TRADE-OFFS</div><h3>Threshold performance landscape</h3></div><span class="mini-tag">DRAG THE SLIDER ABOVE</span></div><div class="large-chart" id="thresholdChart" role="img" aria-label="Precision, recall and F1 across thresholds"></div><div class="chart-legend"><span><i class="legend-dot green"></i> F1</span><span><i class="legend-dot purple"></i> Precision</span><span><i class="legend-dot blue"></i> Recall</span><span><i class="legend-dot amber"></i> Current threshold</span></div></article> | |
| <div class="split-panels"><article class="panel"><div class="panel-head"><div><div class="micro">DESCRIPTIVE COMPARISON</div><h3>Strongest observed F1</h3></div></div><div class="suggestion-number" id="bestThreshold">—</div><p class="dim copy" id="bestNote">Highest F1 among the 21 displayed operating points. Not a deployment recommendation.</p><button class="btn outline" id="applyBest" type="button">Try this threshold ↗</button></article><article class="panel"><div class="panel-head"><div><div class="micro">UNCERTAINTY / RESAMPLING</div><h3>Bootstrap interval</h3></div></div><p class="dim copy">Compute a seeded 95% percentile interval for the current F1 using 240 bootstrap resamples. Interpret cautiously for small, clustered or shifted samples.</p><button class="btn outline" id="runBootstrap" type="button">Calculate 95% interval</button><div id="bootstrapResult" class="bootstrap-result" aria-live="polite">Awaiting calculation</div></article></div> | |
| <article class="panel table-panel"><div class="panel-head"><div><div class="micro">REPRODUCIBILITY</div><h3>Operating point comparison</h3></div><button class="btn thin" id="exportSweep" type="button">↓ Export CSV</button></div><div class="table-wrap"><table><thead><tr><th>Threshold</th><th>F1</th><th>Precision</th><th>Recall</th><th>Accuracy</th><th>Positive rate</th></tr></thead><tbody id="sweepBody"></tbody></table></div></article> | |
| </section> | |
| <section class="page" id="page-fairness" aria-label="Fairness lens" hidden> | |
| <div class="section-header"><div><div class="micro">03 / GROUP MONITORING</div><h2>Fairness lens</h2><p class="section-sub">Identify performance differences between labeled cohorts.</p></div><span class="section-detail">DESCRIPTIVE · NOT CAUSAL</span></div> | |
| <div class="metric-grid compact"><article class="metric-card accent-green"><div class="metric-caption">Positive rate gap</div><div class="metric-value" id="gapParity">—</div><div class="metric-desc">Max − min predicted positive rates</div></article><article class="metric-card accent-purple"><div class="metric-caption">Recall gap</div><div class="metric-value" id="gapRecall">—</div><div class="metric-desc">Equal opportunity proxy</div></article><article class="metric-card accent-blue"><div class="metric-caption">False positive rate gap</div><div class="metric-value" id="gapFpr">—</div><div class="metric-desc">Largest between-group disparity</div></article><article class="metric-card accent-amber"><div class="metric-caption">Smallest cohort</div><div class="metric-value" id="minGroup">—</div><div class="metric-desc">Check sample size before interpretation</div></article></div> | |
| <div class="fairness-warning" id="fairnessWarning" role="status"></div> | |
| <article class="panel full-panel"><div class="panel-head"><div><div class="micro">GROUP PERFORMANCE</div><h3>Positive decision rates by cohort</h3></div><span class="mini-tag">COMPARE, NOT CONCLUDE</span></div><div id="groupBars" class="group-bars" role="img" aria-label="Decision rates for each cohort"></div></article> | |
| <article class="panel table-panel"><div class="panel-head"><div><div class="micro">COHORT DISAGGREGATION</div><h3>Performance by group</h3></div><button class="btn thin" id="exportGroups" type="button">↓ Export CSV</button></div><div class="table-wrap"><table><thead><tr><th>Group</th><th>N</th><th>Base rate</th><th>Positive rate</th><th>Recall</th><th>False pos. rate</th><th>Accuracy</th></tr></thead><tbody id="groupsBody"></tbody></table></div><div class="panel-foot">Rates are undefined (—) when the required outcome class does not exist within a group. Cohorts of fewer than 30 rows are flagged as low sample size.</div></article> | |
| <article class="method-card"><strong>Interpretation boundary</strong><p>Group gaps are descriptive. They do not identify discrimination, its cause, legal compliance or what decision should be made. Group definitions can encode sensitive characteristics or proxies. Examine data provenance, deployment context, error costs and uncertainty before drawing conclusions.</p></article> | |
| </section> | |
| <section class="page" id="page-data" aria-label="Data and methods" hidden> | |
| <div class="section-header"><div><div class="micro">04 / DATA GOVERNANCE</div><h2>Data & methodology</h2><p class="section-sub">Transparent inputs, explicit assumptions and local processing.</p></div><span class="section-detail">NO BACKEND REQUIRED</span></div> | |
| <div class="split-panels"><article class="panel upload-panel"><div class="panel-head"><div><div class="micro">YOUR EVALUATION DATA</div><h3>Import a CSV</h3></div><span class="mini-tag">LOCAL ONLY</span></div><div id="dropZone" class="drop-zone" tabindex="0" role="button" aria-label="Select or drop a CSV file"><div class="upload-icon">↑</div><b>Drop your file here</b><span>or click to select a CSV, up to 2 MB / 10,000 rows</span><button class="btn outline" id="browseData" type="button">Choose CSV</button></div><input id="fileInput" type="file" accept=".csv,text/csv" hidden><div class="panel-foot">Required: <code>score</code> ∈ [0,1], <code>label</code> ∈ {0,1}, <code>group</code>. Optional: <code>id</code>. Avoid personal or confidential data when not necessary.</div><button class="btn thin" id="downloadSample" type="button">↓ Download example CSV</button></article><article class="panel"><div class="panel-head"><div><div class="micro">DATASET DIAGNOSTICS</div><h3>Current data profile</h3></div></div><div id="dataProfile" class="data-profile"></div><div class="panel-foot">Metrics are recomputed on each threshold change. The uploaded file remains in browser memory until the page is reloaded or replaced.</div><button class="btn thin" id="restoreDemo" type="button">↶ Restore demo data</button></article></div> | |
| <article class="panel methods-panel"><div class="panel-head"><div><div class="micro">HOW THIS WORKS</div><h3>Evaluation methods, precisely defined</h3></div><span class="mini-tag">OPEN SOURCE</span></div><div class="method-grid"><div><b>Threshold decision</b><p>A score greater than or equal to the selected cutoff is classified as positive. Existing scores are never modified.</p></div><div><b>ROC AUC</b><p>Tie-aware Mann–Whitney rank statistic. It is undefined when all ground-truth labels have the same class.</p></div><div><b>Brier score / ECE</b><p>Brier is the mean squared difference between score and label. ECE uses 10 equal-width bins weighted by each bin's sample share.</p></div><div><b>Fairness gaps</b><p>Max minus min of group-level positive prediction rate, true positive rate and false positive rate. Undefined conditional rates are excluded and identified.</p></div><div><b>Bootstrap interval</b><p>Deterministic seeded row-level sampling with replacement, 240 repeats, percentile 2.5% to 97.5%. Not valid for every sampling design.</p></div><div><b>Limitations</b><p>Evaluation of existing binary scores only. No model is trained, no causal inference is claimed, and synthetic data are not evidence of real-world performance.</p></div></div></article> | |
| <div class="closing-note"><span>✧</span> Built for transparent, reproducible ML evaluation. No analytics, trackers, external requests or server uploads.</div> | |
| </section> | |
| <footer class="footer"><span>PRISMAUDIT © 2026 · MIT LICENSE</span><span>HUGDRIGO / OPEN SOURCE PORTFOLIO · PROJECT 024</span></footer> | |
| </main> | |
| </div> | |
| </div> | |
| <div class="toast" id="toast" role="status" aria-live="polite"></div> | |
| </body> | |
| </html> | |