Missing Model in @imgly/background-removal-data Resource

[pappikko]

Description

I am using @imgly/background-removal in a Nuxt 3 application with the following versions:

"@imgly/background-removal": "^1.5.2",
"@imgly/background-removal-data": "^1.4.5"

While trying to use the package, I encountered an error indicating that the /models/isnet_quint8 resource is not found. This issue seems to be due to the absence of the model in the resources.json file retrieved from @imgly/background-removal-data.

Error Message

Error removing background: Error: Resource /models/isnet_quint8 not found. Ensure that the config.publicPath is configured correctly.
    at loadAsBlob (resource.ts:41:11)
    at async initBase (inference.ts:14:16)
    at async initInference (inference.ts:24:16)
    at async removeBackground (v1.ts:39:31)
    at async remove-bg.vue:19:22

Details

• The resources.json file fetched from @imgly/background-removal-data does not contain the /models/isnet_quint8 model.
• However, the resources.json hosted on IMG.LY (https://staticimgly.com/@imgly/background-removal-data/1.5.1/dist/resources.json) does include /models/isnet_quint8.

Request

Please update @imgly/background-removal-data to include the missing /models/isnet_quint8 in the resources.json file, or provide guidance on how to correctly configure the model path to resolve this issue.

[pappikko]

Solution

To resolve this issue, I followed these steps:

1. Copied the content of https://staticimgly.com/@imgly/background-removal-data/1.5.1/dist/resources.json to the public/ directory of my Nuxt 3 project.

2. Downloaded the Wasm and ONNX neural networks referenced in the above resources.json and placed them in the public/ directory as well.

   https://staticimgly.com/@imgly/background-removal-data/1.5.1/dist/<hash>

3. Downgraded @imgly/background-removal to version 1.5.1. reference: https://github.com/imgly/background-removal-js/issues/124

   npm install @imgly/background-removal@1.5.1

4. Configured the publicPath in the Config object to point to the local server.

   import type { Config } from "@imgly/background-removal";
   import { removeBackground } from "@imgly/background-removal";
   
   let image_src: ImageData | ArrayBuffer | Uint8Array | Blob | URL | string = 'https://source.unsplash.com/1600x900/?dog';
   
   let config: Config = {
    debug: true,
    publicPath: 'http://localhost:3000/',
   };
   
   removeBackground(image_src, config);

This implementation is specific to Nuxt 3.

[DanielHauschildt]

Hi, we had some problems due to the package size limit of NPM. We had to move the data to the cdn and now provide a prepackaged downloadable package See #127