Model trainingPro

• Type: Component (special)
• Access: Xzero Pro
• Page: https://ui.xzero.co.uk/components/model-training
• Markdown: https://ui.xzero.co.uk/components/model-training/markdown
• Source file: registry/components/model-training/model-training.tsx
• Dependencies: lucide-react
• Keywords: special, motion, illustration, new, model training, machine learning, neural network, deep learning, backpropagation, loss curve, epochs, evaluation, fine-tuning, ai, animated diagram

When to use

• An AI or ML product section that explains training, fine-tuning or evaluation in one glance.
• Docs pages introducing batches, epochs, loss curves or held-out evaluation.

When not to use

• Use line-chart or metric-card for real, live training metrics.
• Use data-flow to explain how records move through a pipeline, and pipeline-status for real job status.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/model-training

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { ModelTraining } from "@/components/xzero/model-training/model-training";

export function TrainingSection() {
  return <ModelTraining
    classes={["Positive", "Negative"]}
    samples={12800}
    heldOutSamples={1600}
    epochs={12}
    lossFrom={0.69}
    lossTo={0.08}
    accuracy={94.2}
    target={90}
  />;
}

API reference

ModelTraining

An animated model training illustration told in five stages. A batch peels off a layered stack of training data and drops into the input layer of a small neural network drawn on thin plates in 2.5D depth. Signals travel forward along every connection to a prediction, then the error travels back as a short dash and each connection it passes grows a little stronger. Over the epochs batches stream through, the useful connections thicken and take on the accent while the rest stay light, the loss curve descends beside the network and the loss, epoch and prediction readouts count in sync. At the end a held-out set runs through once, the evaluation score counts up, and the check turns green with a Passed tag. A step bar with play and pause replays the story or jumps to any stage, and a caption explains the current stage.

Prop	Type	Default	Description
classes	string[]	["Positive", "Negative"]	The two labels the model learns to predict, shown beside the output layer with a probability and a bar.
inputs	number	3	Units in the input layer, from 2 to 5. Each data sheet shows one line per input feature.
hidden	number[]	[4, 4]	Units in the two hidden layers, each from 2 to 6.
samples	number	12800	Samples in the training set, shown under the stack and in its hover detail.
heldOutSamples	number	1600	Samples in the held-out set.
batchSize	number	32	Samples per batch, used in the caption and hover detail.
epochs	number	12	Epochs the story trains for. The epoch readout and the chart axis count to it.
lossFrom	number	0.69	Loss after the first batch. The curve starts here.
lossTo	number	0.08	Loss after the last epoch. The curve ends here and the validation point sits just above it.
accuracy	number	94.2	Accuracy on the held-out set in percent. The evaluation counts up to it.
target	number	90	Accuracy the evaluation must reach, shown under the evaluation name.
labels	{ training?: string; heldOut?: string; unit?: string; input?: string; hidden?: string; output?: string; loss?: string; epoch?: string; evaluation?: string; waiting?: string; running?: string; passed?: string; noBatch?: string }	Training set, Held-out set, reviews, Input, Hidden, Output, Loss, Epoch, Evaluation, Waiting, Running, Passed, Waiting for a batch	Names on the diagram and readouts. unit is what one sample is and follows every sample count.
steps	string[]	["Batch", "Forward pass", "Backprop", "Epochs", "Evaluate"]	Labels for the five stages in the step bar.
defaultStep	number	–	Stage to start on, from 0 to 4. When held or with reduced motion it picks the still frame; otherwise the finished, evaluated model is shown.
caption	boolean	true	Shows a sentence under the step bar that explains the current stage. On narrow layouts it also names the stage.
controls	boolean	true	Shows the step bar with play and pause.
speed	number	1	Multiplies the playback speed. One full run takes about 21 seconds at 1. 0 holds still.
paused	boolean	false	Holds the illustration still. Held from the start, it shows the finished, evaluated model.
accent	string	–	Any CSS color for signals, the error dash, learned connections, the loss curve and the active stage. Defaults to the accent token. The passed state keeps the success color.
label	string	–	Accessible description of the diagram. Built from the classes and numbers when left out.
className	string	–	Extra class on the root figure.
style	CSSProperties	–	Inline styles on the root figure.

Accessibility

• The diagram is one element with role="img" and an aria-label that walks through the whole run: batches, the forward pass, backprop strengthening the connections, the loss falling over the epochs, and the held-out evaluation passing its target.
• The step bar is an ordered list of real buttons named "Stage 3, Backprop" with aria-current on the playing stage, and a play and pause button with a specific name. The caption repeats the story in words.
• Nothing relies on color alone: every readout is a number, the evaluation shows Waiting, Running or Passed as a named tag next to the score, and the winning prediction is a probability.
• Pointer focus draws no ring; keyboard focus shows Xzero's shared focus ring.

Motion

• One rAF loop writes SVG transforms, opacity, dash offsets, widths, CSS variables and a few text nodes straight to the DOM, and only when a value changed; React does not render per frame.
• The whole run is a pure function of time, so the loop is seamless: at the start of each run the connections relax back to their random starting weights while the readouts crossfade from the finished run to an untrained model.
• Batches fly from the stack into the input layer on an eased curve while the stack advances one slot, signals ride each connection with a smooth ease and fade at both ends, and the error travels back as a short dash. Nodes fill as a signal lands and ring as the error passes.
• Each backward pass strengthens the connections it crossed, so weights, the loss curve, the epoch count and the output probabilities all step together, with the loss head gliding along the curve during each update.
• Hover slows the story on a critically damped spring. The loop stops off screen, in hidden tabs, and when paused. Reduced motion shows the finished run as a still frame: learned connections, the full loss curve with its validation point, and the passed evaluation. Picking a stage then shows that stage's still frame.

Responsive behavior

• The network is measured in real pixels and drawn in an SVG viewBox of that size, so text and hairlines stay crisp at any width.
• Above 720px the loss readout sits beside the network; below it moves under. Below 480px the two data stacks move above the network and batches drop into it, the output probabilities stack under their labels, and the step bar shows numbers while the caption names the stage.
• Hover details only appear for a mouse; touch shows the same diagram without them.

Performance

• About 150 small SVG elements for the default 3, 4, 4, 2 network, driven by a single loop that caches every written value.
• Geometry and weights are computed once per width; nothing is measured per frame.

Notes for AI

• Use it to explain how a model learns on a landing page or in docs: training data, forward and backward passes, epochs, loss and evaluation.
• Match classes, unit and the numbers to the product's real task, such as spam and not spam for emails. Keep class names to one word so they fit beside the output layer on phones.
• The numbers are illustrative. Say so near the illustration if they could be read as a real benchmark.

Related

• Data flow: Data flow illustration. Sources (app, database, events) are on the left, a processing core with a live count sits in the middle, and destinations (warehouse, dashboard, alerts) are on the right. Records leave as hollow dots and travel curved paths. In the core they turn into solid accent squares, then fan out to each destination; alerts receives about every third record.

Also in illustrations

• Payment flow: A card tap goes to a processor, then the network, then the bank and back with authorization, then settlement; each hop lights up with a status label and the amount travels as a chip.
• Multi-region failover: Animated multi-region failover on a 2.5D stage: users stream requests through a global load balancer to two regions; the primary degrades, fails three health checks, traffic shifts smoothly to the healthy region, then it recovers, passes three checks and traffic ramps back to an even split.
• Vector search: Documents drop onto a tilted embedding plane and fold into points that cluster by topic; the index links neighbours, a query is typed, embedded and lowered onto the plane, a signal hops along the graph toward it, and a widening ring lights the nearest documents with connecting lines, similarity scores and a ranked list.
• Agent loop: An illustration of the agent loop: gather context, take action, verify, repeat, with a bright head circling three stations around the model.
• Mixture of experts: An illustration of mixture of experts routing: each token is scored by a router, travels to its top experts, and their outputs merge into the token's result.
• Speculative decoding: An illustration of speculative decoding: a fast draft model guesses a few tokens, the target model checks them in one pass, and accepted guesses join the answer.
• Prompt cache: An animated explainer for prompt caching: the shared prefix of each request is cached once, later requests read it back, and the cost and time saved add up.
• Reasoning tree: An illustration of tree search over thoughts: candidates are scored, weak branches fade, the best expand, and the winning path from question to answer draws in.

Guidance for AI tools

Model training: Training data batches feed a small neural net diagram whose connections strengthen, a loss curve descends beside it, and an evaluation check turns green at the end. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt