“Hotdog or not hotdog” app with IBM Cloud
You’ve probably seen Silicon Valley’s episode about this promising Shazam app for food. If not you can watch it here.
The scope of this article is to rebuild that functionality. The main focus would be Image Recognition and not the app itself.
List of things we’ll need:
- IBM Cloud account
- App Template
- Hotdog pictures to train our model
- Little or no experience in Image Recognition
IBM Cloud
IBM Cloud is a set of cloud computing services. We will need this for our Image Recognition functionality. If you’re not yet registered — here’s where you can sign up — https://cloud.ibm.com/registration
App Template
Since this article is about Image Recognition — you’ll be using a starter project based on React-Native. You can find it here: https://github.com/VadimDez/HotdogOrNotHotdog
Hotdog pictures to train our model
To train our model we will need some hotdogs to take some pictures of. Or we might just google for some hotdog pictures. We need two sets of photos — hotdogs and not hotdogs. “Not hotdog” set could contain anything similar or not really to a hotdog. So go to google and get at least 10 photos of hotdogs and at least 10 of “not hotdogs”. More photos you have — better it is.
Let’s begin
Let’s start with configuring our Visual Recognition service from IBM Cloud. Open and log in here: https://www.ibm.com/watson/services/visual-recognition/ After login you’ll be landed here:
Now go ahead and change “Service name” to something meaningful to you. For example “Visual Recognition — Hotdog or not”.
By default selected “Pricing plan” is “Lite” (Free with some limitations). For now “Lite” is enough. Go ahead and press “Create”.
Once service is created you’ll be forwarded to “Getting started” page. After you’ve taken a look, go ahead and switch to “Manage” on your left.
To launch Watson Studio press “Launch tool”, that’s where we gonna train our model.
To create our model press “Create Model” inside “Classify Images” box.
Now we gonna create a project for our custom model. Set a meaningful name and press “Create”.
This is the view where we’re going to upload our photos/pictures, classify them and train our model.
We will need two classes, as the tool suggests “At least 2 classes required”. Go ahead and create class “Hotdog”. The second class that we will need is already created by default, called “Negative” that’s where all of our “not hotdogs” pictures will go.
Now click “Browse” under “Upload to project”, select 10+ pictures of hotdogs and upload them. Once all uploaded it should look similar to this:
To classify images you can simply drag and drop each “hotdog” image to “Hotdog” class.
Repeat the same for “not hotdogs”. Firstly upload 10+ pictures, then classify them as “Negative” by throwing them inside “Negative” class.
After those steps your project should look similar to this:
At this point, we can finally train our model by pressing the “Train Model”. It might take up to 5 minutes, depends on how many pictures you’ve uploaded. Once the model finished training — you will see “Trained”.
Finally, we can test our model and see how good image recognition works. Go and press on the “Default Custom Model” as shown in the picture.
On the next page switch to the “Test” tab where you can drag and drop images to test your image recognition model. Try throwing a few pictures of hotdogs.
I’ve uploaded a few images to test my model, here are the results:
As you can see the first picture got 0.92 as a score, but the second 0.01. The score can vary between 0 and 1. The bigger the score is — the more certain algorithm is about the result. In our case picture with 0.92 would be way more hotdog than the second one with 0.01.
If you see that some pictures return wrong results during the test, for example, when you test picture with an actual hotdog but it gives you a low score — you can go back and edit the model.
- Upload picture into the project
- add that picture to one of the two classes
- and finally train the model again
That is how you improve your model.
At this point, we’re done with image recognition 🎉. The last thing that we will need is auth token for our app. Go back to https://cloud.ibm.com/resources and click on your “Visual Recognition — Hotdog or Not” service in the list. You will be landed on the “Manage” page where you can copy your “API key”. We will need a base64 encoded version of the string “apikey:your_api_key”. Once copied visit https://codebeautify.org/base64-encode insert “apikey:” followed by your API key and press “Encode”.
This is an example with my API key (is a bit shorter). Copy result and keep it somewhere for a now.
The other thing that we will need for our app is model ID, switch to overview tab, copy and keep model id for now. We will need an API key and Model id soon.
Mobile app
The last step in our “Hotdog or not hotdog” app is an integration of Visual Recognition into the app.
You can get the app from https://github.com/vadimdez/HotdogOrNotHotdog
Go ahead and navigate to your projects folder with a terminal, then clone git repo with:
Now you should have HotdogOrNotHotdog folder, navigate inside HotdogOrNotHotdog and install node dependencies with:
npm install
Once all dependencies are installed we will need to update a few constants, open constants.js you will find these two variables:
IBM_VISUAL_RECOGNITION_KEY and IBM_VISUAL_RECOGNITION_MODEL
Replace the value of IBM_VISUAL_RECOGNITION_KEY with your base64 encoded API key and IBM_VISUAL_RECOGNITION_MODEL with model id.
Afterward to run the app execute:
npm start
To develop & test your app you’ll need an app “Expo Client” Get it here:
iOS https://itunes.apple.com/app/apple-store/id982107779
Android https://play.google.com/store/apps/details?id=host.exp.exponent
After you have installed the app you can scan the QR code to launch the app on your phone. On iOS try scanning QR code with your camera, it will show you a notification to open Expo Client app.
Once app is started you can try taking photos of hotdogs and not hotdogs. The end result will look like this:
This is the end of step by step guide how to start with Watson Visual Recognition. Discover more IBM Cloud services here https://www.ibm.com/cloud/
Bring your plan to the IBM Garage.
Are you ready to learn more about working with the IBM Garage? We’re here to help. Contact us today to schedule time to speak with a Garage expert about your next big idea. Learn about our IBM Garage Method, the design, development and startup communities we work in, and the deep expertise and capabilities we bring to the table.
Schedule a no-charge visit with the IBM Garage.
