How to load model from the static folder path in nextjs or react or vanilla js?

[adnankarim]

[xenova]

Hi there 👋 The library will - by default - search for model files in /models/, followed by the model id. For example, if using Supabase/gte-small, you should copy all model files (with the same structure) into /models/Supabase/gte-small/. You can use the env variable update these defaults. For example:

import { env } from '@xenova/transformers';

// Specify a custom location for models (defaults to '/models/').
env.localModelPath = '/path/to/models/';

// Disable the loading of remote models from the Hugging Face Hub:
env.allowRemoteModels = false;

See the docs for more information.

e.g., if you can place all static files in /static/, your structure could look something like this:

/static/models/Supabase/gte-small/
├── config.json
├── tokenizer.json
├── tokenizer_config.json
└── onnx/
    ├── model.onnx
    └── model_quantized.onnx

[alex-breen]

With plain JS, the custom location path works well for me.

However, when I have a project initiated with 'create-react-app' that builds with webpack, I run into a problem. On build, if I reference a folder under /src, it does not properly find the files (causing index.html to be returned).

My solution has been to place local models under the project's 'public' folder. I set the environment variable like this:
env.localModelPath = process.env.PUBLIC_URL + '/models/'. Works like a charm, including lazily loading.

Further reference here on the public folder here: https://create-react-app.dev/docs/using-the-public-folder/