Simple Visual Recognition using IBM Cloud and Node-Red

Welcome!

Every good proposal should have some kind of a prototype. This will be a key differentiating feature for winning teams participating in the upcoming 2019 IBM Ideathon.

Before we start, are you trying to break into Data Science? I can point you in the right direction!

The prototype can be anything you want; a sketch, a design, a wire-frame and even a live site. Today, we’re going to develop a live site that uses Image Recognition to determine some demographics of people in the pictures.

Check it out! Paste the Image Address of the first image in the box and click analyze!

How did this work? We used Node-Red, an environment available on the IBM Cloud Platform.

What is Node-Red?

Node-Red is a wireframe tool that takes the hard work out of setting up the operating environment from a coding perspective. Here is what it looks like for our application.

This kind of an interface makes more sense to both technical and non-technical individuals. The equivalent of this is easy 500 lines of code, depending on the language of preference.

So, what are you seeing?

1. A drag-and-drop system to place blocks (nodes) on the white-screen dashboard
2. The steps required to develop the system
3. Key functionality is encapsulated in blocks
4. Each block has a different color depending on the category

Using Node-Red to Create the Image Recognition Application

The first step of the process is to define the bigger picture of how it will all fit together. So this is what we want it to look like. At this stage, the design should be basic, and allow for function rather then form.

Before we start, think of a app as having two functions.

1. To serve the user with related content; images, text, videos, games etc.
2. To do some stuff in the background to handle above.

Node-Red performs both of theses functions at the same time, without sacrificing user experience with laborious code. So when someone types in the url of our application into the browser, its going to do the following;

1. The app is going to make a “GET” request i.e. information we want the user to see and/or interact with. It connects or “gets” information from the place where the website information is stored. In this case, the IBM Cloud Platform will host our app with templates we create for users to see. Setup the template Node to define such front-end interfaces.
2. The user then needs to type in the URL of an image, and click the Analyze button. Specifically, the node needs to check whether it is empty or something that looks like a url. Use the switch node for this.

Then, the application needs to detect the faces from the image supplied by the URL, and provide the results on another page in the form of text. To do this,

1. You need to setup the Change, Visual Recognition and Template Node in one flow.
2. You need to define what the user wants to see using the Template Node in one flow.
3. Connect both of these above flows to into a HTTP Response Node as a technical formality.

The full technical tutorial is available here.

The Final Node-Red Image Recognition Application

And that’s it! When the user clicks the button, they should see something like this.

• 

Together with IBM Cloud and Node-Red, the application found the following characteristics about the individual analyzed,

1. The person is a Male, between the ages of 38 and 43 years old.
2. The algorithm is about 65% confident that the above is correct.

The technical tutorial is available here, and try out the application here.

Conclusions

This was a simple application of how you can use IBM Cloud and Node-Red to achieve an application that performs basic Visual Recognition on a supplied image, and provides demographic information on the individual.

As simple as it might seem, there are alot of applications to it!

Please Leave your thoughts on the comments section below!