把 47MB 的抠图模型塞进浏览器，就为了身份证复印件不用上传
hnlszcl611:
起因很土。帮家里人弄身份证复印件，网上一搜全是「上传图片 → 在线生成」。传身份证这事我自己不敢，又懒得开 PS，就把去背景模型直接塞进浏览器跑了。
模型得先瘦下来。BiRefNet 原版太大，换成 lite + int8 量化、768² 输入，落到 47MB，gzip 后 39MB。首次访问还是肉疼，所以模型放在 R2 + CF 上，多源竞速下载谁先返回用谁，再拿 Cache API 持久缓存，二次访问基本秒开。R2 的 content-encoding 头不可靠，我干脆自己认 gzip magic，用 DecompressionStream 本地解压。
真正难受的是隔离头。onnxruntime-web 要开多线程 WASM 就得有 SharedArrayBuffer，而 SAB 要 crossOriginIsolated，页面必须带 COOP/COEP，否则只能单线程，慢到不能用。这个头一加，跨源 iframe 就嵌不进来了，我的支付浮层当场被打死，换成 COEP: credentialless 也救不回来。最后是结账页不加隔离头、从隔离页过去时强制硬导航绕开的。
顺带一个不报错的坑：Next.js 客户端软导航不会重新求值文档响应头，从隔离页用 Link 组件跳到结账页，crossOriginIsolated 会残留成 true。控制台干干净净，就是不工作，我排查了挺久，现在结账按钮挂载时还留了一道自检硬刷新兜底。
WebGPU 和 WASM 两条路都得留着。WebGPU 快很多但覆盖率不够，回落 WASM SIMD 慢，能跑通。两条都得测，光顾着调快的那条，慢的那条真出问题时是没有兜底的。
另外身份证这个场景里，模型其实不是拿来抠透明图的，是用它出的 alpha 找证件包围盒，自动裁正再摆版。识别不出像卡片的东西就退回整图，不硬猜。
结果就是图片一次都不出浏览器。这句不用信我，开 DevTools 的 Network 面板自己看，除了首次拉模型没有别的请求。
站点 [koutuxia.com](http://koutuxia.com/) ，身份证复印件在 /id-copy，压缩、改尺寸、格式转换那几个也是纯前端。另外有个云端去背景走的是 Replicate，那个确实传图，页面上单独写明了，没跟本地这条混着说。
第一次这么干，模型选型和量化那块肯定还有能优化的地方，欢迎拍砖。
---
原文链接：[点击查看](https://www.v2ex.com/t/1235486)
起因很土。帮家里人弄身份证复印件，网上一搜全是「上传图片 → 在线生成」。传身份证这事我自己不敢，又懒得开 PS，就把去背景模型直接塞进浏览器跑了。
模型得先瘦下来。BiRefNet 原版太大，换成 lite + int8 量化、768² 输入，落到 47MB，gzip 后 39MB。首次访问还是肉疼，所以模型放在 R2 + CF 上，多源竞速下载谁先返回用谁，再拿 Cache API 持久缓存，二次访问基本秒开。R2 的 content-encoding 头不可靠，我干脆自己认 gzip magic，用 DecompressionStream 本地解压。
真正难受的是隔离头。onnxruntime-web 要开多线程 WASM 就得有 SharedArrayBuffer，而 SAB 要 crossOriginIsolated，页面必须带 COOP/COEP，否则只能单线程，慢到不能用。这个头一加，跨源 iframe 就嵌不进来了，我的支付浮层当场被打死，换成 COEP: credentialless 也救不回来。最后是结账页不加隔离头、从隔离页过去时强制硬导航绕开的。
顺带一个不报错的坑：Next.js 客户端软导航不会重新求值文档响应头，从隔离页用 Link 组件跳到结账页，crossOriginIsolated 会残留成 true。控制台干干净净，就是不工作，我排查了挺久，现在结账按钮挂载时还留了一道自检硬刷新兜底。
WebGPU 和 WASM 两条路都得留着。WebGPU 快很多但覆盖率不够，回落 WASM SIMD 慢，能跑通。两条都得测，光顾着调快的那条，慢的那条真出问题时是没有兜底的。
另外身份证这个场景里，模型其实不是拿来抠透明图的，是用它出的 alpha 找证件包围盒，自动裁正再摆版。识别不出像卡片的东西就退回整图，不硬猜。
结果就是图片一次都不出浏览器。这句不用信我，开 DevTools 的 Network 面板自己看，除了首次拉模型没有别的请求。
站点 [koutuxia.com](http://koutuxia.com/) ，身份证复印件在 /id-copy，压缩、改尺寸、格式转换那几个也是纯前端。另外有个云端去背景走的是 Replicate，那个确实传图，页面上单独写明了，没跟本地这条混着说。
第一次这么干，模型选型和量化那块肯定还有能优化的地方，欢迎拍砖。
---
原文链接：[点击查看](https://www.v2ex.com/t/1235486)
评论
暂无评论。