Use custom model with tfjs-tflite CORS issue

Special Interest Groups TF.js
, , ,
#1

The tfjs-tflite library allows you to run TFLite models on the web.

Example:

const tfliteModel = await tflite.loadTFLiteModel('url/to/your/model.tflite');

or

const objectDetector = await tflite.ObjectDetector.create(
    "https://storage.googleapis.com/tfhub-lite-models/tensorflow/lite-model/ssd_mobilenet_v1/1/metadata/2.tflite"
);

I’m currently working on a simple Object Detection example, which works fine for the example models that are stored on Google Cloud, but I couldn’t get it to work with a custom model stored on Github.

This gives me a CORS error:

Access to fetch at 'https://github.com/TannerGilbert/TFLite-Object-Detection-with-TFLite-Model-Maker/raw/master/model.tflite' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'https://render.githubusercontent.com https://viewscreen.githubusercontent.com https://viewscreen-lab.githubusercontent.com', but only one is allowed. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Therefore, I wanted to ask what’s the simplest way to solve the error or perhaps what the best platform is to store your model on the web for free.

Any help is highly appreciated. Kind regards,
Gilbert Tanner

#3

So CORS stands for Cross Origin Resource Sharing and in order to use anything in JavaScript on the client side you must send the asset with a server that sets the correct CORS headers so that the code is allowed to consume it - else people could take content from any site and use it without permission which could lead to unintended consequences.

If the asset is on the same domain as the webpage you are hosting then this will not be an issue. However if the asset you are trying to bring in is on a different domain (eg subdomain too) then you must explicitly set these headers with your server configuration. You also need to set the “crossorigin” attribute on the HTML too for images etc:

More details on CORS can be found here:

If you use a website like Glitch.com to host your demo CORS headers are set automatically.

It should also be noted that you probably need to serve your assets over https too as mixed protocols eg some assets on http and some on https will also lead to issues.

#4

Thanks @Jason for the detailed explanations!

@Gi_T, for your use case, it is possible to use the “raw.githubusercontent.com” link to get the model file which has “access-control-allow-origin” header set to “*”.

Try:

https://raw.githubusercontent.com/TannerGilbert/TFLite-Object-Detection-with-TFLite-Model-Maker/master/model.tflite

Thanks!

1 Like
#5

Oh nice that is good to know you can use that domain to get the correct headers! Thanks for sharing Jing!

#7

@Jing_Jin @Jason Thanks for the help. It’s greatly appreciated.