💰 点进来就是赚到知识点！本文带你光速手搓一个 AI 总结工具 ，点赞 、收藏 、评论更能促进消化吸收！
🚀 想解锁更多 Web AI 的强大能力吗？快来订阅专栏「Web AI 进化录」!
先尝后买
老规矩，先玩玩 Demo：一个用浏览器内置 AI 实现的文字提炼工具。
直接看录屏效果也行：
假设（或者根本不用假设😜）你正在上班摸鱼，刷到了一篇万字长文《如何比 99% 的前端同行先帅(美)起来》，但显然摸鱼一刻值千金，你完全不想逐字逐句地读完。又或者你和产品经理在微信上高强度对需求一整个上午，下午开发时你实在懒得再把好几米长的聊天记录从头到尾翻一遍。
此时如果有一个趁手的工具，能把核心信息迅速提炼出来，让你提高效率、提前下班，岂不是很棒？
其实市面上也已经有非常多的此类服务了。在本文发布时，掘金官方就已经支持了为每篇文章生成智能总结。
但不是所有的文字内容都适合上传给第三方处理，还有些工具有访问和付费门槛，更别说功能不够定制化、不能一站解决问题等痛点了。
本地模型 正是用来解决这些痛点的，而浏览器内置模型 则更是直接把智能能力递到了你手里。Chrome 里就是内置了 Gemini Nano 这个多模态模型，并且提供了配套的 Summarizer API ，简直是前端开发者的大利好。无需联网，不用付费，只需要几行 JS 代码，你轻轻松松就能写一个智能总结工具出来，真正是「如意如意，趁我心意」。
如果你此时的内心独白是「哟？有点儿意思！」，那本文正是为你而写的。
解锁方法
目前，Chrome 内置的 Summarizer API 还处于内测阶段，离成为 W3C 标准还尚有差距。但最新的正式版 Chrome 已经把内置 AI 装载进来了，我们只需要按照窍门操作几步，就可以立刻尝鲜，早用早享受。
首先要明确一些使用限制：
- 内置 AI 暂时只对桌面端开放
- 你的设备至少要有 4GB 显存，不限集成显卡或者独立显卡
- 你的磁盘需要有 22GB 的剩余空间，虽然内置的 Gemini Nano 体积远远达不到 22GB，但还是要先预留充足
确保你的设备满足上述条件后，就可以简单几步走了：
-
在 Chrome 地址栏输入
chrome://flags/#optimization-guide-on-device-model，在高亮条目右侧选择 「Enabled BypassPerfRequirement」 -
用同样的方式，把
chrome://flags/#summarization-api-for-gemini-nano设为「Enabled」 -
重启 Chrome
-
在 Chrome Console 里执行
await ai.summarizer.capabilities()，如果看到如下运行结果，那么恭喜解锁成功！
如果你没能顺利解锁，可以在评论区留言，我会帮你一起搞定。
速通智能总结工具
将内置模型准备就绪后，我们就可以开始动手开发了。
检测可用性
由于浏览器内置 AI 还没有在各厂商中全面普及，所以为了保证优雅降级，我们要切记在调用相关 API 之前，总是先检测可用性。
那么具体到 Summarizer API，我们可以像下面这样判断可用性：
JavaScript
async function check () {
if (!ai?.summarizer?.capabilities) return false;
const res = await ai.summarizer.capabilities();
if (res?.available === 'readily') return true;
if (res?.available === 'after-download') return alert('请等待模型下载');
return false
}如果你暂时还不想深入了解 capabilities() 的用法，完全可以把上述代码复制带走，然后直接跳到「创建 session」小节继续阅读。
在 capabilities() 的执行结果中，除了用于判断可用状态的 available 属性之外，我们还可以调用到下列函数：
supportsType()supportsFormat()supportsLength()
它们都是用来检测 API 对具体配置项的支持情况，关于这些配置项，我们将在下文 create() 方法的参数部分详细讲解。
该 API 还支持一个方法，可以用来判断输入文本的语种是否被模型所支持。但这里有一个实现上的分叉：
- Chrome 正式版 130 中，这个方法的名称是
supportsInputLanguage - 而在 Chrome Canary 版 132 中，方法名却是
languageAvailable
目前无法确定在后续推进过程中，哪个名称会得以保留。所以如果要用到这个方法，我们也要做好兼容。但无论名字叫什么，它都接收一个语种 Tag 作为参数，比如 zh 代表中文，en 代表英文。
创建 session
确保 API 可用后，我们开始实现文本总结逻辑。
Chrome 的内置 AI API 的设计风格是这样的：在全局对象（window / global / self）下，设一个属性 ai 作为命名空间，各项功能的构造器被分配在 ai 对象的各个属性下。构造器创建出实例 session，而 session 带有各种智能方法。
Summarizer API 也不例外。我们可以调用 ai.summarizer.create() 创建出一个实例 session：
JavaScript
const session = await ai.summarizer.create({
format: 'plain-text',
type: 'teaser',
length: 'short',
})我们可以给 create() 传入不同的配置参数组合，创建出满足不同需求的 session。以下是与文本处理风格相关的参数：
-
format：输入文本的格式，可选值：markdown：Markdown 格式plain-text：纯文本格式
-
type：我们想要达到的总结效果，可选值：tl;dr：「too long, didn't read」的缩写，意为「太长不看」，是标准的总结模式key-points：将要点总结出来，并以列表展示teaser：生成一段预告词或者导语，吸引读者注意力headline：提炼成一个简明的标题
-
length：生成文本的长度，可选值为short、medium或long
session 一经创建后，就会保持配置参数指定的生成风格。
create() 还接受另外一些用于控制过程的参数：
sharedContext：字符串类型，可以用自然语言描述总结内容的场景或背景，提升总结效果signal：用于在必要时中断生成过程monitor：可传入一个回调函数，在函数参数中可以获取到模型下载的进度
调用总结方法
配置好实例 session，我们就可以总结文本了。
Summarizer API 支持两个总结方法：
summarizeStreaming()summarize()
从命名可以看出，前者是流式处理，一边生成一边把结果吐出来；而后者则是要等到全部 token 完才返回结果。
而二者接受的参数是一致的：第一个参数是输入文本；第二个参数是一个配置对象，用于控制中断和指定上下文。
JavaScript
const result = await session.summarizeStreaming(str, {
signal,
context: '',
})为了减少用户等待时长，我们优先选择流式生成（出于简化演示的目的，我们先不传第二个参数）：
JavaScript
const result = await session.summarizeStreaming(str)
for await (const chunk of result) {
resText = chunk
}在旧版本的实现里，流式生成返回的并不是真正的 stream，而是每次吐出最新生成的 token，所以那时候我们需要用
resText += chunk的方式拼接。但现在已经不需要这样做了。
当我们把一段长文本传给 summarizeStreaming()之后，顷刻间，精炼后的文本就如流水般顺畅而出了。就这样，简单几行 JavaScript， 我们就实现了一个智能总结小工具。
结语
恭喜你读完了本文！你真棒！
有了浏览器内置 AI 提供的 API，咱们可以非常轻松且快速地把 LLM 的能力落地成好用的工具，简直不要太爽。
当然，内置 AI 的能力还在持续完善和优化中，比如目前对中文的支持还不是非常完美，文本向量化和多模态能力还没开放等等。但作为新时代的开发者，咱们也不必等技术完全成熟再去学习和应用，重要的是尽早培养新的思路，形成新的需求解决意识。
📣 我是 Jax，在畅游 Web 技术海洋的又一年，我仍然是坚定不移的 JavaScript 迷弟，Web 技术带给我太多乐趣。如果你也和我一样，欢迎关注 、私聊！