
偶然看到 Google 官方在 B 站发的视频 https://www.bilibili.com/video/BV1Gp4y1A7RA?t=344.8 发现 WebAssembly 真好玩,特别提到了 fastText 这个基于 AI 模型的工具,一上头就打算试试把它搬到浏览器会怎样。
先在 npm 搜索了一下,基本都是只支持 Node 环境使用的,有一个包 fasttext.wasm 说是支持浏览器环境的,结果在 Next.js 中一试直接裂开,各种报错
兴致上来了就一心想着搬到浏览器上,先在原仓库上各种魔改,始终解决不了问题,最后确定应该是要分离浏览器和 Node 环境的实现的,从而能方便的避免各种问题。
各种踩坑之后终于搞定了,现在已部署两个环境,欢迎体验:
这次实现涉及到的技术点汇总一下
按照 fastText 官方的流程无法编译,所幸 fasttext.wasm 有个基于 Xmake 的编译,刚安装怎么也编译不了,最后稀里糊涂把 Xmake 的路走通了
能编译之后就是另一个问题,如何分环境编译,找 emcc 和 Xmake 各种文档研究怎么分环境打包,所幸官方对此早已实现,注入 xmake.lua 的参数也是连蒙带猜可算是注入进去了。
这一路都是靠玄学通关的,如果编译 wasm 的第一步失败的话,我大概就直接弃坑了。最后写了个简单的 benchmark 测试了一下,效果是真不错。

搞完之后就一个想法,关于 Xmake 如果要深入 WebAssembly 大概得入个门才行,现在全靠玄学想想都有点搞 最后 fastText 的核心封装搞定了,应该可以方便扩展 fastText 支持的各种模型功能了,有时间逐步加上,未来可期
另外还有个 Vite 库打包的问题,由于 wasm 文件的编译会带上一个对应的 JS 绑定文件,这不太可能自己去写,所以需要保留代码的原始形式。Vite 库打包死活要把 wasm 文件变成内联的 base64 格式……也有人反馈了这个问题:
看起来这个问题也有些年头了,至今都不支持,也是不懂为啥……最后决定通过骚操作绕过这个问题,将对应的 JS 绑定文件添加到 external 中,再用静态资源复制的 Vite 插件把相关的资源复制过去 一切又正常了。
1 nolhr0909 2023-09-18 10:37:23 +08:00 via iPhone 最近有一个很小的语言识别模型叫做 whichlang ,准确率非常高,基于 onnx-wasm 做的,可以直接用。 我前几年给 lingua-rs 项目推过一点代码,目前基于 lingua 做了一个翻译机器人放到了 slack 上 |
2 theprimone OP @nolhr0909 摸索了一下,whichlang 目前只有 rust 生态吧,没有对应的 wasm 可用,也没有 Node 支持? |
3 theprimone OP @nolhr0909 另外 whichlang 给我的感觉没有用到 onnx 吧,不过 onnx 看起来更专业,有机会找个合适的模型来试试。 |