低成本打工：几行 JS 代码写个智能周报生成器就许公司降本增效，不许我们打工人低成本上班？今天就让他们见识见识咱们工人阶

💰 点进来就是赚到知识点！本文教你用浏览器内置 AI 实现周报生成器，实现低成本快乐打工 ，点赞、收藏、评论更能促进消化吸收！

🚀 想解锁更多 Web AI 的强大能力吗？快来订阅专栏「Web AI 进化录」!

引言

年底了，各厂纷纷开始降本增效了，有的裁员，有的削减福利，一边压缩成本一边管控员工产出效率。什么日报周报、站会考勤满天飞。这些手段是否有用暂且两说，但上层为了缓解焦虑，总要折腾折腾下层。

不过，你有张良计，我有过墙梯。面对无效折腾，咱打工人能省一分心力是一分。像日报周报这种东西，何苦逐字亲笔呢？干脆让 AI 来写，反正主管看周报也是先用 AI 总结。咱们少敲一个字就能早下班一秒钟，你说是吧？

那么今天我给家人们带来的福利，就是把打工搬砖的价格打下来，用最低的成本实现一个智能周报生成工具。

先尝后买

如果访问不了，可以直接看效果演示：

在上面的 Demo 中，我们只需要把本周干了哪几件事输入进去，周报鸡就能帮我们把周报生成出来。如果对内容不满意，还可以切换语气、长度重新生成。可以看到，生成速度还是很快的，更绝的是，你不需要翻墙，不需要花钱买 token 额度，甚至不需要联网，就能让大模型随时听候你吩咐。是不是很棒？

之所以这么厉害，是因为周报鸡是使用 Chrome 内置 AI 实现的，只需要写几行 JavaScript 代码，文本生成垂手可得。

如果你此时的内心独白是「哟？有点儿意思！」，那本文正是为你而写的，继续读吧。

接下来，我将为你揭示生成周报的核心逻辑 —— Writer API。

Writer API 是 Chrome AI 团队正在推进的 JavaScript API，目标是让和大模型交互成为 JavaScript 的基础能力。除了 Writer API，很有其他很多堪称利器的 AI 能力，参见我专栏的其他文章。

不过这套 API 目前还在实验阶段，所以需要一点点小操作来解锁。

解锁攻略

首先要明确一些使用限制：

暂时只对桌面端开放
你的设备至少要有 4GB 显存，集成显卡或者独立显卡皆可
你的磁盘需要有 22GB 的剩余空间，虽然内置的 Gemini Nano 体积远远达不到 22GB，但还是要先预留充足

确保你的设备满足上述条件后，就可以简单几步走了：

用 Chrome（Canary 最好，正式版亦可）打开 chrome://flags/#optimization-guide-on-device-model，在高亮条目右侧选择「Enabled BypassPerfRequirement」
用同样的方式，把 chrome://flags/#writer-api-for-gemini-nano 设为「Enabled」，然后重启 Chrome
打开 chrome://components/，找到「Optimization Guide On Device Model」，点击按钮，等待模型更新完毕
在 Chrome Console 里执行 await ai.writer.create()，如果能正常打印出实例对象，那么恭喜解锁成功！

另外，如果你希望支持中文，把 chrome://flags/#text-safety-classifier 也开启即可。

如果你没能顺利解锁，可以在评论区留言，我会帮你一起搞定。

速通周报生成器

配置好环境后，我们就可以开始动手开发了。

检测可用性

由于浏览器内置 AI 还没有在各厂商中全面普及，所以为了保证优雅降级，我们要切记在调用相关 API 之前，总是先检测可用性。

对于 Writer API，我们可以像下面这样判断可用性：

async function check () {
  if (!ai?.writer?.capabilities) return false;

  const res = await ai.writer.capabilities();
  if (res?.available === 'readily') return true;

  if (res?.available === 'after-download') return alert('请等待模型下载');

  return false
}

注意，本文发布时，在 Chrome v131.0.6778.86 中，ai.writer 上不存在 capabilities 方法，官方已经确认是 bug 并正在修复中。

实例化 `writer`

Chrome 内置 AI API 的设计风格是这样的：在全局对象（window / global / self）下，设一个属性 ai 作为命名空间，各项功能的构造器被分配在 ai 对象的各个属性下。构造器创建出实例 session，而 session 带有各种智能方法。

所以我们要先创建一个实例对象：

const writer = await ai.summarizer.create()

当然，create() 接收一些配置参数，让我们可以控制生成内容的风格和篇幅：

sharedContext：通用的上下文，让每次都按相同的语境来生成内容。可传入描述性的自然语言。
format：生成文本的合适，可取值：plain-text、markdown
tone: 语气。可取值：formal - 正式、neutral - 中立、casual - 随意
length: 生成长度。可取值：long - 长、medium - 中、short - 短

那么针对咱们写周报这种场景来说，周报一般有特定结构，属于书面文所以要正式一些，长短适中，文本格式则取决于你所在公司用什么办公 IM。

因此，我们将把初始化参数配置成如下形态：

const writer = await ai.summarizer.create({
	sharedContext: '根据用户输入的关键词，写一篇工作周报，包含具体工作事项、总结、下周计划三个部分。',
  tone: 'formal',
  length: 'medium',
  format: 'plain-text'
})

这样，一个定制化的书写小助手就蓄势待发了。

收集工作事项

我们需要让 AI 知道我们本周都做了哪几项工作。为了最简化用户操作，我们只输入事项名称，比如「开发登录功能」、「修复闪退问题」等等。你可以选择任意你觉得顺手的表单组件。我这里用到了 shadcn-vue 的标签输入框

<TagsInput v-model="works" class="text-gray-500 dark:text-white max-w-[80vw]">
  <TagsInputItem v-for="item in works" :key="item" :value="item">
    <TagsInputItemText />
    <TagsInputItemDelete />
  </TagsInputItem>
  <TagsInputInput placeholder="输入工作事项，回车确认" />
</TagsInput>

接收到输入值后，用 join(’, ’) 拼接成一个字符串即可。

生成周报

接下来，我们调用 writer 的书写方法，把上一步的字符串作为第一个参数传入：

const stream = await writer.writeStreaming(string)

为了更快看到生成效果，我这里采用了 writeStreaming 进行流式生成，因此对 stream 需要特殊处理一下：

let output = '' // 存储生成内容
for await (const chunk of stream) {
    output = chunk
}

其实目前 API 生成的数据流并非真正的流，而是每次都返回最新的完整内容，也就是说，如果最终生成的是 abcde 这个内容，那么在 for 循环中，第一轮 chunk 的值是 a，第二轮是 ab …… 直到生成结束时 chunk 的值是 abcde。所以我们会看到，在循环体中总是用 chunk 去覆盖式更新 output，而不是符合直觉的增量更新 output += chunk。

到这里，周报鸡的核心逻辑就实现完了。怎么样，是不是出乎意料地简单快捷？这就是内置 AI 的魅力所在 —— 将 AI 能力化为 Web 基础设施，带给开发者和用户极致舒服的体验。

结语

恭喜你读完了本文！你真棒！

这次我们学会了如何利用浏览器内置的 AI 书写 API 为我们提升效率、节约时间和精力。像这样简单好用的 API 还有很多，希望这个「周报鸡🐔」小工具能够抛砖引玉，激发你的灵感，开发出更多好玩实用的 Web 应用来，实现低成本搬砖、快乐打工！

📣 我是 Jax，在畅游 Web 技术海洋的又一年，我仍然是坚定不移的 JavaScript 迷弟，Web 技术带给我太多乐趣。如果你也和我一样，欢迎关注、私聊！

低成本打工：几行 JS 代码写个智能周报生成器

引言