HomeMachine Learning & Neural NetworksContrastive Image-Text Embedding: How CLIP Learns to Match Pictures and Words

🖼️ Contrastive Image-Text Embedding: How CLIP Learns to Match Pictures and Words

Explore how CLIP-style contrastive learning maps images and captions into a shared vector space, teaching AI to recognise visual concepts it was never explicitly labelled on.

Machine Learning & Neural Networks3DModerate60 FPS
contrastive-image-text-embedding-lab ↗ Open standalone

A 3D scatter of image and text embedding vectors that reorganises in real time as contrastive training pulls matching image-caption pairs together and pushes mismatched pairs apart.

🔬 What It Demonstrates

A 3D scatter of image and text embedding vectors that reorganises in real time as contrastive training pulls matching image-caption pairs together and pushes mismatched pairs apart.

🎮 How to Use

Select a batch of image-caption pairs, then press play to step through training iterations and watch the vectors converge, or drag to rotate the embedding space and inspect distances yourself.

💡 Did You Know?

CLIP's original training set contained about 400 million image-text pairs harvested from the public internet, roughly 400 times larger than the labelled ImageNet dataset it was compared against.

⚙ Under the hood

Interactive 3D scatter of image and text embedding vectors that converge into matched clusters as contrastive CLIP-style training iterates.

contrastive-learningmultimodal-aiclipembedding-spaceimage-text-matchingzero-shot-learning

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)