Fixed Has everything become outdated? #130 (#131)

imgly · Aug 7, 2024 · c9f7e5c · c9f7e5c
1 parent f802bb2
commit c9f7e5c
Show file tree

Hide file tree

Showing 22 changed files with 93 additions and 108 deletions.
diff --git a/.github/workflows/ci.yml b/.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:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.5.3",
+  "version": "1.5.5",
   "name": "workspace",
   "workspaces": [
     "packages/web",
@@ -38,7 +38,7 @@
     "meow": "~13.0.0",
     "moment": "~2.29.4",
     "onchange": "~7.1.0",
-    "prettier": "3.2.5",
+    "prettier": "^3.2.5",
     "yaml": "~2.3.4"
   }
 }
diff --git a/packages/node-e2e/package.json b/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"
 }
diff --git a/packages/node-examples/package.json b/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"
 }
diff --git a/packages/node/package.json b/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": [

diff --git a/packages/web-data/package.json b/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",

diff --git a/packages/web-examples/vite-project/package-lock.json b/packages/web-examples/vite-project/package-lock.json
diff --git a/packages/web-examples/vite-project/package.json b/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",

diff --git a/packages/web-examples/vite-project/src/App.vue b/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(

diff --git a/packages/web/CHANGELOG.md b/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
 

diff --git a/packages/web/README.md b/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
@@ -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).
diff --git a/..._execute_on_gpu_webgpu_and_cpu_Added.yaml → ..._execute_on_gpu_webgpu_and_cpu_Added.yaml b/..._execute_on_gpu_webgpu_and_cpu_Added.yaml → ..._execute_on_gpu_webgpu_and_cpu_Added.yaml
diff --git a/...8-Added_isnet_model_for_webgpu_Added.yaml → ...8-Added_isnet_model_for_webgpu_Added.yaml b/...8-Added_isnet_model_for_webgpu_Added.yaml → ...8-Added_isnet_model_for_webgpu_Added.yaml
diff --git a/packages/web/package.json b/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",

diff --git a/packages/web/src/MimeType.ts b/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);
+  }
+}
diff --git a/packages/web/src/api/v1.ts b/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;
 }
 

diff --git a/packages/web/src/features.js → packages/web/src/capabilities.js b/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;
diff --git a/packages/web/src/codecs.ts b/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';
 
@@ -77,45 +78,3 @@ async function imageEncode(
       throw new Error(`Invalid format: ${format}`);
   }
 }
-
-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);
-  }
-}