An interactive web application that visualizes how OpenAI's language models generate text token by token. It surfaces the probability distribution of possible tokens at each step of the generation process, and lets you either watch the model's choices play out or steer the generation by picking alternative tokens yourself.
- Real-time visualization of token-by-token text generation
- Display of token probabilities with visual probability bars
- Two playback modes:
- Auto Play — automatically plays through the model's chosen tokens
- Step by Step — manually reveal the model's choice, or click an alternative token to branch the generation
- Configurable parameters:
- Temperature
- Top logprobs count
- Maximum completion tokens
- Support for multiple OpenAI models (GPT-3.5 Turbo, GPT-4, GPT-4 Turbo, GPT-4o, GPT-4o mini)
- Raw API response inspection and request history
- API key stored locally in
localStorage - Two visual themes — a "Serious" mode for normal use and a "Thanksgiving" mode left over from the hack day this project started as. Toggle in the top-right; your choice is remembered.
This project began as a Thanksgiving hack day experiment, which is why it ships with a turkey-flavoured alter-ego.
- Serious — restrained gray/blue/green palette, plain "Generated Text" output, "Auto Play" / "Step by Step" labels. Use this when you want to show the tool to other people without explaining why there is a parade.
- 🦃 Thanksgiving — amber/orange palette, "Token Turkey" header, parade-style animated token output with floating leaves and bouncing emojis along the bottom, "Auto Feast" / "Step by Step Recipe" labels, and a curated Thanksgiving prompt dropdown.
Thanksgiving mode
The theme defaults to Thanksgiving and is persisted to localStorage under the theme_mode key.
- Node.js (v18 or higher recommended)
- An OpenAI API key with access to the chat completions endpoint
-
Clone the repository:
git clone https://github.com/guardian/logprobs.git cd logprobs -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open the app in your browser, paste your OpenAI API key into the configuration section, and start generating.
npm run build— type-check and build a production bundlenpm run preview— preview the built bundle locallynpm run lint— run ESLint
- Pick a theme in the top-right (Serious or Thanksgiving).
- Enter your OpenAI API key in the configuration section.
- Choose your desired model and adjust generation parameters (temperature, top logprobs, max completion tokens).
- Enter a prompt — or, in Thanksgiving mode, pick one from the dropdown.
- Click Generate New Tokens.
- Use the playback controls to step through the generation:
- Auto mode: click Play / Pause to control automatic playback.
- Step mode: click Reveal Model's Choice to see what the model picked, or click a different token in the right-hand list to branch the generation along an alternative path.