transformer explainer

The Problem

Understanding how transformer models like GPT-2 process text is typically abstract, requiring Python runtimes, PyTorch graphs, or paper-reading to grasp internal mechanics. This repo addresses that by providing an in-browser, interactive visualization that lets users type text and watch how attention, embeddings, and MLPs transform tokens in real time.

What This Does

The core is a Svelte-based UI (src/components/) that renders GPT-2 internals alongside a live model loaded from ONNX chunks in static/model-v2/. Components like Attention.svelte, AttentionMatrix.svelte, and QKV.svelte break down the query-key-value computation, while Mlp.svelte and LinearSoftmax.svelte visualize the feed-forward and softmax stages. State is managed via src/store/index.ts, and example prompts are defined in src/constants/examples/index.js. Styling is handled by Tailwind (tailwind.config.js, src/styles/), and the whole app is bootstrapped with Vite (vite.config.ts). Python utilities under src/utils/model/ (model.py, exporttoonnx.py, quantize.py) handle model conversion and chunking, but the runtime execution stays in the browser.

How To Use It

Setup git clone https://github.com/poloclub/transformer-explainer.git cd transformer-explainer npm install npm run dev

Per the README, this starts the Vite dev server at http://localhost:5173. No environment variables or secret keys are required;

What the analyser found

Deployment readiness

4/7

Container image
CI pipeline
Lockfile committed
Test suite
README
License
No committed secrets

Composition

166 files

Svelte50
TypeScript15
JavaScript10
Python4
JSON3
SCSS2

ReactSvelteTailwind

Module dependencies

The 10 most depended-upon modules of 25, from static import analysis. Red outline marks a module in an import cycle.

graph LR n0_tailwind_config["tailwind.config"] n1_src_utils_animation["animation"] n2_src_utils_array["array"] n3_src_utils_data["data"] n4_src_constants_gradient["gradient"] n5_src_store_index["index"] n6_src_utils_textbookPages["textbookPages"] n7__eslintrc[".eslintrc"] n8_postcss_config["postcss.config"] n9_src_constants_examples_index["index"] n4_src_constants_gradient --> n0_tailwind_config n5_src_store_index --> n0_tailwind_config n1_src_utils_animation --> n0_tailwind_config n3_src_utils_data --> n2_src_utils_array n3_src_utils_data --> n1_src_utils_animation n6_src_utils_textbookPages --> n1_src_utils_animation

Dependencies

19 of 39 declared dependencies are a major version behind. Resolved 39 of 39 against the registry.

Package	Declared	Latest	Behind
`@sveltejs/adapter-auto`	^3.2.0	7.0.1	4 major
`@sveltejs/vite-plugin-svelte`	^3.0.0	7.3.0	4 major
`vite`	^5.0.3	8.2.1	3 major
`bignumber.js`	^9.1.2	11.1.5	2 major
`eslint`	^8.56.0	10.8.1	2 major
`flowbite`	^2.3.0	4.0.2	2 major
`flowbite-svelte-icons`	^1.6.1	3.1.0	2 major
`typescript`	^5.0.0	7.0.2	2 major

Findings

MediumNo test files detected - untested code paths repository-wide
MediumNo CI/CD pipeline detected - no automated build/test gate .github/ or CI config