Shape Classifier Neural Network with ml5.js

Coding Challenge #158

In this challenge, I demonstrate the entire process of training and deploying a machine learning classification model in JavaScript – data collection, model training, and prediction!

Topics

0:00 - Introduction
1:33 - Generating the dataset in Processing
5:50 - Loading images in p5.js
8:34 - Create a ml5 neural network
10:54 - Adding the data
12:39 - About training the model
13:53 - Test training
15:21 - Training with full dataset
16:44 - Improving the dataset
18:20 - Saved model
19:01 - Separate sketch for prediction
19:40 - Loading the model
21:13 - Testing the model with shapes drawn in p5.js
24:41 - Mouse drawn shapes
31:01 - Using a webcam and a notebook
33:49 - Wrap up
34:33 - What's next?

Generate Dataset

Train Model

Mouse

Webcam

Community Contributions

Handwriting Digits by Andrew Y (Source Code)

You can also add your own version! (See how)

Links discussed in this coding challenge

Videos discussed in this coding challenge

Workflow Series by The Coding Train
ml5.js: Training a CNN for Image Classification by The Coding Train
ml5.js: Train a Neural Network with Pixels as Input by The Coding Train
ml5.js: Train Your Own Neural Network by The Coding Train
ml5.js: What is a Convolutional Neural Network? by The Coding Train
ml5.js: Save Neural Network Trained Model by The Coding Train
Quick, Draw! - Coding Challenge #122 by The Coding Train