No face detection in Windows 10 Chrome when the app is built with typescript

[plmok61]

Issue Description My team is using the face detection feature of human in our app and we have run into an issue for users on Windows 10 in Chrome when the app is built with Typescript. For these users the face detection returns an empty array. This happens in our production env, ngrok, and localhost.

I have created simplified versions of our app. They are identical to each other except one is built with Javascript and the other with Typescript. The JS app works for all users in all environments. The TS version does not work in Windows 10 with the Chrome browser (tested in both version 119 and 120).

We have had 3 members of our team encounter this issue.

Steps to Reproduce

• On a computer with Windows 10
• Download and unzip the attached apps. One is JS and one is TS.
• In both apps npm install and npm start
• Use Chrome to view the apps in localhost

test-human-ts.zip test-human.zip

Expected Behavior Both apps work exactly the same in localhost

Observed behavior No face is detected in the TS app

Environment

• Human library version: 3.1.2
• Browser: Chrome 119 and 120
• OS and Hardware platform: Windows 10 Pro (x64) version 10.0.19044
• Packager: webpack
• Framework: React

Diagnostics

[augchan42]

What version of typescript does the browser bundle use? Recently had a pr to fix a build issue related to typescript 5.3 and typedoc, had to downgrade to typescript 5.1 for build to work.
EDIT: update wrong typescript version (previously 2.x, should be 5.x)

[vladmandic]

it would be helpfull to see inspector screenshots as above for both TS and JS builds so we can compare them and possibly spot the difference. note that i cannot go an recreate your entire project for purpose of troubleshooting.

also, are you using skipLibCheck=true? its highly recommended for TS projects so your build does NOT try to recompile already compiled libraries.

[plmok61]

@vladmandic Yes skipLibCheck is set to true for us. I'm not exactly sure what you wanted me to screen shot with the inspector, can you please give me an example? I've created gists for the bundles from running the apps in ngrok in case that is helpful.

JS https://gist.github.com/plmok61/46fc91891666f0a9c10551684a524107

TS https://gist.github.com/plmok61/8f390264e46341e20741d78a8531aa15

@augchan42 we have typescript 4.9.5 in the simplified app,

[vladmandic]

Screenshot exactly like you've posted, but for both TS app and JS app.

[plmok61]

Oh sorry I misunderstood. I though you meant screenshots of the actual built JS which seemed kind of odd.

Here are the JS screenshots:

And here are the TS screenshot

[vladmandic]

first of all, TS and JS projects are using different versions of Human - there is no point of comparing if we're not even looking at the same thing.

[plmok61]

Apologies, I was testing out different versions to see if it would fix the issue. When I am back in the office on Monday I will get new screenshots from one of our Windows 10 users with the same version

[plmok61]

Great catch on the versions. Typescript is not the issue after all.

It looks like version 3.1.2 is the culprit. We had ^3.0.6 in our package.json. When we installed the exact version of 3.0.7 in our staging app, face detection in Chrome Windows 10 once again works. We then installed 3.1.2 and had no faces detected.

We also noticed that 3.2.0 was just release so we tested it in staging as well and encountered the same no faces detected issue.

Are there any important improvements/fixes that we are missing out on by using 3.0.7? It seems to serve our purposes well.

[vladmandic]

versions 3.1 and 3.2 are primarily to support latest versions of typescript, node and tfjs, so no explicit need to upgrade. if 3.0 works and 3.1 doesn't it could be due to backend math precision and/or optimizations in newer tfjs. according to screenshots, you're running using webgpu backend, could you try as a test setting backend to webgl and see if that changes the results?

[plmok61]

We just tested 3.1.2 with backend set to webgl. We get some typescript errors from the config but face detection now works in windows 10 chrome.

This is our config.

{
  backend: 'webgl',
  gesture: {
    enabled: false,
  },
  hand: {
    enabled: false,
  },
  body: {
    enabled: false,
  },
  segmentation: {
    enabled: false,
  },
  face: {
    antispoof: {
      enabled: true,
    },
    liveness: {
      enabled: true,
    },
    iris: {
      enabled: true,
    },
    emotion: {
      enabled: true,
    },
    mesh: {
      enabled: true,
    },
    detector: {
      rotation: true,
    },
  },
}

We will continue to use 3.0.7 for now but it is nice to know that we are able to upgrade if we need to. Thank you for all your help!

[vladmandic]

webgpu is still work-in-progress, i'm surprised that chrome enabled it by default in latest versions, i would have left it for beta/dev for a while longer. math optimizations are changing weekly and likely some math results are different on 3 or 4th level behind decimal point, but enough to throw the model off.

anyhow, i'll close the issue for now, but feel free to post here with any further questions.

[Bobo100]

I recently encountered a similar problem while developing a simple test website.

On one of my computers, whenever I upload an image for human face detection, it always returns an empty array (No face detection).

This issue persists regardless of which web browser I use. I have tested it with versions 3.0.7, 3.1.2, and the latest version 3.2.0 of the software, and the problem remains consistent.

However, the same website functions correctly on other computers and mobile devices. So, I'm also puzzled why the same code and the same image (a frontal face photo) produce completely different results.

I have also tested two demo websites provided by the author on the problematic computer:

Demo Website 1: The issue of 'No face detection' consistently occurs on this URL. Demo Website 2: However, on this URL, the application runs smoothly

The solution that worked for me was modifying the backend setting to 'wasm'. backend: 'wasm' After making this change, the face detection started working as expected.

[askintution]

I recently encountered a similar problem while developing a simple test website.我最近在开发一个简单的测试网站时遇到了类似的问题。

On one of my computers, whenever I upload an image for human face detection, it always returns an empty array (No face detection).在我的一台计算机上，每当我上传用于人脸检测的图像时，它总是返回一个空数组（无人脸检测）。

This issue persists regardless of which web browser I use.无论我使用哪种 Web 浏览器，此问题都会持续存在。 I have tested it with versions 3.0.7, 3.1.2, and the latest version 3.2.0 of the software, and the problem remains consistent.我已经使用该软件的 3.0.7、3.1.2 和最新版本 3.2.0 对其进行了测试，问题仍然存在。

However, the same website functions correctly on other computers and mobile devices.但是，同一网站在其他计算机和移动设备上正常运行。 So, I'm also puzzled why the same code and the same image (a frontal face photo) produce completely different results.所以，我也很困惑为什么相同的代码和相同的图像（正面面部照片）会产生完全不同的结果。

I have also tested two demo websites provided by the author on the problematic computer:我还在有问题的计算机上测试了作者提供的两个演示网站：

Demo Website 1: The issue of 'No face detection' consistently occurs on this URL.演示网站 1：此 URL 上始终出现“无人脸检测”问题。 Demo Website 2: However, on this URL, the application runs smoothly演示网站 2：但是，在此 URL 上，应用程序运行流畅

The solution that worked for me was modifying the backend setting to 'wasm'.对我有用的解决方案是将后端设置修改为“wasm”。 backend: 'wasm' After making this change, the face detection started working as expected.进行此更改后，人脸检测开始按预期工作。

I recently encountered a similar problem while developing a simple test website.

On one of my computers, whenever I upload an image for human face detection, it always returns an empty array (No face detection).

This issue persists regardless of which web browser I use. I have tested it with versions 3.0.7, 3.1.2, and the latest version 3.2.0 of the software, and the problem remains consistent.

However, the same website functions correctly on other computers and mobile devices. So, I'm also puzzled why the same code and the same image (a frontal face photo) produce completely different results.

I have also tested two demo websites provided by the author on the problematic computer:

Demo Website 1: The issue of 'No face detection' consistently occurs on this URL. Demo Website 2: However, on this URL, the application runs smoothly

The solution that worked for me was modifying the backend setting to 'wasm'. backend: 'wasm' After making this change, the face detection started working as expected.

same problem, any progress on this issue? "wasm" is slow than "webgpu".