Error: Resource onnxruntime-web/ort-wasm-simd.wasm not found

[tariwiencke]

I build this little function to remove the background of an image from file input. Build with Next.js 13.5.4.

"use client"
import imglyRemoveBackground, { Config } from "@imgly/background-removal"
export default function clientAction(data: FormData) {

    const image = data.getAll("images")[1]
    let image_src: ImageData | ArrayBuffer | Uint8Array | Blob | URL | string = "/public/images/1/0.png";
    let config: Config = {
        debug: true,
        progress: (key, current, total) => {
            console.log(`Downloading ${key}: ${current} of ${total}`);
        },
        publicPath: `http://localhost:3000/background-removal/dist/`,
    };
    imglyRemoveBackground(image_src, config).then((blob: Blob) => {

        // The result is a blob encoded as PNG. It can be converted to an URL to be used as HTMLImage.src
        const url = URL.createObjectURL(blob);
        console.log(url)

    }).catch((error) => {
        console.error('An error occurred:', error);
    });;
}

When running with chrome I get this error:

An error occurred: Error: Resource onnxruntime-web/ort-wasm-simd.wasm not found. Ensure that the config.publicPath is configured correctly

When I leave out the publicPath in the config like this...

"use client"
import imglyRemoveBackground, { Config } from "@imgly/background-removal"
export default function clientAction(data: FormData) {

    const image = data.getAll("images")[1]
    let image_src: ImageData | ArrayBuffer | Uint8Array | Blob | URL | string = "/public/images/1/0.png";
    let config: Config = {
        debug: true,
        progress: (key, current, total) => {
            console.log(`Downloading ${key}: ${current} of ${total}`);
        }
    };
    imglyRemoveBackground(image_src, config).then((blob: Blob) => {

        // The result is a blob encoded as PNG. It can be converted to an URL to be used as HTMLImage.src
        const url = URL.createObjectURL(blob);
        console.log(url)

    }).catch((error) => {
        console.error('An error occurred:', error);
    });;
}

I receive this error:

An error occurred: Error: Resource onnxruntime-web/ort-wasm-simd.wasm not found. Ensure that the config.publicPath is configured correctly.

The model then gets fetched from this url:

{
    "publicPath": "https://unpkg.com/@imgly/background-removal@1.1.1/dist/",
    "debug": true,
    "proxyToWorker": true,
    "fetchArgs": {},
    "model": "medium"
}

[TyT-NICK]

Exactly the same using same NextJs version.

Moved /dist/* to /public/models and /dist/resources.json to /public.

Loading models finished successful, but right after getting Uncaught (in promise) Error: Resource onnxruntime-web/ort-wasm-simd.wasm not found. Ensure that the config.publicPath is configured correctly. loadAsBlob index.mjs:5891 loadAsUrl index.mjs:5878 createOnnxSession index.mjs:6039 initInference index.mjs:9859 memoized index.mjs:4228 removeBackground index.mjs:9914

    async function processImage(image) {
      const blob = await removeBackground(image, {
        publicPath: `${new URL(window.location.toString()).origin}/models/`,
        model: 'small',
        debug: true,
        progress: (key, value, total) => {
          console.log(`${key}: ${value}/${total}`);
        },
      });
      const buffer = await blob.arrayBuffer();
      ...
    }

[PanYX]

I also encountered this problem, and then I read the source code and found the problem. The key in resource.json was /onnxruntime-web/ort-wasm-simd.wasm, but loadAsUrl('onnxruntime-web/ort -wasm-simd.wasm', config) is missing /. I changed the source code to skip this error, but encountered WebAssembly.instantiate(): Import #37 module="a" function="L" error: function import requires a callable) This error, do you have any solution to this error?

[omar-moquete]

Same problem here.

[mounirrouissi]

it looks like its a problem in the https://unpkg.com/ hosting . https://classic.yarnpkg.com/en/package/@imgly/background-removal-node