{{announcement.body}}
{{announcement.title}}

TensorFlow.js and Custom Classifiers

DZone 's Guide to

TensorFlow.js and Custom Classifiers

Let's look at TensorFlow.js and custom classifiers.

· AI Zone ·
Free Resource
TensorFlow.js and Custom Classifiers
TensorFlow.js and Custom Classifiers

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

TensorFlow for Deep Learning (Part 1)

Various Uses of TensorFlow



If you enjoyed this article and want to learn more about TensorFlow, check out this collection of tutorials and articles on all things TensorFlow.

Topics:
artificial intelligence ,tensorflow.js models ,custom classifiers ,ai ,tensorflow ,tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}