nsfwjs icon indicating copy to clipboard operation
nsfwjs copied to clipboard

minimal demo not working properly, only detect first image correctly and after that showing same result for each image

Open kamran-tahir opened this issue 5 years ago • 3 comments

I am using the minimal demo. It is working properly if I refresh the web page after checking each image and showing the correct result for each image. But if I don't refresh the page and just check multiple images using image gallery then it evaluates only the first image correctly and after that shows the same result for each image.

      `const img = new Image();
       img.crossOrigin = "anonymous";
      
       img.src =imgpath;
       var porn_rate = 0;
       var sexy_rate = 0;
       var drawing_rate = 0;
 
        nsfwjs.load().then((model) => {
            model.classify(img).then((predictions) => {
              console.log("Predictions", predictions);
              predictions.forEach(function (arrayItem) {
	      var x = arrayItem.className;
	      var y = arrayItem.probability;
	      
	      if(x=='Porn'){
	        y = y*100;
	        porn_rate = y;
	      }
	      else if(x=='Sexy'){
	        y = y*100;
	        sexy_rate = y;
              }
              else if(x=='Drawing'){
	        y = y*100;
	        drawing_rate = y;
              }
          });
      
          console.log("porn rate: "+porn_rate);
          console.log("sexy rate: "+sexy_rate);
          console.log("Drawing rate: "+drawing_rate);

  	  if(porn_rate>40 || sexy_rate>40 ){
       	  alert("It seems that you have uploaded a nude picture :-(");
   	  }
	
});

});

`

I have checked all issues here but could not get any issue similar to mine. Thanks.

kamran-tahir avatar Jan 12 '21 09:01 kamran-tahir

Taking a look at your code, you might need to wait for the image.onload event to fire before accessing the image.

How are you calling this more than once? This code looks very "one time" to me.

GantMan avatar Jan 12 '21 22:01 GantMan

https://user-images.githubusercontent.com/29511058/104450715-569bce80-55c2-11eb-9222-5baad7f5a72a.mp4

@GantMan Please have a look at this video. I hope it will help you to understand the issue. so there is no loop actually but when I select the image each time from the gallery (you saw in the video) it changes the image name. I have checked by using the console and the image name is changing each time I select a new image. The rest of the code is the same you saw above. Please guide me where I am wrong.

document.getElementById('setimagename'+pointer).value  = idBRzero;
var imgpath = '<?=sUPLOAD?>'+idBRzero;
//console.log(imgpath);
const img = new Image();
img.crossOrigin = "anonymous";
img.src =imgpath;

......same as above code.......

kamran-tahir avatar Jan 13 '21 12:01 kamran-tahir

There's a small chance that the image is "tearing," meaning that you're sending it to the model before it's finished loading. Usually this will cause an issue with the first classification, though and even error, so that might not be the issue. Can you load the image and await the onload event?

my guess is that your first image loads faster than the NSFWJS model, so it works the first time. Once the model is loaded, each subsequent classification happens before the image is fully ready.

          const img= new Image();
          img.crossOrigin = 'anonymous';
          img.src = imgpath;
          img.onload = () => {
            model.classify(img).then((predictions) => {
              ...
            }
          }

GantMan avatar Jan 13 '21 20:01 GantMan