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!
javascript tensorflow machine-learning neural-network tensorflow.js
asked Dec 30 '18 at 8:55
austinticeaustintice
45
add a comment |
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!
javascript tensorflow machine-learning neural-network tensorflow.js
asked Dec 30 '18 at 8:55
austinticeaustintice
45
add a comment |
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!
javascript tensorflow machine-learning neural-network tensorflow.js
asked Dec 30 '18 at 8:55
austinticeaustintice
45
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!
javascript tensorflow machine-learning neural-network tensorflow.js
javascript tensorflow machine-learning neural-network tensorflow.js
asked Dec 30 '18 at 8:55
austinticeaustintice
45
asked Dec 30 '18 at 8:55
austinticeaustintice
45
asked Dec 30 '18 at 8:55
austinticeaustintice
45
asked Dec 30 '18 at 8:55
austinticeaustintice
45
asked Dec 30 '18 at 8:55
austinticeaustintice
45
45
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
TensorFlow.js has a method for converting images to tensors, so you you can use that.
It's tf.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.fromPixels(canvas);
imageTensor.print();<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
<canvas width="28" height="28"></canvas>answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53976340%2fwriting-a-number-classifier-neural-network-in-tensorflow-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
TensorFlow.js has a method for converting images to tensors, so you you can use that.
It's tf.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.fromPixels(canvas);
imageTensor.print();<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
<canvas width="28" height="28"></canvas>answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
add a comment |
TensorFlow.js has a method for converting images to tensors, so you you can use that.
It's tf.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.fromPixels(canvas);
imageTensor.print();<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
<canvas width="28" height="28"></canvas>answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
add a comment |
TensorFlow.js has a method for converting images to tensors, so you you can use that.
It's tf.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.fromPixels(canvas);
imageTensor.print();<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
<canvas width="28" height="28"></canvas>answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
TensorFlow.js has a method for converting images to tensors, so you you can use that.
It's tf.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.fromPixels(canvas);
imageTensor.print();<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
<canvas width="28" height="28"></canvas>const canvas = document.querySelector('canvas');
const imageTensor = tf.fromPixels(canvas);
imageTensor.print();<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
<canvas width="28" height="28"></canvas>const canvas = document.querySelector('canvas');
const imageTensor = tf.fromPixels(canvas);
imageTensor.print();<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.14.1/dist/tf.min.js"></script>
<canvas width="28" height="28"></canvas>answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
answered Dec 30 '18 at 12:25
Sebastian SpeitelSebastian Speitel
4,4502525
4,4502525
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53976340%2fwriting-a-number-classifier-neural-network-in-tensorflow-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
