Implementing NSFW detection into your app with NSFAI and Clarifai.
Tags: showdev, node, ai
Published: 2018-04-18 16:42:19

---
title: Implementing NSFW detection into your app with NSFAI and Clarifai.
published: true
description: NSFAI was designed to be easily implementable as an “afterthought”. Let me show you how!
tags: showdev, node, ai
---

NSFAI was designed to be easily implementable as an “afterthought”. Let me show you how!

## Step 1 - Setting up on Clarifai

After you've created and logged in your account over at [Clarifai](https://clarifai.com), hover on your name in the top bar, and click on Applications.

![clarifai applications](https://bbyjins.skiilaa.me/img/nsfai/clarifai_applications.png)

Click on Create New Application, give your app a name, and set the base workflow to NSFW (optional). The default language doesn't matter.

![clarifai create app](https://bbyjins.skiilaa.me/img/nsfai/clarifai_create_app.png)

After clicking on Create App, head over to the API Keys page in the sidebar.

![clarifai api keys](https://bbyjins.skiilaa.me/img/nsfai/clarifai_api_keys.png)

You can already see an API key, and you could use that, but you should create a new API key with limited permissions, so if your key gets leaked, you can just revoke it, and less damage could be done.

Click on Create new API Key, and select your app in the Apps dropdown. Give your key a name, and select the Predict on Public and Custom Models scope. That's all you need.

![clarifai create api key](https://bbyjins.skiilaa.me/img/nsfai/clarifai_create_api_key.png)

Click on Save Changes, and copy your new and shiny API key.

![clarifai api keys new](https://bbyjins.skiilaa.me/img/nsfai/clarifai_api_keys2.png)

## Step 2 - Setting up NSFAI

We’re ready to install NSFAI. You can grab it from npm:

```
npm install -save nsfai
```

It’s time to open up your favourite code editor and start working!

First, you’ll need to initialize an instance of NSFAI:

```js
var NSFAI = require('nsfai');

var nsfai = new NSFAI("CLARIFAI_API_KEY_HERE");
```

After this, we can start predicting!

## Step 3 - Predicting Images

We can use the `predict()` function in the instance to scan our images.

One of the outstanding features of NSFAI is our data parser. It converts URLs, Data URLs, and Base64 data into Clarifai-friendly data. So you can throw a lot of things at NSFAI, and it will handle it just OK!

```js
nsfai.predict("https://bbyjins.skiilaa.me/img/test.png").then(function(result) {
    if (result.sfw) {
        console.log(`This image is safe for work with a confidence of ${result.confidence}.`);
    } else {
        console.log(`This image is not safe for work with a confidence of ${result.confidence}!`);
    }
}).catch(function (error) {
    console.error(error);
});
```

## Interlude - Image Result

The image result object is made up of two properites:
 * `sfw`: The image’s safe for work-ness. (boolean)
 * `confidence`: The confidence in the result. (number) (between 0 and 1)

Example:
```
{
    "sfw": true,
    "confidence": 0.973727
}
```

## Step 4 - Predicting Videos

The data parser will automatically detect videos if you’re using a Data URL, but if you're using URLs or Base64 Data, you'll need to provide set the `video` property of the `options` parameter to `true`.

Only 1 frame per second will be analyzed.

```js
nsfai.predict("https://bbyjins.skiilaa.me/img/test.mp4").then(function(result) {
    if (result.sfw) {
        console.log(`This video is safe for work with a confidence of ${result.confidence}.`);
    } else {
        console.log(`This video is not safe for work with a confidence of ${result.confidence}!`);
    }
}).catch(function (error) {
    console.error(error);
});
```

## Interlude - Video Result

The video result is an array of image result objects, for every analyzed frame (aka 1 frame every second).

Example:
```
[
    {
        "sfw": true,
        "confidence": 0.973727
    },
    {
        "sfw": true,
        "confidence": 0.973727
    }
]
```

## Conclusion

That's it! Hope I was able to help you with NSFAI. We are looking for contributors! If you're interested in helping with the following:
 * Adding video detection to URLs of our data parser
 * Extending the data parser
...or anything else, then feel free to fork and open up a PR!