Sampling explainerPro

Live probability bars for the next token that reshape as temperature and top P change, with the top P cut marked and real samples drawn from the shape.

Markdown

On this page

ProDrag temperature and top P and watch the next token's chances reshape.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/sampling-explainer

Usage

tsx

import { SamplingExplainer } from "@/components/ui/chatcn/pro/sampling-explainer"

<SamplingExplainer
  context="The capital of Australia is"
  candidates={[{ token: " Canberra", logit: 8.2 }, { token: " Sydney", logit: 6.1 }]}
/>

Bars show each candidate's chance after temperature and top P; a tick marks where it started at temperature 1. Tokens top P removes sit below a marked line, struck through. The sentence above the bars says what the settings do in plain words, and Sample draws real tokens from the current shape with a fixed seed so results repeat.

The controls are the free model-parameters. sampleDistribution and entropyBits are exported from chatcn-pro-eval-a, with top K support for your own views.

Examples

States

ProTemperature 0 locked for a figure and a near even spread.

Props

Prop	Type	Notes
`context`	`string`	The text before the next token
`candidates`	`{ token, logit }[]`	Five to ten reads best
`value`, `defaultValue`	`{ temperature, topP }`	Controlled or not
`draws`	`number`	Samples per press. Default 20
`seed`	`number`	Default 7
`disabled`	`boolean`	Locks the controls for a fixed figure

Keyboard

Key	Action
Arrow keys on a slider	Change it; the bars jump without animating

Accessibility

The sliders are native range inputs with value text. Every bar has its percentage or the word Cut in text.
Sample results are a polite live region.

Motion

Dragging a slider reshapes the bars with a 150 ms transform transition that retargets mid flight. Keyboard changes skip it, and reduced motion removes it.