Project 02, AI in the browser

Image Classifier

Drop in a photo and a vision model names what it sees, with a confidence score for each guess. The picture never leaves your computer.

Runs on: Your CPU (WebAssembly)
Model: ViT base, ImageNet 1000 classes
First download: About 88 MB
Your browser: Checking

Classify a photo

The first run downloads the model (about 88 MB). After that it is instant.

Drop an image here
or click to choose one. You can also paste.

Or pick a sample:

Your image shows here

Waiting for an image

How it works

Load the pipelineTransformers.js downloads the quantized ViT model once and keeps it in the browser cache.
Prepare the imageThe image is resized to 224 by 224 pixels and turned into numbers the model understands.
Rank the labelsThe model scores all 1000 ImageNet labels and the page shows the five highest.

import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";

// 1. Create the classifier (downloads the model once)
const classify = await pipeline("image-classification", "Xenova/vit-base-patch16-224");

// 2. Give it an image URL, a blob URL or a canvas
const results = await classify("tiger.jpg", { top_k: 5 });

// 3. [{ label: "tiger, Panthera tigris", score: 0.94 }, ...]
console.table(results);