| def model_hyperlink(link, model_name): | |
| return f'<a target="_blank" href="{link}" style="color: #0284c7; font-weight: 600; text-decoration: none;">{model_name}</a>' | |
| def make_clickable_model(model_name): | |
| return model_hyperlink(f"https://huggingface.co/{model_name}", model_name) | |
| def styled_error(error): | |
| return f"<div style='color: #ef4444; background: rgba(239, 68, 68, 0.08); padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.25); font-weight: 500;'>❌ {error}</div>" | |
| def styled_warning(warn): | |
| return f"<div style='color: #d97706; background: rgba(245, 158, 11, 0.08); padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(245, 158, 11, 0.25); font-weight: 500;'>⚠️ {warn}</div>" | |
| def styled_message(message): | |
| return f"<div style='color: #059669; background: rgba(16, 185, 129, 0.08); padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(16, 185, 129, 0.25); font-weight: 500;'>✅ {message}</div>" | |
| def styled_loading(message: str, subtext: str = "This may take 1–2 minutes while layers are audited.", pct: int = 15) -> str: | |
| pct_val = max(0, min(100, int(pct))) | |
| return f""" | |
| <div class="audit-loading-container"> | |
| <div class="loading-top-row"> | |
| <div class="spinner-orbit"> | |
| <div class="spinner-ring"></div> | |
| <div class="spinner-core">🔬</div> | |
| </div> | |
| <div class="loading-text-stack"> | |
| <div class="loading-main-text">{message}</div> | |
| <div class="loading-sub-text">⏳ <b>Please wait:</b> {subtext}</div> | |
| </div> | |
| <div class="loading-pct-badge">{pct_val}%</div> | |
| </div> | |
| <div class="progress-bar-track"> | |
| <div class="progress-bar-fill" style="width: {pct_val}%;"> | |
| <div class="progress-bar-glow"></div> | |
| </div> | |
| </div> | |
| </div> | |
| """ | |
| def build_top_3_cards_html(top_records: list) -> str: | |
| if not top_records: | |
| return "" | |
| cards_html = "" | |
| for r in top_records[:3]: | |
| model_name = r.get("model_name", "Model") | |
| org = r.get("org", "Org") | |
| logo = model_name[0].upper() if model_name else "M" | |
| acc = r.get("factuality", 0.0) | |
| blind = r.get("blind_fraction", 0.0) | |
| score = r.get("composite_score", 0.0) | |
| run_id = r.get("run_id", "Unknown") | |
| date_str = r.get("date", "") | |
| cards_html += f""" | |
| <div class="top-eval-card" onclick="window.selectTopModel('{model_name}')" style="cursor: pointer;" title="Click to view certificate for {model_name}"> | |
| <div class="card-header-row"> | |
| <div class="provider-logo">{logo}</div> | |
| <div class="card-titles"> | |
| <h3>{model_name}</h3> | |
| <span>{org} · <b style="color: #0284c7;">Click to Inspect 🔬</b></span> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="benchmark-sub" style="font-weight: 600;"> | |
| X-Ray Composite: <b style="color: #0284c7;">{score:.1f}</b> <span style="font-size:11px; opacity: 0.7;">/ 100</span> | |
| </div> | |
| </div> | |
| <div class="metrics-stack"> | |
| <div class="metric-split-pill green"> | |
| <span class="badge">Factuality: {acc:.1f}%</span> | |
| <span class="sub-val">Layer C</span> | |
| </div> | |
| <div class="metric-split-pill blue"> | |
| <span class="badge">Blind Manifold: {blind:.2f}%</span> | |
| <span class="sub-val">Layer B</span> | |
| </div> | |
| </div> | |
| <div class="card-footer"> | |
| <span>{run_id}</span> | |
| <span>{date_str}</span> | |
| </div> | |
| </div> | |
| """ | |
| return f""" | |
| <div style="margin-bottom: 24px;"> | |
| <div class="section-eyebrow">Top Audited Models (Click Any Card to Inspect)</div> | |
| <div class="top-cards-grid">{cards_html}</div> | |
| </div> | |
| """ | |
| def render_audit_details_panel(cert: dict) -> str: | |
| if not cert: | |
| return """ | |
| <div class="result-panel-empty"> | |
| <div style="font-size: 28px; margin-bottom: 6px;">🔬</div> | |
| <b>No Model Selected</b> | |
| <p style="font-size: 12px; margin-top: 4px; opacity: 0.8;"> | |
| Select any model row from the leaderboard or click one of the Top 3 Cards above to inspect its audit certificate. | |
| </p> | |
| </div> | |
| """ | |
| if cert.get("status") == "error": | |
| model_id = cert.get("config", {}).get("model_name", "Model") | |
| err_msg = cert.get("error_message", "Audit could not be completed.") | |
| return f""" | |
| <div class="audit-result-panel" style="border-color: #fecdd3; background: rgba(239, 68, 68, 0.05);"> | |
| <div class="result-header-row" style="border-bottom: 1px solid #fecdd3;"> | |
| <div> | |
| <span class="panel-tag" style="background:#fee2e2; color:#ef4444;">AUDIT ATTEMPT FAILED</span> | |
| <h2 class="result-model-title" style="color:#9f1239;">{model_id}</h2> | |
| </div> | |
| </div> | |
| <div style="padding: 12px 0; color: #9f1239; font-size: 13px; line-height: 1.5;"> | |
| <b>Reason:</b> {err_msg} | |
| </div> | |
| </div> | |
| """ | |
| config = cert.get("config", {}) | |
| model_id = config.get("model_name", "Unknown Model") | |
| revision = str(config.get("model_sha", "main"))[:8] | |
| arch = config.get("architecture", "Unknown") | |
| params = config.get("params") or "N/A" | |
| comp = cert.get("composite", cert.get("risk", {})) | |
| score = comp.get("unvalidated_composite_score", comp.get("hallucination_potential", 0.0)) | |
| r_struct = comp.get("structural_risk", 0.0) | |
| r_behav = comp.get("behavioral_risk", 0.0) | |
| verdict = comp.get("verdict") | |
| if not verdict: | |
| verdict = "LOW RISK" if score < 25 else ("MODERATE RISK" if score < 55 else "HIGH RISK") | |
| risk_class = "risk-low" if score < 25 else ("risk-moderate" if score < 55 else "risk-high") | |
| spec = cert.get("spectral", {}) | |
| obs = cert.get("observer", cert.get("hso", {})) | |
| behav = cert.get("behavioral", {}) | |
| d_obs = obs.get("d", obs.get("observable_dim", 0)) | |
| raw_blind = obs.get("blind_fraction", 0.0) | |
| if isinstance(raw_blind, str): | |
| blind_frac = float(raw_blind.replace("%", "").strip() or 0.0) | |
| elif isinstance(raw_blind, (int, float)) and raw_blind <= 1.0: | |
| blind_frac = raw_blind * 100.0 | |
| else: | |
| blind_frac = float(raw_blind or 0.0) | |
| ratio = obs.get("token_to_dim_ratio", 0.0) | |
| sample_ok = obs.get("sample_adequate", True) | |
| raw_acc = behav.get("factual_accuracy", 0.0) | |
| if isinstance(raw_acc, str): | |
| acc = float(raw_acc.replace("%", "").strip() or 0.0) | |
| elif isinstance(raw_acc, (int, float)) and raw_acc <= 1.0: | |
| acc = raw_acc * 100.0 | |
| else: | |
| acc = float(raw_acc or 0.0) | |
| raw_stab = behav.get("paraphrase_fidelity", behav.get("paraphrase_stability", 0.0)) | |
| if isinstance(raw_stab, str): | |
| stab = float(raw_stab.replace("%", "").strip() or 0.0) | |
| elif isinstance(raw_stab, (int, float)) and raw_stab <= 1.0: | |
| stab = raw_stab * 100.0 | |
| else: | |
| stab = float(raw_stab or 0.0) | |
| warn_html = "" | |
| if not sample_ok: | |
| warn_html = f"<div style='margin-bottom:12px; font-size:11px; color:#d97706; background:rgba(245, 158, 11, 0.1); padding:8px; border-radius:6px; border:1px solid rgba(245, 158, 11, 0.3);'><b>⚠️ Diagnostic Warning:</b> Calibration Token/Dim ratio is {ratio:.2f}x. Layer B covariance is under-sampled. Blind quotient is provisional.</div>" | |
| return f""" | |
| <div class="audit-result-panel"> | |
| <div class="result-header-row"> | |
| <div> | |
| <span class="panel-tag">REAL AUDIT CERTIFICATE</span> | |
| <h2 class="result-model-title">{model_id}</h2> | |
| <span class="result-meta-sub">{params}B Params · {arch} · SHA: <code>{revision}</code></span> | |
| </div> | |
| <div class="score-badge-box"> | |
| <span class="score-label">COMPOSITE (UNVALIDATED)</span> | |
| <div class="score-number">{score:.1f}<span style="font-size: 14px; font-weight: normal; opacity: 0.7;"> / 100</span></div> | |
| <span class="risk-badge {risk_class}">{verdict}</span> | |
| </div> | |
| </div> | |
| {warn_html} | |
| <div class="layer-grid"> | |
| <div class="layer-card"> | |
| <div class="layer-title">Layer A: Weight Spectra</div> | |
| <div class="stat-row"><span>Stable Rank (r_s):</span> <b>{spec.get('stable_rank_mean', 0)}</b></div> | |
| <div class="stat-row"><span>Effective Rank:</span> <b>{spec.get('effective_rank_mean', 0)}</b></div> | |
| <div class="stat-row"><span>Condition (κ):</span> <b>{spec.get('condition_number_mean', 0):,.1f}</b></div> | |
| <div class="stat-row" style="margin-top:4px; padding-top:4px; border-top:1px solid var(--border-color-primary, #e2e8f0);"> | |
| <span>Matrices Sampled:</span> <b>{spec.get('matrices_sampled', 0)}</b> | |
| </div> | |
| </div> | |
| <div class="layer-card"> | |
| <div class="layer-title">Layer B: HSO Geometry</div> | |
| <div class="stat-row"><span>Observable Dim (d):</span> <b>{d_obs}</b></div> | |
| <div class="stat-row"><span>Blind Manifold (ker):</span> <b style="color:#d97706;">{blind_frac:.2f}%</b></div> | |
| <div class="stat-row"><span>Token/Dim Ratio:</span> <b style="color:{'#059669' if sample_ok else '#ef4444'};">{ratio:.2f}x</b></div> | |
| <div class="stat-row" style="margin-top:4px; padding-top:4px; border-top:1px solid var(--border-color-primary, #e2e8f0);"> | |
| <span>Structural Risk:</span> <b style="color:#e11d48;">{r_struct:.1f}</b> | |
| </div> | |
| </div> | |
| <div class="layer-card"> | |
| <div class="layer-title">Layer C: Probes ({behav.get('n_probes', 0)})</div> | |
| <div class="stat-row"><span>Factual Accuracy:</span> <b style="color:#059669;">{acc:.1f}%</b></div> | |
| <div class="stat-row"><span>Paraphrase Stability:</span> <b style="color:#0284c7;">{stab:.1f}%</b></div> | |
| <div class="stat-row"><span>Correct Probes:</span> <b>{behav.get('correct_count', 0)}</b></div> | |
| <div class="stat-row" style="margin-top:4px; padding-top:4px; border-top:1px solid var(--border-color-primary, #e2e8f0);"> | |
| <span>Behavioral Risk:</span> <b style="color:#e11d48;">{r_behav:.1f}</b> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="result-footer"> | |
| <span><b>Audit ID:</b> XRAY-{revision}-{model_id.split('/')[-1][:6]}</span> | |
| <span><b>Audited:</b> {cert.get('audited_at', '')}</span> | |
| </div> | |
| </div> | |
| """ |