首先 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 上，可以参考

• RMBG-1.4 背景消除
• nanollava大模型对话

或者直接看 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内置浏览器等第三方内核）。

至2024年7月23日，该文章已失效。

截至 2023年10月11日 , QQ Music 已经下线了包括 web、移动端在内的所有 付费音乐包 的开通链接（仅当前处于音乐包套餐的用户能通过移动端续费）。

新用户无法购买 8 元的音乐包，绿钻用户也无法单独续费音乐包。

不过经过研究，目前尚有方法能够拉起音乐包开通，且开且珍惜。

- 阅读剩余部分 -

Slate: 一个 MacOS 的快速分屏工具

https://github.com/jigish/slate

文件
~/.slate :

# Throw Bindings
bind 1:ctrl         chain throw 0 resize | throw 0 resize:screenSizeX/2;screenSizeY/2
bind 2:ctrl         chain throw 1 resize | throw 1 resize:screenSizeX/2;screenSizeY/2
bind 3:ctrl         chain throw 2 resize 

bind 4:ctrl         sequence throw 2 | push up   bar-resize:screenSizeY/2 
bind 5:ctrl         sequence throw 2 | push down bar-resize:screenSizeY/2 

bind 0:ctrl         sequence resize -50% -50% | nudge +25% +25%


# Push Bindings
bind right:ctrl;cmd  chain push right bar-resize:screenSizeX/2 | push right bar-resize:screenSizeX
bind left:ctrl;cmd   chain push left  bar-resize:screenSizeX/2 | push left  bar-resize:screenSizeX
bind up:ctrl;cmd     chain push up    bar-resize:screenSizeY/2 | push up    bar-resize:screenSizeY
bind down:ctrl;cmd   chain push down  bar-resize:screenSizeY/2 | push down  bar-resize:screenSizeY

在微信浏览器想要打开对应公众号，目前有两个方法，功能和实现不一样。

中转页放公众号二维码

属于用户使用门槛比较高的一种，直接跳转到中转页，提示用户长按识别二维码

好处是可以保留 scene 等信息，跳过去可以带一定的参数，对方公众号不需要做开发

跳微信公众号消息页

微信公众号消息页会在首部显示公众号和 “去关注” 按钮。

这种方法跳转，用户操作步骤少，比较容易接受，该跳转路径不接受场景值，如果传参，最好目标公众号的额外提供中转页做好openid 绑定，假设从 A 公众号导流 到 B 公众号。

1. A业务页面重定向到 B 的中转页，带A的识别参数，例如 channelCode
2. B中转页完成微信 Oauth 鉴权，拿到 B Openid_b , B 中转页取 channelCode ，与该用户绑定
3. B中转页继续重定向到微信消息页，引导用户关注。

跳转的微信消息页的链接格式为：

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUyODgxNjE1OA==&scene=124#wechat_redirect

其中 __biz=MzUyODgxNjE1OA== 是关键参数，后面的这串 MzUyODgxNjE1OA== 是公众号的身份标识。

这个值有两种获取办法

1. 第一种方法比较复杂，需要使用 devTools

   1. 浏览器打开公众号推文
   2. F12 或者 ctrl + shift + c 打开 devTools
   3. 切换到 network 页签，然后刷新页面
   4. 点击搜索图标
   5. 输入 __biz=
   6. 点击找到的请求记录，点开 payload
   7. 查看 payload 的 queryString 即可看到 __biz　的值

   

2. 第二种方法稍微简单，需要进入公众号后台

   1. 最左边找到公众号设置
   2. 找到下载二维码，点开
   3. 复制二维码下载地址的链接，粘贴出来，可以看到链接中有一个类似于 fakeid=12345678，将这串数字拷贝出来
   4. 找一个 base64 encode 工具，例如 OSchina/base64 或者 直接在浏览器控制台执行 btoa(12345678) ，得到一个字符串，这个就是 __biz

通过上述两个方法得到 __biz 后，拼接到下面这个链接中即可。

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=【__biz的值】&scene=124#wechat_redirect

TG 在软件内默认没有内置中文语言包，如果需要切换到中文，可以在软件内打开这个链接:

tg://setlanguage?lang=zh-hans-raw