CODEWITHSUNDEEP
javascripttensorflowmachine-learningneural-networktensorflow.js
rooted
rooted

Reputation: 27

Writing a Number Classifier Neural Network in Tensorflow.js

I am looking for a bit of guidance on a fun project I've just begun. I'm a first year CS student and I'm very interested in mathematics, and so consequently am also drawn to machine learning. I am trying to write a program that will allow users to draw a number 0-9 in a html canvas element and then take that saved image and run it through a neural network that I've written in tensorflow.js and guess the number they've drawn and also maybe draw a bar graph, pie chart, or any other combination of graphs depicting the percentages of confidence of the neural net. I've seen this done before, but I'm not quite sure how it's implemented. The reason I have come here is that I'm a bit confused. I've used This Tensorflow.js Link to help me write the neural network and it can predict on images in the MNIST data set. I've also written the appropriate HTML, CSS, and JS to draw a nicely configured image and then save it as a .png from the canvas. What I don't understand is how to connect these two and input the saved image the user has drawn, and then output the guess, but also a number of graphs and statistics on what the percentages are and other things like that all while still in the browser. Thank you all so much!

Upvotes: 2

Views: 244

Answers (1)

Sebastian Speitel
Sebastian Speitel

Reputation: 7346

TensorFlow.js has a method for converting images to tensors, so you you can use that.

It's tf.browser.fromPixels(), which takes one of ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement as an argument and converts it to a tf.Tensor3D.

Example:

const canvas = document.querySelector('canvas');
const imageTensor = tf.browser.fromPixels(canvas);

imageTensor.print();
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script><canvas width="28" height="28"></canvas>

Upvotes: 1

Related Questions