Face detection using face-api.js

Anvil Q&A
1

Hi all,

I have been tasked to create a face detection app, which should be able to take a photo/screenshot when a face is center of the camera and placed symmetrically.
(The logic for when a face is symmetrically placed has not jet been decided).

After some googeling and youtubeing I find that the face-api.js library is quite convenient, as it runs on the client-side.
I did try the opencv library in anvil but since it’s running on the server side it is not an option.

Has anyone worked with the face-api.js library with anvil? The example app below works on desktop browsers like chrome, brave and safari. But I cannot get the camera to work properly on mobile; using safari and/or chrome.

I would also appreciate feedback if my “approach” using javascript is correct or not.

Fyi, the app is still under construction :slight_smile:

Feb-24-2023 13-24-52

Link to live app
https://wide-eyed-jubilant-kid.anvil.app

https://anvil.works/build#clone:E4CU4XETGPHJUBON=DFZ7C7XILQ375HYPQTRJKMMU

1 Like
2

I can’t comment on the mobile camera, not having used the camera before. But I have done some Javascript integrations using a range of techniques, and can say there’s no wrong way to do it if the result works.

The Anvil Javascript bridge does allow you to do more in Python that your current approach, if that’s something useful to you. In theory, any Javascript code has equivalent Python code using the anvil.js package and by importing Javascript objects from anvil.js.window.

You can also avoid the “query by id selector” issue that crops up in Javascript libraries if you pass around Anvil dom nodes instead. This isn’t likely to be an issue for your use, but it simplifies having multiple components of the same type on the screen at the same time.

If you end up running into the “How do I get data from Javascript back to Python” issue, then looking into moving some of the callbacks into Python would probably be useful.