Skip to content
ModelListedExternal
Download

Modnet

For more information, check out the official repository and example colab.

KindOtherVersionRevision e43aed9Bgrade

Model source

Kind
Other
File size
6.32–24.7 MB
Version
vRevision e43aed9
Updated
Oct 9, 2026
Downloads
8
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', 'Xenova/modnet', { 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('Xenova/modnet', { dtype: 'fp32' });
const processor = await AutoProcessor.from_pretrained('Xenova/modnet');

// 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 imageOutput mask
image/pngimage/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
Hugging FacePrimaryVersion e43aed98d67c9b58a200f65a84816db936209cc7
huggingface.co/riasatsk/modnet/tree/e43aed98d67c9b58a200f65a84816db936209cc7

Verified Oct 9

Model artifacts

7 artifacts

onnx/model_bnb4.onnx

onnx · 22.0 MB · SHA-256 acfa94a3b902…a461 · Hugging Face

Download

onnx/model_fp16.onnx

onnx · 12.4 MB · SHA-256 25f165da9bfd…5cf6 · Hugging Face

Download

onnx/model_q4.onnx

onnx · 22.1 MB · SHA-256 74b7b569f869…312a · Hugging Face

Download

onnx/model_q4f16.onnx

onnx · 11.3 MB · SHA-256 f582407530e8…fa5c · Hugging Face

Download

onnx/model_quantized.onnx

onnx · 6.32 MB · SHA-256 92e49898c3e0…ee3a · Hugging Face

Download

onnx/model_uint8.onnx

onnx · 6.32 MB · SHA-256 7bad6522b3cd…c61d · Hugging Face

Download

onnx/model.onnx

onnx · 24.7 MB · SHA-256 07c308cf0fc7…4df9 · Hugging Face

Download

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 ![image/gif](https://cdn-uploads.huggingface.co/production/uploads/61b253b7ac5ecaae3d1efe0c/KdG3M8sltgiX8hOCNn8DT.gif) 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', 'Xenova/modnet', { 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('Xenova/modnet', { dtype: 'fp32' }); const processor = await AutoProcessor.from_pretrained('Xenova/modnet'); // 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](https://cdn-uploads.huggingface.co/production/uploads/61b253b7ac5ecaae3d1efe0c/mhmDJgp5GgnbvQnUc2SVI.png) | ![image/png](https://cdn-uploads.huggingface.co/production/uploads/61b253b7ac5ecaae3d1efe0c...

Source context: 8 downloads · 0 likes · Pipeline image-segmentation · Library transformers.js · Repo riasatsk/modnet

Source context: 7 downloads · 0 likes · Pipeline image-segmentation · Library transformers.js · Repo riasatsk/modnet