TensorFlow.js and Custom Classifiers
Let's look at TensorFlow.js and custom classifiers.
by
Join the DZone community and get the full member experience.
Join For Free
I've noticed that most samples out there for image classification with TensorFlow.js use an existing model that has wrappers that make it easy to pass an image to them to see the classification for that image. One thing missing is an easy way to see how to get a custom image passed to a custom classifier to get the results. I.E. How do I format the input to a model?
So, I'm taking a Cats vs Dogs model, trained with the notebook here, and I've converted it to TensorFlow.js using the tensorflowjs libraries in Python.
You might also like: Introduction to TensorFlow
If you want to learn how to do that, let me know, or check out my upcoming course on TensorFlow.js on Coursera. It follows on from the TensorFlow: In Practice specialization made in partnership with the folks from deeplearning.ai.
So, assuming you have your model in .JSON format, what comes next? How do you get an image from a page into the model and classified? Well, here's a complete, simple, HTML page showing it:
<html>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
<head></head>
<body>
<img id="imgcanvas" height="150" width="150" src="cat.jpg"></img>
</body>
<script>
async function run(){
const image = tf.browser.fromPixels(imgcanvas);
const resized_image =
tf.image.resizeBilinear(image, [150,150]).toFloat();
const offset = tf.scalar(255.0);
const normalized = tf.scalar(1.0).sub(resized_image.div(offset));
const batchedImage = normalized.expandDims(0);
const MODEL_URL = 'http://127.0.0.1:8887/model.json';
const model = await tf.loadLayersModel(MODEL_URL);
const result = model.predict(batchedImage);
result.print();
}
run();
</script>
</html>Let's look at this little by little — first, let's read the image straight from the page — for this, we can use tf.browser.fromPixels:
const image = tf.browser.fromPixels(imgcanvas);Our model is trained for 150×150 pixels, so we need to make sure that the image is in this shape. We'll also convert it to float values:
const resized_image = tf.image.resizeBilinear(image, [150,150]).toFloat();Next, we need to normalize the image so that values from 0 to 255, get mapped to 0 to 1.
const offset = tf.scalar(255.0);
const normalized = tf.scalar(1.0).sub(resized_image.div(offset));As the image is now [X, Y, Depth] but input tensors are [Dimension, X, Y, Depth] we can use expandDims to add the extra needed dimension at the front:
const batchedImage = normalized.expandDims(0);Now, after loading our model, it's easy for us to get a prediction for that specific image, and print it out
const result = model.predict(batchedImage);
result.print();And that's it, you now have everything you need to classify an image from a custom trained model, by formatting it in the desired input shape, invoking the model, and reading the output!
Further Reading
If you enjoyed this article and want to learn more about TensorFlow, check out this collection of tutorials and articles on all things TensorFlow.
Published at DZone with permission of Laurence Moroney, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments