WebAssembly Compilation Error Due to CSP Restrictions

junaid-shirur commented 1 month ago

System Info

"@xenova/transformers": "^2.17.1", node : v20.12.2 npm: 10.5.0 windows 11

Environment/Platform

[X] Website/web-app
[X] Browser extension
[X] Server-side (e.g., Node.js, Deno, Bun)
[ ] Desktop app (e.g., Electron)
[ ] Other (e.g., VSCode extension)

Description

I encountered an issue when trying to initialize a transformer pipeline using the example provided in the @xenova/transformers repository. Below is the code snippet I used:

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

// Allocate a pipeline for sentiment-analysis
let pipe = await pipeline('sentiment-analysis', 'Xenova/bert-base-multilingual-uncased-sentiment');
let out = await pipe('I love transformers!');
console.log('out', out);
// Expected output: [{'label': 'POSITIVE', 'score': 0.999817686}]

I encountered the following error related to the Content Security Policy (CSP):

backend-impl.ts:101 Uncaught (in promise) Error: no available backend found. ERR: [wasm] RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because neither 'wasm-eval' nor 'unsafe-eval' is an allowed source of script in the following Content Security Policy directive: "script-src 'self'"). Build with -sASSERTIONS for more info.

Here is my current CSP configuration, modified after a bit of research:

"content_security_policy": {
    "extension_pages": "script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'"
}

<meta charset="UTF-8" http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'">

Despite the CSP settings seemingly correct, the WebAssembly module is still not being compiled,. Here are the additional steps and configurations I've tried:

Disabling local model allowance and browser cache:

env.allowLocalModels = false;
env.useBrowserCache = false;

Modifying the WebAssembly paths:

env.backends.onnx.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/";
env.backends.onnx.wasm.wasmPaths = "./path/to/wasmfiles";

Both CDN and local file approaches were tested.
Clearing browser and npm cache, reinstalling @xenova/transformers, node_modules, and updating CSP with CDN domain.
Trying different models to load.

All attempts have resulted in the same error. Any assistance or guidance on how to properly configure the CSP or modify the library setup to work would be greatly appreciated.

Reproduction

1: install @xenova/transformers 2: try running example from repository

xenova commented 1 month ago

Can you check your network tab to see the which URL it is attempting to access? The error you are seeing is most likely an (1) incorrect WASM version (should be https://cdn.jsdelivr.net/npm/onnxruntime-web@1.14.0/dist/) or (2) it is unable to find the files.

Hope that helps!

junaid-shirur commented 1 month ago

Thank you for the response and the suggestion to update the version, @xenova.

I have updated the version as recommended.I checked my network tab,all seems good to me. Here's a screenshot of my network tab for your reference:

xenova commented 1 month ago

Okay good, network traffic looks okay. Have you maybe looked at our sample browser extension/template? https://github.com/xenova/transformers.js/tree/main/examples/extension. Maybe that might assist.

junaid-shirur commented 1 month ago

Yes, I haven't cloned the repository, but I did try running the code directly from background.js.


    static task:any = 'text-classification';
    static model = 'Xenova/distilbert-base-uncased-finetuned-sst-2-english';
    static instance = null;

    static async getInstance(progress_callback = null) {
        if (this.instance === null) {
            this.instance = pipeline(this.task, this.model, { progress_callback });
        }

        return this.instance;
    }
}

// Create generic classify function, which will be reused for the different types of events.
const classify = async (text) => {
    // Get the pipeline instance. This will load and build the model when run for the first time.
    let model = await PipelineSingleton.getInstance((data) => {
        // You can track the progress of the pipeline creation here.
        // e.g., you can send `data` back to the UI to indicate a progress bar
        console.log('progress', data)
    });

    // Actually run the model on the input text
    let result = await model(text);
    return result;
};```

junaid-shirur commented 1 month ago

is there anything specific to look for in extension template? that might i missing out

xenova / transformers.js