首先 WebGPU 的兼容性要求比较高，桌面端依赖 Chrome 113 等以上版本，具体的兼容性列表见：WebGPU_API#浏览器兼容性

如何使用

在大部分情况下，我们只需要在前端调用前人已经训练好的模型就可以了，感谢 HuggingFace 和 Onnx，我们可以基于一套通用的框架来实现对模型的调用。

也许你使用过或者听说过 Transformers.js，不过目前他的正式版本(2.7.x)还没有正式支持 WebGPU，如果想要使用，你需要安装 npm i @xenova/transformers#v3，这会直接把对应的仓库分支安装到你的项目下。

如果你想要通过 external 的形式导入，那么你需要手动 clone xenova/transformers.js，然后在本地切换到 v3 分支，并且执行 npm install && npm run build。

这会在 dist 目录下产生打包后的文件，只需要把 transformers.min.js 拿出来使用即可。

跑个例子

目前 huggingFace 或者其他地方已经有许多人开始将热门的模型搬运到 Web 上，可以参考

或者直接看 transformers.js 的官方仓库，也有非常多的例子，记得切换到 v3 分支。

又或者可以看看我这两天的学习成果，也是基于 RMBG-1.4 的一个例子，代码在 Github, 使用了 Worker 来做异步计算。

注意事项

  1. 网络问题
    虽然我们可以通过env.allowLocalModels = false;直接加载 HuggingFace 的模型资源，但是 HuggingFace 位于国外，下载成功率较低，因此在大规模使用的情况下，建议将模型文件下载下来托管到自己的服务器或者CDN上。
  2. 下载速度问题
    模型在首次下载后将会缓存到浏览器的 Cache，二次加载时不会重复下载，因此下载速度主要影响用户首次进入的加载耗时。
  3. 算法速度问题
    尽管目前新版的浏览器已经有相当大的比例已经支持 WebGPU，但是还是会有环境存在不支持的情况，在这些场景下可以退化到 wasm 来保证基础的体验，速度的话可能慢几百倍，视具体的模型和任务而定。
  4. 手机能用吗
    Safari 桌面端和移动端均不支持，对于 Chrome Android 121 / WebView Android 121 以上都支持，如果你的移动设备在持续更新，那么多半是支持的（不包括手Q内置浏览器等第三方内核）。