Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Difference between running the algorithm on browser and nodeJS

See original GitHub issue

Node Version: 14.16.0 Face-api.js : master cloned Chrome version : 89.0.4389.90 (Official Build) (64-bit)

I was running tests to see the difference between how the algorithm performs on the two platforms. For some reason, nodeJS is able to find images in the same image in which browser fails to find. An example of this would be : George_W_Bush_0137.jpg from the Labelled faces in the wild dataset.

Shouldn’t the encoding algorithm be platform agnostic. Why exactly does this happen?

Standalone code to encode on browser:

<!DOCTYPE html>
<html>
<head>
  <script src="../../../dist/face-api.js"></script>
  <script src="../public/js/commons.js"></script>
  <script src="../public/js/faceDetectionControls.js"></script>
  <!-- <link rel="stylesheet" href="styles.css"> -->
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css"> -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> -->
</head>
<body>

  <input type="file" id="file" name="file"/><br><br>

    <button id = "run" onclick="run()">Run</button><br><br>

  <script>

async function run(){


    await faceapi.loadSsdMobilenetv1Model('../../../weights')
    await faceapi.loadFaceLandmarkModel('../../../weights')
    await faceapi.loadFaceRecognitionModel('../../../weights')

    const inputElement = document.getElementById("file");

    console.log(inputElement.files[0]);


    const img = await faceapi.bufferToImage(inputElement.files[0]);


    const encoding = await calculateEncoding(img);

    console.log(encoding);

}


async function calculateEncoding(img){

      //We want to detect the best face in each file
      const result = await faceapi.detectSingleFace(img, getFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceDescriptor()

      //only if face found
      if(result != undefined)
          return result.descriptor;
      else 
        return undefined;

}

  </script>
</body>
</html>

NodeJS:

//encodes one image, path of which is supplied


const fsPromises = require('fs/promises');
const path = require('path');
const process = require('process');

const faceapi = require('face-api.js')
const { canvas, faceDetectionNet, faceDetectionOptions } = require('./commons');



async function run(){


    //load models
    await faceDetectionNet.loadFromDisk('../../weights')
    await faceapi.nets.faceLandmark68Net.loadFromDisk('../../weights')
    await faceapi.nets.faceRecognitionNet.loadFromDisk('../../weights')

    const encoding = await calculateEncoding(process.argv[2]);

    console.log(encoding);

}


async function calculateEncoding(imagePath){


    const img = await canvas.loadImage(imagePath);
    

    //We want to detect the best face in each file
    const result = await faceapi.detectSingleFace(img, faceDetectionOptions)
    .withFaceLandmarks()
    .withFaceDescriptor()

    //only if face found
    if(result != undefined)
        return result.descriptor;
    else 
        return undefined;

}

run();

Issue Analytics

State:
Created 3 years ago
Comments:6

Top GitHub Comments

1reaction

vladmandiccommented, Mar 20, 2021

yes, i was wrong. but at least i managed to find it at the end 😃

seems its an actual bug in implementation of tf.conv2d

actual function in FaceAPI is pointwiseConvLayer which is literary first operation performed in mobileNetV1 model implementation - so this tiny change cascades down to eventually create a difference you’re seeing.

see https://github.com/tensorflow/tfjs/issues/4843 for details

there is one more difference between browser and nodejs and that’s the initial jpg decoding which shifts pixel values by one (not coordinate offset, but rgb values itself). so simply adding tf.add(input, 1) to nodejs decode workflow solves it.

0reactions

vladmandiccommented, Apr 26, 2021

@mayankagarwal-cf

just closing the loop…

it seems that issue was conv2d implementation in old TF1 binaries which were used by tfjs-node
tfjs-node 3.5.0 finally ships with TF2 binaries and this issue is resolved

Top Results From Across the Web

What is Node.js and how does it differ from a browser - Medium

Very much like javascript running in a browser, node.js is has a single thread for running javascript and it uses the event queue....

Differences between Node.js and the Browser

Both the browser and Node.js use JavaScript as their programming language. Building apps that run in the browser is a completely different thing...

JavaScript vs Node JS | Topmost 3 Comparison you need to ...

JavaScript is a simple programming language that runs in any browser JavaScript Engine. Whereas Node JS is an interpreter or running environment for...

Difference between Node.JS and Javascript - GeeksforGeeks

NodeJS is a Javascript runtime environment. 2. Javascript can only be run in the browsers. We can run Javascript outside the browser with...

Difference between the Event Loop in Browser and Node Js?

Node Js event loop has multiple phases and each phase handle specific type of tasks whereas browser has micro task and macro task...