shadcn.io is not affiliated with official shadcn/ui
Performance Metrics AI Block for Vue
Set a p95 latency target with a slider and a time range with a toggle group, then read a sortable table of four models with a p50 to p95 dumbbell and a Meets target column worked out from the slider, and copy it as Markdown.
Installation
Overview
Show which models stay under your latency target, with this board for Vue with Ark UI. Speedmill, a latency board, has a toolbar band with a Toggle Group for the range (1 hour, 24 hours, 7 days) and a p95 target slider from 200 to 3,000 ms, over a table of Orvane 2 Fast, Orvane 2, Brellis Large and Brellis Small. Each row has its p50, p95, time to first token, tokens a second and error rate, a dumbbell from p50 to p95 with a dashed target line across it, and a Meets target column that is a word and a glyph worked out from p95 against the slider. Model, p95, tokens a second and error rate sort. The Shine Button Copy table puts a Markdown version on the clipboard. For model dashboards, status pages and routers that pick a model by latency.
FAQ
What stays in the page, and how do I make it real?
The figures for each model and range are typed in the file. The Meets target column, the count in the summary line, the dumbbells and the Markdown are all worked out from them and the slider. Nothing is measured. To wire it for real, return the percentiles per model and range from your metrics store and keep the rest.
How is Meets target decided?
A model meets the target when its p95 is at or under the slider's value. Otherwise the cell says Over by the difference in milliseconds. Move the slider and the words, the glyphs and the line "2 of 4 models meet 1,200 ms at p95" change together.
How do I read the dumbbell?
The hollow dot is the p50 and the solid dot is the p95, joined by a line, on a scale from 0 to 3,000 ms. The dashed vertical line is the target, so a solid dot to its start side meets it. The drawing is hidden from screen readers because the same numbers are in the table.
How does sorting work?
Each sortable head is a button. The first press sorts in the column's natural order (names A to Z, p95 and errors lowest first, tokens a second highest first) and a second press reverses it. The sorted column carries aria-sort and the status line says the new order.