A Convolutional Neural Network (CNN) is a specialized type of artificial neural network designed to process data with a grid-like topology, such as images. CNNs are widely used for tasks such as image classification, object detection, and more.
Training a CNN involves feeding labeled data into the network, calculating errors between predicted and actual outputs, and adjusting the network’s weights using backpropagation and an optimization algorithm such as stochastic gradient descent (SGD) or Adam.
TensorFlow.js is a JavaScript library that allows you to define, train, and run machine learning models directly in the browser or on Node.js. For CNNs, TensorFlow.js provides layers and tools similar to Python’s TensorFlow/Keras API.
tf.layers.conv2d, tf.layers.maxPooling2d, tf.layers.flatten, tf.layers.dense, and more.tf.sequential() or tf.model() to build models.model.compile with a loss function, optimizer, and metrics, and call model.fit to train on data.tf.data utilities, or load images directly using HTML elements.Below is a minimal example of defining and compiling a simple CNN using TensorFlow.js. To train on actual data, you would need to prepare your dataset (such as importing images and labels).
// Define a simple CNN model
const model = tf.sequential();
model.add(tf.layers.conv2d({
inputShape: [28, 28, 1],
filters: 16,
kernelSize: 3,
activation: 'relu'
}));
model.add(tf.layers.maxPooling2d({ poolSize: 2 }));
model.add(tf.layers.flatten());
model.add(tf.layers.dense({ units: 10, activation: 'softmax' }));
// Compile the model
model.compile({
optimizer: 'adam',
loss: 'categoricalCrossentropy',
metrics: ['accuracy']
});
// To train:
// model.fit(trainXs, trainYs, {
// epochs: 10,
// batchSize: 32,
// validationData: [testXs, testYs]
// });
For a complete training pipeline, you would need to load your image data, preprocess it, and convert it into tensors. TensorFlow.js supports these operations efficiently in the browser.
Convolutional Neural Networks are powerful tools for image recognition and related tasks. With TensorFlow.js, you can build, train, and deploy CNNs directly in the browser using JavaScript, making machine learning more accessible and interactive.
To define, train, and visualize Convolutional Neural Networks in the browser, you need the following JavaScript libraries:
@tensorflow/tfjs): Provides core numerical operations and GPU/WebGL acceleration for model building and training.@tensorflow/tfjs-layers): Supplies high-level model-building abstractions (already included if you use the main tfjs library).
@tensorflow/tfjs-vis): Enables interactive visualizations of metrics, model summaries, and training progress in the browser.These libraries allow you to build models, train them using GPU resources, and visualize outcomes such as loss curves, model architecture, and more directly inside your browser.
The dataset for this project is a collection of 28x28 grayscale images of handwritten digits (0–9) from the MNIST dataset, stored in a single PNG image file:
cleanedData. It contains the tensors images and labels that can be used for model training and testing.
Once you have loaded the MNIST dataset, you can visualize a selection of digit images with their corresponding labels to better understand the data. This can help verify correct loading and preparation before training your model. The button below will display a grid of sample images from cleanedData.
In this section, you can define a Convolutional Neural Network (CNN) model for recognizing handwritten digits from the MNIST dataset. When you click the button, a CNN model will be created, and its layer structure will be displayed below.
The CNN model begins with an input layer for 28×28 grayscale images, followed by a convolutional layer that extracts spatial features with learnable filters. A max pooling layer then reduces the spatial dimensions, helping the network focus on the most prominent features. The flatten layer converts the 2D feature map into a 1D vector. Finally, a dense (fully connected) layer with softmax activation outputs the probability for each digit class (0–9).
This architecture is effective for recognizing handwritten digits, as it can learn both simple and complex patterns in image data.
Training the CNN model involves providing it with labeled images so it can learn to classify new, unseen digits. The training process consists of several steps:
categoricalCrossentropy), and metrics such as accuracy.Click the button below to begin training the CNN model on the loaded MNIST dataset. Progress will be shown in the charts.
After training, it's important to test the model on data it has never seen before to measure its real-world performance. The process for testing the model involves:
model.evaluate function, which returns the loss and accuracy of the model on this new data.Click the button below to evaluate the trained model on the test set. The test loss and accuracy will be displayed in a chart.
A confusion matrix is a table that is used to evaluate the performance of a classification model. For multi-class problems like MNIST digit recognition, the confusion matrix shows how many times each actual class (true label) was predicted as each possible class by the model.
Analyzing the confusion matrix helps you understand which digits are most frequently confused by the model, and can guide further model improvements.
Click the button below to calculate and display the confusion matrix for the test set predictions.