Many people think AI needs advanced maths and stop before they start. The truth is kinder. To use and build with AI tools you need only a handful of ideas, and each one can be explained with a picture or a small example. In this lesson you will learn five of them: vectors, similarity, averages and spread, probability, and learning by taking small steps downhill. At the end you will build a page in the lab where you can play with each idea and see the numbers change.
If maths felt hard at school, relax. We use no hard formulas. Every formula in this lesson is only a few symbols, and the code in the lab does all the calculation for you. What matters is the meaning behind the numbers.
Idea 1: a vector is a list of numbers
A vector is just a list of numbers in a fixed order. A person’s profile can be a vector: [years of experience, number of skills, expected salary]. Someone with 3 years, 5 skills and a 40 thousand salary is the vector [3, 5, 40]. Once things are lists of numbers, a computer can compare, add and measure them.
This idea is everywhere in AI. When a model reads a word or a sentence, it first turns it into a long vector, sometimes with thousands of numbers. We call that an embedding, and you will meet it again in later courses. For now, remember this: AI does not see words or pictures. It sees lists of numbers.
Idea 2: similarity, or how close are two vectors?
If two things are lists of numbers, we can ask how similar they are. One popular answer is cosine similarity. Imagine each vector as an arrow starting from the same point. If two arrows point in nearly the same direction, the things are similar. If they point in completely different directions, they are not. Cosine similarity gives a number from -1 to 1. A value close to 1 means the arrows point the same way. A value near 0 means they are unrelated. A value close to -1 means they point in opposite ways.
Example: take A = [1, 2, 3] and B = [2, 4, 6]. B is just A doubled, so the arrows point in exactly the same direction and the similarity is 1. Now take A = [1, 0] and B = [0, 1]. They point at right angles, and the similarity is 0. Notice that cosine similarity ignores length and cares only about direction. That is useful for text, because a long document and a short document about the same topic should still count as similar.
The calculation uses two small helpers. The dot product multiplies the numbers in the same positions and adds the results: for [1, 2, 3] and [2, 4, 6] it is 1×2 + 2×4 + 3×6 = 28. The norm is the length of an arrow: the square root of the vector’s dot product with itself. Cosine similarity is the dot product divided by the two lengths multiplied together.
Idea 3: averages and spread
The mean is the average: add the numbers and divide by how many there are. If five candidates ask for 20, 22, 25, 24 and 60 thousand, the mean is 30.2 thousand. But look: four of the five asked for 25 or less. One large number pulled the average up. This is why you should always check the spread as well as the mean.
The standard deviation measures spread. A small value means the numbers are close together. A large value means they are scattered. In AI we use the mean and spread constantly: to check whether data looks normal, to scale numbers so that big ones do not dominate, and to measure how stable a result is. If a model’s accuracy is 90 percent on one test and 70 percent on another, a high spread tells you that you cannot trust a single number.
Idea 4: probability and softmax
Probability is a number between 0 and 1 that tells you how likely something is. 0 means it never happens, 1 means it always does, and 0.25 means one time in four. The probabilities of all possible outcomes must add up to 1.
Models usually do not start with probabilities. They start with raw scores, which can be any number, positive or negative. To turn scores into probabilities we use a function called softmax. It makes every score positive (by using the exponential), then divides each by the total so that everything adds up to 1. A higher score always gets a higher probability, and the gap grows quickly. With the scores [2, 1, 0] the probabilities are about 0.66, 0.24 and 0.09.
Softmax matters because language models choose the next word with it. For every possible next token, the model produces a score, and softmax turns the scores into probabilities. Lesson 6 shows how settings like temperature change this step.
Idea 5: learning is walking downhill
How does a model learn? Picture yourself standing on a hill in thick fog. You cannot see the valley, but you can feel the slope under your feet. A simple plan works: take a small step in the direction that goes downhill, feel the slope again, and repeat. After many steps you reach the bottom.
In machine learning, the “height” of the hill is the error, how wrong the model is. The “position” is the model’s set of numbers, called weights or parameters. The gradient is the slope: it tells the model which way to change each weight to reduce the error. The learning rate is the size of your step. If the steps are too small, learning takes forever. If they are too big, you jump over the valley and may never settle. Training a large language model is this same idea repeated billions of times, with billions of weights.
Your task: a playground for the five ideas
Build a page called Maths that lets you play with each idea. You will write four small functions and one page that uses them.
What you will build
- Functions for the dot product, the norm and cosine similarity, plus the mean and the standard deviation.
- A softmax function that turns any list of scores into probabilities that add up to 1.
- A gradient step function that moves a number downhill on a simple curve, so you can watch it converge.
- An Angular page with four small cards: vectors, averages, softmax and learning.
Steps
- Create src/app/lib/math.ts. Write parseVector, which turns a text like “1, 2, 3” into [1, 2, 3] and ignores anything that is not a number.
- Write dot, norm and cosine. In cosine, return 0 when either vector has length 0 so that you never divide by zero.
- Write mean and stdDev. For the standard deviation, take the average of the squared distances from the mean, then the square root.
- Write softmax. Subtract the largest score from every score first. This does not change the result, but it keeps the exponentials from becoming huge numbers.
- Write gradientSteps(start, target, rate, steps) for the curve y = (x - target)². The slope at x is 2 × (x - target). Move x by -rate × slope at every step and keep the path.
- Build src/app/pages/vectors.ts with inputs for two vectors, a list of numbers, a list of scores, and sliders for the target and the step size. Show the results and the path of the learning steps.
Hints
- For two vectors of different length, treat missing numbers as 0.
- Try the scores [2, 1, 0] and then [20, 10, 0]. Watch how the biggest score takes almost everything.
- Try a step size of 0.1, then 0.9, then 1.1. At 1.1 the walk jumps further away each time. This is called divergence.
- Add an extreme number such as 500 to your list of salaries and watch the mean move more than the middle value does.
You know it works when cosine of [1, 2, 3] and [2, 4, 6] shows 1, softmax of any list adds up to 1, the standard deviation of identical numbers is 0, and the learning path reaches the target with a small step size but blows up with a very large one.
Solution
These are the new files in the solution zip. First the maths functions. Each one is only a few lines:
// The small amount of maths that appears again and again in AI.
export const parseVector = (text: string): number[] =>
text.split(/[,\s]+/).filter(Boolean).map(Number).filter((n) => Number.isFinite(n));
export const dot = (a: number[], b: number[]) => a.reduce((sum, x, i) => sum + x * (b[i] ?? 0), 0);
export const norm = (a: number[]) => Math.sqrt(dot(a, a)); // the length of the vector
// 1 = same direction, 0 = unrelated (at right angles), -1 = opposite.
export function cosine(a: number[], b: number[]) {
const d = norm(a) * norm(b);
return d === 0 ? 0 : dot(a, b) / d;
}
export const mean = (xs: number[]) => (xs.length ? xs.reduce((s, x) => s + x, 0) / xs.length : 0);
export function stdDev(xs: number[]) {
const m = mean(xs);
return xs.length ? Math.sqrt(mean(xs.map((x) => (x - m) ** 2))) : 0; // how spread out the numbers are
}
// Turns any list of scores into probabilities that add up to 1.
export function softmax(xs: number[]) {
if (!xs.length) return [];
const max = Math.max(...xs); // subtracting the max keeps the numbers from getting too big
const exps = xs.map((x) => Math.exp(x - max));
const sum = exps.reduce((s, x) => s + x, 0);
return exps.map((e) => e / sum);
}
// One step of "learning": move a number a little downhill on y = (x - target)^2.
export function gradientSteps(start: number, target: number, rate: number, steps: number) {
const path = [start];
let x = start;
for (let i = 0; i < steps; i++) {
x -= rate * 2 * (x - target); // 2 * (x - target) is the slope of the curve at x
path.push(x);
}
return path;
}Then the page that lets you play with them:
import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { cosine, dot, gradientSteps, mean, norm, parseVector, softmax, stdDev } from '../lib/math';
@Component({
selector: 'app-vectors',
imports: [FormsModule],
template: `
<h1>The maths of AI, one number at a time</h1>
<p class="hint">Change any box and every result updates. Try to predict the answer before you look.</p>
<div class="card">
<h2>Vectors and similarity</h2>
<div class="grid2">
<div><label for="a">Vector A</label><input id="a" [ngModel]="a()" (ngModelChange)="a.set($event)" /></div>
<div><label for="b">Vector B</label><input id="b" [ngModel]="b()" (ngModelChange)="b.set($event)" /></div>
</div>
<table><tbody>
<tr><td>Length of A</td><td>{{ norm(va()).toFixed(3) }}</td></tr>
<tr><td>Dot product A . B</td><td>{{ dot(va(), vb()).toFixed(3) }}</td></tr>
<tr><td>Cosine similarity</td><td><strong>{{ cosine(va(), vb()).toFixed(3) }}</strong></td></tr>
</tbody></table>
<p class="muted">Try A = 1, 2 and B = 2, 4 (same direction), then B = 2, -1 (right angle), then B = -1, -2 (opposite).</p>
</div>
<div class="card">
<h2>Averages and spread</h2>
<label for="n">Numbers (for example monthly salaries or response times)</label>
<input id="n" [ngModel]="nums()" (ngModelChange)="nums.set($event)" />
<table><tbody>
<tr><td>Average</td><td>{{ mean(vn()).toFixed(2) }}</td></tr>
<tr><td>Standard deviation (spread)</td><td>{{ stdDev(vn()).toFixed(2) }}</td></tr>
</tbody></table>
</div>
<div class="card">
<h2>Softmax: scores to probabilities</h2>
<label for="s">Scores</label>
<input id="s" [ngModel]="scores()" (ngModelChange)="scores.set($event)" />
<table><tbody>
@for (p of probs(); track $index) {
<tr><td>Score {{ vs()[$index] }}</td><td>{{ (p * 100).toFixed(1) }}%</td></tr>
}
</tbody></table>
<p class="muted">The probabilities always add up to 100%. Models use this to turn scores into a choice of the next word.</p>
</div>
<div class="card">
<h2>Learning is walking downhill</h2>
<div class="grid2">
<div><label for="r">Step size: {{ rate() }}</label><input id="r" type="range" min="0.01" max="1.05" step="0.01" [ngModel]="rate()" (ngModelChange)="rate.set(+$event)" /></div>
<div><label for="t">Target value: {{ target() }}</label><input id="t" type="range" min="-10" max="10" step="1" [ngModel]="target()" (ngModelChange)="target.set(+$event)" /></div>
</div>
<p>Start at 0, aim for {{ target() }}. After 8 steps: <strong>{{ path()[8].toFixed(3) }}</strong></p>
<p class="muted">Path: {{ pathText() }}</p>
<p class="muted">A tiny step crawls. A step of 0.5 lands on the target at once. A step above 1 overshoots more and more, and the number flies away.</p>
</div>
`,
})
export class VectorsPage {
a = signal('1, 2, 3');
b = signal('2, 4, 6');
nums = signal('25000, 27000, 26000, 90000, 24000');
scores = signal('2.0, 1.0, 0.1');
rate = signal(0.3);
target = signal(6);
va = computed(() => parseVector(this.a()));
vb = computed(() => parseVector(this.b()));
vn = computed(() => parseVector(this.nums()));
vs = computed(() => parseVector(this.scores()));
probs = computed(() => softmax(this.vs()));
path = computed(() => gradientSteps(0, this.target(), this.rate(), 8));
pathText = computed(() => this.path().map((x) => x.toFixed(2)).join(' → '));
dot = dot;
norm = norm;
cosine = cosine;
mean = mean;
stdDev = stdDev;
}What you learned
- A vector is a list of numbers. AI turns words, pictures and people into vectors.
- Cosine similarity measures how close the direction of two vectors is, from -1 to 1.
- The mean is the average; the standard deviation shows how scattered the numbers are. Always look at both.
- Softmax turns raw scores into probabilities that add up to 1.
- Learning means taking small steps downhill on an error curve. The learning rate is the step size.
In the next lesson you will use these ideas to train a model that learns from labelled examples, and you will see how it can fail by memorising instead of learning.