imgly / background-removal-js

Remove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns. Explore an interactive demo.
https://img.ly/showcases/cesdk/web/background-removal/web
GNU Affero General Public License v3.0
5.7k stars 357 forks source link

Node package not working #44

Closed gtrabanco closed 1 year ago

gtrabanco commented 1 year ago

Description

I was running a test of new node version and I could not run it. With Bun there are some issues with onnyx so I tried with node 18.

Error

(I replaced in the output error my home for $HOME var or ~)

$ node index.js
Downloading fetch:/models/medium: 88188479 of 88188479
Downloading compute:inference: 0 of 1
Downloading compute:inference: 1 of 1
Error: Unsupported input '[object Blob]' of type object
    at Sharp._createInputDescriptor (~/bun-bg-removal/node_modules/sharp/lib/input.js:75:11)
    at new Sharp (~/bun-bg-removal/node_modules/sharp/lib/constructor.js:351:29)
    at Sharp (~/bun-bg-removal/node_modules/sharp/lib/constructor.js:173:12)
    at file:///${HOME}/bun-bg-removal/index.js:17:3

Installation

mkdir bg-remove-test && cd $_
npm init --yes
npm install --exact @imgly/background-removal-node sharp@0.32.6 # Avoid version mismatch between background-removal and sharp
touch index.mjs

index.mjs

import { removeBackground } from "@imgly/background-removal-node";
import sharp from "sharp";

const url =
  "https://balonmano.isquad.es/images/afiliacion_clubs/2898/square_35723432687275366a39.jpg";

try {
  const data = await fetch(url).then((response) => response.arrayBuffer());
  const png = await sharp(data).png().toBuffer();
  const imgBg = await removeBackground(png, {
    model: "medium", // default but I want to be explicity with this
    progress: (key, current, total) => {
      console.log(`Downloading ${key}: ${current} of ${total}`);
    },
  });

  sharp(imgBg).toFile("output.png");
} catch (error) {
  console.log(error);
}

I tried this after trying directly with url with this code with same result:

  const imgBg = await removeBackground(url, {
    model: "medium", // default but I want to be explicity with this
    progress: (key, current, total) => {
      console.log(`Downloading ${key}: ${current} of ${total}`);
    },
  });

Other

I am not sure if this is an issue or help wanted because I am doing something wrong.

My arch (uname -mprs): Darwin 21.6.0 x86_64 i386 Node version: v18.17.1

I am using fnm which should not be relevant but just to give full details.

TyT-NICK commented 1 year ago

Same here

Do you know any free alternative for the package? I know about remove.bg, but it's pricing is too high for our customer

UPD: Node version: v20.1.0

Also getting an error Could not find a declaration file for module '@imgly/background-removal-node' when import removeBackground

gtrabanco commented 1 year ago

Same here

Do you know any free alternative for the package? I know about remove.bg, but it's pricing is too high for our customer

UPD: Node version: v20.1.0

Also getting an error Could not find a declaration file for module '@imgly/background-removal-node' when import removeBackground

No I do not know. You can use a onnyx model and do your own implementation.

gtrabanco commented 1 year ago

Finally I got the problem, buffer (?) need to be resolved before writing to file.

Here is the right nodejs code (as esm):

import { removeBackground } from "@imgly/background-removal-node";

const url =
  "https://balonmano.isquad.es/images/afiliacion_clubs/2898/square_35723432687275366a39.jpg";

try {
  const imgBg = await removeBackground(url, {
    model: "medium", // default but I want to be explicity with this
    progress: (key, current, total) => {
      console.log(`Downloading ${key}: ${current} of ${total}`);
    },
  });

  sharp(await imgBg.arrayBuffer()).toFile("output.png");
} catch (error) {
  console.log(error);
}