Modnet Webnn
For more information, check out the official repository and example colab.
Model source
- Kind
- Other
- File size
- 6.32–24.7 MB
- Version
- vRevision 6af5207
- Updated
- Oct 9, 2026
- Downloads
- 612
- Source
- Hugging Face
Source description
MODNet: Trimap-Free Portrait Matting in Real Time
image/gif
For more information, check out the official repository and example colab.
Usage (Transformers.js)
If you haven't already, you can install the Transformers.js JavaScript library from NPM using:
npm i @huggingface/transformers
You can then use the model for portrait matting, as follows:
import { pipeline } from '@huggingface/transformers';
const segmenter = await pipeline('background-removal', 'onnx-community/modnet-webnn', { dtype: 'fp32' });
const url = 'https://images.pexels.com/photos/5965592/pexels-photo-5965592.jpeg?auto=compress&cs=tinysrgb&w=1024';
const output = await segmenter([url]);
output[0].save('mask.png');
// You can also use `output[0].toCanvas()` or `await output[0].toBlob()` if you would like to access the output without saving.
Or with the AutoModel and AutoProcessor APIs:
import { AutoModel, AutoProcessor, RawImage } from '@huggingface/transformers';
// Load model and processor
const model = await AutoModel.from_pretrained('onnx-community/modnet-webnn', { dtype: 'fp32' });
const processor = await AutoProcessor.from_pretrained('onnx-community/modnet-webnn');
// Load image from URL
const url = 'https://images.pexels.com/photos/5965592/pexels-photo-5965592.jpeg?auto=compress&cs=tinysrgb&w=1024';
const image = await RawImage.fromURL(url);
// Pre-process image
const { pixel_values } = await processor(image);
// Predict alpha matte
const { output } = await model({ input: pixel_values });
// Save output mask
const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height);
mask.save('mask.png');
| Input image | Output mask |
|---|---|
| image/png | image/png |
Note: Having a separate repo for ONNX weights is intended to be a temporary solution until WebML gains more traction. If you would like to make your models web-ready, we recommend converting to ONNX using 🤗 Optimum and structuring your repo like this one (with ONNX weights located in a subfolder named onnx).
Sources
1 source
Sources
1 sourceVerified Oct 9
Download files
Model artifacts
3 artifacts
Model artifacts
3 artifactsSource excerpts
3 excerpts
Source excerpts
3 excerpts--- library_name: transformers.js tags: - vision - background-removal - portrait-matting license: apache-2.0 pipeline_tag: image-segmentation --- # MODNet: Trimap-Free Portrait Matting in Real Time  For more information, check out the official [repository](https://github.com/ZHKKKe/MODNet) and example [colab](https://colab.research.google.com/drive/1P3cWtg8fnmu9karZHYDAtmm1vj1rgA-f?usp=sharing). ## Usage (Transformers.js) If you haven't already, you can install the [Transformers.js](https://huggingface.co/docs/transformers.js) JavaScript library from [NPM](https://www.npmjs.com/package/@huggingface/transformers) using: ```bash npm i @huggingface/transformers ``` You can then use the model for portrait matting, as follows: ```js import { pipeline } from '@huggingface/transformers'; const segmenter = await pipeline('background-removal', 'onnx-community/modnet-webnn', { dtype: 'fp32' }); const url = 'https://images.pexels.com/photos/5965592/pexels-photo-5965592.jpeg?auto=compress&cs=tinysrgb&w=1024'; const output = await segmenter([url]); output[0].save('mask.png'); // You can also use `output[0].toCanvas()` or `await output[0].toBlob()` if you would like to access the output without saving. ``` Or with the `AutoModel` and `AutoProcessor` APIs: ```js import { AutoModel, AutoProcessor, RawImage } from '@huggingface/transformers'; // Load model and processor const model = await AutoModel.from_pretrained('onnx-community/modnet-webnn', { dtype: 'fp32' }); const processor = await AutoProcessor.from_pretrained('onnx-community/modnet-webnn'); // Load image from URL const url = 'https://images.pexels.com/photos/5965592/pexels-photo-5965592.jpeg?auto=compress&cs=tinysrgb&w=1024'; const image = await RawImage.fromURL(url); // Pre-process image const { pixel_values } = await processor(image); // Predict alpha matte const { output } = await model({ input: pixel_values }); // Save output mask const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height); mask.save('mask.png'); ``` | Input image | Output mask | |--------|--------| |  | 