Interactive Machine Learning Sandbox

AI & ML Concept Simulations

Interact with core artificial intelligence algorithms running live in your browser. Visualize neural decision boundaries, transformer self-attention heatmaps, LLM temperature sampling, and K-Means clustering in real-time.

SIRL GridWorld Safe RL

2D Decision Boundary Space

Click canvas to add custom points. Orange = Class A (+1), Blue = Class B (-1)

Epoch: 0 Loss: 0.500

Ready to train

Click adds:

Dataset Pattern

Architecture & Hyperparameters

Hidden Layers: 2 Layers

Neurons per Layer: 6 Neurons

Activation:

Learning Rate (η):

How Backpropagation Works:

1. Forward Pass feeds $(x_1, x_2)$ coordinates through weighted layers to predict Class probability.
2. Loss calculates prediction error.
3. Backward Pass uses the chain rule of calculus to adjust every weight against the gradient ($\Delta W = -\eta \cdot \frac{\partial \mathcal{L}}{\partial W}$).

Transformer Self-Attention Matrix & Token Linking

Self-attention allows every word in a sentence to examine ("attend to") every other word to deduce contextual meaning. Hover over tokens below to see how attention weights dynamically connect related words.

Classic Examples:

Interactive Token Sequence (Hover over any token) Hovering: None

Softmax Attention Weight Matrix ($A = \text{softmax}(QK^T / \sqrt{d_k})$) Darker = Stronger Connection

The Q, K, V Triad Explained

Q (Query): What the current token is seeking (e.g. "What noun does 'it' refer to?").

K (Key): What identity/attributes each token advertises (e.g. "I am 'animal' (animate subject)").

V (Value): The actual semantic representation information transferred when a match occurs.

Attention(Q, K, V) = softmax(Q·Kᵀ / √d) · V

Why Scale by √d?

When embedding dimensions ($d$) are large, dot-products grow very large in magnitude, pushing the softmax function into regions with near-zero gradients. Scaling by $1/\sqrt{d}$ stabilizes backpropagation gradients!

LLM Next-Token Sampling & Temperature Simulator

Large Language Models don't produce text all at once; they calculate a probability distribution over the entire vocabulary for the next word. Adjust Temperature, Top-K, and Top-P below to see how generation behavior shifts from robotic certainty to wild creativity.

Current Text Prompt Sequence:

"The future of artificial intelligence in education will be"

Next-Token Candidate Distribution Green = Eligible | Gray = Filtered Out

Temperature (T): 0.70

0.0 (Greedy / Deterministic) 1.0 (Balanced) 2.0 (High Entropy / Creative)

Divides raw logits by $T$. Lower values sharpen the top choice to near 100%; higher values flatten the curve into random noise.

Top-K Cutoff: 5

Keeps only the top $K$ highest-probability tokens, instantly zeroing out the rest to prevent bizarre hallucinations.

Top-P (Nucleus Cumulative): 0.90

Dynamically samples only from the smallest set of tokens whose cumulative probability exceeds $P$.

K-Means Cluster Space

Click canvas to add custom 2D points

Iteration: 0 Status: Ready

Number of Clusters (K): 3 Clusters

K = 2 K = 3 K = 4 K = 5 K = 6

Live Centroid Coordinates

The Expectation-Maximization Loop

1. Assignment Step: Each data point finds the closest centroid using Euclidean distance: $d(x, c_k) = \sqrt{(x_1 - c_{k1})^2 + (x_2 - c_{k2})^2}$.
2. Update Step: Each centroid recalculates its position as the center-of-mass (mean) of all assigned points: $c_k = \frac{1}{|S_k|} \sum_{x \in S_k} x$.
3. Repeat until centroids cease to move (convergence)!