Model training
ProTraining 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.
Live · keyboard ready
- 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.
- 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
Pro source and install commands unlock with a Pro plan.
example.tsx
import { ModelTraining } from "@/components/arc/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} />;}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.
PropTypeDefaultDescription
classesstring[]["Positive", "Negative"]The two labels the model learns to predict, shown beside the output layer with a probability and a bar.inputsnumber3Units in the input layer, from 2 to 5. Each data sheet shows one line per input feature.hiddennumber[][4, 4]Units in the two hidden layers, each from 2 to 6.samplesnumber12800Samples in the training set, shown under the stack and in its hover detail.heldOutSamplesnumber1600Samples in the held-out set.batchSizenumber32Samples per batch, used in the caption and hover detail.epochsnumber12Epochs the story trains for. The epoch readout and the chart axis count to it.lossFromnumber0.69Loss after the first batch. The curve starts here.lossTonumber0.08Loss after the last epoch. The curve ends here and the validation point sits just above it.accuracynumber94.2Accuracy on the held-out set in percent. The evaluation counts up to it.targetnumber90Accuracy 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 batchNames on the diagram and readouts. unit is what one sample is and follows every sample count.stepsstring[]["Batch", "Forward pass", "Backprop", "Epochs", "Evaluate"]Labels for the five stages in the step bar.defaultStepnumber–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.captionbooleantrueShows a sentence under the step bar that explains the current stage. On narrow layouts it also names the stage.controlsbooleantrueShows the step bar with play and pause.speednumber1Multiplies the playback speed. One full run takes about 21 seconds at 1. 0 holds still.pausedbooleanfalseHolds the illustration still. Held from the start, it shows the finished, evaluated model.accentstring–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.labelstring–Accessible description of the diagram. Built from the classes and numbers when left out.classNamestring–Extra class on the root figure.styleCSSProperties–Inline styles on the root figure.- 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 Arc's shared focus ring.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.