Fixed Has everything become outdated? #130

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [21.x]
+        node-version: [20.x]
     steps:
       - uses: actions/checkout@v3
         with:

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.3",
+  "version": "1.5.5",
   "name": "workspace",
   "workspaces": [
     "packages/web",

packages/node-e2e/package.json

@@ -6,5 +6,5 @@
     "@imgly/background-removal-node": "file:../node",
     "jest": "^29.6.2"
   },
-  "version": "1.5.3"
+  "version": "1.5.5"
 }

packages/node-examples/package.json

@@ -9,5 +9,5 @@
     "@imgly/background-removal-node": "file:../node",
     "uuidv4": "^6.2.13"
   },
-  "version": "1.5.3"
+  "version": "1.5.5"
 }

packages/node/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imgly/background-removal-node",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "Background Removal in NodeJS",
   "resources": "@imgly/background-removal-node",
   "keywords": [

packages/web-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imgly/background-removal-data",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "Background Removal Data",
   "keywords": [
     "background-removal",

packages/web-examples/vite-project/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-project",
   "private": true,
-  "version": "1.5.3",
+  "version": "1.5.5",
   "type": "module",
   "scripts": {
     "start": "npm run dev",

packages/web-examples/vite-project/src/App.vue

@@ -87,9 +87,9 @@ export default {
 
     onMounted(async () => {
       // Optional Preload all assets
-      // await preload(config).then(() => {
-      //   console.log('Asset preloading succeeded');
-      // });
+      await preload(config).then(() => {
+        console.log('Asset preloading succeeded');
+      });
       if (isRunning.value) {
         interval = setInterval(() => {
           seconds.value = calculateSecondsBetweenDates(

packages/web/CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [1.5.0]
 
 ### Added
 

packages/web/README.md

@@ -1,15 +1,10 @@
 # Background Removal in the Browser
 
-### 🚨 We are hiring 🚨
-
 We are always looking for great people at IMG.LY. If you are working with our background removal library you might be a perfect fit! **Apply now at [IMG.LY Careers](https://img.ly/company/careers/?utm_source=github&utm_medium=readme&utm_campaign=background-removal-js)**
 
-<p align="center">
-<img src="https://img.ly/showcases/cesdk/web/s/case-thumbnail/background-removal/background-removal-0.png?utm_source=github&utm_medium=project&utm_campaign=background-removal-js" alt="background removal js showcase" />
-</p>
+&lt;p align="center"&gt; &lt;img src="https://img.ly/showcases/cesdk/web/s/case-thumbnail/background-removal/background-removal-0.png?utm_source=github&utm_medium=project&utm_campaign=background-removal-js" alt="background removal js showcase" /&gt; &lt;/p&gt;
 
-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?utm_source=github&utm_medium=project&utm_campaign=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?utm_source=github&utm_medium=project&utm_campaign=background-removal-js).
 
 ## News
 
@@ -64,7 +59,7 @@ type Config = {
   debug: bool; // enable or disable useful console.log outputs
   device: 'cpu' | 'gpu'; // choose the execution device. gpu will use webgpu if available
   proxyToWorker: bool; // Whether to proxy the calculations to a web worker. (Default true)
-  model: 'small' | 'medium'; // The model to use. (Default "medium")
+  model: 'isnet' | 'isnet_fp16' | 'isnet_quint8'; // The model to use. (Default "isnet_fp16")
   output: {
     format: 'image/png' | 'image/jpeg' | 'image/webp'; // The output format. (Default "image/png")
     quality: number; // The quality. (Default: 0.8)
@@ -77,8 +72,8 @@ type Config = {
 
 The onnx model is shipped in various sizes and needs.
 
-- small (~40 MB) is the smallest model and is in most cases working fine but sometimes shows some artifacts. It's a quantized model.
-- medium (~80MB) is the default model.
+- small (\~40 MB) is the smallest model and is in most cases working fine but sometimes shows some artifacts. It's a quantized model.
+- medium (\~80MB) is the default model.
 
 ### Preloading Assets
 
@@ -91,7 +86,6 @@ const config: Configuration = ...;
 preload(config).then(() => {
   console.log("Asset preloading succeeded")
 })
-
 ```
 
 ### Download Progress Monitoring
@@ -119,8 +113,7 @@ The performance is largely dependent on the feature set available. Most prominen
 
 The wasm and onnx neural networks are hosted by IMG.LY by default. For production use, we advise you to host them yourself:
 
-- Download the following package with the package version that matches your `@imgly/background-removal` version from the IMG.LY CDN and decompress it. Note that you need to replace `YOUR_PACKAGE_VERSION` with the actual version of the package you are using. The URL is
-  `https://staticimgly.com/@imgly/background-removal-data/YOUR_PACKAGE_VERSION/package.tgz`.
+- Download the following package with the package version that matches your `@imgly/background-removal` version from the IMG.LY CDN and decompress it. Note that you need to replace `YOUR_PACKAGE_VERSION` with the actual version of the package you are using. The URL is `https://staticimgly.com/@imgly/background-removal-data/YOUR_PACKAGE_VERSION/package.tgz`.
 - Move the content of the `package/dist` folder to be served by your web server. This often is the `/public` folder.
 
 ```typescript
@@ -171,11 +164,11 @@ let config: Config = {
 
 `@imgly/background-removal` is ideal for developers and projects that require efficient and cost-effective background removal directly in the browser. It caters to a wide range of use cases, including but not limited to:
 
-- _E-commerce applications_ that need to remove backgrounds from product images in real time.
+- *E-commerce applications* that need to remove backgrounds from product images in real time.
 
-- _Image editing applications_ that require background removal capabilities for enhancing user experience.
+- *Image editing applications* that require background removal capabilities for enhancing user experience.
 
-- _Web-based graphic design tools_ that aim to simplify the creative process with in-browser background removal.
+- *Web-based graphic design tools* that aim to simplify the creative process with in-browser background removal.
 
 Whether you are a professional developer or a hobbyist, `@imgly/background-removal` empowers you to deliver impressive applications and services with ease.
 
@@ -185,5 +178,4 @@ The software is free for use under the AGPL License. Please contact [support@img
 
 ## Authors & Contributors
 
-This library is made by IMG.LY shipping the world's premier SDKs for building creative applications.
-Start your trial of the [CreativeEditor SDK](https://img.ly/products/creative-sdk?utm_source=github&utm_medium=project&utm_campaign=background-removal-js), [PhotoEditor SDK](https://img.ly/products/photo-sdk?utm_source=github&utm_medium=project&utm_campaign=background-removal-js) & [VideoEditor SDK](https://img.ly/products/video-sdk?utm_source=github&utm_medium=project&utm_campaign=background-removal-js).
+This library is made by IMG.LY shipping the world's premier SDKs for building creative applications. Start your trial of the [CreativeEditor SDK](https://img.ly/products/creative-sdk?utm_source=github&utm_medium=project&utm_campaign=background-removal-js), [PhotoEditor SDK](https://img.ly/products/photo-sdk?utm_source=github&utm_medium=project&utm_campaign=background-removal-js) & [VideoEditor SDK](https://img.ly/products/video-sdk?utm_source=github&utm_medium=project&utm_campaign=background-removal-js).

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imgly/background-removal",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "Background Removal in the Browser",
   "keywords": [
     "background-removal",

packages/web/src/MimeType.ts

@@ -0,0 +1,41 @@
+export class MimeType {
+  type: string = 'application/octet-stream';
+  params: Record<string, string> = {};
+
+  private constructor(type: string, params: Record<string, string>) {
+    this.type = type;
+    this.params = params;
+  }
+
+  toString(): string {
+    const paramsStr = [];
+    for (const key in this.params) {
+      const value = this.params[key];
+      paramsStr.push(`${key}=${value}`);
+    }
+    return [this.type, ...paramsStr].join(';');
+  }
+
+  static create(type, params: Record<string, string>): MimeType {
+    return new MimeType(type, params);
+  }
+
+  isIdentical(other: MimeType): Boolean {
+    return this.type === other.type && this.params === other.params;
+  }
+
+  isEqual(other: MimeType): Boolean {
+    return this.type === other.type;
+  }
+
+  static fromString(mimeType: string): MimeType {
+    const [type, ...paramsArr] = mimeType.split(';');
+    const params: Record<string, string> = {};
+
+    for (const param of paramsArr) {
+      const [key, value] = param.split('=');
+      params[key.trim()] = value.trim();
+    }
+    return new MimeType(type, params);
+  }
+}

packages/web/src/api/v1.ts

@@ -20,8 +20,7 @@ import { ImageSource } from '../utils';
 const init = memoize(initInference, (config) => JSON.stringify(config));
 
 async function preload(configuration?: Config): Promise<void> {
-  const config = validateConfig(configuration);
-  await preloadResources(config);
+  await init(configuration);
   return;
 }
 

packages/web/src/features.js → packages/web/src/capabilities.js

@@ -122,5 +122,9 @@ export const bigInt = () =>
       ])
     );
 
-export const webgpu = () => navigator.gpu !== undefined;
+export const webgpu = async () => {
+  if (navigator.gpu === undefined) return false;
+  const adapter = await navigator.gpu.requestAdapter();
+  return adapter !== null;
+};
 export const maxNumThreads = () => navigator.hardwareConcurrency ?? 4;

packages/web/src/codecs.ts

@@ -1,4 +1,5 @@
 export { imageEncode, imageDecode, MimeType };
+  import { MimeType } from './MimeType';
 import { imageBitmapToImageData, createCanvas } from './utils';
 import ndarray, { NdArray } from 'ndarray';
 
@@ -78,44 +79,3 @@ async function imageEncode(
   }
 }
 
-class MimeType {
-  type: string = 'application/octet-stream';
-  params: Record<string, string> = {};
-
-  private constructor(type: string, params: Record<string, string>) {
-    this.type = type;
-    this.params = params;
-  }
-
-  toString(): string {
-    const paramsStr = [];
-    for (const key in this.params) {
-      const value = this.params[key];
-      paramsStr.push(`${key}=${value}`);
-    }
-    return [this.type, ...paramsStr].join(';');
-  }
-
-  static create(type, params: Record<string, string>): MimeType {
-    return new MimeType(type, params);
-  }
-
-  isIdentical(other: MimeType): Boolean {
-    return this.type === other.type && this.params === other.params;
-  }
-
-  isEqual(other: MimeType): Boolean {
-    return this.type === other.type;
-  }
-
-  static fromString(mimeType: string): MimeType {
-    const [type, ...paramsArr] = mimeType.split(';');
-    const params: Record<string, string> = {};
-
-    for (const param of paramsArr) {
-      const [key, value] = param.split('=');
-      params[key.trim()] = value.trim();
-    }
-    return new MimeType(type, params);
-  }
-}

packages/web/src/onnx.ts

@@ -7,13 +7,13 @@ import * as ort_cpu from 'onnxruntime-web';
 import * as ort_gpu from 'onnxruntime-web/webgpu';
 
 import { loadAsUrl } from './resource';
-import * as feat from './features';
+import * as caps from './capabilities';
 import { Config } from './schema';
 
 async function createOnnxSession(model: any, config: Config) {
-  const useWebGPU = config.device === 'gpu';
-  const useThreads = await feat.threads();
-  const useSimd = feat.simd();
+  const useWebGPU = config.device === 'gpu' && await caps.webgpu();
+  const useThreads = await caps.threads();
+  const useSimd = caps.simd();
   const proxyToWorker = config.proxyToWorker;
   const executionProviders = [useWebGPU ? 'webgpu' : 'wasm'];
   const ort = useWebGPU ? ort_gpu : ort_cpu;
@@ -28,8 +28,8 @@ async function createOnnxSession(model: any, config: Config) {
     ort.env.logLevel = 'verbose';
   }
 
-  ort.env.wasm.numThreads = feat.maxNumThreads();
-  ort.env.wasm.simd = feat.simd();
+  ort.env.wasm.numThreads = caps.maxNumThreads();
+  ort.env.wasm.simd = caps.simd();
   ort.env.wasm.proxy = proxyToWorker;
 
   const wasmPaths = {
@@ -79,7 +79,7 @@ async function runOnnxSession(
   outputs: [string],
   config: Config
 ) {
-  const useWebGPU = config.device === 'gpu';
+  const useWebGPU = config.device === 'gpu' && await caps.webgpu();
   const ort = useWebGPU ? ort_gpu : ort_cpu;
 
   const feeds: Record<string, any> = {};

packages/web/src/schema.ts

@@ -2,8 +2,6 @@ export { Config, ConfigSchema, validateConfig };
 
 import { z } from 'zod';
 
-import * as feature from './features';
-
 import pkg from '../package.json';
 
 const ConfigSchema = z
@@ -96,15 +94,6 @@ const ConfigSchema = z
       }
     }
 
-    // always switch to gpu
-
-    if (config.device == 'gpu') {
-      if (!feature.webgpu()) {
-        if (config.debug)
-          console.debug('Switching to CPU for GPU not supported.');
-        config.device = 'cpu';
-      }
-    }
     return config;
   });
 

packages/web/tsconfig.json

@@ -5,6 +5,7 @@
     "esModuleInterop": true,
     "emitDeclarationOnly": true,
     "declaration": true,
+    "allowJs": true,
     "target": "ES6",
     "moduleResolution": "Node16"
   }