bolyai/CIS490
3
0
Fork 0
Code Issues 5 Pull requests Projects 1 Releases Packages Wiki Activity Actions

model bars: paint every architecture (+ neutral fallback)

Browse source 
The bar widget had gradients for lstm / gru / rnn / bert / knn
only — any other model name (cnn, mlp, transformer, gbt, knn_semi,
transformer_ssl) rendered a track but no fill. Now:

- Added explicit gradients for cnn, mlp, transformer,
  transformer_ssl, gbt, knn_semi (each visually distinct from the
  existing five).
- Added a neutral grey-grey fallback on .model-fill itself, so any
  unanticipated model name still produces a visible bar instead of
  silently disappearing. The specific class rules override it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Max Gorog 2026-05-08 17:19:30 -05:00
parent c2a71de4b2
commit 6230f18692
2 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
training/dashboard/static/dashboard.css
View file

@ -982,20 +982,29 @@ html, body { overflow-anchor: none; }
font-size: clamp(13px, 1vw, 15px); color: var(--fg); }
.model-track { height: clamp(28px, 4vh, 48px); background: var(--bg-elev);
border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.model-fill { height: 100%; transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.model-fill.lstm { background: linear-gradient(90deg, #58a6ff, #1f6feb); }
.model-fill.gru { background: linear-gradient(90deg, #db61a2, #a8327f); }
.model-fill.rnn { background: linear-gradient(90deg, #d29922, #8a6a17); }
.model-fill.bert { background: linear-gradient(90deg, #f85149, #b22e2a); }
.model-fill.knn { background: linear-gradient(90deg, #3fb950, #1a7f37); }
.model-fill {
height: 100%;
transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
/* Neutral fallback so any model name the producer emits at least
paints a visible bar, even one we didn't anticipate. Specific
gradients below override per canonical model name. */
background: linear-gradient(90deg, var(--fg-mute), var(--fg-dim));
}
.model-fill.lstm { background: linear-gradient(90deg, #58a6ff, #1f6feb); }
.model-fill.gru { background: linear-gradient(90deg, #db61a2, #a8327f); }
.model-fill.rnn { background: linear-gradient(90deg, #d29922, #8a6a17); }
.model-fill.bert { background: linear-gradient(90deg, #f85149, #b22e2a); }
.model-fill.knn { background: linear-gradient(90deg, #3fb950, #1a7f37); }
/* Producer-side additions (see docs/dashboard-request-scenes-7-8-12.md):
gbt / mlp / cnn / knn_semi are also published as ModelMetric so that
scene 9 shows the full trained zoo, not just the canonical sequence
models. Same gradient shape, different hues. */
.model-fill.gbt { background: linear-gradient(90deg, #ff8c42, #c2410c); }
.model-fill.mlp { background: linear-gradient(90deg, #a371f7, #6e40c9); }
.model-fill.cnn { background: linear-gradient(90deg, #34d399, #047857); }
.model-fill.knn_semi { background: linear-gradient(90deg, #2dd4bf, #115e59); }
gbt / mlp / cnn / knn_semi / transformer / transformer_ssl are also
published as ModelMetric so that scene 9 shows the full trained
zoo. Same gradient shape, different hues, distinct from above. */
.model-fill.gbt { background: linear-gradient(90deg, #ff8c42, #c2410c); }
.model-fill.mlp { background: linear-gradient(90deg, #a371f7, #6e40c9); }
.model-fill.cnn { background: linear-gradient(90deg, #34d399, #047857); }
.model-fill.knn_semi { background: linear-gradient(90deg, #2dd4bf, #115e59); }
.model-fill.transformer { background: linear-gradient(90deg, #fde047, #ca8a04); }
.model-fill.transformer_ssl { background: linear-gradient(90deg, #c0a4ff, #8c6bff); }
.model-acc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: clamp(13px, 1vw, 15px); color: var(--fg-dim); text-align: right; }

2
training/dashboard/static/index.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=0ef6cb6d">
<link rel="stylesheet" href="/static/dashboard.css?v=46fb9c7f">
</head>
<body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0