Softmax Temperature

Bar chart of softmax over a fixed set of logits, with a temperature dial. As T shrinks, the distribution sharpens to the one-hot argmax. As T grows, it flattens to uniform 1 / N. The same lever LLM samplers, mixture-of-experts gates, and distillation losses pull on every step.

Softmax · T = 1.00H = 0.900 nats

Temperature1.00

Customize

Distribution

logitsskewed

T1.00

Display

entropy

Installation

npx shadcn@latest add https://craftbits.dev/r/softmax-temperature.json

Usage

import { SoftmaxTemperature } from "@craft-bits/core";
 
<SoftmaxTemperature
  logits={[2.0, 1.5, 1.0, 0.5, 0.0]}
  labels={["cat", "dog", "fox", "fish", "bird"]}
  defaultTemperature={1}
/>

Drive the temperature from outside (parent scrubber, animation, or another control):

const [t, setT] = useState(1);
 
<SoftmaxTemperature
  logits={[3, 1, 0, -1]}
  temperature={t}
  onTemperatureChange={setT}
  tempRange={[0.05, 10]}
/>

Understanding the component

Temperature-scaled softmax. Each bar is the temperature-scaled softmax of its logit. Lowering T amplifies the gap between logits before normalisation — the largest one wins outright. Raising T compresses the gaps, so every class limits to 1 / N. The dashed accent line marks that uniform reference so the user can read off how far from uniform the current distribution sits.
Numerical stability. The implementation subtracts the per-row maximum scaled logit before applying exp (the log-sum-exp trick). Without that subtraction, large logits or tiny T values would push the exponential past the float64 limit and produce Infinity / NaN. T itself is clamped at 1e-6.
Entropy readout. Shannon entropy in nats. Drops to 0 at T → 0 (one-hot) and climbs toward log N at T → ∞ (uniform). The same quantity that drives temperature tuning in knowledge distillation.
Spring on bar heights. Bar y and height animate with SPRINGS.smooth so dragging the slider feels continuous instead of chattering. Reduced-motion users snap to the new value.
Argmax highlight. The current top-probability bar flips to the accent colour and bold percentage; everything else fades to a muted tone. As T crosses thresholds where the argmax swaps, the highlight follows.
Controlled + uncontrolled. Pass temperature + onTemperatureChange to drive T from outside, or omit both and let the component own its state via defaultTemperature.

Props

Prop	Type	Default	Description
`logits`	`readonly number[]`	—	Raw logits. 2..12 entries reads best.
`labels`	`readonly string[]`	indices	Bar labels — falls back to the index when missing.
`temperature`	`number`	—	Controlled T. Pair with `onTemperatureChange`.
`defaultTemperature`	`number`	`1`	Uncontrolled initial T.
`onTemperatureChange`	`(t: number) => void`	—	Fires whenever the slider commits a new T.
`tempRange`	`readonly [number, number]`	`[0.1, 5]`	Slider extents. Both must be `> 0`, `min < max`.
`showEntropy`	`boolean`	`true`	Render the entropy nats readout.
`transition`	`Transition`	`SPRINGS.smooth`	Spring for bar-height transitions.
`className`	`string`	—	Merged onto the root `<div>` via `cn()`.

Accessibility

The chart is wrapped in role="figure" with a dynamic aria-label ("Softmax distribution at temperature 0.50. Maximum probability 87% on cat.") so screen-reader users get the same headline as sighted users.
The temperature slider is a native <input type="range"> — full keyboard support out of the box (Arrow keys step, Page Up / Page Down step by 10%, Home / End jump to the extents).
The entropy readout uses aria-live="polite" so changes are announced as the user drags.
Bar heights animate with SPRINGS.smooth; reduced-motion users snap to the new values instantly.

Credits

Extracted from: craftingattention (app/src/lessons/primitives/viz/SoftmaxTemperature.tsx). Stripped the lesson-specific Explore / Predict / Challenge mode strip, true-class picker, cross-entropy loss readout, and Widget chrome; generalised to a single visualisation primitive with controlled / uncontrolled state. Added the uniform reference line and entropy readout; replaced the inline ease-out transition with SPRINGS.smooth so drags feel continuous.