How to Make Your Web App Smarter with Image Recognition

Clarifai is an API which provides image and video recognition that is incredibly simple to use and a whole lot of fun to implement. In this article, we will explore dragging and dropping images from around the web into a simple web app that will read them and tell us what it believes they are.

In this demo, we will be using Node.js for the server and a relatively basic front end that uses jQuery for AJAX requests. If you aren't strong in Node.js, that should be okay as long as you are at a level where you are comfortable running npm install to pull in modules and node app.js in the command line to get your web app going. You won't need to customize too much within it and might learn a thing or two in the end by getting the existing code running!

The Code

All of the sample code for this demo is available on GitHub.

Getting Started

To get started, we go to the Clarifai home page and click the "Sign up now" button on the top right:

Sign up with your email and details:

We want to create a new application, so we head to the application screen by clicking the "Applications" menu item on the left.

Clarifai won't allow us to create an application just yet, as we need to choose a plan:

Lets choose a plan so we can get things going. For our demo, the free plan should be more than suitable. We can upgrade later if needed:

We are now allowed to create an application, to do so we can either click the "Applications" menu item on the left or the "create an Application" link:

Click the "Create a New Application" button:

We give our new application a name (e.g. "Image Recognizer"), leave the default model as is and set our language (we have kept it on English, you may prefer a different language!). To finish, click "Create Application":

Our new application details should now appear. The two most important bits we will want to copy somewhere safe are our "Client ID" and "Client Secret" — we will need these to access Clarifai on our server that we will set up next.

Setting Up Our Node.js Server

Clarifai has a Node.js client we can use to interface with its service available on GitHub. Download the repo to your computer. In particular, we want the clarifai_node.js file.

Create a directory for your Node server and add the `clarifai_node.js` JavaScript file into the root directory.

Our Node.js server functions will be within a JavaScript file called app.js. This is where we will manage our Clarifai powered image recognition requests. app.js has the following JavaScript:

[code language="js"]
var Clarifai = require("./clarifai_node.js"),
express = require("express"),
app = express(),
server = require("http").Server(app),
bodyParser = require("body-parser"),
port = process.env.PORT || 5000;

app.use(bodyParser.json());

Clarifai.initAPI("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET");

function identifyClarifaiError(err) {
// Default error function from Clarifai we won't go into but you can find it in the GitHub download of this code!
}

app.post("/examineImage", function(req, resp) {
var imageURL = req.body.imageRequested;
console.log("Response was ", imageURL);

Clarifai.tagURL(imageURL, "Image from browser", commonResultHandler);

function commonResultHandler(err, res) {
if (err != null) {
identifyClarifaiError(err);
}
else {
if (typeof res["status_code"] === "string" &&
(res["status_code"] === "OK" || res["status_code"] === "PARTIAL_ERROR")) {

if (res["results"][0]["status_code"] === "OK") {
var tags = res["results"][0].result["tag"]["classes"];
console.log("Tags found were: ", tags);
resp.send(tags);
}
else {
console.log("We had an error... Details: " +
" docid=" + res.results[0].docid +
" local_id=" + res.results[0].local_id +
" status_code="+res.results[0].status_code +
" error = " + res.results[0]["result"]["error"]);

resp.send("Error: " + res.results[0]["result"]["error"]);
}
}
}
}
});

app.get("/", function(request, response) {
response.sendFile(__dirname + "/public/index.html");
});

app.get(/^(.+)$/, function(req, res) {
res.sendFile(__dirname + "/public/" + req.params[0]);
});

app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send("Something broke!");
});

server.listen(port, function() {
console.log("Listening on " + port);
});
[/code]

A large proportion of the code is basic Node express server functionality which we won't cover in this article, if you aren't quite sure these parts mean, you can leave them as is and just enjoy a running Node server.

The bits which relate specifically to Clarifai begin with our line of code that includes our clarifai_node.js file:

[code language="js"]
var Clarifai = require("./clarifai_node.js"),
[/code]

The next line which uses Clarifai starts out initialization of the API. It gives us access to the API using the client ID and client secret which we copied somewhere safe earlier. Paste them into the appropriate spots:

[code language="js"]
Clarifai.initAPI("YOUR_CLIENT_ID", "YOUR_CLIENT_SECRET");
[/code]

We then have a POST request which the Node server will look out for and respond to. This request expects to receive a web URL for an image within our POST body called imageRequested when accessed via /examineImage. It logs whatever URL it finds into our console:

[code language="js"]
app.post("/examineImage", function(req, resp) {
var imageURL = req.body.imageRequested;
console.log("Response was ", imageURL);
[/code]

We then run a function from the Clarifai Node API Client called tagURL(). This function takes three parameters — the image URL we want Clarifai to examine, a name we give the image (you could potentially change this name and adapt it from the URL if you wanted but to keep it simple we've kept it as a generic name for all) and the callback function once it has run:

[code language="js"]
Clarifai.tagURL(imageURL, "Image from browser", commonResultHandler);
[/code]

Continue reading %How to Make Your Web App Smarter with Image Recognition%

by Patrick Catanzariti via SitePoint