poloclub/transformer-explainer

★ 7,375JavaScriptAudience · generalComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Teach transformer internals
      Interactive browser tool
    Model inside
      GPT-2
      Runs in browser
      No server needed
    Features
      Custom text input
      Step by step view
      Token prediction
    Tech stack
      JavaScript
      Node.js
      NPM
    Related projects
      Diffusion explainer
      CNN explainer

mindmap root((repo)) What it does Teach transformer internals Interactive browser tool Model inside GPT-2 Runs in browser No server needed Features Custom text input Step by step view Token prediction Tech stack JavaScript Node.js NPM Related projects Diffusion explainer CNN explainer

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Learn how transformer AI models turn text into predictions by typing your own input and watching GPT-2 process it step by step in your browser.

USE CASE 2

Use the interactive visualization to teach students or colleagues what attention layers and token predictions look like inside a language model.

Tech stack

JavaScriptNode.jsNPMSvelte

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Transformer Explainer is an interactive website that teaches people how GPT-style AI language models work by letting them watch a real model run in their browser. Rather than reading a static explanation, visitors type their own text and see, step by step, how each internal part of the model processes it and arrives at a prediction for the next word. The model running inside the page is GPT-2, an earlier and smaller version of the architecture behind modern large language models, which is compact enough to run entirely in a web browser without sending data to a server. The tool was built by a research team at Georgia Tech and was presented as a poster at IEEE VIS 2024, a major conference on data visualization. It also has an accompanying academic paper on arXiv. The goal is educational: making the internals of transformer models visible and understandable to people who are curious but not necessarily working researchers. For anyone who wants to run it locally rather than using the hosted version, the setup requires Node.js and NPM, the standard JavaScript development tools. After cloning the repository and running a few install commands, the visualization is available at a local address in your browser. The same team has built similar interactive explainers for other types of AI models, including one for image-generating diffusion models, one for convolutional neural networks used in image recognition, and one for generative adversarial networks. Those are separate projects linked from the README. This repository covers only the transformer explainer. The software is released under the MIT license, meaning it can be freely used and adapted.

Copy-paste prompts

Prompt 1

I cloned the transformer-explainer repo. Walk me through npm install and starting the dev server so I can experiment with my own text inputs locally.

Prompt 2

I'm using transformer-explainer to teach a class on AI. Which parts of the visualization best show how attention heads work, and how should I walk students through a forward pass?

Prompt 3

How does transformer-explainer visualize the difference between the attention layer and the feed-forward layer inside each transformer block?

Open on GitHub → Explain another repo

← poloclub on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.