๐ŸŽ“ Interactive Learning

Watch Algorithms Come to Life

Not just tutorials โ€” living, breathing simulations that show you exactly how algorithms learn. Train a neural network in your browser. Watch Q-Learning explore a maze. See PPO clip its own updates. All 100% client-side, no sign-up, no server.

12 RL Tools
3 Learning Phases
100% Browser-Side

๐Ÿง  Reinforcement Learning Series

A complete journey from tabular methods to deep RL โ€” 12 interactive tools, each teaching one core concept.

๐Ÿ“Š

Tabular RL

Zero dependencies, pure JavaScript. Learn the foundations โ€” Bellman equations, TD learning, on-policy vs off-policy, Monte Carlo, and model-based planning.

EP 1 Q-Learning
๐Ÿง 

RL Grid World โ€” Q-Learning Visualizer

Watch AI learn in real-time! This interactive Reinforcement Learning demo shows a Q-Learning agent mastering a grid world โ€” from random exploration to optimal policy. Adjust hyperparameters, visualize Q-values and policy arrows, and see the learning curve. 100% browser-side, no sign-up. Perfect for learning RL.

Start Learning โ†’
EP 2 On vs Off-Policy
โš”๏ธ

SARSA vs Q-Learning โ€” Cliff Walking

Watch SARSA and Q-Learning learn side-by-side on the classic Cliff Walking benchmark! See on-policy vs off-policy RL diverge in real-time โ€” SARSA learns safe paths, Q-Learning learns optimal but risky paths. Adjust hyperparameters, compare learning curves, and understand the core difference in RL. 100% browser-side.

Start Learning โ†’
EP 3 Overestimation Bias
๐ŸŽฏ

Double Q-Learning โ€” Overestimation Bias Visualizer

See why Q-Learning overestimates Q-values and how Double Q-Learning fixes it! Watch Q-Learning, Double Q-Learning, and the exact optimal Q* (via Value Iteration) learn side-by-side on Cliff Walking. Real-time bias chart shows Q-Learning's systematic positive bias vs Double Q-Learning's unbiased estimates. 100% browser-side.

Start Learning โ†’
EP 4 Monte Carlo
๐Ÿƒ

Monte Carlo Blackjack โ€” Learn the Optimal Strategy

Watch Monte Carlo control learn the optimal Blackjack strategy from scratch! The agent plays thousands of hands per second, using first-visit MC to estimate Q-values. See the strategy table converge to the famous optimal Blackjack playbook. Compare with the known optimal policy. 100% browser-side, no server needed.

Start Learning โ†’
EP 5 Model-Based
๐Ÿงฉ

Dyna-Q โ€” Planning vs Direct RL Maze Race

Watch Dyna-Q learn a maze 10x faster than Q-Learning using "imagined" experience! After each real step, Dyna-Q replays N planning steps through a learned model. See the shortcut maze experiment: when the environment changes mid-training, Dyna-Q adapts in episodes, not dozens. 100% browser-side.

Start Learning โ†’
๐Ÿง 

Deep RL

Introduce TensorFlow.js. Replace Q-tables with neural networks. Experience replay, target networks, policy gradients, and the algorithms behind ChatGPT.

EP 6 DQN
๐Ÿค–

DQN CartPole โ€” Neural Network Learns to Balance

Watch a neural network learn to balance a pole on a cart โ€” right in your browser! This is Deep Q-Network (DQN) with TensorFlow.js: experience replay, target network, and ฮต-greedy exploration. See the AI go from random flailing to 500-step perfect balance in real-time. 100% browser-side, no server.

Start Learning โ†’
EP 7 Double & Dueling
โšก

Double & Dueling DQN โ€” Fixing DQN's Blind Spots

Three neural networks race on CartPole! Compare vanilla DQN vs Double DQN (decouples action selection from evaluation to fix overestimation) vs Dueling DQN (separates state value from action advantage). Watch Q-value estimates, training stability, and learning speed differ in real-time. TensorFlow.js, 100% browser-side.

Start Learning โ†’
EP 8 Policy Gradient
๐ŸŽฏ

REINFORCE โ€” Policy Gradient Learns from Full Episodes

Watch a neural network learn a policy directly โ€” no Q-values, no value function! REINFORCE (Monte Carlo Policy Gradient) is the purest form of policy-based RL. The agent plays full episodes, then updates its strategy using the policy gradient theorem: โˆ‡J = E[โˆ‡log ฯ€(a|s) ยท G]. See action probabilities shift in real-time as the AI learns. TensorFlow.js, 100% browser-side.

Start Learning โ†’
EP 9 Actor-Critic
๐ŸŽญ

A2C โ€” Actor-Critic with Advantage Baseline

REINFORCE has high variance. A2C fixes it by adding a Critic network that estimates V(s) as a baseline. The Actor now learns from the advantage A = G - V(s) โ€” "how much better was this action than expected?" Watch two agents train side by side: vanilla REINFORCE vs A2C with baseline. See the variance drop and training stabilize. TensorFlow.js, 100% browser-side.

Start Learning โ†’
EP 10 PPO-Clip
โœ‚๏ธ

PPO โ€” Proximal Policy Optimization (OpenAI's Default)

A2C throws away data after one update. PPO reuses it! By clipping the policy ratio r = ฯ€_new/ฯ€_old to [1-ฮต, 1+ฮต], PPO safely performs multiple epochs on the same batch โ€” getting more learning per episode without destabilizing. This is OpenAI's go-to algorithm (and the RLHF engine behind ChatGPT). Watch A2C vs PPO train side by side: PPO learns faster, more stably, and recovers from bad episodes. TensorFlow.js, 100% browser-side.

Start Learning โ†’

๐Ÿ’ก What You'll Learn

๐Ÿ“

Core RL Math

Bellman equations, TD learning, policy gradient theorem, maximum entropy framework โ€” not just formulas, but visible in action.

โšก

Algorithm Intuition

Why does Q-Learning overestimate? Why does REINFORCE have high variance? Why does PPO clip? See the problems before the solutions.

๐Ÿ”ง

Real Implementation

Experience replay buffers, target networks, reparameterization tricks, clipped surrogate losses โ€” all in readable JavaScript.

๐ŸŽฏ

Hyperparameter Feel

Adjust learning rates, epsilon schedules, clip ratios, entropy coefficients. Build intuition for what each knob actually does.

Ready to Watch AI Learn?

Start from Episode 1 โ€” no math degree required, just curiosity.

Start with Q-Learning โ†’