Transformer is a neural network architecture that has basically changed the method to Artificial Intelligence. Transformer was archetypal introduced in the seminal paper "Attention is All You Need" in 2017 and has since rotate into the go-to architecture for profound learning models, powering text-generative models akin OpenAI's GPT, Meta's Llama, and Google's Gemini. Beyond text, Transformer is additionally applied in audio generation, image recognition, protein construction prediction, and even game playing, demonstrating its versatility throughout many domains.
Fundamentally, text-generative Transformer models run on the regulation of next-token prediction: stated a content immediate from the user, what is the most probable next token (a term or part of a word) that volition prosecute this input? The core innovation and power of Transformers lie in their use of self-attention mechanism, which allows them to procedure complete sequences and grasp long-range requirements additional efficiently than previous architectures.
GPT-2 family of models are notable examples of text-generative Transformers. Transformer Explainer is powered by the GPT-2 (small) example which has 124 myriad parameters. While it is not the latest or most mighty Transformer model, it shares many of the identical architectural components and principles established in the current state-of-the-art models making it an ideal starting item for understanding the basics.
Every text-generative Transformer consists of these three key components:
- Embedding: Text input is divided into smaller units called tokens, which can be words or subwords. These tokens are converted into numerical vectors called embeddings, which grasp the semantic definition of words.
- Transformer Block is the essential construction obstacle of the example that processes and transforms the input data. Each obstacle includes:
- Attention Mechanism, the center component of the Transformer block. It allows tokens to communicate alongside another tokens, capturing contextual data and relationships between words.
- MLP (Multilayer Perceptron) Layer, a feed-forward network that operates on all token independently. While the goal of the notice tier is to route information between tokens, the goal of the MLP is to refine all token's representation.
- Output Probabilities: The final linear and softmax layers change the processed embeddings into probabilities, enabling the example to make predictions concerning the next token in a sequence.
Embedding
Let's say you desire to create content using a Transformer model. You add the immediate akin this one: “Data visualization empowers users to”. This input needs to be converted into a format that the example can comprehend and process. That is anywhere embedding comes in: it transforms the content into a numerical depiction that the example can activity with. To change a prompt into embedding, we need to 1) tokenize the input, 2) get token embeddings, 3) add positional information, and eventually 4) add up token and stance encodings to get the final embedding. Let’s see how all of these steps is done.

Figure 1. Expanding the Embedding tier view, showing how the input immediate is converted to a vector representation. The procedure involves (1) Tokenization, (2) Token Embedding, (3) Positional Encoding, and (4) Final Embedding.
Step 1: Tokenization
Tokenization is the procedure of breaking downward the input content into smaller, additional manageable pieces called tokens. These tokens can be a term or a subword. The words "Data" and "visualization" equivalent to distinctive tokens, during the word "empowers" is divided into two tokens. The complete vocabulary of tokens is decided before training the model: GPT-2's vocabulary has 50,257 distinctive tokens. Now that we divided our input content into tokens alongside distinct IDs, we can get their vector depiction from embeddings.
Step 2. Token Embedding
GPT-2 (small) represents all token in the vocabulary as a 768-dimensional vector; the dimension of the vector depends on the model. These embedding vectors are stored in a matrix of form (50,257, 768), containing about 39 myriad parameters! This extensive matrix allows the example to allocate semantic definition to all token, in the sense that tokens alongside akin use or definition in tongue are placed near together in this high-dimensional space, during different tokens are farther apart.
Step 3. Positional Encoding
The Embedding tier additionally encodes data concerning all token's stance in the input prompt. Different models use assorted methods for positional encoding. GPT-2 trains its own positional encoding matrix from scratch, integrating it immediately into the training process.
Step 4. Final Embedding
Finally, we sum the token and positional encodings to get the final embedding representation. This blended depiction captures the two the semantic definition of the tokens and their stance in the input sequence.
Transformer Block
The center of the Transformer's handling lies in the Transformer block, which comprises multi-head self-attention and a Multi-Layer Perceptron layer. Most models comprise of multiple such blocks that are stacked sequentially one following the other. The token representations evolve through layers, from the archetypal obstacle to the final one, allowing the example to build up an intricate understanding of all token. This layered method leads to higher-order representations of the input. The GPT-2 (small) example we are examining consists of 12 specified blocks.
Multi-Head Self-Attention
The self-attention scheme enables the example to grasp relationships among tokens in a sequence, so that all token’s depiction is influenced by the others. Multiple attention heads authorize the example to regard these relationships from distinct perspectives; for example, one caput may grasp short-range syntactic links during another tracks broader semantic context. In the following section, we volition stroll through how multi-head self-attention is computed stage by step.
Step 1: Query, Key, and Value Matrices

QKVij=(∑d=1768Embeddingi,d⋅Weightsd,j)+Biasj QKV_{ij} = ( \sum_{d=1}^{768} \text{Embedding}_{i,d} \cdot \text{Weights}_{d,j}) + \text{Bias}_j
Figure 2. Computing Query, Key, and Value matrices from the original embedding.
Each token's embedding vector is transformed into three vectors: Query (Q), Key (K), and Value (V). These vectors are derived by multiplying the input embedding matrix alongside learned importance matrices for Q, K, and V. Here's a web hunt difference to assistance us build several intuition behind these matrices:
- Query (Q) is the hunt content you category in the search motor bar. This is the token you desire to "find additional data about".
- Key (K) is the heading of all web leaf in the search result window. It represents the imaginable tokens the query can act to.
- Value (V) is the genuine satisfied of web pages shown. Once we matched the suitable hunt term (Query) alongside the applicable results (Key), we want to get the satisfied (Value) of the most applicable pages.
By using these QKV values, the example can compute notice scores, which decide how much concentration all token should obtain whenever generating predictions.
Step 2: Multi-Head Splitting
Query, key, and Value vectors are divided into multiple heads—in GPT-2 (small)'s case, into 12 heads. Each caput processes a section of the embeddings independently, capturing different syntactic and semantic relationships. This scheme facilitates parallel learning of diverse linguistic features, enhancing the model's representational power.
Step 3: Masked Self-Attention
In all head, we execute masked self-attention calculations. This scheme allows the model to create sequences by focusing on applicable parts of the input during preventing admission to future tokens.

Figure 3. Using Query, Key, and Value matrices to calculate masked self-attention.
- Dot Product: The dot merchandise of Query and Key matrices determines the attention score, producing a quadrate matrix that reflects the relationship between all input tokens.
- Scaling · Mask: The notice scores are scaled and a disguise is applied to the high triangle of the notice matrix to forestall the example from accessing future tokens, environment these values to negative infinity. The example needs to study how to predict the next token without “peeking” into the future.
- Softmax · Dropout: After masking and scaling, the notice scores are converted into probabilities by the softmax operation, afterward optionally regularized with dropout. Each row of the matrix sums to one and indicates the relevance of all other token to the remaining of it.
Step 4: Output and Concatenation
The example uses the masked self-attention scores and multiplies them alongside the Value matrix to get the final output of the self-attention mechanism. GPT-2 has 12 self-attention heads, all capturing different relationships between tokens. The outputs of these heads are concatenated and passed through a linear projection.
MLP: Multi-Layer Perceptron

Figure 4. Using MLP tier to project the self-attention representations into higher dimensions to enhance the model's representational capacity.
After the multiple heads of self-attention grasp the varied relationships between the input tokens, the concatenated outputs are passed through the Multilayer Perceptron (MLP) tier to enhance the model's representational capacity. The MLP obstacle consists of two linear transformations alongside a GELU activation function in between.
The archetypal linear transformation expands the dimensionality of the input four-fold from 768 to 3072. This enlargement stage allows the example to project the token representations into a higher-dimensional space, anywhere it can grasp richer and additional complex patterns that may not be apparent in the first dimension.
The second linear transformation afterward reduces the dimensionality rear to the first size of 768.This compression stage brings the representations rear to a manageable size during retaining the helpful nonlinear transformations introduced in the enlargement step.
Unlike the self-attention mechanism, which integrates data throughout tokens, the MLP processes tokens independently and merely maps all token depiction from one area to another, enriching the general example capacity.
Output Probabilities
After the input has been processed through all Transformer blocks, the output is passed through the final linear tier to prepared it for token prediction. This tier projects the final representations into a 50,257 dimensional space, anywhere all token in the vocabulary has a corresponding value called logit. Any token can be the next word, so this procedure allows us to merely rank these tokens by their likelihood of being that next word. We afterward use the softmax function to change the logits into a probability allocation that sums to one. This volition authorize us to sample the next token according to its likelihood.

Figure 5. Each token in the vocabulary is assigned a probability according to the model's output logits. These probabilities decide the likelihood of all token being the next term in the sequence.
The final stage is to create the next token by sampling from this allocation The temperature hyperparameter plays a crucial function in this process. Mathematically speaking, it is a extremely simple operation: example output logits are merely divided by the temperature:
- temperature = 1: Dividing logits by one has no consequence on the softmax outputs.
- temperature < 1: Lower heat makes the example additional assured and deterministic by sharpening the probability distribution, foremost to additional predictable outputs.
- temperature > 1: Higher heat creates a softer probability distribution, allowing for additional randomness in the generated content – what several mention to as model “creativity”.
In addition, the sampling procedure can be additional refined using top-k and top-p parameters:
- top-k sampling: Limits the applicant tokens to the top k tokens alongside the highest probabilities, filtering out small apt options.
- top-p sampling: Considers the smallest set of tokens whose cumulative probability exceeds a threshold p, ensuring that lone the most apt tokens contribute while motionless allowing for diversity.
By tuning temperature, top-k, and top-p, you can balance between deterministic and varied outputs, tailoring the model's behavior to your specific needs.
Auxiliary Architectural Features
There are multiple auxiliary architectural features that enhance the achievement of Transformer models. While crucial for the model's general performance, they are not as crucial for understanding the center concepts of the architecture. Layer Normalization, Dropout, and Residual Connections are crucial components in Transformer models, particularly during the training phase. Layer Normalization stabilizes training and helps the example converge faster. Dropout prevents overfitting by randomly deactivating neurons. Residual Connections allows gradients to stream immediately through the network and helps to forestall the vanishing gradient problem.
Layer Normalization
Layer Normalization helps to stabilize the training procedure and improves convergence. It works by normalizing the inputs throughout the features, ensuring that the average and variance of the activations are consistent. This normalization helps mitigate issues connected to internal covariate shift, allowing the example to study additional efficiently and reducing the sensitivity to the first weights. Layer Normalization is applied twice in all Transformer block, once before the self-attention scheme and formerly before the MLP layer.
Dropout
Dropout is a regularization method used to forestall overfitting in neural networks by randomly environment a fraction of example weights to zero during training. This encourages the model to study additional sturdy features and reduces dependency on particular neurons, assisting the network generalize improved to new, unseen data. During example inference, dropout is deactivated. This basically method that we are using an ensemble of the trained subnetworks, which leads to a improved example performance.
Residual Connections
Residual connections were archetypal introduced in the ResNet example in 2015. This architectural innovation revolutionized profound learning by enabling the training of extremely profound neural networks. Essentially, residual connections are shortcuts that bypass one or additional layers, adding the input of a tier to its output. This helps mitigate the vanishing gradient problem, making it easier to train profound networks alongside multiple Transformer blocks stacked on top of all other. In GPT-2, residual connections are used twice inside all Transformer block: formerly before the MLP and formerly after, ensuring that gradients stream additional easily, and earlier layers obtain adequate updates during backpropagation.
Transformer Explainer is built to be interactive and allows you to examine the inner workings of the Transformer. Here are several of the interactive features you can perform with:
- Input your own content sequence to see how the example processes it and predicts the next word. Explore notice weights, intermediate computations, and see how the final output probabilities are calculated.
- Use heat slider to authority the randomness of the model’s predictions. Explore how you can create the example output additional deterministic or additional imaginative by changing the temperature value.
- Select top-k and top-p sampling methods to modify sampling behavior during inference. Experiment alongside distinct values and see how the probability allocation changes and influences the model's predictions.
- Interact alongside notice maps to see how the example focuses on distinct tokens in the input sequence. Hover complete tokens to emphasize their notice weights and examine how the example captures environment and relationships between words.
How is Transformer Explainer Implemented?
Transformer Explainer features a live GPT-2 (small) example operating immediately in the browser. This example is derived from the PyTorch implementation of GPT by Andrej Karpathy's nanoGPT project and has been converted to ONNX Runtime for seamless in-browser execution. The interface is built using JavaScript, with Svelte as a front-end example and D3.js for creating energetic visualizations. Numerical values are updated live following the person input.
Who developed the Transformer Explainer?
Transformer Explainer was created by Aeree Cho, Grace C. Kim, Alexander Karpekov, Alec Helbling, Jay Wang, Seongmin Lee, Benjamin Hoover, and Polo Chau at the Georgia Institute of Technology.