shadcn.io is not affiliated with official shadcn/ui
Machine Learning Model Drift Monitoring Block for Vue
Twelve model features ranked by population stability index with a bar and ticks at half the threshold and at it, a 0.10, 0.20 or 0.25 threshold toggle, and the chosen feature's training and current histograms with what each bin adds.
Installation
Overview
See which inputs of a model have moved away from the training data, with this drift panel for Vue with Ark UI. It is Skewwell, a model drift monitor (made up), comparing this week's traffic with the training data for 12 features of a renewal model. A hairline frame with a plus mark on each corner holds a list of the features on the start side, ranked by their population stability index (a native select on a phone): each has a bar on a 0 to 0.5 scale with a tick at half the threshold and one at the threshold, and a word, Stable, Watch or Shifted. A Toggle Group in the header moves the threshold between 0.10, 0.20 and 0.25, and the words, the counts and the sentence follow. The chosen feature draws its training histogram as hollow hatched bars with this week's bars solid in front on one share scale, a strip showing how much each bin adds to the index, three figures and its three biggest moves. Guides draw the frame and its bands; the entrance is CSS only. For ML teams, data scientists and anyone who owns a model in production.
FAQ
How do I use my own features?
Edit LINES: each line is a feature name, the centre and width of its training histogram, the shape of the change (tilt or bump), where the bump sits and its strength. The demo builds 10-bin shares from those numbers and works the index out. In your app replace featureOf with a function that reads two arrays of 10 shares from your monitoring store; the index, the ranking, the words, the contributions and every chart derive from them.
How is the index worked out?
For each bin, the difference between the current and training share times the natural log of their ratio; the index is the sum. Each bin's term is what the strip under the histogram shows, and the three biggest are listed with their shares. A common reading is under 0.1 stable, 0.1 to 0.25 worth watching and over 0.25 shifted; here the threshold is yours to move.
What does the threshold change?
A feature is Shifted at or above the threshold, Watch at or above half of it and Stable below. Changing it recolours nothing; it changes the words, the counts in the list heading, the header sentence and the ticks on every bar. A polite status line reads the new counts.
What is real here and what is typed?
The feature names, the histogram shapes and the strengths are typed examples; the shares and the index are worked out from them and nothing is measured. The product and the model are made up.