还是网页端, 46mb模型, 抠图功能升级了, 抠任意主体, 还是不要显卡, 不要python, 满意吗?

上周做的自动抠图, 大家反馈没办法指定抠谁

一个模型，想扣谁扣谁。

不用后端，不用 API，浏览器里跑 SAM（46MB），点几下就抠完。

核心代码

bash 复制代码

import * as ort from "./ort/ort.bundle.min.mjs"
ort.env.wasm.wasmPaths = "./ort/"
const enc = await ort.InferenceSession.create("./models/sam_hq_vit_t_encoder.onnx")
const dec = await ort.InferenceSession.create("./models/sam_hq_vit_t_decoder.onnx")

流程图

bash 复制代码

  浏览器加载 SAM-HQ ONNX（46MB）
        │
        ▼
  上传图片 → Encoder 编码（只跑一次）
        │
        ▼
  点坐标 → Decoder 推理 → mask
        │
        ▼
  输出透明 PNG

1 SAM-HQ 能干嘛

SAM 全称 Segment Anything Model，Meta 出的，约 4.5 万星。

你点一个点，它告诉你哪些像素属于这个物体。

不是猜主体，是你说了算。

SAM-HQ 是改进版，GitHub 约 1.3 万星。

边界更细，头发丝、宠物毛都能抠干净。

ViT-Tiny 版本 encoder + decoder 一共 46MB，浏览器直接跑。

2 ONNX 是 samexporter 转的

SAM-HQ 官方只有 PyTorch 权重，浏览器不认。

我用 samexporter 转成了 ONNX。

这个工具专门导出 SAM 家族：SAM、MobileSAM、SAM2、SAM-HQ 都支持。

一条命令导出 encoder，一条命令导出 decoder。

拆两个文件的好处：encoder 编码一次，decoder 反复用。

转好的文件放在 demo 的 static/models/ 下，拿来就用。

3 浏览器推理：onnxruntime-web

微软开源，GitHub 约 1.5 万星。

ONNX 文件放本地，wasm 引擎直接跑推理。

服务器要加两条响应头开多线程，demo 的 index.js 已配好。

4 功能：点哪抠哪

上传图片，自动编码。

左键点主体，右键点背景，点几下模型就明白你要啥。

界面上紫色叠加，边界看得清清楚楚。

一张图里两个同款商品，只想抠左边那个？

左边点几下，右边点几下排掉，模型自己分边界。

抠完一键下载透明 PNG。

5 性能

• 模型加载：2 秒
• 首次编码：0.3 秒，一张图只跑一次
• 每次点击：0.05 秒，防抖 200ms 批量推理
• 纯 CPU 够用，有 WebGPU 还能更快

关键在 embedding 缓存。

编码一次，点十次八次都复用，这是 SAM 快的核心。

6 应用场景

电商：主图换底色，白底图批量出，不用 Photoshop 一张张抠。

隐私：图不出本机，纯浏览器推理，敏感图敢用了。

成本：零服务器，抠图功能直接塞进现有网页。

工具：做个在线设计器，抠图、换背景、拼图一条龙。

最后说两句

ViT-Tiny 是轻量版，头发丝、半透明物体差点意思。

要好效果换 ViT-Base，200MB，浏览器还能扛。

再往上就走服务端，Python 跑 SAM2，多卡伺候。

demo 给原型用，上生产该用大的还得用。

想扣谁扣谁。

坚持不住了, 睡了, 明早见, 不知道这次的效果大家满意了没?