DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Comparing Cloud Hosting vs. Self Hosting
  • How To Approach Java, Databases, and SQL [Video]
  • What ChatGPT Needs Is Context
  • Competing Consumers With Spring Boot and Hazelcast

Trending

  • Comparing Cloud Hosting vs. Self Hosting
  • How To Approach Java, Databases, and SQL [Video]
  • What ChatGPT Needs Is Context
  • Competing Consumers With Spring Boot and Hazelcast
  1. DZone
  2. Data Engineering
  3. AI/ML
  4. TensorFlow.js and Custom Classifiers

TensorFlow.js and Custom Classifiers

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

Laurence Moroney user avatar by
Laurence Moroney
·
Oct. 16, 19 · Tutorial
Like (5)
Save
Tweet
Share
10.15K Views

Join the DZone community and get the full member experience.

Join For Free
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.

TensorFlow Deep learning Python (language) Pass (software) HTML Convert (command) IT Library

Published at DZone with permission of Laurence Moroney, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Comparing Cloud Hosting vs. Self Hosting
  • How To Approach Java, Databases, and SQL [Video]
  • What ChatGPT Needs Is Context
  • Competing Consumers With Spring Boot and Hazelcast

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: