In previous article – https://blog.wepdim.com/2022/07/simple-digits-recognition-with-javascript/ we learned how to deal with basic deep neural networks to recognize simple digits symbols.
This time we take a look on convolutional neural networks(CNN) doing the same task also using TensorflowJs.
Code on Github at the same place – https://github.com/webdim0/dnn_basic_imgrec.
CNN – is a special type of DNN which is used exactly for image processing.
Very generally and simplified the difference is that we train our network not on raw input data but on it convolutions with some filters which is done to detect some common features of images and train our model based on that.
The tech stack is basically the same, server part was expanded by CNN functionality as well as client side, but I also used SvelteKit instead of raw Svelte and Vite just to give it a try, you can find this updated version in “client-sk” directory.
All functionality is the same just couple more buttons for CNN network.
With “Predict all” button we can see results of predictions and probabilities for both networks at the same time witch is pretty cool to compare.
Comparing training stats we can see better results for CNN with bigger dataset images 28×28 comparing to 12×12 for DNN, having same numbers of epochs and training execution time.
The structure of the CNN model was taken directly from official TFJS tutorial – https://codelabs.developers.google.com/codelabs/tfjs-training-classfication#4 just trained with our own dataset.
If you are completely new to CNN there are good links for learning the basics:
https://www.youtube.com/watch?v=-I0lry5ceDs – Convolutional Neural Networks Explained
https://www.youtube.com/watch?v=pj9-rr1wDhM – Convolutional Neural Networks Explained (CNN Visualized)
https://www.youtube.com/watch?v=B-M5q51U8SM – How Convolution Works
https://www.youtube.com/watch?v=2-Ol7ZB0MmU – A friendly introduction to Convolutional Neural Networks and Image Recognition
https://www.youtube.com/watch?v=FmpDIaiMIeA – How Convolutional Neural Networks work
https://www.youtube.com/watch?v=JB8T_zN7ZC0 – How convolutional neural networks work, in depth
https://www.youtube.com/watch?v=fTw3K8D5xDs – How to Design a Convolutional Neural Network
Good fundamental in depth text article – CS231n: Convolutional Neural Networks for Visual Recognition.
Another practical example – Image Classification With TensorFlow.js.