{"_id":"@bunnio/rembg-web","_rev":"3-145b24961db871c61d0da3bc5e59ab90","name":"@bunnio/rembg-web","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@bunnio/rembg-web","version":"1.0.0","keywords":["background-removal","image-segmentation","rembg","u2net","ai","machine-learning","browser","wasm","image-processing","onnx","computer-vision","canvas","web","typescript","javascript"],"author":{"name":"Boldizsar Pal"},"license":"MIT","_id":"@bunnio/rembg-web@1.0.0","maintainers":[{"name":"0baltazar0","email":"palboldizsar@gmail.com"}],"homepage":"https://bunn-io.github.io/rembg-web/","bugs":{"url":"https://github.com/bunn-io/rembg-web/issues"},"dist":{"shasum":"7c0856add1fcdd0bb6abf64bef4cdb48eb338032","tarball":"https://registry.npmjs.org/@bunnio/rembg-web/-/rembg-web-1.0.0.tgz","fileCount":43,"integrity":"sha512-zbhE1aO8Asg+6gQcEKdzatZC724Mvp7gYdaJEYv7sziNMmI1WVzCoa4gBVgxvvtOmZ+zLzndN4/ynBrjexIIHA==","signatures":[{"sig":"MEUCIQDgltanIpSQSpOmgx+hGVMfAMaX8X9tj/RyNvSJwVHSCwIgT2F3hhABvTcHXWY6Rli/04ngkry0A/44wniTSKFrIMQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":747678},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","browser":"dist/index.umd.js","engines":{"node":">=16.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","browser":"./dist/index.umd.js"},"./umd":"./dist/index.umd.js","./package.json":"./package.json"},"gitHead":"68ff63b914e40bd8ee84f56c3088f47c1c6b3d02","scripts":{"dev":"tsc --watch","flt":"yarn format && yarn lint && yarn type-check","lint":"eslint src/**/*.ts --ext .ts","size":"yarn build && du -sh dist/ && echo 'Bundle size analysis:' && find dist -name '*.js' -exec wc -c {} + | sort -n","test":"yarn test:unit-dev && yarn test:e2e","build":"rollup -c","clean":"rm -rf dist","format":"prettier --write src/**/*.ts","analyze":"yarn build && npx bundlesize","examples":"yarn build && python3 -m http.server 8080 --directory .","lint:fix":"eslint src/**/*.ts --ext .ts --fix","test:e2e":"playwright test","build:min":"tsc && terser dist/index.js -o dist/index.min.js --compress --mangle","build:tsc":"tsc","serve:e2e":"vite --config e2e.server.config.js","test:demo":"vite","test:unit":"vitest","build:prod":"yarn build && yarn build:min","docs:build":"typedoc","docs:serve":"typedoc --watch","type-check":"tsc --noEmit","build:watch":"rollup -c --watch","publish:dry":"npm publish --dry-run","test:headed":"playwright test --headed","fetch-models":"tsx scripts/fetch-models.ts","format:check":"prettier --check src/**/*.ts","publish:beta":"npm publish --tag beta","test:unit:ui":"vitest --ui","test:unit-dev":"vitest --run","prepublishOnly":"yarn clean && yarn flt && yarn build && yarn test","docs:build-pages":"tsx scripts/build-docs.ts","test:unit:coverage":"vitest --coverage"},"_npmUser":{"name":"0baltazar0","email":"palboldizsar@gmail.com"},"bundlesize":[{"path":"./dist/index.js","maxSize":"50 kB","compression":"gzip"},{"path":"./dist/index.d.ts","maxSize":"10 kB"}],"repository":{"url":"git+https://github.com/bunn-io/rembg-web.git","type":"git"},"_npmVersion":"11.3.0","description":"Shameless copy of danielgatis/rembg, but for the web. 90% organic GMO free AI generated code.","directories":{},"_nodeVersion":"24.0.1","browserslist":["> 1%","last 2 versions","not dead"],"dependencies":{"@webgpu/types":"^0.1.66","onnxruntime-web":"^1.23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e","devDependencies":{"tsx":"^4.7.0","vite":"^7.1.9","jsdom":"^27.0.0","jszip":"^3.10.1","pngjs":"^7.0.0","tslib":"^2.6.2","canvas":"^3.2.0","eslint":"^8.0.0","rollup":"^4.28.1","terser":"^5.0.0","vitest":"^3.2.4","typedoc":"^0.25.0","prettier":"^3.0.0","@vitest/ui":"^3.2.4","typescript":"^5.0.0","@types/node":"^24.7.2","@types/jsdom":"^27.0.0","@types/jszip":"^3.4.1","@types/pngjs":"^6.0.5","fake-indexeddb":"^6.2.3","@playwright/test":"^1.56.0","vitest-canvas-mock":"^0.3.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-typescript":"^12.1.0","@typescript-eslint/parser":"^8.46.1","@rollup/plugin-node-resolve":"^15.3.0","@typescript-eslint/eslint-plugin":"^8.46.1"},"_npmOperationalInternal":{"tmp":"tmp/rembg-web_1.0.0_1760734900022_0.5704957610331038","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bunnio/rembg-web","version":"1.0.1","keywords":["background-removal","image-segmentation","rembg","u2net","ai","machine-learning","browser","wasm","image-processing","onnx","computer-vision","canvas","web","typescript","javascript"],"author":{"name":"Boldizsar Pal"},"license":"MIT","_id":"@bunnio/rembg-web@1.0.1","maintainers":[{"name":"0baltazar0","email":"palboldizsar@gmail.com"}],"homepage":"https://bunn-io.github.io/rembg-web/","bugs":{"url":"https://github.com/bunn-io/rembg-web/issues"},"dist":{"shasum":"c0e003f94f5b634b53f85b6f40102df20b1ba372","tarball":"https://registry.npmjs.org/@bunnio/rembg-web/-/rembg-web-1.0.1.tgz","fileCount":43,"integrity":"sha512-rzSwni/L/MXP//DqcAQX6BqUhflkwNp10lGOZhFV4Xe7NrjK7nMQWM2LTWLY2wCPD50Hax9d0f4XRf7cfzsy0w==","signatures":[{"sig":"MEUCIQDMxfZJWsPcAlli/P0MkQW8y0GX0ljgSyYla3JX9BIT3wIga80mYDMfgQk86GGN6Qaf/n6E3ULUaS9GaVP369md4+U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":756334},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","browser":"dist/index.umd.js","engines":{"node":">=16.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","browser":"./dist/index.umd.js"},"./umd":"./dist/index.umd.js","./package.json":"./package.json"},"gitHead":"7a429d6f8507c44445a960434cb2ae7282db19a4","scripts":{"act":"act --secret-file .nektos.secret","dev":"tsc --watch","flt":"yarn format && yarn lint && yarn type-check","lint":"eslint src/**/*.ts --ext .ts","size":"yarn build && du -sh dist/ && echo 'Bundle size analysis:' && find dist -name '*.js' -exec wc -c {} + | sort -n","test":"yarn test:unit-dev && yarn test:e2e","build":"rollup -c","clean":"rm -rf dist","format":"prettier --write src/**/*.ts","analyze":"yarn build && npx bundlesize","examples":"yarn build && python3 -m http.server 8080 --directory .","lint:fix":"eslint src/**/*.ts --ext .ts --fix","test:e2e":"playwright test","build:min":"tsc && terser dist/index.js -o dist/index.min.js --compress --mangle","build:tsc":"tsc","serve:e2e":"vite --config e2e.server.config.js","test:demo":"vite","test:unit":"vitest","build:prod":"yarn build && yarn build:min","docs:build":"typedoc","docs:serve":"cd docs-site && http-server -p 3000 -o","type-check":"tsc --noEmit","build:watch":"rollup -c --watch","publish:dry":"npm publish --dry-run","test:headed":"playwright test --headed","fetch-models":"tsx scripts/fetch-models.ts","format:check":"prettier --check src/**/*.ts","publish:beta":"npm publish --tag beta","test:unit:ui":"vitest --ui","test:unit-dev":"vitest --run","prepublishOnly":"yarn clean && yarn flt && yarn build && yarn test","docs:build-pages":"tsx scripts/build-docs.ts","test:unit:coverage":"vitest --coverage"},"_npmUser":{"name":"0baltazar0","email":"palboldizsar@gmail.com"},"bundlesize":[{"path":"./dist/index.js","maxSize":"50 kB","compression":"gzip"},{"path":"./dist/index.d.ts","maxSize":"10 kB"}],"repository":{"url":"git+https://github.com/bunn-io/rembg-web.git","type":"git"},"_npmVersion":"11.3.0","description":"Shameless copy of danielgatis/rembg, but for the web. 90% organic GMO free AI generated code.","directories":{},"_nodeVersion":"24.0.1","browserslist":["> 1%","last 2 versions","not dead"],"dependencies":{"@webgpu/types":"^0.1.66","onnxruntime-web":"^1.23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e","devDependencies":{"tsx":"^4.7.0","vite":"^7.1.9","jsdom":"^27.0.0","jszip":"^3.10.1","pngjs":"^7.0.0","tslib":"^2.6.2","eslint":"^8.0.0","rollup":"^4.28.1","terser":"^5.0.0","vitest":"^3.2.4","typedoc":"^0.25.0","prettier":"^3.0.0","@vitest/ui":"^3.2.4","typescript":"^5.0.0","@types/node":"^24.7.2","http-server":"^14.1.1","@types/jsdom":"^27.0.0","@types/jszip":"^3.4.1","@types/pngjs":"^6.0.5","fake-indexeddb":"^6.2.3","@playwright/test":"^1.56.0","vitest-canvas-mock":"^0.3.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-typescript":"^12.1.0","@typescript-eslint/parser":"^8.46.1","@rollup/plugin-node-resolve":"^15.3.0","@typescript-eslint/eslint-plugin":"^8.46.1"},"_npmOperationalInternal":{"tmp":"tmp/rembg-web_1.0.1_1760796710614_0.7696250767794017","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bunnio/rembg-web","version":"1.0.2","description":"Shameless copy of danielgatis/rembg, but for the web. 90% organic GMO free AI generated code.","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","browser":"dist/index.umd.js","exports":{".":{"import":"./dist/index.js","browser":"./dist/index.umd.js","types":"./dist/index.d.ts"},"./umd":"./dist/index.umd.js","./package.json":"./package.json"},"scripts":{"build":"rollup -c","build:tsc":"tsc","build:watch":"rollup -c --watch","dev":"tsc --watch","clean":"rm -rf dist","prepublishOnly":"yarn clean && yarn flt && yarn build && yarn test","test":"yarn test:unit-dev && yarn test:e2e","test:unit":"vitest","test:unit-dev":"vitest --run","test:unit:ui":"vitest --ui","test:unit:coverage":"vitest --coverage","test:e2e":"playwright test","test:headed":"playwright test --headed","test:demo":"vite","serve:e2e":"vite --config e2e.server.config.js","analyze":"yarn build && npx bundlesize","size":"yarn build && du -sh dist/ && echo 'Bundle size analysis:' && find dist -name '*.js' -exec wc -c {} + | sort -n","examples":"yarn build && python3 -m http.server 8080 --directory .","flt":"yarn format && yarn lint && yarn type-check","lint":"eslint src/**/*.ts --ext .ts","lint:fix":"eslint src/**/*.ts --ext .ts --fix","format":"prettier --write src/**/*.ts","format:check":"prettier --check src/**/*.ts","type-check":"tsc --noEmit","build:min":"tsc && terser dist/index.js -o dist/index.min.js --compress --mangle","build:prod":"yarn build && yarn build:min","fetch-models":"tsx scripts/fetch-models.ts","docs:dev":"concurrently \"yarn docs:serve\" \"yarn docs:build:watch\" \"yarn docs:build-pages:watch\" ","docs:build":"typedoc","docs:build:watch":"chokidar \"src/**/*\" -c \"yarn docs:build\"","docs:build-pages":"tsx scripts/build-docs.ts","docs:build-pages:watch":"chokidar \"examples/**/*\" -c \"tsx scripts/build-docs.ts\"","docs:serve":"cd docs-site && http-server -p 3000 -o","publish:dry":"npm publish --dry-run","publish:beta":"npm publish --tag beta","act":"act --secret-file .nektos.secret"},"keywords":["background-removal","image-segmentation","rembg","u2net","ai","machine-learning","browser","wasm","image-processing","onnx","computer-vision","canvas","web","typescript","javascript"],"author":{"name":"Boldizsar Pal"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bunn-io/rembg-web.git"},"bugs":{"url":"https://github.com/bunn-io/rembg-web/issues"},"homepage":"https://bunn-io.github.io/rembg-web/","publishConfig":{"access":"public"},"dependencies":{"@webgpu/types":"^0.1.66","onnxruntime-web":"^1.23.0"},"devDependencies":{"@playwright/test":"^1.56.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-replace":"^6.0.2","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.0","@types/jsdom":"^27.0.0","@types/jszip":"^3.4.1","@types/node":"^24.7.2","@types/pngjs":"^6.0.5","@typescript-eslint/eslint-plugin":"^8.46.1","@typescript-eslint/parser":"^8.46.1","@vitest/ui":"^3.2.4","concurrently":"^9.2.1","eslint":"^8.0.0","fake-indexeddb":"^6.2.3","http-server":"^14.1.1","jsdom":"^27.0.0","jszip":"^3.10.1","pngjs":"^7.0.0","prettier":"^3.0.0","rollup":"^4.28.1","terser":"^5.0.0","tslib":"^2.6.2","tsx":"^4.7.0","typedoc":"^0.25.0","typescript":"^5.0.0","vite":"^7.1.9","vitest":"^3.2.4","vitest-canvas-mock":"^0.3.3","chokidar-cli":"^3.0.0"},"engines":{"node":">=16.0.0"},"browserslist":["> 1%","last 2 versions","not dead"],"packageManager":"yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e","bundlesize":[{"path":"./dist/index.js","maxSize":"50 kB","compression":"gzip"},{"path":"./dist/index.d.ts","maxSize":"10 kB"}],"_id":"@bunnio/rembg-web@1.0.2","gitHead":"99aaf4142c67e26a8bedb2d6bcc1c5b8428383e1","_nodeVersion":"24.0.1","_npmVersion":"11.3.0","dist":{"integrity":"sha512-K78XPMcPiE4EPhPy0/82+fuG5yaPhu4mfxjZ5kk8TQIQvIfLktu6JeHXUZMBPDInBOVlZ1X/IVurM+e3U3mZCA==","shasum":"a4aa1c179b3509268145f6727e7bbc4ba4bfbaff","tarball":"https://registry.npmjs.org/@bunnio/rembg-web/-/rembg-web-1.0.2.tgz","fileCount":43,"unpackedSize":764055,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC/DjTJPibwk8e0QYUVpNVSb3ll9JFd1Q3Ow79VhtgFxwIgJLKawaQNROtKtcdjHLg/NXHO1Mq0qZz2dfIxu+cUUwI="}]},"_npmUser":{"name":"0baltazar0","email":"palboldizsar@gmail.com"},"directories":{},"maintainers":[{"name":"0baltazar0","email":"palboldizsar@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rembg-web_1.0.2_1761048816518_0.5325274582190755"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-17T21:01:39.856Z","modified":"2025-10-21T12:13:36.920Z","1.0.0":"2025-10-17T21:01:40.218Z","1.0.1":"2025-10-18T14:11:50.858Z","1.0.2":"2025-10-21T12:13:36.727Z"},"bugs":{"url":"https://github.com/bunn-io/rembg-web/issues"},"author":{"name":"Boldizsar Pal"},"license":"MIT","homepage":"https://bunn-io.github.io/rembg-web/","keywords":["background-removal","image-segmentation","rembg","u2net","ai","machine-learning","browser","wasm","image-processing","onnx","computer-vision","canvas","web","typescript","javascript"],"repository":{"type":"git","url":"git+https://github.com/bunn-io/rembg-web.git"},"description":"Shameless copy of danielgatis/rembg, but for the web. 90% organic GMO free AI generated code.","maintainers":[{"name":"0baltazar0","email":"palboldizsar@gmail.com"}],"readme":"# @bunnio/rembg-web\n\n[![npm version](https://img.shields.io/npm/v/@bunnio/rembg-web?style=flat-square)](https://www.npmjs.com/package/@bunnio/rembg-web)\n[![npm downloads](https://img.shields.io/npm/dm/@bunnio/rembg-web?style=flat-square)](https://www.npmjs.com/package/@bunnio/rembg-web)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@bunnio/rembg-web?style=flat-square)](https://bundlephobia.com/package/@bunnio/rembg-web)\n[![GitHub stars](https://img.shields.io/github/stars/bunn-io/rembg-web?style=flat-square)](https://github.com/bunn-io/rembg-web)\n[![License](https://img.shields.io/npm/l/@bunnio/rembg-web?style=flat-square)](https://github.com/bunn-io/rembg-web/blob/main/LICENSE)\n[![Build Status](https://img.shields.io/github/actions/workflow/status/bunn-io/rembg-web/ci.yml?style=flat-square)](https://github.com/bunn-io/rembg-web/actions)\n\n> **Background Removal for the Web** - A TypeScript/JavaScript port of [danielgatis/rembg](https://github.com/danielgatis/rembg) designed to run directly in browsers using ONNX Runtime Web.\n\n[📖 Documentation](https://bunn-io.github.io/rembg-web/) • [🎮 Examples](https://bunn-io.github.io/rembg-web/examples/) • [📦 npm](https://www.npmjs.com/package/@bunnio/rembg-web) • [🐛 Issues](https://github.com/bunn-io/rembg-web/issues)\n\n## Start using in minutes\n\n### Install in your project:\n\n```bash\nnpm install @bunnio/rembg-web onnxruntime-web\n# or\nyarn add @bunnio/rembg-web onnxruntime-web\n```\n\n### Use embedded:\n\n**ES Module:**\n\n```html\n<head>\n  <!-- Load ONNX Runtime Web -->\n  <script src=\"https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.min.js\"></script>\n</head>\n<body>\n  <script type=\"module\">\n    import {\n      remove,\n      rembgConfig,\n    } from 'https://unpkg.com/@bunnio/rembg-web@latest/dist/index.js';\n\n    // If you want to use the huggingface hosted model (only for dev)\n    // Configure model base URL\n    rembgConfig.setBaseUrl(\n      'https://huggingface.co/bunnio/dis_anime/resolve/main'\n    );\n\n    // Basic usage\n    const fileInput = document.getElementById('fileInput');\n    const file = fileInput.files[0];\n\n    const result = await remove(file);\n    const url = URL.createObjectURL(result);\n\n    // Display result\n    document.getElementById('result').src = url;\n  </script>\n</body>\n```\n\n**UMD:**\n\n```html\n<head>\n  <!-- Make sure to load runtimes in the header, before the scripts is called -->\n  <!-- Load ONNX Runtime Web -->\n  <script src=\"https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.min.js\"></script>\n  <script src=\"https://unpkg.com/@bunnio/rembg-web@latest/dist/index.umd.min.js\"></script>\n</head>\n<script>\n  // If you want to use the huggingface hosted model (only for dev)\n  // Configure model base URL\n  rembgWeb.rembgConfig.setBaseUrl(\n    'https://huggingface.co/bunnio/dis_anime/resolve/main'\n  );\n\n  // Basic usage\n  const fileInput = document.getElementById('fileInput');\n  const file = fileInput.files[0];\n\n  const result = await rembgWeb.remove(file);\n  const url = URL.createObjectURL(result);\n\n  // Display result\n  document.getElementById('result').src = url;\n</script>\n```\n\n## Live Preview:\n\n> [More Examples!!](https://bunn-io.github.io/rembg-web/examples)\n\n## Performance\n\n> Tested on a @3.87Ghz (x5687), single core runtime (no threading), no webNN or webGPU (not that it would matter. see below)\n\n<!-- prettier-ignore -->\n| Model             | Anime Example (ms)  | Car Example (ms) | Human Example (ms) | Plant Example (ms)  |\n| ----------------- | ------------        | --------------   | ------------------ | ------------------- |\n| u2netp            | 1002.34             | 916.45ms         | 961.62ms           |  1005.66ms          |\n| silueta           | 2060.13             | 2007.23ms        | 1940.59ms          |  1962.44ms          |\n| u2net_human_seg   | 2534.33             | 2723.88ms        | 2706.10ms          |  2747.44ms          |\n| u2net             | 2711.10             | 2621.96ms        | 2688.20ms          |  2521.23ms          |\n| isnet-anime       | 7120.79             | 7054.62ms        | 6975.49ms          |  7641.50ms          |\n| isnet-general-use | 7194.93             | 7064.19ms        | 7285.58ms          |  7667.17ms          |\n| u2net_cloth_seg   | 15150.91            | 14794.81ms       | 14949.86ms         |  14931.25ms         |\n\n> Results averaged over 20 \"predict\" runs\n\n## Available Models\n\nu2net models, silueta, DIS (isnet-general, isnet-anime)\n\n## Not Planned\n\nBiRefNet family\n\nFor some reason BiRefNet Simple had issues getting started with onyx-web, currently I don't plan on adding that.\n\nI will probably try out the huggingface version, see if it's working\n\n### Size issue\n\nAll other models have significant sizes, making it less feasable as a tool for web dev stuff.\nIf there's demand I can have a crack at it, feel free to create a feature request for it.\n\n## CORS issue\n\nSince these models are expected to run in the browser, might have cors issues\n\nby default all models expect you to serve their appropriate onnx config file locally\n\n- /models/u2net_cloth_seg.onnx\n- /models/u2net_human_seg.onnx\n- /models/u2net.onnx\n- /models/u2netp.onnx\n- /models/isnet-general-use.onnx\n- /models/isnet-anime.onnx\n- /models/silueta.onnx\n\n...\n\n## Big Testing meltdown\n\nI spend 4 hours trying to understand why the tests initially weren't working, ultimately there was one takeaway\n\n> webgl\n\nThe result quality is dependant on the webgl availability, so if you test it make sure that the flag is enabled (it is by default)\n\n> see: playwright.config.ts\n\n## ⚠️ Important: webNN\n\nWebNN support is working, but on my personal testing, I saw no visible difference. This is because webNN still uses CPU.\n\nIf you want to checkout how it beahves on your device, you can use \"benchmark\" demo.\n\n## ⚠️ Important: webGPU\n\nWebGPU support is implemented and available, but currently none of the models are compatible with WebGPU execution providers in ONNX Runtime Web.\n\nWhile WebGPU would provide significant performance improvements, the current model implementations require WebGL or CPU execution. WebGPU support is included for future compatibility as ONNX Runtime Web adds WebGPU support for these model types.\n\nFor now, use WebGL or CPU execution providers for optimal compatibility.\n\n## ⚠️ Important: Custom Models\n\nWhen using custom models, you have to manage model and session caching!\n\nIf you are not sure whether the last custom model was the same you are trying to use now, it's best to just disable caching (with flags).\n\nYou can use DataURL-s to store the file locally, and passed that to the sessionFactory.\n\n---\n\n# AI Generated Info Below\n\nA web-based background removal library powered by AI models. This is a TypeScript/JavaScript port of the popular [rembg](https://github.com/danielgatis/rembg) Python library, designed to run directly in browsers using ONNX Runtime Web.\n\n## Features\n\n- 🚀 **Browser-native**: Runs entirely in the browser using WebAssembly\n- 🎯 **Multiple AI Models**: Support for U2Net family models optimized for different use cases\n- 📱 **Zero Dependencies**: No server required - everything runs client-side (except for hosting the models)\n- 🎨 **Flexible Input**: Accepts File, Blob, ArrayBuffer, HTMLImageElement, or HTMLCanvasElement\n- ⚡ **Caching**: Automatic model and session caching for better performance\n- 🔧 **Customizable**: Support for custom models and post-processing options\n- 🚀 **WebNN Support**: Optional hardware acceleration via Web Neural Network API (Chrome 119+, Edge 119+)\n- 🎮 **WebGPU Support**: High-performance GPU acceleration via WebGPU API (Chrome 113+, Edge 113+)\n\n## Available Models\n\n- **u2net**: General-purpose background removal (default)\n- **u2netp**: Lightweight version of U2Net\n- **u2net_human_seg**: Optimized for human subjects\n- **u2net_cloth_seg**: Specialized for clothing segmentation\n- **isnet-general-use**: DIS model for general use cases (higher accuracy, larger model)\n- **isnet-anime**: DIS model optimized for anime/manga style images\n- **silueta**: Silueta model for background removal\n- **u2net_custom**: Use your own custom ONNX models\n\n## Installation\n\n```bash\nnpm install @bunnio/rembg-web onnxruntime-web\n# or\nyarn add @bunnio/rembg-web onnxruntime-web\n```\n\n### CDN Usage\n\nYou can also use rembg-web directly from a CDN without installation:\n\n```html\n<script type=\"module\">\n  import {\n    remove,\n    newSession,\n  } from 'https://unpkg.com/@bunnio/rembg-web@latest/dist/index.js';\n\n  // Your code here\n</script>\n```\n\n## Quick Start\n\n```typescript\nimport { remove, newSession } from '@bunnio/rembg-web';\n\n// Basic usage\nconst fileInput = document.getElementById('fileInput') as HTMLInputElement;\nconst file = fileInput.files[0];\n\nconst result = await remove(file);\nconst url = URL.createObjectURL(result);\n\n// With custom options\nconst result = await remove(file, {\n  onlyMask: true, // Return only the mask\n  postProcessMask: true, // Apply smoothing\n  bgcolor: [255, 0, 0, 255], // Red background\n  session: newSession('u2net_human_seg'), // Use specific model\n  onProgress: info => {\n    console.log(`${info.step}: ${info.progress}% - ${info.message}`);\n  },\n});\n\n// With WebNN acceleration (optional)\nconst webnnSession = newSession('u2net', undefined, {\n  preferWebNN: true,\n  webnnDeviceType: 'gpu',\n  webnnPowerPreference: 'high-performance',\n});\nconst acceleratedResult = await remove(file, { session: webnnSession });\n\n// With WebGPU acceleration (optional)\nconst webgpuSession = newSession('u2net', undefined, {\n  preferWebGPU: true,\n  webgpuPowerPreference: 'high-performance',\n});\nconst webgpuResult = await remove(file, { session: webgpuSession });\n\n// With both WebNN and WebGPU (priority: WebNN > WebGPU > WebGL > CPU)\nconst hybridSession = newSession('u2net', undefined, {\n  preferWebNN: true,\n  preferWebGPU: true,\n  webnnDeviceType: 'gpu',\n  webnnPowerPreference: 'high-performance',\n  webgpuPowerPreference: 'high-performance',\n});\nconst hybridResult = await remove(file, { session: hybridSession });\n```\n\n## Model Setup\n\nTo use the models, you need to download and place the ONNX model files in your public directory:\n\n### Download Models\n\nUse the provided script to download the required model files:\n\n```bash\n# Download all models\nyarn fetch-models\n\n# Download a specific model\nyarn fetch-models u2net.onnx\n\n# Force re-download all models\nyarn fetch-models --force\n```\n\nThe script will download models from GitHub Releases and place them in `public/models/`. Models are cached in your browser's IndexedDB for future use.\n\n### Model Information\n\n| Model             | Size   | Input Size | Use Case                      |\n| ----------------- | ------ | ---------- | ----------------------------- |\n| u2net             | ~176MB | 320x320    | General purpose (default)     |\n| u2netp            | ~4.7MB | 320x320    | Lightweight general purpose   |\n| u2net_human_seg   | ~176MB | 320x320    | Human subjects                |\n| u2net_cloth_seg   | ~176MB | 320x320    | Clothing segmentation         |\n| isnet-general-use | ~178MB | 1024x1024  | High accuracy general purpose |\n\n**Note:** The `isnet-general-use` model uses a larger input size (1024x1024) and may provide better accuracy for complex scenes, but requires more processing time and memory.\n\n## Configuration\n\nrembg-web includes a central configuration system that allows you to customize model paths for each model. This is useful when you want to host models on your own server or use different model versions.\n\n### Using the Configuration System\n\n```typescript\nimport { rembgConfig } from '@bunnio/rembg-web';\n\n// Set custom model path for u2net\nrembgConfig.setCustomModelPath(\n  'u2net',\n  'https://my-server.com/models/u2net.onnx'\n);\n\n// Set custom model path for u2net_human_seg\nrembgConfig.setCustomModelPath(\n  'u2net_human_seg',\n  '/custom/path/human_seg.onnx'\n);\n\n// Check if a model has a custom path\nif (rembgConfig.hasCustomPath('u2net')) {\n  console.log('u2net has a custom path configured');\n}\n\n// Get the current path for a model\nconst u2netPath = rembgConfig.getCustomModelPath('u2net');\n\n// Reset all paths to defaults\nrembgConfig.resetToDefaults();\n\n// Get all available models\nconst models = rembgConfig.getAvailableModels();\n```\n\n### Environment Variables (Alternative)\n\nYou can also set model paths using environment variables in Node.js environments:\n\n```bash\nexport REMBG_U2NET_MODEL_PATH=\"/custom/path/u2net.onnx\"\nexport REMBG_U2NETP_MODEL_PATH=\"/custom/path/u2netp.onnx\"\nexport REMBG_U2NET_HUMAN_SEG_MODEL_PATH=\"/custom/path/human_seg.onnx\"\n```\n\n### Browser Environment\n\nIn browser environments, you can set global variables or use meta tags:\n\n```html\n<!-- Using meta tags -->\n<meta name=\"REMBG_U2NET_MODEL_PATH\" content=\"/custom/path/u2net.onnx\" />\n\n<!-- Or set global variables -->\n<script>\n  window.REMBG_U2NET_MODEL_PATH = '/custom/path/u2net.onnx';\n</script>\n```\n\n## Advanced Configuration\n\n### Global Settings\n\nThe `rembgConfig` singleton provides advanced configuration options for logging, caching, and hardware acceleration:\n\n```typescript\nimport { rembgConfig } from '@bunnio/rembg-web';\n\n// Enable detailed logging\nrembgConfig.enableGeneralLogging(true);\nrembgConfig.enablePerformanceLogging(true);\n\n// Configure cache behavior\nrembgConfig.setSessionCacheBypass(false);\nrembgConfig.setModelCacheBypass(false);\n\n// Global WebNN/WebGPU settings\nrembgConfig.enableWebNN(true);\nrembgConfig.setWebNNDeviceType('gpu');\nrembgConfig.enableWebGPU(true);\n```\n\n### Session Options\n\nAdditional session options for fine-grained control:\n\n```typescript\nconst session = await newSession('u2net', undefined, {\n  // Cache control\n  bypassSessionCache: false, // Force new session creation\n  bypassModelCache: false, // Force model re-download\n\n  // Progress tracking during session initialization\n  onProgress: info => {\n    console.log(`Session: ${info.step} - ${info.progress}%`);\n  },\n});\n```\n\nSee [API Documentation](https://bunn-io.github.io/rembg-web/) for complete configuration options.\n\n## API Reference\n\n### `remove(data, options?)`\n\nRemove background from an image and return as Blob.\n\n**Parameters:**\n\n- `data`: File | Blob | ArrayBuffer | HTMLImageElement | HTMLCanvasElement\n- `options`: RemoveOptions (optional)\n\n**Returns:** Promise<Blob>\n\n### `removeToCanvas(data, options?)`\n\nRemove background from an image and return as HTMLCanvasElement.\n\n**Parameters:**\n\n- `data`: File | Blob | ArrayBuffer | HTMLImageElement | HTMLCanvasElement\n- `options`: RemoveOptions (optional)\n\n**Returns:** Promise<HTMLCanvasElement>\n\n### `newSession(modelName, config?)`\n\nCreate a new model session.\n\n**Parameters:**\n\n- `modelName`: string (default: 'u2net')\n- `config`: U2NetCustomConfig (required for u2net_custom)\n\n**Returns:** BaseSession\n\n### RemoveOptions\n\n```typescript\ninterface RemoveOptions {\n  session?: BaseSession; // Custom session to use\n  onlyMask?: boolean; // Return only mask (black/white)\n  postProcessMask?: boolean; // Apply post-processing smoothing\n  bgcolor?: [number, number, number, number]; // RGBA background color\n  onProgress?: (info: ProgressInfo) => void; // Progress callback\n}\n\ninterface ProgressInfo {\n  step: 'downloading' | 'processing' | 'postprocessing' | 'complete';\n  progress: number; // 0-100\n  message: string; // Human-readable status message\n}\n```\n\n## Model Management\n\n```typescript\nimport {\n  getAvailableModels,\n  clearModelCache,\n  clearModelCacheForModel,\n  disposeAllSessions,\n} from '@bunnio/rembg-web';\n\n// Get available models\nconst models = getAvailableModels();\nconsole.log(models); // ['u2net', 'u2netp', 'u2net_human_seg', 'u2net_cloth_seg', 'isnet-general-use', 'isnet-anime', 'silueta', 'u2net_custom']\n\n// Clear all cached models from IndexedDB\nawait clearModelCache();\n\n// Clear cache for a specific model\nawait clearModelCacheForModel('u2net');\n\n// Dispose all sessions\nawait disposeAllSessions();\n```\n\n## Custom Models\n\n```typescript\nimport { newSession } from '@bunnio/rembg-web';\n\n// Use a custom ONNX model\nconst customSession = newSession('u2net_custom', {\n  modelPath: '/path/to/your/model.onnx',\n});\n\nconst result = await remove(imageFile, { session: customSession });\n```\n\n## Bundle Size\n\nThe library is optimized for size and performance:\n\n- **Main bundle**: ~8KB gzipped (excluding ONNX Runtime)\n- **Total size**: ~65KB uncompressed\n- **ONNX Runtime**: ~1.5MB (loaded separately by the browser)\n\nThe library uses tree-shaking to ensure only the code you use is included in your bundle.\n\n## Browser Support\n\n- Chrome/Edge 88+ (WebNN support in 119+, WebGPU support in 113+)\n- Firefox 78+ (WebGPU behind flag)\n- Safari 14+ (WebGPU in Technology Preview)\n\nRequires WebAssembly and Web Workers support.\n\n### Hardware Acceleration\n\n#### WebNN Support\n\nWebNN support is available (with caveats, see above,short: no difference)\n\n#### WebGPU Support\n\nWebGPU support is available (with caveats, see above,short: does not work with models, will fail on execution)\n\n#### Execution Provider Priority\n\nWhen both WebNN and WebGPU are enabled, the system uses the following priority order:\n\n1. **WebNN** (if available)\n2. **WebGPU** (if available)\n3. **WebGL** (fallback)\n4. **CPU** (final fallback)\n\n## Development\n\n```bash\n# Install dependencies\nyarn install\n\n# Build the library\nyarn build\n\n# Run tests\nyarn test\n\n# Start directly linked demos\nyarn test:demo\n\n# Analyze bundle size\nyarn size\n\n# Check bundle size limits\nyarn analyze\n\n# Start Docs devserver\nyarn docs:dev\n```\n\n## Examples\n\nThe `/examples` directory contains several HTML examples demonstrating different features:\n\n- **Basic Usage**: Simple background removal\n- **Mask Only**: Generate masks instead of processed images\n- **Custom Background**: Replace background with custom colors\n- **Session Reuse**: Performance optimization for multiple images\n- **Progress Tracking**: Real-time progress updates\n- **WebNN Acceleration**: Hardware-accelerated processing with WebNN\n- **WebGPU Acceleration**: High-performance GPU acceleration with WebGPU\n\n### Running Examples\n\n1. **Start the development server:**\n\n   ```bash\n   yarn docs:dev\n   ```\n\n2. **Open in browser:**\n   - Navigate to `http://localhost:3000`\n   - Click on any example HTML file\n\n**⚠️ Important:** Examples must be served through an HTTP server (not opened directly) to avoid CORS errors.\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## Advanced Features\n\n### Model Integrity Verification\n\nVerify model integrity and validate downloads:\n\n```typescript\nimport { verifyModelIntegrity, validateModel } from '@bunnio/rembg-web';\n\n// Verify model integrity\nconst isValid = await verifyModelIntegrity('u2net.onnx', modelData);\nconst validated = await validateModel('u2net.onnx', modelData);\n```\n\n### Cloth Segmentation Options\n\nSpecialized options for clothing segmentation:\n\n```typescript\nimport { U2NetClothSegSession } from '@bunnio/rembg-web';\n\nconst session = new U2NetClothSegSession();\nsession.setClothCategory('upper'); // 'upper' | 'lower' | 'full' | 'all'\n```\n\n### Hardware Detection\n\nCheck WebNN and WebGPU availability:\n\n```typescript\nimport {\n  isWebNNAvailable,\n  isWebGPUAvailable,\n  getWebNNInfo,\n} from '@bunnio/rembg-web';\n\nconst webnnAvailable = isWebNNAvailable();\nconst webgpuAvailable = isWebGPUAvailable();\nconst webnnInfo = await getWebNNInfo();\n```\n\n### Direct Session Usage\n\nUse session classes directly for advanced control:\n\n```typescript\nimport { U2NetSession, IsNetGeneralUseSession } from '@bunnio/rembg-web';\n\nconst session = new U2NetSession({ preferWebNN: true });\nawait session.initialize();\nconst masks = await session.predict(imageCanvas);\n```\n\nSee [API Documentation](https://bunn-io.github.io/rembg-web/) for complete utility functions and advanced usage.\n\n## Troubleshooting\n\n### Common Issues\n\n**CORS Errors**\n\n- Make sure you're serving your application from an HTTP server, not opening HTML files directly\n- Use `yarn examples` or a local server like `python3 -m http.server 8080`\n\n**Model Not Found**\n\n- Run `yarn fetch-models` to download the required ONNX model files\n- Ensure models are in the `public/models/` directory\n- Check browser console for specific error messages\n\n**WebAssembly Errors**\n\n- Verify your browser supports WebAssembly\n- Check that WASM files are accessible\n- Try refreshing the page and clearing browser cache\n\n**Memory Issues**\n\n- Use smaller images for faster processing\n- Try the `u2netp` model for lower memory usage\n- Close other browser tabs to free up memory\n- Use session reuse for multiple images\n\n**Performance Issues**\n\n- Use `u2netp` model for faster processing\n- Resize large images before processing\n- Enable hardware acceleration (WebNN/WebGPU) if available\n- Use session reuse for batch processing\n\n### Getting Help\n\n- 📖 [Documentation](https://bunn-io.github.io/rembg-web/)\n- 🎮 [Examples](https://bunn-io.github.io/rembg-web/examples/)\n- 🐛 [GitHub Issues](https://github.com/bunn-io/rembg-web/issues)\n- 💬 [GitHub Discussions](https://github.com/bunn-io/rembg-web/discussions)\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n- 🐛 [Report Bugs](https://github.com/bunn-io/rembg-web/issues/new?template=bug_report.md)\n- ✨ [Request Features](https://github.com/bunn-io/rembg-web/issues/new?template=feature_request.md)\n- 📖 [Improve Documentation](https://github.com/bunn-io/rembg-web/issues/new?template=feature_request.md)\n\n## Acknowledgments\n\nThis project is inspired by [danielgatis/rembg](https://github.com/danielgatis/rembg) and uses the same AI models for consistent results. Built with modern web technologies and designed for the browser-first world.\n","readmeFilename":"README.md"}