Create a Pinterest like API Part 3 : Clarifai

In the previous part we saw the routing as well as the file upload, in this part we will see the communication with the Clarifay API, to tag our images automatically.

Part 3 : Clarifai

Clarifai is an image recognition API: we send in Ajax, either the url of the image, be it directly and we receive the answer in the form of JSON.

To use it you will have to go to create an account to receive the necessary identifiers here

Then you have to install the SDK with npm:

$ npm install --save clarifai

We will create the client Clarifai:

$ touch /api/clarifay.js

the code:

// content of api/clarifay.js 
var Clarifai = require('clarifai');

// extends the Clarifai.App 
class ImageProcessing extends Clarifai.App { 
    constructor(clientId, clientSecret) { 
        super(clientId, clientSecret); 
    } 
    analyse(base64data) { 
        return this.models.predict(Clarifai.GENERAL_MODEL, base64data) 
    } 
}

// instantiate a new Clarifai app passing in your clientId and clientSecret 
module.exports = new ImageProcessing( 
    'clientId', 
    'clientSecret' 
)

Thanks to the ES6 new features we will improve our Clarifai base client, we will make a class that extends this one and implement our own method: analysis that will send us a Promise object.

Then, we have to use this code when image upload and which will return the results of the analysis:

//content of api/app.js 
const express = require('express') 
const multer = require('multer') 
const clarifay = require('./clarifay') 
const fs = require('fs');

const storage = multer.diskStorage({ 
  destination: function (req, file, cb) { 
    cb(null, './uploads') 
  }, 
  filename: (req, file, cb) => { 
    cb(null, `${Date.now()}.${file.mimetype.split('/')[1]}`) 
  } 
})

const upload = multer({ storage }) 
const app = express()

app.post('/photos/upload', upload.array('photos'), function (req, res, next) { 
  const message = { "data": [] } 
  req.files.forEach(image => { 
    fs.readFile(image.path, function (err, data) { 
      // predict the contents of an image by passing in base 64 encoded file 
      clarifay 
        .analyse(new Buffer(data).toString('base64')) 
        .then( 
        response => { 
          message.data.push({ 
            'image': { 
              'path': image.path, 
              'tags': serialize(response.outputs[0].data.concepts) 
            } 
          }) 
          // if every image has been proccessed send back the response 
          if (message.data.length == req.files.length) { 
            res.status(200).send(message) 
          } 
        }, 
        err => console.error(err) 
        ); 
    }); 
  }) 
})

// get the tags from the Clarifay API 
const serialize = (array) => { 
  let subjects = []; 
  array.forEach(function (element) { 
    subjects.push(element.name) 
  }); 
  // get only the best of 3 results 
  return subjects.slice(0, 3) 
}

module.exports = app

We will read the image uploaded thanks to the module integrated in Node.js: fs or filesystem and return a response with the location and the name of the upload image as well as the tags that are related to it. The tutorial code is here.

In the next part we will store these results in the database with MongoDB and handle the responses of the API with the stored images.