models scene: paint the knn bar (CSS color + demo entry)

The model-bar widget rendered .model-fill.knn with no gradient when
a model_metric{model:"knn"} arrived, leaving an empty track. Add a
green gradient and include knn in the demo-mode set so the row is
visible without waiting on the producer.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Max Gorog 2026-05-08 13:16:38 -05:00
parent ba5ff70c14
commit f537ab8686
3 changed files with 10 additions and 3 deletions

View file

@ -987,6 +987,7 @@ html, body { overflow-anchor: none; }
.model-fill.gru { background: linear-gradient(90deg, #db61a2, #a8327f); } .model-fill.gru { background: linear-gradient(90deg, #db61a2, #a8327f); }
.model-fill.rnn { background: linear-gradient(90deg, #d29922, #8a6a17); } .model-fill.rnn { background: linear-gradient(90deg, #d29922, #8a6a17); }
.model-fill.bert { background: linear-gradient(90deg, #f85149, #b22e2a); } .model-fill.bert { background: linear-gradient(90deg, #f85149, #b22e2a); }
.model-fill.knn { background: linear-gradient(90deg, #3fb950, #1a7f37); }
.model-acc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; .model-acc { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: clamp(13px, 1vw, 15px); color: var(--fg-dim); text-align: right; } font-size: clamp(13px, 1vw, 15px); color: var(--fg-dim); text-align: right; }

View file

@ -1570,7 +1570,13 @@ for epoch in range(20):
r.acc.textContent = accuracy.toFixed(3); r.acc.textContent = accuracy.toFixed(3);
} }
on('demo_start', () => { on('demo_start', () => {
[ ['rnn', 0.872], ['gru', 0.911], ['lstm', 0.928], ['bert', 0.954] ] // KNN sits below the recurrent/transformer family; it memorizes
// the train host's feature space and generalizes worse than a
// model that learned temporal structure. Bar visible-scale starts
// at 0.5 so the real cross-host F1 (~0.43) reads as 0% — that's
// honest, just visually flat. Demo value here is the in-distribution
// ballpark for a healthier display.
[ ['knn', 0.736], ['rnn', 0.872], ['gru', 0.911], ['lstm', 0.928], ['bert', 0.954] ]
.forEach(([m, a]) => render(m, a)); .forEach(([m, a]) => render(m, a));
}); });
on('demo_stop', () => { rows.clear(); emptyState(); }); on('demo_stop', () => { rows.clear(); emptyState(); });

View file

@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>CIS490 — live</title> <title>CIS490 — live</title>
<link rel="stylesheet" href="/static/dashboard.css?v=3434f117"> <link rel="stylesheet" href="/static/dashboard.css?v=edba1d35">
</head> </head>
<body> <body>
<!-- SVG filter defs for the lava-lamp goo effect. Width/height 0 <!-- SVG filter defs for the lava-lamp goo effect. Width/height 0
@ -533,6 +533,6 @@
</article> </article>
</div> </div>
<script src="/static/dashboard.js?v=a087e0a4"></script> <script src="/static/dashboard.js?v=7e81783b"></script>
</body> </body>
</html> </html>