diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6aacf46..73b9af3 100644 --- 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 index b435a19..ce2cdd5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "workspace", - "version": "1.5.3", + "version": "1.5.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "workspace", - "version": "1.5.3", + "version": "1.5.4", "workspaces": [ "packages/web", "packages/web-data", diff --git a/package.json b/package.json index 1d2bd0c..db2b31c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.5.3", + "version": "1.5.5", "name": "workspace", "workspaces": [ "packages/web", diff --git a/packages/node-e2e/package.json b/packages/node-e2e/package.json index 751c400..fca8f67 100644 --- 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 index 187d7e8..85c8f36 100644 --- 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 index e64c288..f24f840 100644 --- 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 index e66fc89..410049d 100644 --- 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 index 020cce8..5c871e5 100644 --- a/packages/web-examples/vite-project/package-lock.json +++ b/packages/web-examples/vite-project/package-lock.json @@ -1,12 +1,12 @@ { "name": "vite-project", - "version": "1.5.2", + "version": "1.5.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "vite-project", - "version": "1.5.2", + "version": "1.5.5", "dependencies": { "@imgly/background-removal": "file:../../web", "@imgly/background-removal-data": "file:../../web-data", @@ -48,7 +48,7 @@ }, "../../web": { "name": "@imgly/background-removal", - "version": "1.5.2", + "version": "1.5.5", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@types/lodash-es": "^4.17.12", @@ -75,7 +75,7 @@ }, "../../web-data": { "name": "@imgly/background-removal-data", - "version": "1.5.2", + "version": "1.5.5", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "onnxruntime-web": "~1.18.0" diff --git a/packages/web-examples/vite-project/package.json b/packages/web-examples/vite-project/package.json index 85fa107..99ddb2a 100644 --- 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 index 911fb16..4ffbeb3 100644 --- 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 index eb11564..a2fb480 100644 --- 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 index b9338aa..0107a31 100644 --- 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)** -

-background removal js showcase -

+<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> -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). \ No newline at end of file diff --git a/packages/web/changelog/Unreleased/20242403201534-Added_option_to_execute_on_gpu_webgpu_and_cpu_Added.yaml b/packages/web/changelog/1.5.0/20242403201534-Added_option_to_execute_on_gpu_webgpu_and_cpu_Added.yaml similarity index 100% rename from packages/web/changelog/Unreleased/20242403201534-Added_option_to_execute_on_gpu_webgpu_and_cpu_Added.yaml rename to packages/web/changelog/1.5.0/20242403201534-Added_option_to_execute_on_gpu_webgpu_and_cpu_Added.yaml diff --git a/packages/web/changelog/Unreleased/20242503170808-Added_isnet_model_for_webgpu_Added.yaml b/packages/web/changelog/1.5.0/20242503170808-Added_isnet_model_for_webgpu_Added.yaml similarity index 100% rename from packages/web/changelog/Unreleased/20242503170808-Added_isnet_model_for_webgpu_Added.yaml rename to packages/web/changelog/1.5.0/20242503170808-Added_isnet_model_for_webgpu_Added.yaml diff --git a/packages/web/package.json b/packages/web/package.json index c174929..266819b 100644 --- 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 new file mode 100644 index 0000000..7ae1e41 --- /dev/null +++ b/packages/web/src/MimeType.ts @@ -0,0 +1,41 @@ +export class MimeType { + type: string = 'application/octet-stream'; + params: Record = {}; + + private constructor(type: string, params: Record) { + 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): 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 = {}; + + 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 index 6abc376..eed260b 100644 --- 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 { - const config = validateConfig(configuration); - await preloadResources(config); + await init(configuration); return; } diff --git a/packages/web/src/features.js b/packages/web/src/capabilities.js similarity index 95% rename from packages/web/src/features.js rename to packages/web/src/capabilities.js index 7d8cd03..83ba631 100644 --- a/packages/web/src/features.js +++ b/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 index 3314e7a..c90c5cf 100644 --- 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'; @@ -78,44 +79,3 @@ async function imageEncode( } } -class MimeType { - type: string = 'application/octet-stream'; - params: Record = {}; - - private constructor(type: string, params: Record) { - 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): 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 = {}; - - 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/onnx.ts b/packages/web/src/onnx.ts index 19c1e52..e0b623e 100644 --- a/packages/web/src/onnx.ts +++ b/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 = {}; diff --git a/packages/web/src/schema.ts b/packages/web/src/schema.ts index 36674b3..5023840 100644 --- a/packages/web/src/schema.ts +++ b/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; }); diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json index d90edcf..67e074f 100644 --- a/packages/web/tsconfig.json +++ b/packages/web/tsconfig.json @@ -5,6 +5,7 @@ "esModuleInterop": true, "emitDeclarationOnly": true, "declaration": true, + "allowJs": true, "target": "ES6", "moduleResolution": "Node16" }