在浏览器上使用transformers.js运行（WebGPU）RMBG-1.4进行抠图（背景移除）

在浏览器上使用transformers.js运行（WebGPU）RMBG-1.4进行抠图（背景移除）

说明：

• 首次发表日期：2024-08-28
• 官方Github仓库地址： https://github.com/xenova/transformers.js/tree/main/examples/remove-background-client

准备

下载onnx模型文件: https://huggingface.co/briaai/RMBG-1.4/tree/main/onnx, 有3个onnx模型文件：

• model.onnx
• model_fp16.onnx
• model_quantized.onnx

Clone仓库并打开示例文件夹：

git clone https://github.com/xenova/transformers.js.git
cd transformers.js/examples/remove-background-client

创建public/models/briaai/RMBG-1.4/onnx 文件夹，并将下载的模型文件放入。

运行tree public/，可以看到：

public/
└── models
    └── briaai
        └── RMBG-1.4
            └── onnx
                ├── model.onnx
                ├── model_fp16.onnx
                └── model_quantized.onnx

安装项目依赖：

npm install

推理

修改main.js文件中的env配置，使用本地模型：

env.allowLocalModels = true;

有很多可用的env配置，详见 https://huggingface.co/docs/transformers.js/api/env

以下是我测试过得配置（仅测试，不需要在main.js中修改）：

env.remoteHost = 'https://hf-mirror.com';
env.allowRemoteModels = false;
// 默认会读取之前的缓存，如果之前的缓存是错的，需要清空浏览器缓存，或者使用该配置不使用浏览器缓存
env.useBrowserCache = false;

使用model_quantized.onnx

默认使用的模型文件名为model_quantized.onnx，不需要做任何修改。

使用model.onnx

修改main.js，添加quantized: false到AutoModel.from_pretrained：

const model = await AutoModel.from_pretrained('briaai/RMBG-1.4', {
    // Do not require config.json to be present in the repository
    config: { model_type: 'custom' },
    quantized: false
    // model_file_name: 'model_fp16',
    // quantized: false
});

使用model_fp16.onnx

修改main.js，AutoModel.from_pretrained部分如下：

const model = await AutoModel.from_pretrained('briaai/RMBG-1.4', {
    // Do not require config.json to be present in the repository
    config: { model_type: 'custom' },
    model_file_name: 'model_fp16',
    quantized: false
});

运行

npm run dev

然后打开浏览器，等待状态从Loading model…变为Ready后，上传图片

添加日志查看使用的模型文件

修改node_modules/@xenova/transformers/src/utils/hub.js中的getModelFile函数，添加日志打印localPath：

    let requestURL = pathJoin(path_or_repo_id, filename);
    let localPath = pathJoin(env.localModelPath, requestURL);

    console.log("localPath: ", localPath);

npm run build
npm run preview

浏览器打开链接，F12显示开发者工具，可以看到日志：

localPath:  /models/briaai/RMBG-1.4/onnx/model_fp16.onnx