Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

ML Model Performance Dashboard Block for Svelte

A model version select over two typed score histograms with a threshold slider, the 2 x 2 confusion matrix counted at that threshold, live precision, recall and F1, and a table of all three versions at the same threshold.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See what moving a classifier's decision threshold really trades, with this evaluation panel for Svelte with Ark UI. The header has a Native Select for the model version (v3.1, v3.2 or v3.3). A hairline frame with a plus mark on each corner draws two histograms of ten score bins for Modelhurst's escalation classifier, tickets that needed escalating in a solid weight in front of those that did not in a light one, with a vertical rule at the threshold and the scores above it shaded as predicted positive. A Slider moves the threshold from 0.1 to 0.9. Under it, the 2 x 2 confusion matrix is counted from the bins at that rule, in words (true positives, false negatives, false positives, true negatives), with precision, recall and F1 beside it, and a table gives all three versions at the same threshold. For model reviews and evaluation reports.

FAQ

How do I fill it with my scores?

Edit MODELS: each version has positives and negatives, ten counts of examples by score bin (0.0 to 0.1, up to 0.9 to 1.0). The histograms, the matrix, the three figures and the version table are all counted from them. Bin your own model's scores the same way.

How is the matrix counted?

Every bin whose lower edge is at or above the threshold is predicted positive. True positives are the positive examples in those bins, false positives the negative ones, and the bins below the threshold give false negatives and true negatives. Precision is true positives over predicted positives, recall is true positives over actual positives, and F1 is their harmonic mean.

What does the version table show?

The same three figures for every version at the current threshold, with the picked version in bold and marked as current, so you can see whether a newer model wins at your operating point and not only at 0.5.

Is the histogram available as text?

Yes. A hidden table lists the positive and negative counts for each bin of the picked version, the drawing is hidden from assistive technology, and the slider reads its value as "threshold 0.5". The status line repeats the counts after each change.

What stays local, and how do I wire it for real?

Everything: the counts are typed and no model was served. Compute the histograms from a labelled evaluation set when you register a model version, and pick a default threshold from the cost of a false positive against a false negative.

How does it look on a phone?

The order is the histogram, the slider, the matrix and its three figures, then the version table; every other bin label is hidden so the axis stays readable.