Comparision two faces for similarity in Angular SPA

I had an idea to create a web application in which user could compare two faces and see how they are similar (look a like). Another goal to achieve was to make to run a similarity check on front-end, in the browser, so technically no back-end needed.

The main idea was comparing vector embeddings of two photos and calculate similatity by distance of two vectors. Closest vectors gives a high similarity.

To achieve this in the browser, I used face-api.js library. But the face-api.js was not righ solution. After the comparision made, it showed that these two gentlements are similar look. Similarity percentage was 83%.

Nevertheless, I have found that face-api.js has a some usefull methods like checking either photo has a human face, even return number of faces on the photo. So I leave it for photo validation and go further with my research.

I have found the onnx arcface models which do most of the trick. The drawback of this approach was the arc models are a bit haevy on size to include it as front-end dependency. I had to make an uploader for it. The positive side of it that I could upload different arc models to test.

Using garavv/arcface-onnx

Pros: similarity check accuracy: high Cons: model loading time is higher then resnet100-arcface, making vector embedding time is high

Using face-recognition-resnet100-arcface-onnx result:

Pros: similarity check accuracy: low Cons: low similarity result

Best results I get using garavv/arcface-onnx model for face similarity check. face-api.js wasn’t the solution but had a usefull methods which I used for validation a photo (only process the images which has single face).

Full code here https://github.com/Zaboniy/ng-similar-face/tree/main