nude.js: Nudity Detection with JavaScript

When I first heard about nude.js, the client side nudity detection software, I was very skeptical for a number of reasons:

Ideally, nudity detection should be done on the server side so that adult materials don't make it to the client at all. I don't have faith in automated nudity detection as a whole (which, as a programmer, may seem stupid) Would nudity in greyscale imagery be detected? How accurate can the detection be? If you did detect nudity in an image, what would you do? What's a practical usage?

I've spent some time with the nude.js software and wanted to show you how to use it and let you know if my skepticisms were answered.

About nude.js

From a technical standpoint, nude.js uses Canvas and WebWorker technology to set the image up for analyzation. The image is loaded into canvas and compared against this nudity algorithm, which consists of the following steps:

Detect skin-colored pixels in the image.

Locate or form skin regions based on the detected skin pixels.

Analyze the skin regions for clues of nudity or non-nudity.

Classify the image as nude or not.

nude.js supports IE9+ (with excanvas), Firefox 3.6+, WebKit-based browsers (Chrome, Safari, Mobile Safari), and Opera. nude.js also recently added support for video image analyzation. There's an extra JavaScript file included with nude.js for clients that do not support the WebWorker API.

Using nude.js

Start by adding nude.js adding your images to the page as usual:

<!-- No canvas for IE, so download it and include it for IE --> <!--[if IE]> <script type="text/javascript" src="excanvas_r3/excanvas.compiled.js"></script> <![endif]--> <script src="nude.js/compressed/nude.min.js"></script> <!-- images to check --> <img src="dvt1.jpg" alt="Dita Von Tease" id="image1" onclick="onImageClick('image1');" /> <img src="dvt2.jpg" alt="Dita Von Tease" id="image2" onclick="onImageClick('image2');" /> <img src="dvt3.jpg" alt="Dita Von Tease" id="image3" onclick="onImageClick('image3');" /> <img src="dvt4.jpg" alt="Dita Von Tease" id="image4" onclick="onImageClick('image4');" />

Using nude.js is simple because there are only two methods to use: <code>load</code> and <code>scan</code>. The <code>load</code> method takes the element <code>id</code> or element itself and draws a canvas image based on the original image. The <code>scan</code> method runs the algorithm on the canvas image data, returning <code>true</code> or <code>false</code>.

function onImageClick(node) { nude.load(node); // Scan it nude.scan(function(result){ alert(result ? "Nudity found in " + node.id + "!" : "Not nude"); }); }

As you can imagine, the process can be taxing on your browser so don't expect an immediate result. The size of the image is an obvious consideration. If you rely heavily on nude.js, be aware that your large images could be problematic.

Thoughts After Using nude.js

This library did remarkably well in detecting nudity in quality JPEG images of females but had a bit of trouble with darker skin tones. In my tests, nude.js failed in finding nudity in greyscale images and movie screencaps (probably from lack of image quality). I had difficulty in implementing a decent video test.

In the end, I'm impressed with what nude.js but I can't help but feel that it's not ready for prime time. Image scanning can take a few seconds to return a result and, in some cases, bricks the browser until analyzation is complete. Since nude.js (well, the algorithm it uses) has issues detecting nudity in greyscale images, images of lessor quality, and dark skin tones, I can't highly recommend it for sites that consider nudity-block critical. I have to believe that nudity detection has a bigger place on the server side, preventing questionable imagery from hitting the client at all. Great work by Patrick Wied though -- nude.js is unique and fairly reliable.