nude.js Update: <video> support, general usage etc

Estimated reading time: 3 minutes ( save for later )

This article is about nude.js, a javascript library for nudity detection with canvas which I’ve released last week.
Firstly: thanks for the great feedback from the community, I appreciate every useful comment you wrote.
nudejs

Purpose of nude.js

Many people thought I wrote nude.js because I wanted to protect the internet from nudity. Well, the purpose nude.js was to detect nudity, nothing more, nothing less. The first version contained this overlay which blocked the image, unless it’s detected as “non-nude”. Now, this feature is history, the script only detects nudity, the rest of the programming logic (image swap/whatever) belongs to the programmer.

Improvements

I was really busy last week but I found enough time to implement the following functionality:

Fallback for browsers which don’t support web workers

The library checks for web worker support (window.Worker), if the browser doesn’t support web workers the script appends another javascript file which contains the full functionality of nudejs without web workers. Now nude.js is also supported on the iPhone/iPad and every other browser which supports canvas but doesn’t support web workers. ;-)

Loading images from image/video tags into canvas

This is an important feature. It enables nudity detection in <video> tags. I hacked a little demo together, just to show a possible concept of using nude.js for nudity detection in videos. Take a look at it right here (have a look at the code, it’s easy!):
nudejs
I optimized the general code structure too, e.g loadImage changed to loadImageById or some (mini) performance issues, and I’m really impressed because Internet Explorer 9 performed better than Chrome with my test-images.

General usage

nude.js provides 3 functions:

nude.init()

The init function initializes nudejs by appending a hidden canvas element to the document’s body.

nude.load(param)

The load function sets the size of the invisible canvas element and draws the imagedata into the canvas.
It uses 2 types of parameters: a valid id of an element in the document’s body or an image/video element (CAREFUL: make sure you define width and height of your element ).

nude.scan(function optional)

This function initiates the scanning process, the optional function is executed after the scanning process finished.

Next steps

The next steps are very important, it depends on the implementation of these steps whether the library would be safe to work with or not. If it’s possible to implement these steps without big loss of overall performance the library could be more reliable and useful.
According to the paper on which nude.js is based on, the library could then detect about 92% of the images and has a false positive rate OF about 9%. Sure.. this percentage depends on the set of test-images ;-)

Improvement of the skin color classification

Skin identification in more color systems: the more the better. I’m planning on skin identification in the YCC color system. Several color systems are more reliable for skin detection than one.
Optimization of the color system classifiers: The classifiers are based on empirical studies of the skin color range (parameters) in color systems.

Improvement of the detection algorithm

The bounding polygon: A hard step and I hope performance will still be fine. In theory, this part is not a big deal:
At first you have to detect the three largest skin regions of the picture. The following graphic illustrates the process of finding the bounding polygon.
nudejs bounding polygon explanation Then determine the bottom-left, top-left, top-right, bottom-right pixels for every region and afterwards connect them to the “bounding polygon“. The pixels within these bounds are important for the two new possible conditions for nudity detection:
“If the total skin count is less than 30% of the total number of pixels in the image and the number of skin pixels within the bounding polygon is less than 55 percent of the size of the polygon, the image is not nude”

“If the number of skin regions is more than 60 and the average intensity within the polygon is less than 0.25, the image is not nude.”

Final words

I wouldn’t recommend using the library in production mode right now because the detection rate is about 60% but I think as soon as the next improvements will be released there is a good chance that nude.js is reliable enough :-)

Stay tuned!
Patrick