craftbits*

Dropout Toggle

The simplest possible demonstration of what a dropout mask is. One row of activationCount neuron cells with a single on/off toggle: when off, every cell is active; when on, a deterministic mask drops ~dropoutRate of them. Sits alongside DropoutEnsembleViz, which surfaces the implicit-ensemble interpretation across many sub-networks — this component is the single-pass primitive that teaches the mask itself.

Dropout on, p=50 percent. 9 of 16 cells active.
Dropout toggle09 / 16 active
50%
Customize
Row
16
Dropout
0.50

Installation

npx shadcn@latest add https://craftbits.dev/r/dropout-toggle.json

Usage

import { DropoutToggle } from "@craft-bits/core";
 
<DropoutToggle activationCount={16} defaultDropoutRate={0.5} />

Drive the rate and enabled state from outside the component:

const [rate, setRate] = useState(0.5);
const [enabled, setEnabled] = useState(true);
 
<DropoutToggle
  activationCount={16}
  dropoutRate={rate}
  onDropoutRateChange={setRate}
  enabled={enabled}
  onEnabledChange={setEnabled}
/>

Pin a specific mask — (seed, dropoutRate, activationCount) is deterministic across renders:

<DropoutToggle seed={42} defaultDropoutRate={0.5} activationCount={20} />

Understanding the component

  1. One row, one mask. Each cell is one neuron's activation; a kept cell paints --cb-accent-muted with an --cb-accent border; a dropped cell paints --cb-bg with a --cb-border-strong outline and a diagonal strike-through. The strike is a colour-independent signal — dropout reads even on a monochrome display.
  2. Deterministic mask. A Mulberry32 PRNG is seeded with (seed, activationCount, dropoutRate) so the same inputs always render the same picture. The dropoutRate is bucketed to three decimals so floating-point jitter from the slider doesn't roll a fresh mask on every pixel.
  3. Toggle disables the mask. When enabled is false, the component short-circuits the mask and renders every cell active — the "no dropout" baseline. When true, the mask is applied; flipping the toggle reads as a clean before/after.
  4. Slider gates on enabled. The dropoutRate slider is disabled when dropout is off — there's nothing to vary, so the control reads as inert rather than misleadingly live.
  5. SPRINGS.smooth on cell opacity. Cell opacity rides a smooth spring from @craft-bits/core/motion between active and dropped states. prefers-reduced-motion: reduce collapses every spring to an instant swap.
  6. Controlled + uncontrolled. Both dropoutRate and enabled follow the Radix value / defaultValue pattern, so the component can be driven by your state or own its own.

Props

PropTypeDefaultDescription
activationCountnumber16Number of neuron cells in the row. Clamped to [2, 64].
dropoutRatenumber—Controlled rate in [0, 1]. Pair with onDropoutRateChange.
defaultDropoutRatenumber0.5Uncontrolled initial dropout rate.
onDropoutRateChange(rate) => void—Fires when the rate changes.
enabledboolean—Controlled dropout on/off. Pair with onEnabledChange.
defaultEnabledbooleantrueUncontrolled initial enabled state.
onEnabledChange(enabled) => void—Fires when the toggle flips.
seednumber1PRNG seed; combined with rate + count to roll the mask.
transitionTransitionSPRINGS.smoothSpring for cell opacity transitions.
classNamestring—Merged onto the root <div> via cn().

Accessibility

  • The figure is role="figure" with aria-labelledby naming the chart "Dropout toggle."
  • An aria-live="polite" summary above the row announces whether dropout is on, the current rate, and the kept / total count whenever any input changes.
  • The toggle button uses aria-pressed; its label flips between "Turn dropout on" and "Turn dropout off" so screen readers narrate the action.
  • Dropped cells carry a diagonal strike — dropout is signalled by both colour and shape, never colour alone.
  • The dropout-rate slider is a LabeledSlider (a native <input type="range"> underneath) with an explicit label; arrow keys nudge the value, screen readers narrate it. The slider is disabled when dropout is off so the inert state is announced.
  • prefers-reduced-motion: reduce collapses every cell transition to an instant swap.

Credits

  • Extracted from: craftingattention (app/src/lessons/primitives/viz/DropoutToggle.tsx). The source was a 3-layer 4 → 6 → 4 neural-network visual driven by a ModeStrip toggle between an "explore" mode (slider, Drop! / Redraw buttons, training-to-inference TogglePill) and a 6-round usePredictRounds quiz, with a heuristic narration panel (ChallengeBtn, FeedbackBadge, ScoreDots, DoneCard), inline xorshift mask generator advanced by a seedRef, 1/(1−p) scaling labels rendered with SvgLabel, and raw --color-accent-* / --color-ink-* / --color-fail-* CSS vars. The library version drops the quiz mode, the multi-layer architecture, the scaling-factor overlay, the heuristic narration, the inference toggle, and all source-project chrome (ModeStrip, ChallengeBtn, TogglePill, SvgLabel). Reframed as the single-pass primitive every dropout lesson actually needs: one row of activationCount cells, one on/off toggle for the mask, one slider for the rate. Replaced xorshift with the library-standard Mulberry32 seeded by (seed, rate, count) so the picture is hydration-safe; replaced the raw range input with LabeledSlider; switched all colour to --cb-* tokens; added a diagonal strike for colour-blind safety; and exposed Radix controlled / uncontrolled pairs for dropoutRate and enabled. Sits in ML Viz → Regularization as the before/after companion to DropoutEnsembleViz.