Files
2026-07-26 20:58:27 +08:00
..
2026-07-26 20:58:27 +08:00
2026-07-26 20:58:27 +08:00
2026-07-26 20:58:27 +08:00
2026-07-26 20:58:27 +08:00
2026-07-26 20:58:27 +08:00
2026-07-26 20:58:27 +08:00
2026-07-26 20:58:27 +08:00
2026-07-26 20:58:27 +08:00

demo-ai-face-detector

CUTOS 4.0 Vue 3/Vite LWA demonstrating local browser-side face detection with @cutos/ai-face-detector.

No Device Provider or Gateway service is required. The LWA needs camera permission and packages the MediaPipe model/WASM resources for offline use.

Behaviour

  • Starts the user-facing camera automatically.
  • Uses the source camera ratio in landscape and a centre-cropped 1:1 preview in portrait.
  • Guides the user with a circular capture area and a moving confidence box.
  • Requires one face, confidence ≥ 0.90, face size ≥ 12%, and horizontal centering.
  • Requires the accepted face position and size to remain stable for about two seconds.
  • Locks the stable face image and stops inference while keeping the camera preview visible.
  • Restarts detection automatically after ten seconds, or immediately when Detect again is selected.
  • Displays the locked face in the lower-right corner and keeps Detection Result and Activity in two equal cards.

Development with the sibling SDK

cd ../sdk
npm install
npm run build

cd ../demo-ai-face-detector
npm install
npm run dev

Both dev and the CUTOS build copy version-matched model assets through the SDK's asset command.

Build and package

npx cutos lwa build

The generated package is:

release/demo-ai-face-detector-v<version>.lwa

The LWA version comes from public/config.json; package.json intentionally remains 0.0.0.

Upload and publish

npx cutos login --username office
npx cutos lwa upload
npx cutos lwa list demo-ai-face-detector
npx cutos lwa publish --lwa <content-id> --device <device-id>

For a release build, depend on the published npm SDK rather than file:../sdk.