Modnet Webnn
For more information, check out the official repository and example colab.
Fuente del modelo
- Tipo
- Other
- Tamaño del archivo
- 6,32–24,7 MB
- Versión
- vRevision 6af5207
- Actualizado
- 9 oct 2026
- Descargas
- 612
- Fuente
- Hugging Face
Descripción de la fuente
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).
Fuentes
1 fuente
Fuentes
1 fuenteVerificado 9 oct
Download files
Artefactos del modelo
3 artefactos
Artefactos del modelo
3 artefactosExtractos de fuentes
3 extractos
Extractos de fuentes
3 extractos--- 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 | |--------|--------| |  | 