Most machine learning explainers show diagrams. This one shows learning itself.

Every lesson is a live simulation where a real algorithm runs in your browser. You watch a model start out terrible, make mistakes, and slowly get good. Then you make it harder (add wind, block a path, change your habits) and watch it adapt.

It's written so a five-year-old can follow the story, while the "For grown-ups" section of every lesson names the real algorithms and the maths.

• 120 lessons: a starting lesson plus 22 chapters, in a syllabus order: from "what is machine learning?" up to language models, vision-language models, diffusion, video, the wider world of AI, data, forecasting, agents, AI ethics, ensembles, generative models, graphs, robotics, optimisation and probability.
• Everything is interactive. Drag, draw, drive, kick, break things.
• Every model is open. A built-in Model X-ray shows which signals a trained model pays attention to, the rules it discovered, a decision map, and a what-if lab.
• Real learning, no fakes. Q-learning, neuroevolution, backpropagation, k-means, PCA, DBSCAN, dropout, decision trees, ant colony optimisation, diffusion with guidance, optical flow, FFT pitch detection, CLIP and more all run live.
• Learning plans. Guided paths ("First hour of ML", "How ChatGPT works", "Games that learn"...) with progress tracking, plus ready-to-teach classroom plans with warm-ups, discussion questions and exit tickets. See plans.html.
• Nothing downloads by default. Lessons that need a big pretrained model show a button that tells you the size first.

Every lesson follows the same pattern, inspired by watching a self-driving car learn:

What is machine learning, and how is it different from normal programs?

• 0.1 What is Machine Learning? — Teach Robo a secret rule just by showing examples. Watch its guesses go from random to right, one example at a time.

Supervised learning: every example comes with the right answer.

• 1.1 Line Fitter — Linear regression: hotter days, more ice-cream. Watch a line wiggle step by step until it fits the dots best.
• 1.2 Nearest Neighbours — Drop apples and lemons on the table. To guess a new fruit, Robo asks its closest neighbours and lets them vote.
• 1.3 Twenty Questions Trees — Decision trees and random forests: watch a tree ask yes/no questions one by one, then plant a whole forest that votes.
• 1.4 Memoriser vs Learner — Slide a wiggle knob and watch a model go from too simple, to just right, to memorising every dot. Why does a perfect score on the examples fail on new ones?
• 1.5 Train vs Test — Hide some examples, teach the model with the rest, then grade it on the ones it never saw. See why a model must be tested on new things.
• 1.6 Spam Filter — Teach a robot to spot spam. Mark messages as spam or fine and watch it learn which words are suspicious.
• 1.7 Right or Wrong? — A robot that is 99% accurate can still be useless. Meet false alarms and misses, and see why one number is never the whole story.

Unsupervised learning: spotting patterns with no answers given.

• 2.1 Pizza Shop Planner — Where should the pizza shops go so every house gets pizza fast? Watch k-means move the shops step by step.
• 2.2 Movie Recommender — People like you also liked... Rate a few movies and watch the model find your taste twins and suggest what to watch next.
• 2.3 Squash to See — Lots of numbers are hard to picture. Spin a cloud of dots and find the best shadow to cast, so the most spread-out direction shows up flat on the page.
• 2.4 Crowds and Loners — Some groups are not round blobs. Let Robo find crowds by how packed the dots are, and spot the loners who belong to no crowd at all.

Pretend brains made of tiny number-switches.

• 3.1 Meet One Neuron — One tiny brain cell decides: go outside or stay in? Wiggle its knobs, then watch it learn from example days.
• 3.2 Brain Painter — Put red and blue dots anywhere. A little brain learns to paint the map so every dot sits on its own colour.
• 3.3 Self-Driving Car — Hundreds of baby cars learn to drive through traffic, round after round. Or drive yourself and let a car copy you!
• 3.4 Learning Rate Race — A ball rolls downhill to find the lowest spot. Too slow, too wild, or just right? Race different step sizes and add momentum.
• 3.5 Backprop, Step by Step — Follow one tiny network as it guesses, sees how wrong it was, and sends the blame backwards to fix each weight.
• 3.6 Why Brains Need a Bend — A network with no bend can only draw straight lines. Switch on a bend and watch it paint curvy shapes.
• 3.7 Forgetful on Purpose — A brain that memorises every dot fails on new ones. Make some brain cells nap at random during practice and watch it learn the real pattern instead.

Learning by trying, with rewards and oopsies.

• 4.1 Mouse Finds Cheese — A little mouse explores a maze. Cheese is yummy, traps are ouchy. Watch it build a map of good moves.
• 4.2 Balance the Pole — Keep a wobbly pole standing on a cart. Try it yourself, then watch Robo go from flop to pro.
• 4.3 Bird Learns to Fly — Tap to flap through the pipes. Then watch Robo crash, crash, crash… and then fly forever.
• 4.4 Snake Learns to Eat — A hungry snake learns to chase food and not bite its own tail, one game at a time.
• 4.5 Lucky Slot Machines — Which slot machine pays best? Keep pulling the one you like, or try a new one? Watch Robo balance exploring and cashing in.
• 4.6 Reward Hacking — Tell a robot what to win and it may find a silly shortcut. Write the reward, watch it cheat, then fix the rule.

Teaching computers to see.

• 5.1 Robot Eyes — Zoom in until a picture becomes numbers. Then try the magic glasses (filters) robots use to find edges.
• 5.2 Teach the Camera — Show your camera a few things. It learns to tell them apart in seconds, and gets surer with every example.
• 5.3 What Is It? — Point your camera at stuff or draw something. A brain trained on a million pictures tells you what it sees, and where it looked.
• 5.4 Pattern Scanners — A tiny window slides over a picture looking for a pattern. Watch a robot learn its own scanner, the idea behind CNNs, to spot stripes and corners.
• 5.5 Draw the Box — Find things in a picture and draw a box around each one. Watch a model learn where objects are, not just what they are.

Guessing the next word, really, really well.

• 6.1 Word Chopper — Computers chop sentences into little pieces called tokens and turn each one into a number. Type and see!
• 6.2 Robo Follows Instructions — Give Robo word-blocks like "go to the blue star". Watch it learn which words to pay attention to, until it obeys every time.
• 6.3 Puppy Trainer (RLHF) — Pick which puppy trick earns a treat. A treat predictor learns your taste, then the puppy practises until it does what you love.
• 6.4 Word Map — Words become points on a map where friends sit close together. Watch a model learn the map, then try word maths: king minus man plus woman.
• 6.5 Where to Look — When a model reads a sentence, which words does it look at? Watch attention light up the words that matter, and the model learn where to look.
• 6.6 Hot or Cold Words — A language model gives every next word a chance. Turn the temperature dial from cold and boring to hot and silly, and see how it picks.

Models that can see pictures and talk about them.

• 7.1 Words ↔ Pictures — Draw or show a picture and type some words. Watch a real model turn both into numbers and find the best match.
• 7.2 Picture Talker — A model looks at your picture and writes what it sees, one word at a time.
• 7.3 Ask the Picture — Chop a picture into puzzle pieces, ask a question, and watch a tiny model look at the right pieces to answer. Trained live, nothing to download.

Diffusion models: making pictures by cleaning up static.

• 8.1 Watch a Diffusion Model Learn — Pick a shape. A little model practises un-fuzzing it, and you watch its drawings go from fog to a perfect shape.
• 8.2 Fuzz & Un-Fuzz — Draw a little picture, fuzz it into static, then watch it get cleaned up frame by frame.
• 8.3 Forger vs Detective — Two models compete: a forger makes fake pictures and a detective tries to catch them. Watch both get better.
• 8.4 Steer the Drawing — A diffusion model makes dots from static. Tell it which shape you want and turn up the steering knob: too little and it ignores you, too much and it goes weird.

Teaching computers to hear and to make music.

• 9.1 Teach the Ear — See your voice as a picture, then teach the computer to tell claps, whistles and hums apart.
• 9.2 Tune Finisher — Play a few notes on the piano. Robo learns from tunes and finishes your song, note by note.
• 9.3 Find the Note — Play a sound and turn it into a rainbow of frequencies. Watch Robo find the note, even with buzzing noise and missing notes.

Making movies by predicting the next frame.

• 10.1 Next-Frame Dreamer — A little model watches a bouncing ball and learns physics by itself. Then it dreams up its own videos.
• 10.2 Spot the Motion — Compare two video frames block by block and draw little arrows where things moved. That is how computers see motion.
• 10.3 In-Between Frames — Make a smooth slow-motion video from two frames. Simple fading gives ghosts; following the motion arrows gives smooth in-between frames.

The bigger picture: machines that sense, think and act. Not all AI learns!

• 11.1 Robot Vacuum: Rules or Learning? — A robot vacuum senses, thinks and acts. Give it hand-written rules, or let it learn, and watch which one cleans better when the room changes.
• 11.2 Pathfinder — How does a map app find the best route? Watch smart search (A*) explore a map next to blind search, and see how many fewer steps it needs.
• 11.3 The Thinking-Ahead Game — Play tic-tac-toe against an AI that imagines every possible future. See its thinking tree, and try (and fail) to beat it.
• 11.4 Chess vs the AI — Play real chess against an AI that imagines moves and replies. Change how far ahead it looks and see the moves it considered.
• 11.5 Mind Reader — Think of an animal. An AI asks yes/no questions and guesses it. See how it picks the best question, and why asking the right one matters.
• 11.6 Where AI Fails — AI can be confidently wrong. Spot the mistakes, see why they happen, and learn when not to trust it.
• 11.7 Your Data, Your Privacy — A model can remember things it was taught. See how secrets can leak out of training data and how to protect them.

Before a model can learn, the data has to be fit to learn from.

• 12.1 Tidy the Mess — A dog table full of blanks, typos and silly numbers. Clean it up and watch the robot's score shoot up.
• 12.2 Same Size, Fair Fight — Age goes to 80 but income goes to 200,000. See the robot ignore age, then make the sizes fair.
• 12.3 Pick the Clues — A puzzle no straight line can solve becomes easy with the right clue. Pick clues and beware of junk.
• 12.4 Who Did You Ask? — Ask only one neighbourhood and the robot fails everywhere else. Fix it by asking a varied crowd.

Numbers that change over time, and how to guess what comes next.

• 13.1 Smooth the Wiggles — Ice-cream sales bounce around. Average a few days and the real trend appears, but average too many and you arrive late.
• 13.2 Spot the Seasons — Find how long a pattern takes to repeat and watch the robot split sales into trend, season and noise.
• 13.3 Predict Tomorrow — Teach a robot to forecast from the past and see how its guesses get worse the further ahead it looks.
• 13.4 Spot the Odd One — Set an alarm line on a sensor and feel the trade-off between false alarms and missed problems.

AI that does not just answer: it plans, uses tools and remembers.

• 14.1 Think, Act, Look — Watch a helper think, use a tool, and look at the result, again and again. Then break a tool and see if it copes.
• 14.2 Pick the Right Tool — A helper has a calculator, a clock and a lookup table. Teach it which one each request needs.
• 14.3 A Small Backpack — A chat helper can only hold so many words. Shrink its backpack and see which memory trick still remembers.
• 14.4 Plan Before You Go — Grabbing the cheapest next step can lead to a dead end. Race a greedy robot against a planner, then break a step.

Making AI fair, understandable, honest and hard to trick.

• 15.1 Is It Fair? — A pretend club robot learned from unfair old decisions. Check how it treats two groups, then try to fix it.
• 15.2 Why Did It Say That? — Ask a cat-or-dog robot for its reasons, poke one clue at a time, and catch it using a silly shortcut.
• 15.3 How Sure Is Sure? — A robot says it is 95% sure. Is it really? Check its honesty, then teach it to say "I don't know".
• 15.4 Tricked by Words — A pretend assistant obeys orders hidden in an email. Try four defences against fake tricks (a safe simulation).

Many simple models, voting together, beat one clever model.

• 16.1 Wisdom of the Crowd — Guess the jellybeans with a crowd. One guess is wobbly, but the average of many lands close. Unless everyone leans the same way!
• 16.2 Vote of Many Trees — Give lots of little decision trees a shuffled copy of the data and let them vote. The vote is calmer than any one tree.
• 16.3 Learn from Mistakes — Tiny helpers make one cut each. Dots they get wrong grow bigger, so the next helper tries harder on them.
• 16.4 Bagging vs Boosting — Same noisy dots, two team styles. Turn up the wrong labels and see which team keeps its cool.
• 16.5 Chase the Leftovers — Gradient boosting: each new little tree learns only what the team still gets wrong. Watch the leftovers shrink and a wiggly curve appear.
• 16.6 The Careful Booster — The idea behind XGBoost. Race a wild booster against one with brakes, and see which copes better with noisy dots.
• 16.7 No Peeking, Snacks! — The idea behind CatBoost. Turn snack names into numbers without peeking at the answer, and catch a booster that fools itself.

Squeezing pictures into a few numbers, and making new ones from them.

• 17.1 Squeeze and Rebuild — Squeeze tiny pictures into a few numbers and watch a real neural network rebuild them. Tighter squeeze, blurrier picture.
• 17.2 Map of Pictures — A network arranges pictures on a map. Click anywhere to see what it draws there, and slide from one picture to another.
• 17.3 Make New Pictures — Pick random spots on the map and the network invents brand-new pictures. Too few rules gives junk, too many gives blur.
• 17.4 Spot the Stranger — A network that only knows one kind of picture rebuilds strangers badly. Slide the alarm line and catch them.

Things that are connected: friends, web pages and search results.

• 18.1 Friends of Friends — Dots are people and lines are friendships. Tap someone to see their friend group and who they might want to meet.
• 18.2 The Random Surfer — A surfer clicks random links around a tiny web. The pages she visits most are the important ones. Add links and try a cheat!
• 18.3 Search Engine — Search thirty tiny pages and see exactly which words pushed each result up the list.
• 18.4 Ask Your Neighbours — Only a few dots have name tags. Can a robot guess the rest by asking who each dot is connected to?

How machines move, sense and find their way.

• 19.1 Steady Hands (PID) — Tune three knobs, P, I and D, to keep a drone at the right height even when the wind blows.
• 19.2 Reach with Maths — Drag a target and watch a robot arm work out its joint angles with triangle maths. Spot the two ways to reach!
• 19.3 Trust Your Sensors — A jittery sensor and drifting wheels each get it wrong. A Kalman filter blends them into a much better guess.
• 19.4 Find a Way Around — Draw walls and grow a random tree of tries until it finds a path. Then race it against careful A*.

Finding the best answer when there are too many to check.

• 20.1 Evolve an Answer — Breed a crowd of scribbles, over and over, until a hidden picture appears. Nobody draws it!
• 20.2 Cool Down to Solve — Plan a short trip through 20 towns. A hot robot makes mistakes on purpose, then cools down and beats the greedy one.
• 20.3 Find the Best Knobs — A model has settings. Try them in a grid or at random, and learn why peeking at the final exam is cheating.
• 20.4 Swarm of Searchers — A flock hunts for the highest hill. Tune how stubborn and how social they are, and watch them find it or get trapped.

Being sensible about chance: beliefs, averages and what happens next.

• 21.1 Update Your Belief — A test says positive. Count 1000 dots to see how often that is a false alarm, then test again and watch your belief move.
• 21.2 Throw Darts to Find Pi — Throw random darts to discover pi, then beat the Monty Hall door puzzle by playing it 10,000 times.
• 21.3 Averages Get Bell-Shaped — Average numbers from a lumpy, lopsided source and watch a smooth bell curve appear. Then build a confidence interval.
• 21.4 Next State Please — A weather walker only remembers today. Edit its chances, see where it settles, then write sentences with a tiny next-word chain.

Games where the computer learns, gets better, and adapts when you make it harder.

• 22.1 Boat Crosses the River — Little boats learn to fight the river current and reach the dock. Then make the current stronger, add logs or a whirlpool!
• 22.2 Basketball Shooter — Robo throws, misses, and adjusts its aim until it sinks every shot. Then add wind or move the hoop!
• 22.3 Sailboat Beats the Wind — A sailboat can't sail straight into the wind. Watch it learn to zig-zag to the buoy, then shift the wind on it.
• 22.4 Goalie vs You — Take penalty kicks. The goalie learns your habits and starts saving them. Can you trick it?
• 22.5 Rocket Lander — Try landing a rocket gently. Then watch Robo learn it, even with wind, heavy gravity and a moving landing pad.
• 22.6 Creature Learns to Walk — Wobbly creatures made of sticks and muscles learn to walk. Add hills, ice or a heavy backpack!
• 22.7 Dino Runner — A herd of baby dinos learns when to jump and when to duck. Speed it up or turn the lights off!
• 22.8 Space Dodger — Little spaceships use radar to dodge asteroids and grab stars. Then start a meteor shower!
• 22.9 Robo Arm — Robot arms with muscles learn to pick up a cube at A and drop it on a pad at B. Watch the muscles bulge, then make the cube heavy or the muscles tired!
• 22.10 Delivery Drone — Like the drones that deliver medicine and parcels today. Little drones learn to hover, fly to a house and drop the package. Then add wind or a heavier box!
• 22.11 Ants Find the Best Path — Hundreds of ants leave smelly trails and find the shortest way to food. Block their path and watch them find a new one.
• 22.12 Auto-Parking — Little cars with distance sensors learn to steer into a bay and stop inside the lines. Then add parked neighbours, posts or a tight bay!
• 22.13 Lane Keeper — Little cars learn to follow a winding road and stay in their lane. Then add hairpin bends, rain or cones in the road!

There is no build step and no dependencies. It is plain HTML, CSS and JavaScript.

git clone https://github.com/nuhmanpk/explore-machine-learning.git
cd explore-machine-learning

# any static file server works
python3 -m http.server 8000

Then open http://localhost:8000.

To see the custom 404 page locally, use the included serve.py instead (it behaves like GitHub Pages):

python3 serve.py 8000

VS Code Live Server and python3 -m http.server show their own plain "Cannot GET" page, so they never show 404.html. GitHub Pages does.

Opening index.html straight from disk works for most lessons, but serve it over http:// for the ones that download pretrained models (Transformers.js and TensorFlow.js need it).

It is a static site, so any static host works. For GitHub Pages: Settings → Pages → Deploy from a branch → main / root.

The help sheet ("Stuck? Ask Robo") has a Live tab where visitors can wave at everyone else on the site. It works on plain GitHub Pages: messages travel through the free public relay ntfy.sh (WebSocket to receive, HTTPS POST to send), so there is no server to run.

Nobody can type. The words live in js/common.js; the wire only carries numbers (which message, which nickname). Because the relay topic is public, every incoming payload is strictly validated and anything else is dropped, so injected text can never appear on the page.

Most lessons train their own tiny models live in your browser, so nothing is downloaded. A few use real pretrained models and ask before downloading:

index.html          Home page: the course map
plans.html          Learning plans: guided paths + classroom plans
topic.html          Chapter page: explainer + words to know + lesson list
css/style.css       Shared design system (light/dark themes, game layout, X-ray)
js/catalog.js       The whole syllabus + the "Meet the model" text for each lesson
js/common.js        Page chrome: top bar, icons, mascot, lesson path, footer
js/xray.js          The shared Model X-ray
js/plans.js         Learning-plan data and rendering
demos/<id>.html     One page per lesson
demos/js/<id>.js    The lesson's UI and drawing
demos/js/<id>-core.js   The model and simulation (also runs in Node for testing)

Adding a lesson: add an entry to js/catalog.js (and a MODELS entry for its "Meet the model" card), then create demos/<id>.html and demos/js/<id>.js. The home page, chapter page, breadcrumbs, lesson numbers and next/previous links are all built from the catalog.

• Plain HTML, CSS and JavaScript. No framework, no bundler.
• Canvas for the simulations; inline SVG icons.
• Plain-JS implementations of Q-learning, neuroevolution, backpropagation, k-means, decision trees and random forests, ant colony optimisation, DDPM-style diffusion and more. Most simulation cores also run in Node, which is how the difficulty of each game was tuned.
• TensorFlow.js and Transformers.js for the few lessons that use real pretrained models.

• Radu Mariescu-Istodor's freeCodeCamp course Self-driving car with JavaScript inspired the car lesson.
• The interactive explainers from the Polo Club of Data Science (CNN Explainer, Diffusion Explainer, Transformer Explainer) inspired the idea of learning by touching a model. This course tries to be a gentler, more playful cousin.
• Karl Sims' Evolved Virtual Creatures (1994) and Keiwan's Evolution inspired the creature walker and the muscle-driven Robo Arm.

Ideas, bug reports and new lessons are welcome. Open an issue or a pull request. A good lesson lets people see the model get better, lets them break it with a challenge, and explains it so a child could follow.

Built by Nuhman PK.

If this helped you, a star on the repo goes a long way, and GPU credits help me build more.

Apache License