diff --git a/README.md b/README.md index 64c86c3..4bca74c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # nude.js -***nude.js*** is a JavaScript implementation of a nudity scanner based on approaches from research papers. HTMLCanvas makes it possible to analyse image data and afterwards decide whether it should be displayed or not. The detection algorithm runs at the client, therefore it's possible (with user interaction) to display the image even if it's identified as nude (false positive) +***nude.js*** is a JavaScript implementation of a nudity scanner based on approaches from research papers. HTMLCanvas makes it possible to analyse image data and video data eventually converting it into image and afterwards decide whether it should be displayed or not. The detection algorithm runs at the client, therefore it's possible (with user interaction) to display the image even if it's identified as nude (false positive) The real world usage for client side nudity detection could be in webproxies with child security filters, and maybe even more (e.g. on social media plattforms) nude.js is Open Source. Contributions are very welcome, the goal is to build a reliable client-side nudity scanner. @@ -8,7 +8,7 @@ nude.js is Open Source. Contributions are very welcome, the goal is to build a r https://sites.google.com/a/dcs.upd.edu.ph/csp-proceedings/Home/pcsc-2005/AI4.pdf?attredirects=0 ### Demo -Test the nudity detection script on several predefined images, I didn't have enough time to build a nice demo with flickr image support but feel free to test some of your images too. nude.js is currently supported in IE9(excanvas), FF 3.6+, Chrome, Safari and Opera. For really fast results try Chrome. +Test the nudity detection script on several predefined images and videos, I didn't have enough time to build a nice demo with flickr image support but feel free to test some of your images too and don't forget to add your video and correct the path in predefined div for video in my html. nude.js is currently supported in IE9(excanvas), FF 3.6+, Chrome, Safari and Opera. For really fast results try Chrome. Include nude.js as ususal ```HTML @@ -20,9 +20,16 @@ Add images as usual Alt text Alt text ``` -Then run the checking algorithm on the images you want to run it on +Add videos as usual ( +```HTML + +``` -##### nude.js provides 3 functions: +Then run the checking algorithm on the images and video you want to run it on + +##### nude.js provides 4 functions: **nude.init()** @@ -37,14 +44,30 @@ It uses 2 types of parameters: a valid id of an element in the document’s body This function initiates the scanning process, the optional function is executed after the scanning process finished. +**nude.scanVideo(imageData, width, height, callback)** + +Allows direct scanning of provided image data. Parameters include the image data, width, height, and a callback function to handle the result. + ### Example ```Javascript +//for scanning images nude.load(node); // Scan it nude.scan(function(result){ alert(result ? "Nudity found in " + node.id + "!" : "Not nude"); }); ``` +```Javascript +//for scanning videos +var imageData = /* obtain image data */; +var width = /* video frame width */; +var height = /* video frame height */; + +// Perform direct video scan +nude.scanVideo(imageData, width, height, function(result) { + alert(result ? "Nudity found in video frame!" : "No nudity detected in video frame"); +}); +``` ### Project page https://www.patrick-wied.at/static/nudejs/ diff --git a/compressed/nude.min.js b/compressed/nude.min.js index edfc339..2e785f5 100644 --- a/compressed/nude.min.js +++ b/compressed/nude.min.js @@ -1 +1 @@ -(function(){var a=(function(){var e=null,c=null,h=null,d=function(){e=document.createElement("canvas");e.style.display="none";var j=document.getElementsByTagName("body")[0];j.appendChild(e);c=e.getContext("2d")},b=function(k){var j=document.getElementById(k);e.width=j.width;e.height=j.height;h=null;c.drawImage(j,0,0)},g=function(j){e.width=j.width;e.height=j.height;h=null;c.drawImage(j,0,0)},i=function(){var l=c.getImageData(0,0,e.width,e.height),m=l.data;var j=new Worker("worker.nude.js"),k=[m,e.width,e.height];j.postMessage(k);j.onmessage=function(n){f(n.data)}},f=function(j){if(h){h(j)}else{if(j){console.log("the picture contains nudity")}}};return{init:function(){d();if(!!!window.Worker){document.write(unescape("%3Cscript src='noworker.nude.js' type='text/javascript'%3E%3C/script%3E"))}},load:function(j){if(typeof(j)=="string"){b(j)}else{g(j)}},scan:function(j){if(arguments.length>0&&typeof(arguments[0])=="function"){h=j}i()}}})();if(!window.nude){window.nude=a}a.init()})(); \ No newline at end of file +(function(){ var nude = (function(){ var canvas = null, ctx = null, resultFn = null, initCanvas = function(){ canvas = document.createElement("canvas"); canvas.style.display = "none"; var b = document.getElementsByTagName("body")[0]; b.appendChild(canvas); ctx = canvas.getContext("2d"); }, loadImageById = function(id){ var img = document.getElementById(id); canvas.width = img.width; canvas.height = img.height; resultFn = null; ctx.drawImage(img, 0, 0); }, loadImageByElement = function(element){ canvas.width = element.width; canvas.height = element.height; resultFn = null; ctx.drawImage(element, 0, 0); }, scanImage = function(){ var image = ctx.getImageData(0, 0, canvas.width, canvas.height), imageData = image.data; var myWorker = new Worker('worker.nude.js'), message = [imageData, canvas.width, canvas.height]; myWorker.postMessage(message); myWorker.onmessage = function(event){ resultHandler(event.data); } }, scanVideo = function(imageData, width, height, callback) { myWorker = new Worker('worker.nude.js'); myWorker.postMessage([imageData, width, height]); myWorker.onmessage = function(event) { callback(event.data); terminateWorker(); }; }; terminateWorker = function() { myWorker.terminate(); }, resultHandler = function(result){ if(resultFn){ resultFn(result); }else{ if(result) console.log("the picture contains nudity")}};return{ init: function(){ initCanvas(); if(!!!window.Worker){ document.write(decodeURIComponent("%3Cscript src='noworker.nude.js' type='text/javascript'%3E%3C/script%3E")); } }, load: function(param){ if(typeof(param) == "string"){ loadImageById(param); }else{ loadImageByElement(param); } }, scan: function(fn){ if(arguments.length>0 && typeof(arguments[0]) == "function"){ resultFn = fn; } scanImage(); }, scanVideo: scanVideo }; })(); if(!window.nude) window.nude = nude; nude.init(); })(); diff --git a/nude.js b/nude.js index 0982782..4004adb 100644 --- a/nude.js +++ b/nude.js @@ -1,7 +1,7 @@ /* - * Nude.js - Nudity detection with Javascript and HTMLCanvas - * - * Author: Patrick Wied ( http://www.patrick-wied.at ) +* Nude.js - Nudity detection with Javascript and HTMLCanvas +* +* Author: Patrick Wied ( http://www.patrick-wied.at ) * Version: 0.1 (2010-11-21) * License: MIT License */ @@ -55,6 +55,18 @@ resultHandler(event.data); } }, + // Function to directly scan the provided image data + scanVideo = function(imageData, width, height, callback) { + myWorker = new Worker('worker.nude.js'); // Create worker here + myWorker.postMessage([imageData, width, height]); + myWorker.onmessage = function(event) { + callback(event.data); + terminateWorker(); // Terminate the worker after processing the image + }; + }; + terminateWorker = function() { + myWorker.terminate(); + }, // the result handler will be executed when the analysing process is done // the result contains true (it is nude) or false (it is not nude) // if the user passed an result function to the scan function, the result function will be executed @@ -74,7 +86,7 @@ initCanvas(); // if web worker are not supported, append the noworker script if(!!!window.Worker){ - document.write(unescape("%3Cscript src='noworker.nude.js' type='text/javascript'%3E%3C/script%3E")); + document.write(decodeURIComponent("%3Cscript src='noworker.nude.js' type='text/javascript'%3E%3C/script%3E")); } }, @@ -84,13 +96,15 @@ }else{ loadImageByElement(param); } + }, scan: function(fn){ if(arguments.length>0 && typeof(arguments[0]) == "function"){ resultFn = fn; } scanImage(); - } + }, + scanVideo: scanVideo }; })(); // register nude at window object @@ -98,4 +112,4 @@ window.nude = nude; // and initialize it nude.init(); -})(); \ No newline at end of file +})(); diff --git a/tests/index.html b/tests/index.html index 03a7b0e..a1a849a 100644 --- a/tests/index.html +++ b/tests/index.html @@ -8,21 +8,24 @@ +
+ +

Demo pictures

-
Scan Image
+
Scan Image
-
Scan Image
+
Scan Image
-
Scan Image
+
Scan Image
@@ -30,13 +33,30 @@

Demo pictures

Scan Image
+ +
+ + + +
- + + + + + diff --git a/tests/nude.min.js b/tests/nude.min.js index edfc339..2e785f5 100644 --- a/tests/nude.min.js +++ b/tests/nude.min.js @@ -1 +1 @@ -(function(){var a=(function(){var e=null,c=null,h=null,d=function(){e=document.createElement("canvas");e.style.display="none";var j=document.getElementsByTagName("body")[0];j.appendChild(e);c=e.getContext("2d")},b=function(k){var j=document.getElementById(k);e.width=j.width;e.height=j.height;h=null;c.drawImage(j,0,0)},g=function(j){e.width=j.width;e.height=j.height;h=null;c.drawImage(j,0,0)},i=function(){var l=c.getImageData(0,0,e.width,e.height),m=l.data;var j=new Worker("worker.nude.js"),k=[m,e.width,e.height];j.postMessage(k);j.onmessage=function(n){f(n.data)}},f=function(j){if(h){h(j)}else{if(j){console.log("the picture contains nudity")}}};return{init:function(){d();if(!!!window.Worker){document.write(unescape("%3Cscript src='noworker.nude.js' type='text/javascript'%3E%3C/script%3E"))}},load:function(j){if(typeof(j)=="string"){b(j)}else{g(j)}},scan:function(j){if(arguments.length>0&&typeof(arguments[0])=="function"){h=j}i()}}})();if(!window.nude){window.nude=a}a.init()})(); \ No newline at end of file +(function(){ var nude = (function(){ var canvas = null, ctx = null, resultFn = null, initCanvas = function(){ canvas = document.createElement("canvas"); canvas.style.display = "none"; var b = document.getElementsByTagName("body")[0]; b.appendChild(canvas); ctx = canvas.getContext("2d"); }, loadImageById = function(id){ var img = document.getElementById(id); canvas.width = img.width; canvas.height = img.height; resultFn = null; ctx.drawImage(img, 0, 0); }, loadImageByElement = function(element){ canvas.width = element.width; canvas.height = element.height; resultFn = null; ctx.drawImage(element, 0, 0); }, scanImage = function(){ var image = ctx.getImageData(0, 0, canvas.width, canvas.height), imageData = image.data; var myWorker = new Worker('worker.nude.js'), message = [imageData, canvas.width, canvas.height]; myWorker.postMessage(message); myWorker.onmessage = function(event){ resultHandler(event.data); } }, scanVideo = function(imageData, width, height, callback) { myWorker = new Worker('worker.nude.js'); myWorker.postMessage([imageData, width, height]); myWorker.onmessage = function(event) { callback(event.data); terminateWorker(); }; }; terminateWorker = function() { myWorker.terminate(); }, resultHandler = function(result){ if(resultFn){ resultFn(result); }else{ if(result) console.log("the picture contains nudity")}};return{ init: function(){ initCanvas(); if(!!!window.Worker){ document.write(decodeURIComponent("%3Cscript src='noworker.nude.js' type='text/javascript'%3E%3C/script%3E")); } }, load: function(param){ if(typeof(param) == "string"){ loadImageById(param); }else{ loadImageByElement(param); } }, scan: function(fn){ if(arguments.length>0 && typeof(arguments[0]) == "function"){ resultFn = fn; } scanImage(); }, scanVideo: scanVideo }; })(); if(!window.nude) window.nude = nude; nude.init(); })(); diff --git a/tests/test.nude.js b/tests/test.nude.js index 0c6b8a8..f2b288f 100644 --- a/tests/test.nude.js +++ b/tests/test.nude.js @@ -41,4 +41,62 @@ window.onload = function(){ -} \ No newline at end of file +} + + +var scanCount = 0; +var videoContainer = document.getElementById('videoResult'); +var canvas = document.createElement('canvas'); +var ctx = canvas.getContext('2d', { willReadFrequently: true }); // Set willReadFrequently to true + +// Variable to track the last scan time +var lastScanTime = 0; + +// Add event listener to start scanning when video starts playing +document.getElementById('demoVideo').addEventListener('play', function() { + var video = this; + + var scanFrame = function() { + if (!video.paused && !video.ended) { + var currentTime = video.currentTime; + var timeDiff = currentTime - lastScanTime; + + // Check if at least 5 seconds have elapsed since the last scan + if (timeDiff >= 5) { + canvas.width = Math.min(video.videoWidth, 1920); // Limit width to 1920 pixels (1080p) + canvas.height = Math.min(video.videoHeight, 1080); // Limit height to 1080 pixels (1080p) + ctx.drawImage(video, 0, 0, canvas.width, canvas.height); + var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); + + // Convert ImageData to a format that can be used by nude.scan() + nude.scanVideo(imageData.data, canvas.width, canvas.height, function(result) { + console.log("Nudity found in frame: " + (result ? "Yes" : "No")); + scanCount++; // Increment scan counter + displayResultOnVideoContainer(scanCount, result); + }); + + // Update the last scan time + lastScanTime = currentTime; + } + } + }; + + // Scan every second + var scanInterval = setInterval(function() { + scanFrame(); + }, 1000); // Scan every 1 second + + // Stop scanning when the video ends + video.addEventListener('ended', function() { + clearInterval(scanInterval); // Stop scanning + console.log("Video scanning complete."); + }); +}); + +function displayResultOnVideoContainer(scanNumber, result) { + var resultText = "Nudity found in scan " + scanNumber + ": " + (result ? "Yes" : "No"); + var resultDiv = document.createElement('div'); + resultDiv.textContent = resultText; + videoContainer.innerHTML = ''; // Clear previous results + videoContainer.appendChild(resultDiv); +} diff --git a/worker.nude.js b/tests/worker.nude.js similarity index 99% rename from worker.nude.js rename to tests/worker.nude.js index 2e0c218..3fdd22b 100644 --- a/worker.nude.js +++ b/tests/worker.nude.js @@ -140,6 +140,8 @@ for(var i = 0, u = 1; i < length; i+=4, u++){ } + + merge(detectedRegions, mergeRegions); analyseRegions(); };