Changed to light theme and improved parsinf of mdoel paramater number.

This commit is contained in:
Donato Capitella
2025-08-09 15:43:07 +01:00
parent a042688491
commit e49efe221e
3 changed files with 445 additions and 444 deletions
+14 -12
View File
@@ -3,7 +3,7 @@ import re, glob, os, json, time
from pathlib import Path from pathlib import Path
RESULTS_DIR = "results" RESULTS_DIR = "results"
OUT_JSON = "results.json" OUT_JSON = "../docs/results.json"
# --- Regexes --------------------------------------------------------------- # --- Regexes ---------------------------------------------------------------
@@ -23,12 +23,10 @@ GENERIC_ERR= re.compile(r"error:|exit \d+|runtime error|⚠️\s*Runtime Error",
TS_RE = re.compile(r"([\d.]+)\s*±\s*([\d.]+)") TS_RE = re.compile(r"([\d.]+)\s*±\s*([\d.]+)")
# Quantization from model name # Quantization from model name
QUANT_RE = re.compile(r"(Q\d+_[A-Z_]+|BF16|F16|F32|mxfp\d+)", re.IGNORECASE) QUANT_RE = re.compile(r"(Q\d+_[A-Z0-9_]+|BF16|F16|F32|mxfp\d+)", re.IGNORECASE)
# Params like "235.09 B" from the table PARAMS_RE = re.compile(r"([\d.,]+)\s*B", re.IGNORECASE)
PARAMS_RE = re.compile(r"([\d.]+)\s*B", re.IGNORECASE) GIB_RE = re.compile(r"([\d.,]+)\s*GiB", re.IGNORECASE)
# File size like "96.99 GiB" from the table
GIB_RE = re.compile(r"([\d.]+)\s*GiB", re.IGNORECASE)
# "30B", "235B" from model name # "30B", "235B" from model name
NAME_B_RE = re.compile(r"(\d+(?:\.\d+)?)B") NAME_B_RE = re.compile(r"(\d+(?:\.\d+)?)B")
@@ -187,19 +185,23 @@ for path in sorted(glob.glob(os.path.join(RESULTS_DIR, "*.log"))):
file_size_gib = None file_size_gib = None
if "params" in r: if "params" in r:
pm = PARAMS_RE.search(r["params"]) pm = PARAMS_RE.search(r["params"])
if pm: params_b = coerce_float(pm.group(1)) if pm:
params_b = coerce_float(pm.group(1).replace(",", ""))
if "size" in r: if "size" in r:
sm = GIB_RE.search(r["size"]) sm = GIB_RE.search(r["size"])
if sm: file_size_gib = coerce_float(sm.group(1)) if sm:
file_size_gib = coerce_float(sm.group(1).replace(",", ""))
# quant from model name (unchanged)
quant = extract_quant(model_clean)
# name_params_b: prefer table value; else fall back to B in model name
name_params_b = params_b if params_b is not None else b_from_name(model_clean)
backend = r.get("backend") backend = r.get("backend")
ngl = r.get("ngl") ngl = r.get("ngl")
mmap = r.get("mmap") mmap = r.get("mmap")
# quant from model name
quant = extract_quant(model_clean)
name_params_b = b_from_name(model_clean)
run = { run = {
"model": model_raw, "model": model_raw,
"model_clean": model_clean, "model_clean": model_clean,
+63 -64
View File
@@ -7,56 +7,55 @@
<title>Strix Halo — Model ↔ Backend Comparator</title> <title>Strix Halo — Model ↔ Backend Comparator</title>
<style> <style>
:root { :root {
--bg: #0b0c0f; --bg: #ffffff;
--ink: #e6e7ea; --ink: #000000;
--muted: #a3a8b3; --muted: #555555;
--accent: #6ea8fe; --accent: #0645ad;
--card: #11141a; --card: #f9f9f9;
--border: #202633; --border: #cccccc;
--sticky: #0f1218; --sticky: #f4f4f4;
--pill: #1b2230; --pill: #e0e0e0;
--roc: #b19cff33; --roc: #d3caff;
--roc-text: #e9e4ff; --roc-text: #000000;
--warn: #ffcc66; --warn: #d88f00;
--bad: #ff6b6b; --bad: #d32f2f;
--model-w: 300px; --model-w: 300px;
--winner-w: 220px; --winner-w: 220px;
/* wider winner column */
} }
* { * {
box-sizing: border-box box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
background: var(--bg); background: var(--bg);
color: var(--ink); color: var(--ink);
font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter;
} }
a { a {
color: var(--accent); color: var(--accent);
text-decoration: none text-decoration: none;
} }
a:hover { a:hover {
text-decoration: underline text-decoration: underline;
} }
header { header {
padding: 14px 20px 0 padding: 14px 20px 0;
} }
header h1 { header h1 {
margin: 0 0 6px; margin: 0 0 6px;
font-size: 22px font-size: 22px;
} }
header p { header p {
margin: 4px 0 12px; margin: 4px 0 12px;
color: var(--muted); color: var(--muted);
font-size: 13px font-size: 13px;
} }
.controls { .controls {
@@ -64,37 +63,37 @@
grid-template-columns: 1fr 160px 260px 180px; grid-template-columns: 1fr 160px 260px 180px;
gap: 10px; gap: 10px;
align-items: end; align-items: end;
padding: 10px 20px padding: 10px 20px;
} }
label { label {
display: block; display: block;
font-size: 12px; font-size: 12px;
color: var(--muted); color: var(--muted);
margin: 0 0 6px margin: 0 0 6px;
} }
input[type="text"], input[type="text"],
select, select,
input[type="number"] { input[type="number"] {
width: 100%; width: 100%;
background: #0d1117; background: #fff;
color: var(--ink); color: var(--ink);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
padding: 8px 10px; padding: 8px 10px;
outline: none outline: none;
} }
.slider { .slider {
display: grid; display: grid;
grid-template-columns: 1fr 90px; grid-template-columns: 1fr 90px;
gap: 8px; gap: 8px;
align-items: center align-items: center;
} }
input[type="range"] { input[type="range"] {
width: 100% width: 100%;
} }
.ticks { .ticks {
@@ -102,32 +101,33 @@
justify-content: space-between; justify-content: space-between;
color: var(--muted); color: var(--muted);
font-size: 11px; font-size: 11px;
margin-top: 2px margin-top: 2px;
} }
.cols { .cols {
display: flex; display: flex;
gap: 8px; gap: 8px;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 20px 8px padding: 0 20px 8px;
} }
.colbox { .colbox {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
padding: 8px 10px; padding: 8px 10px;
min-width: 220px min-width: 220px;
background: var(--card);
} }
.colbox label { .colbox label {
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
margin: 0 margin: 0;
} }
.colbox input { .colbox input {
transform: translateY(1px) transform: translateY(1px);
} }
.badge { .badge {
@@ -136,88 +136,87 @@
border-radius: 999px; border-radius: 999px;
background: var(--pill); background: var(--pill);
font-size: 11px; font-size: 11px;
margin-left: 6px margin-left: 6px;
} }
.roc { .roc {
background: var(--roc); background: var(--roc);
color: var(--roc-text); color: var(--roc-text);
border: 1px solid #b19cff55 border: 1px solid #b19cff55;
} }
.meta { .meta {
padding: 0 20px 14px; padding: 0 20px 14px;
color: var(--muted); color: var(--muted);
font-size: 12px font-size: 12px;
} }
.section { .section {
padding: 6px 20px 0 padding: 6px 20px 0;
} }
.section h2 { .section h2 {
margin: 6px 0 8px; margin: 6px 0 8px;
font-size: 16px; font-size: 16px;
color: #cfd3da; color: var(--ink);
font-weight: 600 font-weight: 600;
} }
.tablewrap { .tablewrap {
margin: 0 0 16px; margin: 0 0 16px;
border-top: 1px solid var(--border) border-top: 1px solid var(--border);
} }
.scroller { .scroller {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden overflow-y: hidden;
} }
.scroller::-webkit-scrollbar { .scroller::-webkit-scrollbar {
height: 10px height: 10px;
} }
.scroller::-webkit-scrollbar-thumb { .scroller::-webkit-scrollbar-thumb {
background: #2a3140; background: var(--border);
border-radius: 8px border-radius: 8px;
} }
table { table {
width: max-content; width: max-content;
min-width: 100vw; min-width: 100vw;
border-collapse: separate; border-collapse: separate;
border-spacing: 0 border-spacing: 0;
} }
thead th { thead th {
position: sticky; position: sticky;
top: 0; top: 0;
background: var(--card); background: var(--card);
z-index: 2 z-index: 2;
} }
th, th,
td { td {
padding: 10px 12px; padding: 10px 12px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
vertical-align: top vertical-align: top;
} }
th { th {
white-space: nowrap white-space: nowrap;
} }
td { td {
white-space: normal white-space: normal;
} }
/* sticky cols */
.col-model { .col-model {
position: sticky; position: sticky;
left: 0; left: 0;
background: var(--sticky); background: var(--sticky);
z-index: 3; z-index: 3;
max-width: var(--model-w); max-width: var(--model-w);
width: var(--model-w) width: var(--model-w);
} }
.col-winner { .col-winner {
@@ -226,44 +225,43 @@
background: var(--sticky); background: var(--sticky);
z-index: 3; z-index: 3;
max-width: var(--winner-w); max-width: var(--winner-w);
width: var(--winner-w) width: var(--winner-w);
} }
.model-title { .model-title {
font-weight: 600; font-weight: 600;
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: anywhere overflow-wrap: anywhere;
} }
.model-meta { .model-meta {
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
margin-top: 2px margin-top: 2px;
} }
/* centered value cells */
.cell { .cell {
min-width: 120px; min-width: 120px;
text-align: center text-align: center;
} }
.tps { .tps {
display: block; display: block;
text-align: center text-align: center;
} }
.std { .std {
color: var(--muted); color: var(--muted);
font-size: 12px; font-size: 12px;
text-align: center text-align: center;
} }
.warn { .warn {
color: var(--warn) color: var(--warn);
} }
.err { .err {
color: var(--bad) color: var(--bad);
} }
.winner-pill { .winner-pill {
@@ -272,20 +270,20 @@
border-radius: 999px; border-radius: 999px;
padding: 2px 8px; padding: 2px 8px;
margin: 4px 4px 4px 0; margin: 4px 4px 4px 0;
font-size: 12px font-size: 12px;
} }
/* a bit more vertical margin */
.winner-wrap { .winner-wrap {
display: flex; display: flex;
flex-wrap: wrap flex-wrap: wrap;
} }
.env-sub { .env-sub {
color: var(--muted); color: var(--muted);
font-size: 12px font-size: 12px;
} }
</style> </style>
</head> </head>
<body> <body>
@@ -312,7 +310,7 @@
</select> </select>
</div> </div>
<div> <div>
<label>Model size (B from name)</label> <label>Model params</label>
<div class="slider"> <div class="slider">
<input id="size" type="range" step="0.01" min="0" max="100" value="0" list="tickmarks"> <input id="size" type="range" step="0.01" min="0" max="100" value="0" list="tickmarks">
<input id="sizeOut" type="number" step="0.01"> <input id="sizeOut" type="number" step="0.01">
@@ -331,7 +329,8 @@
</div> </div>
<div class="cols" id="columns"></div> <div class="cols" id="columns"></div>
<div class="meta">Winner = every selected backend within the bests uncertainty range, combining ± errors from both results.</div> <div class="meta">Winner = every selected backend within the bests uncertainty range, combining ± errors from both
results.</div>
<div class="section"> <div class="section">
<h2>Prompt Processing (pp512) — tokens/second</h2> <h2>Prompt Processing (pp512) — tokens/second</h2>
+368 -368
View File
File diff suppressed because it is too large Load Diff