THE LEARNING LAB / CLIP
01 / THE DATAEvery number comes from the vectors

How CLIP learns.

THE CONTRASTIVE LOSS, STEP BY STEP

Start here

12 paired examples / a miniature datasetSame index = a positive pair

The image and caption at the same dataset index are a positive pair.

A toy model with computed gradients · Radford et al., 2021 ↗

Instructor controls

Settings apply to every calculation in the lesson.

Shortcuts: ← / → stages, Space play / pause, R reset. Controls and vector selection also work with the keyboard.

The math, at a glance

N matched pairs. Each row is one vector. All logs are natural.

NormalizeÎᵢ = Iᵢ / ‖Iᵢ‖₂   T̂ⱼ = Tⱼ / ‖Tⱼ‖₂

Cosine similaritySᵢⱼ = Îᵢᵀ T̂ⱼ

LogitsLᵢⱼ = Sᵢⱼ / τ

Across rows →Pᵢⱼ = exp(Lᵢⱼ) / ∑ₖ exp(Lᵢₖ)

Down columns ↓Qᵢⱼ = exp(Lᵢⱼ) / ∑ₖ exp(Lₖⱼ)

Image → Textℒᵢ→ₜ = −(1/N) ∑ᵢ log Pᵢᵢ

Text → Imageℒₜ→ᵢ = −(1/N) ∑ᵢ log Qᵢᵢ

Symmetric CLIP lossℒ = ½ (ℒᵢ→ₜ + ℒₜ→ᵢ)

Implementation uses exp(x − max(x)) for numerical stability. Extended precision displays eight decimal places; calculations always use full JavaScript floating-point precision.

Original CLIP code ↗