DEV Community

Gergő Móricz
Gergő Móricz

Posted on

Implementing NSFW detection into your app with NSFAI and Clarifai.

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, hover on your name in the top bar, and click on Applications.

clarifai applications

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

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

clarifai api keys

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

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

clarifai api keys new

Step 2 - Setting up NSFAI

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

npm install -save nsfai
Enter fullscreen mode Exit fullscreen mode

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

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

var NSFAI = require('nsfai');

var nsfai = new NSFAI("CLARIFAI_API_KEY_HERE");
Enter fullscreen mode Exit fullscreen mode

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!

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);
});
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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.

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);
});
Enter fullscreen mode Exit fullscreen mode

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
    }
]
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
primariumio profile image
Justin

What kind of processing time do you see for images/videos?

Collapse
 
mogery profile image
Gergő Móricz • Edited

Depends on Clarifai’s traffic. 1-5s is what i’d say