最新内容以及更好的阅读体验可查看我的博客原文
先看效果
最近谷歌的 AI 模型 Gemini 发布了,本着白嫖的原则,准备给我的博客加上 AI 总结的功能。由于我的博客是一个静态网站,没有服务端并且我也不想引入服务端,所有没有办法在上面写接口。于是在调研了一些方案后决定在 build 时对文章进行总结并将总结的内容插入到文档的 front matter 中,这样就可以在没有服务端的情况下直接读取到总结的内容了。
方案
我一共想到了几种方案
- 通过 Github Action 监听 push 事件,然后在 Action 中调用 Gemini API 生成总结,最后将总结的内容插入到文档的 front matter 中。
- 通过 Github Bot 监听 Github Webhook 事件,然后在 Bot 中调用 Gemini API 生成总结,最后将总结的内容插入到文档的 front matter 中。
- 直接在页面上请求 Gemini API 生成总结然后展示在页面上。
首先第三种方案由于博客是静态页面,出于安全考虑没办法将 API KEY 直接发送给客户端,所以这种方案直接排除了。
第一种方案虽然可行但是没有第二种方案能实现的功能多,并且第二种方案社区有成熟的框架 Probot 使用,所以我最后选择了第二种方案。
于是我自己开发了一个 Github 机器人来完成自动化总结的功能, 项目地址
部署机器人
本来想使用 Vercel 部署的,可是 Vercel 的免费版的 Serverless Function 有 10s 的超时时间,而总结的时间是远超过 10s 的,我总结 55 篇文章大概耗费了 3 分钟。在调研了一些服务后,我最后使用了 Zeabur 的免费计划来部署,不过它的免费计划针对一些服务可能会将其无故关闭,后面看是否能找到一些能够白嫖的服务。
部署到 Zeabur
直接使用下面我创建好的模版
创建 Github App
首先将项目代码拉取下来,然后执行以下命令
npm install
npm start
打开 http://localhost:3000
注册属于你自己的 bot
完成这些步骤后在你的项目中会出现一个 .env
文件
将这个文件中的环境变量内容复制到 Zeabur 的环境变量中
获取 Gemini API KEY
打开地址
将这个 API KEY 添加到 Zeabur 的环境变量 GEMINI_API_KEY
中,完成这些操作后 重新部署一次
获取 Webhook 地址
将该地址回填到 Github App 的 Webhook 地址中。
- 访问 https://github.com/settings/apps
- 找到你刚才创建的 Github App,点击 Edit
- 填入你的 Webhook 地址
- 点击保存
到此所有安装工作全部完成
触发总结所有博文
首先新建一个 issue,然后给你这个 issue 添加一个 summarizer
label,这样机器人就会开始总结你的博文了,具体完成的速度看你的仓库中有多少文章,我 55 篇文章大概花费了 3 分钟时间。
添加总结组件
安装三方库
yarn add typed.js
首先确保你之前 Swizzling 过 DocItem/Layout
和 BlogPostPage
组件,具体步骤参考 这篇文章,这里我不在过多赘述。
具体修改查看 这个提交
总结
目前由于手中没有可用的服务器,所有只能使用 Zeabur 的免费计划来部署机器人,后期可能会调研如何使用 Github Action 运行。
关于功能需求,后期可能会增加自动翻译工作流。