库名称: transformers.js 标签:

• 视觉
• 背景去除
• 人像抠图 许可证: apache-2.0 流水线标签: 图像分割

wuchendi/MODNet (Matting Objective Decomposition Network)

实时无Trimap人像抠图

• 代码库: https://github.com/WuChenDi/MODNet
• 演示空间: https://huggingface.co/spaces/wuchendi/MODNet
• SwanLab/MODNet: https://swanlab.cn/@wudi/MODNet/overview

使用说明 Transformers.js

首先，通过PNPM安装@huggingface/transformers库：

pnpm add @huggingface/transformers

然后，使用以下代码通过wuchendi/MODNet模型进行人像抠图：

/* eslint-disable no-console */
import { AutoModel, AutoProcessor, RawImage } from '@huggingface/transformers'

async function main() {
  try {
    console.log('初始化MODNet...')

    // 加载模型
    console.log('加载模型...')
    const model = await AutoModel.from_pretrained('wuchendi/MODNet', {
      dtype: 'fp32',
      progress_callback: (progress) => {
        // @ts-ignore
        if (progress.progress) {
          // @ts-ignore
          console.log(`模型加载进度: ${(progress.progress).toFixed(2)}%`)
        }
      }
    })
    console.log('√ 模型加载成功')

    // 加载处理器
    console.log('加载处理器...')
    const processor = await AutoProcessor.from_pretrained('wuchendi/MODNet', {})
    console.log('√ 处理器加载成功')

    // 从URL加载图像
    const url = 'https://res.cloudinary.com/dhzm2rp05/image/upload/samples/logo.jpg'
    console.log('加载图像:', url)
    const image = await RawImage.fromURL(url)
    console.log('√ 图像加载成功', `尺寸: ${image.width}x${image.height}`)

    // 预处理图像
    console.log('预处理图像...')
    const { pixel_values } = await processor(image)
    console.log('√ 图像预处理完成')

    // 生成alpha遮罩
    console.log('生成alpha遮罩...')
    const startTime = performance.now()
    const { output } = await model({ input: pixel_values })
    const inferenceTime = performance.now() - startTime
    console.log('√ alpha遮罩生成完成', `耗时: ${inferenceTime.toFixed(2)}毫秒`)

    // 保存输出遮罩
    console.log('保存输出...')
    const mask = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height)
    await mask.save('src/assets/mask.png')
    console.log('√ 输出已保存至assets/mask.png')

  } catch (error) {
    console.error('× 处理过程中出错:', error)
    throw error
  }
}

main().catch(console.error)

示例结果

输入图像	输出遮罩