Issue replicating face recognition example: CORS errors and invalid signature when trying to load model weights

[jaanli]

Hi! Thank you for all of the help here :)

I am having issues replicating the face recognition demonstration from scratch. Here are the steps I followed:

1. Follow https://github.com/sitek94/vite-deploy-demo to create a new vite project and host it on GitHub pages.
2. Copy the face_recognition folder to the repo: https://github.com/webmachinelearning/webnn-samples/tree/master/face_recognition
3. Copy the common folder to the repo: https://github.com/webmachinelearning/webnn-samples/tree/master/common
4. Run git clone --recurse-submodules https://github.com/webmachinelearning/webnn-samples (thanks to @Honry in Face recognition example does not work locally on latest Chrome Canary: Invalid signature. #282) and copy the test-data folder with the model weights: https://github.com/jaanli/heartbeat/tree/main/test-data/models/ssd_mobilenetv2_face_nhwc
5. Navigate to the repository github page: https://jaanli.github.io/heartbeat/ and receive the following error:

CORS errors

    at async HTMLLabelElement.<anonymous> (index-DkrgW5Z5.js:37:33170)Understand this errorAI
heartbeat/:1 Access to fetch at 'https://d3i5xkfad89fac.cloudfront.net/test-data/models/facenet_nhwc/weights/Block35_3_Branch_1_Conv2d_0b_3x3_kernel.npy' from origin 'https://jaanli.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It seems like the example does not use the weights file that points to the test-data even though it is in the repository.

Here's a screenshot if needed of what happens in chrome canary when navigating to the repository github page: https://jaanli.github.io/heartbeat/

Locally, the errors say invalid signature in Numpy:

Any advice on how to fix this to get the example working? Thanks so much!

[endomorphosis]

this is to prevent cross site scripting attacks, an you try hosting a copy of the model weights on your own domain name, so that the origin of the html and the model weights are by the same source?

[jaanli]

this is to prevent cross site scripting attacks, an you try hosting a copy of the model weights on your own domain name, so that the origin of the html and the model weights are by the same source?

Thank you! Yes, I have been trying to host the model weights on my own domain name (https://jaanli.github.io/heartbeat/test-data/weights has the weights).

For example, this path works:

https://jaanli.github.io/heartbeat/test-data/models/ssd_mobilenetv2_face_nhwc/weights/FeatureExtractor_MobilenetV2_expanded_conv_15_project_weights.npy

However, the error in the console says invalid signature for the javascript downloading these weight files.

[jaanli]

Ok, found the issue! Indeed as @endomorphosis pointed out the issue was the paths.

In vite, I had to add the model weights files from test-data to the public folder.

https://jaanli.github.io/heartbeat/ now mirrors the example here: https://webmachinelearning.github.io/webnn-samples/face_recognition/

Thank you!! I will try implementing a heart rate detection algorithm next.

FYI, it is still quite difficult to understand how to run these examples as standalone webapps; a simpler tutorial or easier to understand code would be nice - if you look at https://github.com/jaanli/heartbeat/ you can see that there were a number of changes required from code in this repository (https://github.com/webmachinelearning/).

I reopened the issue for visibility, as hopefully someone can address the cloudfront URL and the need to host the model weights in the public directory to make the examples easier to use for newcomers.

[jaanli]

Here is how I fixed it:

export function weightsOrigin() {
  if (location.hostname.toLowerCase().indexOf('github.io') > -1) {
    return 'https://jaanli.github.io/heartbeat';
  } else {
    return '../heartbeat';
  }
}

This is important for others trying to deploy to GitHub pages as well like where these demos are hosted at :)

Hopefully this helps improve the awesome examples! My next step will be saving this video locally for analysis.

[ibelem]

Thanks @endomorphosis, and thanks @jaanli for the patience and improved the code of weightsOrigin() function. Indeed I limitted the model files acess from https://webmachinelearning.github.io/ only in AWS, submitted a README PR in #292 .