Ink Shape

A browser drawing tool backed by a small convolutional network.

Ink Shape Demo

Project Overview

Ink Shape recognizes hand-drawn shapes from an HTML canvas. A trained neural network classifies the drawing after it is sent to a Flask backend.

The model recognizes circles, squares, triangles, hexagons, and octagons. The interface shows the predicted class and the probability assigned to each shape.

Technical Implementation

Key Features

Real-time shape recognition as you draw on the canvas
Multi-class neural network classification trained on shape dataset
Visual probability distribution showing confidence across all shape categories
Optimized for quick response with minimal latency
Responsive canvas drawing interface with immediate feedback
Clean, modern UI with GitHub-inspired dark theme

Implementation Details

The frontend uses HTML Canvas for drawing and JavaScript to capture the result. The image is encoded and sent to Flask, where it is resized to 28 by 28 pixels, normalized, and inverted to match the training data.

The TensorFlow/Keras model returns a probability for each class. The interface presents those values alongside the predicted shape.

Technologies Used

TensorFlow/Keras Flask HTML5 Canvas JavaScript Python NumPy PIL/Pillow CSS3

Future Enhancements

Expand model to recognize additional shape types
Implement progressive learning to improve accuracy over time
Add a training mode where users can contribute labeled examples
Optimize model size for faster mobile performance
Create an export feature to save and share drawings with predictions

Explore the Code

View on GitHub