Implementing Clarafai's Image Recognition API to your React application

leoncodes00

Cha Yang

Posted on March 9, 2020

Implementing Clarafai's Image Recognition API to your React application

Clarafai creates computer vision AI such as image recognition, demographic analysis, aerial surveillance, and so much more. One of my recent project uses the Clarafai image recognition API to detect a face in an image.

Alt Text

So how do we start?

You can head over to Clarafai's website at https://www.clarifai.com/.
You will need to create an account and create your application to get an API key to use their Image Recognition.

Alt Text

After creating your application, you will have access to your API key which is located in the API keys section. Copy that API key and store it somewhere safe.

Now that you have your API key, you can access your terminal and do npm install clarafai --save to install clarafai into your application. After that, you can import clarafai into your react project with
import Clarifai from "clarafai";
Next, you will need to initialize clarafai. You can do that with
const app = new Clarifai.App({
apiKey: "your api key"
});

The last step is the fun stuff. Actually using the image recognition AI.

app.models.predict("your image address").then(
function(response) {
// do something with response
},
function(err) {
// there was an error
}
);

This will locate a face in the image that is provided.

💖 💪 🙅 🚩
leoncodes00
Cha Yang

Posted on March 9, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related