Have you ever wondered what your dog is thinking? Well, we haven’t gotten that far just yet.

But with Machine Learning, we can now classify a dog’s emotions just from an expression!

Today, I’ll show you how to build an AI-powered image classifier using Teachable Machine and ml5.js to detect dogs’ emotions, just from their photos!

‍

Step 1: Train a Model on Teachable Machine

‍

Before writing any code, we need an ML model! Teachable Machine makes this easy. Here’s what you do:

‍

Open Teachable Machine and select Image Project.
Choose “Standard image model”.
Rename “Class 1” as an emotion (e.g., “Happy”) and upload dog images.
Repeat for more emotions (e.g., “Sad”, “Excited”, etc.).
Click “Train Model” and then “Export Model” to get a Model URL.

‍

Step 2: Load the Model in JavaScript

Now let’s integrate the trained model into our web app.

Step 3: Upload an Image & Run Classification

Now, let’s allow users to upload a dog picture and classify its emotion.

Step 4: Set Up HTML for User Interaction

Finally, we need a simple HTML UI to upload and analyze images.

Try it out for yourself!

Ready to finally know what your best dog companion is feeling? Upload an image of the dog, and the AI will classify its emotion based on what it learned! You’ll get a prediction and a confidence score, as seen below.

‍

‍

Why is this project exciting?

No ML experience is needed! Teachable Machine handles the hard part.
Runs in the browser – no backend required!
Great intro to AI/ML for frontend developers.

‍

Want to see the full project in action? Reach out, and I’ll send you all the details!

‍

About the Author

Andrew Zlobin is a full-stack developer who has been with First Line Software for over three years and is an active Tech Titan in the FLS Ambassadors club. Passionate about staying ahead of industry trends, his expertise ranges from frontend technologies like JavaScript and Angular to backend technologies like PHP and MySQL. Currently, he's exploring the integration of AI/ML into both frontend and backend development, and sharing his insights and practical tips with the community.

‍

How-to: Create a Dog Emotion Predictor with ML

Step 1: Train a Model on Teachable Machine

Step 2: Load the Model in JavaScript

Step 3: Upload an Image & Run Classification

Step 4: Set Up HTML for User Interaction

Try it out for yourself!

Why is this project exciting?

About the Author

You may also enjoy

How-to: Create a Dog Emotion Predictor with ML

Women at First Line: Stories of Growth, Success, and Impact

CRAFTING AI Prompts framework for QAs: Part I

Let’s talk!