[SOLVED] Transformers.js in React.js

Transformers.js in React.js

I'm building a component in React and I want to use a model from huggingface. I found the package @xenova/transformers that allows to use of these models in JavaScript, but when I try to create my pipeline instance like this:

class MyExtractorPipeline {
    static task = "feature-extraction";
    static model = "Xenova/all-MiniLM-L6-v2";
    static instance = null;

    static async getInstance(model, progress_callback = null) {
        if (this.instance === null) {
            try {
                this.instance = await pipeline(this.task, model, { progress_callback }); //<= THIS IS FAILING
            } catch (error) {
                throw new Error(error)
            }
        }
        return this.instance;
    }
}

I get this error:

worker.js:17 Uncaught (in promise) Error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at MyExtractorPipeline.getInstance (worker.js:17:1) at async worker.js:77:1

I'm sure it comes from the 'throw new Error(error)' that you can see above, but I don't know how to solve it, I need HELP.

I tried to do console.log() of almost all the variables, and I tried to use other hugginface models... Anything has been useful.

Solution

Is your intention to load the model locally? Have you used create-react-app to initiate your project?

If so (and this might not be unique to create-react-app) I've noticed that on build, if you reference a file in your 'src' folder, it does not properly find the files (causing 'index.html' to be returned).

Try putting your local models under your project's 'public' folder. Then set the environment variable like this:

env.localModelPath = process.env.PUBLIC_URL + '/models/'

Also, apply env setting for local loading of the model:

env.allowRemoteModels = false;
env.allowLocalModels = true;

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