Face Detection not defined

[mirzamukkarambaig]

I am creating a React JS-based front end that employs the Tensorflow JS Simple Face Detection model. The application runs fine when being run on the dev environment using npm run dev. However when I run npm run build and npm run preview the model throws the following error:

index-BEYgabte.js:15635 Uncaught (in promise) TypeError: Zse.FaceDetection is not a constructor
    at new t (index-BEYgabte.js:15635:1827)
    at index-BEYgabte.js:15635:3968
    at index-BEYgabte.js:15635:1457
    at Object.next (index-BEYgabte.js:15635:1562)
    at index-BEYgabte.js:15635:499
    at new Promise (<anonymous>)
    at l0 (index-BEYgabte.js:15635:250)
    at SEe (index-BEYgabte.js:15635:3683)
    at index-BEYgabte.js:15635:15604
    at index-BEYgabte.js:15635:1457

I ran the following command for installation

   yarn add @mediapipe/face_detection
yarn add @tensorflow/tfjs-core, @tensorflow/tfjs-backend-webgl
yarn add @tensorflow-models/face-detection

Got the following warnings:

upgrade
yarn upgrade v1.22.22
[1/4] Resolving packages...
warning @tensorflow-models/face-detection > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
warning @tensorflow-models/face-detection > rimraf > glob@7.2.3: Glob versions prior to v9 are no longer supported
warning @tensorflow-models/face-detection > rimraf > glob > inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning plotly.js > color-rgba > color-space > mumath@3.3.4: Redundant dependency in your project.
warning webgazer > @tensorflow-models/face-landmarks-detection > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "plotly.js > @plotly/mapbox-gl > @mapbox/mapbox-gl-supported@1.5.0" has unmet peer dependency "mapbox-gl@>=0.32.1 <2.0.0".
warning "webgazer > @tensorflow-models/face-landmarks-detection@0.0.3" has incorrect peer dependency "@tensorflow/tfjs-converter@^3.1.0".
warning "webgazer > @tensorflow-models/face-landmarks-detection@0.0.3" has incorrect peer dependency "@tensorflow/tfjs-core@^3.1.0".
warning "webgazer > @tensorflow-models/face-landmarks-detection > @tensorflow-models/blazeface@0.0.7" has incorrect peer dependency "@tensorflow/tfjs-converter@^3.1.0".
warning "webgazer > @tensorflow-models/face-landmarks-detection > @tensorflow-models/blazeface@0.0.7" has incorrect peer dependency "@tensorflow/tfjs-core@^3.1.0".

This is the picture of the preview

This is the picture of the dev

[gaikwadrahul8]

HI, @mirzamukkarambaig

I apologize for the delayed response and thank you for bringing this issue to our attention, if possible could you please help us with your Github repo along with converted TensorFlow.js models and complete steps to replicate the same behavior from our end to investigate this issue further from our end ?

Thank you from your cooperation and patience.

[mirzamukkarambaig]

No worries. Kindly find the code one this repo

the code you will be looking inside the src/utils/detect_faces and src/components/access_webcam files.

[fgsalomon]

Hi @gaikwadrahul8 ,

Any news on this issue?

I'm seeing the same problem on a Vue 3 app and I'm interested in a solution or workaround.

Thank you.

[gaikwadrahul8]

Hi, @mirzamukkarambaig

Thank you for your patience with the delay in my response. I'm able to replicate the reported behavior using the npm run preview command (output below). Running npm run build produces a different output (also below). We'll need to investigate this issue further and will provide an update soon. thank you for bringing this issue to our attention.

1. Output log of npm run preview command :

2. Output of npm run build command :

gaikwadrahul-macbookpro2:Face-Detection-TF-JS gaikwadrahul$ npm run build

> react-js-ai-procotring-tool@0.0.0 build
> vite build

vite v5.2.12 building for production...
✓ 816 modules transformed.
dist/index.html                     0.46 kB │ gzip:   0.29 kB
dist/assets/index-CGXWcEaS.css      6.14 kB │ gzip:   1.84 kB
dist/assets/index-fXzlpHlG.js   1,441.00 kB │ gzip: 271.41 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 2.75s
gaikwadrahul-macbookpro2:Face-Detection-TF-JS gaikwadrahul$ 

Thank you for your cooperation and patience.

[Jettonn]

@gaikwadrahul8 is there a fix for this issue, cause it's showing on my app too (only when running build dev)?

[klimeryk]

I've run into the same issue - any updates on the investigation here?

[klimeryk]

As a workaround, I've switched to using Mediapipe directly, see https://github.com/klimeryk/dealwithit/commit/7d470f6cb065cfa9e539ab4347b986a93abfc738. Since this library uses mediapipe behind the scenes, the data is in very similar format. You just need to multiple the keypoint coordinates by the dimensions of the source image. See full example from Google here: https://codepen.io/mediapipe-preview/pen/OJByWQr. And docs here: https://ai.google.dev/edge/mediapipe/solutions/vision/face_detector/web_js.

The model itself is not as accurate as the "full" model here. Looks like it's somewhere between short and full. But looks like "full" version is on the horizon: https://ai.google.dev/edge/mediapipe/solutions/vision/face_detector/index#blazeface_full-range.

Anyway, figured I'd share in case someone else finds it helpful 🙇

[klimeryk]

From my digging, looks like the root issue is https://github.com/vitejs/vite/issues/15851. Seems vite does not like when the library uses imports like import * as faceMesh from '@mediapipe/face_mesh';? And instead would prefer import faceMesh from '@mediapipe/face_mesh';. Or even better import { justStuffYouNeed } from '@mediapipe/face_mesh';.