Draw & Classify — WhizzStep AI Lab

How Shape Classification Works

✏️

Draw Examples

The classifier needs labelled training examples — multiple drawings of each shape.

🔢

Extract Features

Each drawing is converted into numbers: pixel density, aspect ratio, symmetry, and more.

📏

Nearest Neighbour

For a new drawing, find the most similar training example by comparing feature vectors.

🏷️

Predict Label

The new drawing gets the same label as its closest training neighbour — that's the prediction!

✏️

Wizzy the AI Tutor

Let's collect training data! 🎨 Select a shape label, draw it on the canvas, then click "Save Example". Add at least 3 examples per shape — draw them differently each time (different sizes, positions) to make your classifier robust!

Step 1 — Draw Training Examples

0 examples

Select shape label:

Brush:

8px

📚 Training Examples

💡 Tips:
• Draw 3+ examples per shape
• Vary size and position
• Draw shapes with one stroke
• More examples = better accuracy!

✏️

Wizzy the AI Tutor

Look at your training data! Each drawing is stored as a small 28×28 pixel grid — just like MNIST, the famous handwritten digit dataset that trained countless AI models. The classifier extracts feature vectors from each drawing to compare them.

Step 2 — Your Training Dataset

These thumbnails are your training data — 28×28 pixel representations of each drawing:

✏️

Wizzy the AI Tutor

Draw any shape and see what the classifier predicts! The bars show confidence for each class. Watch how the nearest training example changes as you draw. Does the classifier get it right? Try drawing a shape it's never seen!

Step 3 — Test Your Classifier

Draw to classify

Brush:

8px

🤔

Draw a shape and click Classify

Most similar training example:

Classify a drawing first

🧪 Test Results

Tests run0

Correct0

Your accuracy—

✏️

Wizzy the AI Tutor

This is the feature extraction step — converting your drawing into numbers the AI can compare. We extract: pixel density, aspect ratio, symmetry, corner density, and stroke count. These form a feature vector — a fingerprint for each drawing!

Step 4 — Feature Extraction Visualised

Your last drawing:

Extracted feature vector:

Features are the numbers that represent your drawing to the AI. Two drawings of the same shape should have similar feature vectors!

28×28 downsampled grids (what the AI actually sees):

✏️

Wizzy the AI Tutor

🎊 You've built a real image classifier! You collected training data, extracted features, and used nearest-neighbour classification. This is the foundation of Google's image search, face recognition, medical image diagnosis, and every visual AI system!

✏️

Shape Classifier Badge!

You built a drawing classifier from scratch using feature extraction!

✏️ WhizzStep AI Lab

This certifies that

Student Name

has built a Drawing Classifier using Computer Vision

CV Engineer

Feature Extractor

Shape Classifier

whizzstep.in

Key Concepts Mastered

Training Data

📚 Learning Examples

Labelled examples the AI learns from. More examples → better generalisation to new, unseen inputs.

Feature Extraction

🔢 Numbers from Images

Converting raw pixels into meaningful numbers: density, symmetry, aspect ratio. These are the AI's "observations".

Feature Vector

📐 The Fingerprint

An array of numbers that describes one drawing. Similar shapes have similar feature vectors.

1-NN Classifier

📏 Nearest Neighbour

Find the training example closest in feature space. Classify the new input as its label. Simple but effective!

MNIST

🔢 The Famous Dataset

60,000 handwritten digit images (0–9) that trained the first CNNs. The "hello world" of computer vision.

Generalisation

🌐 Unseen Examples

How well the model performs on drawings it has never seen. More varied training data = better generalisation.