# gerard-payne/mini-gpt architecture

> Architecture diagram of the GitHub repository gerard-payne/mini-gpt, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gerard-payne/mini-gpt
- Repository: https://github.com/gerard-payne/mini-gpt

## Overview

MiniGPT-JS is an educational decoder-only transformer library with a browser demo. Its main workflow encodes corpus text, prepares next-token examples, trains a model, then generates and decodes text. The README also documents character and BPE tokenization, an alternate full-autograd model, and selectable browser compute backends. Demo wiring and some subsystem internals were not sampled, so only documented capabilities are shown without speculative implementation links.

Main entry points: [`src/train.js`](https://github.com/gerard-payne/mini-gpt/blob/main/src/train.js) (Training Utilities), [`src/model.js`](https://github.com/gerard-payne/mini-gpt/blob/main/src/model.js) (MiniGPT), [`src/utils.js`](https://github.com/gerard-payne/mini-gpt/blob/main/src/utils.js) (Math and Sampling), [`demo.html`](https://github.com/gerard-payne/mini-gpt/blob/main/demo.html) (Browser Demo)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_tokenization["Tokenization"]
  node_char["CharTokenizer<br/>[tokenizer.js]"]
  node_bpe["BPE Tokenizer<br/>[bpe_tokenizer.js]"]
end

subgraph group_learning["Training"]
  node_training["Training Utilities<br/>[train.js]"]
  node_optimizer["Adam and Gradients<br/>[autograd.js]"]
end

subgraph group_inference["Model and Inference"]
  node_model["MiniGPT<br/>[model.js]"]
  node_gradmodel["Autograd MiniGPT"]
  node_utilities["Math and Sampling<br/>[utils.js]"]
end

subgraph group_compute["Compute Backends"]
  node_webgl["WebGL Backend<br/>[webgl.js]"]
  node_webgpu["WebGPU Backend<br/>[webgpu.js]"]
end

node_learner(("Learner"))
node_corpus["Text Corpus"]
node_demo["Browser Demo<br/>[demo.html]"]
node_generated["Generated Text"]

node_learner -->|"provides text"| node_corpus
node_learner -->|"configures training"| node_training
node_corpus -->|"builds vocabulary"| node_char
node_corpus -->|"trains vocabulary"| node_bpe
node_training -->|"encodes data"| node_char
node_training -->|"trains model"| node_model
node_training -->|"evaluates model"| node_model
node_training -->|"samples batches"| node_utilities
node_model -->|"uses math"| node_utilities
node_model -->|"generates tokens"| node_generated
node_learner -->|"uses demo"| node_demo
node_demo -.->|"selects backend"| node_webgl
node_demo -.->|"selects backend"| node_webgpu
node_gradmodel -->|"uses gradients"| node_optimizer
node_gradmodel -->|"uses math"| node_utilities
node_optimizer -->|"uses operations"| node_utilities

click node_char "https://github.com/gerard-payne/mini-gpt/blob/main/src/tokenizer.js"
click node_bpe "https://github.com/gerard-payne/mini-gpt/blob/main/src/bpe_tokenizer.js"
click node_training "https://github.com/gerard-payne/mini-gpt/blob/main/src/train.js"
click node_optimizer "https://github.com/gerard-payne/mini-gpt/blob/main/src/autograd.js"
click node_model "https://github.com/gerard-payne/mini-gpt/blob/main/src/model.js"
click node_gradmodel "https://github.com/gerard-payne/mini-gpt/blob/main/src/model_with_autograd.js"
click node_utilities "https://github.com/gerard-payne/mini-gpt/blob/main/src/utils.js"
click node_demo "https://github.com/gerard-payne/mini-gpt/blob/main/demo.html"
click node_webgl "https://github.com/gerard-payne/mini-gpt/blob/main/src/webgl.js"
click node_webgpu "https://github.com/gerard-payne/mini-gpt/blob/main/src/webgpu.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_char,node_bpe,node_demo toneBlue
class node_training,node_optimizer toneAmber
class node_model,node_gradmodel,node_utilities toneMint
class node_webgl,node_webgpu toneRose
class node_learner,node_corpus,node_generated toneIndigo
```

## Components

### Tokenization

- [CharTokenizer](https://github.com/gerard-payne/mini-gpt/blob/main/src/tokenizer.js): `src/tokenizer.js`
- [BPE Tokenizer](https://github.com/gerard-payne/mini-gpt/blob/main/src/bpe_tokenizer.js): `src/bpe_tokenizer.js`

### Training

- [Training Utilities](https://github.com/gerard-payne/mini-gpt/blob/main/src/train.js): `src/train.js`
- [Adam and Gradients](https://github.com/gerard-payne/mini-gpt/blob/main/src/autograd.js): `src/autograd.js`

### Model and Inference

- [MiniGPT](https://github.com/gerard-payne/mini-gpt/blob/main/src/model.js): `src/model.js`
- [Autograd MiniGPT](https://github.com/gerard-payne/mini-gpt/blob/main/src/model_with_autograd.js): `src/model_with_autograd.js`
- [Math and Sampling](https://github.com/gerard-payne/mini-gpt/blob/main/src/utils.js): `src/utils.js`

### Compute Backends

- [WebGL Backend](https://github.com/gerard-payne/mini-gpt/blob/main/src/webgl.js): `src/webgl.js`
- [WebGPU Backend](https://github.com/gerard-payne/mini-gpt/blob/main/src/webgpu.js): `src/webgpu.js`

### Other components

- **Learner**
- **Text Corpus**
- [Browser Demo](https://github.com/gerard-payne/mini-gpt/blob/main/demo.html): `demo.html`
- **Generated Text**

## Connections

- Learner → Text Corpus: provides text
- Learner → Training Utilities: configures training
- Text Corpus → CharTokenizer: builds vocabulary
- Text Corpus → BPE Tokenizer: trains vocabulary
- Training Utilities → CharTokenizer: encodes data
- Training Utilities → MiniGPT: trains model
- Training Utilities → MiniGPT: evaluates model
- Training Utilities → Math and Sampling: samples batches
- MiniGPT → Math and Sampling: uses math
- MiniGPT → Generated Text: generates tokens
- Learner → Browser Demo: uses demo
- Browser Demo → WebGL Backend: selects backend
- Browser Demo → WebGPU Backend: selects backend
- Autograd MiniGPT → Adam and Gradients: uses gradients
- Autograd MiniGPT → Math and Sampling: uses math
- Adam and Gradients → Math and Sampling: uses operations