浏览器LLM自动生成Git提交信息实验录

大家好！不久前我发表了一篇文章，讲述我项目中最有趣和最奇怪的 commit 消息（《如果你觉得你的 Commit 消息很糟糕，等等就知道了》）。文章本身不错，但——一如既往——你们的评论太棒了。

有些人指出…… 👉 "为什么要自己写 commit 消息，让 AI 来做不就行了？"

然后我想：行。这就开始吧。既然我是前端开发者，那当然得这样做：

用 JavaScript 实现！😎

最近在前端开发者大会上的热门话题是在浏览器中直接运行 LLM。不需要服务器、不消耗 token、不用付费、无需上传代码到任何地方。这个领域的主要参与者是 Transformers.js，Hugging Face 出品的浏览器 LLM 运行时。

而且我已经想了好几个月要试试这个…… 现在我有了完美的借口。结果怎样呢？👉 只用两个晚上，我就搭建了一个原型应用 👉 （我发誓，明天我会像个正常人一样打开 Netflix）

➡ 项目地址：https://github.com/sylwia-lask/friendly-commit-messages 随意体验、使用、学习…… 或者提交 PR，因为这更多是个 POC 而不是生产就绪的代码 😂

你粘贴一个 git diff 或代码片段

模型分析这些变更

它生成一个 commit 消息

全部在浏览器本地进行

无需向 API 请求许可

听起来很棒，对吧？老实说？真的很有意思。但…… 也有些出乎意料的事情 🤣

🤖 选择模型——或者说"我真的知道自己在找什么吗？"

大多数教程展示的都是超简单的案例——比如，一个能补全句子的模型。但我需要：

生成 commit 消息

与 Transformers.js + ONNX 兼容（否则模型就不能在浏览器中运行！）

第一个问题：👉 我找不到一份清单列出哪些模型真正能和 Transformers.js 搭配工作。

如果这种情况也发生在你身上——这是一个现成的链接：《自由模型清单》

注意：并非每个模型都能在浏览器中运行！你需要按以下条件筛选：

支持 transformers.js

ONNX 格式（浏览器最优）

pipeline 标签为 text-generation / chat-completion

最后我选择了：👉 onnx-community/Qwen2.5-Coder-0.5B-Instruct

体积小 → 浏览器中速度快

在代码上训练过 → commit 消息本质上就是代码推理

能直接和 Transformers.js 协作

但记住：这不是 GPT-5 或 Gemini-3，只是个微型模型。

✔ 当我粘贴正确的代码 → 我得到一个合理的 commit 消息（也许远非完美，但这就是两个晚上编码的效果 😎）

✔ 当我粘贴有问题的代码 → 我得到提示定义的响应"这甚至不是代码！！！"

❌ 当我问起布鲁塞尔的天气…… 模型开心地做出了回应 🤣

故事的教训：👉 在这类项目中，最难的部分是 prompt + 模型选择，而不是实际的编码工作。

⚙️ 性能——或者说"为什么我的 UI 挂了？"

这是个有趣的发现。

模型只加载一次。不错。

但是：👉 推理阻塞了主线程 👉 React 没有时间渲染"生成中……" 👉 UI 看起来什么都没发生

我本来可以用这样的黑科技：

setTimeout(() => runModel(), 0)

但…… 👉 别这么做。它只是掩盖了真正的问题。

真正的解决方案：👉 把模型移到 Web Worker

Transformers.js 在 worker 中工作得棒极了。100% 推荐。

最后我的方案是：

轻量级的 React + Tailwind UI

Transformers.js + ONNX 在浏览器中运行

一个 Web Worker 托管模型

一个能检测非代码输入的 prompt

一个离线工作的 commit 消息生成器（！）

当然还有：🥚 一个小彩蛋——我忍不住加入了这样的 commit 名：

"it finally works I guess"

关键收获

浏览器中运行 LLM = 超有趣，但：模型很小，prompt 工程至关重要，模型选择是成败的一半

Web Worker 是必需的，否则 UI 会冻结

Transformers.js 做得真的很棒

你完全可以在没有任何后端的情况下构建完整的本地 AI 工具！

💬 你怎么看？

你试过在浏览器中运行 LLM 吗？

你有什么喜欢的 ONNX 模型吗？

或者你想要一个这样的应用版本，支持：答案流式输出？模型选择？多个 commit 消息建议？

或者你想要一个这样的应用版本：

多个 commit 消息建议？

项目地址：https://github.com/sylwia-lask/friendly-commit-messages

🦄 就这样了——感谢阅读！

记住：commit 消息不必完美——你只需要一个可爱的小本地 AI 来生成它们。

一些评论可能仅对已登录的访问者可见。登录以查看所有评论。

若要采取后续行动，你可以考虑屏蔽该人或举报滥用行为