发布时间：2025 年 4 月 28 日；上次更新时间：2025 年 5 月 21 日
AI 技术的快速发展正在为 Web 应用开辟新的前沿，尤其是在设备端功能问世后。了解日本领先互联网公司 CyberAgent 如何使用 Chrome 的内置 AI 和 Prompt API 来提升其平台 Ameba Blog 上的博客体验。
我们将分享他们的目标、使用内置 AI 的好处、他们遇到的挑战，以及面向其他使用内置 AI 的开发者的宝贵洞见。
什么是 Prompt API？
| 说明类视频 | Web | 扩展程序 | Chrome 状态 | 意向 |
|---|---|---|---|---|
| GitHub |  在 EPP 中 |
 Chrome 138 |
视图 | 意图进行实验 |
Prompt API 可帮助开发者使用大型语言模型直接将 AI 功能添加到其应用中。通过定义自定义提示，应用可以执行数据提取、内容生成和个性化响应等任务。在 Chrome 中，Prompt API 使用 Gemini Nano 执行客户端推理。无论使用哪种模型，这种本地处理都会增强数据隐私性和响应速度。无论使用哪种模型，客户端响应速度都是一个重要因素。
为 Ameba 博客作者提供 AI 辅助功能
CyberAgent 发现了作者的一个常见痛点：创作富有吸引力的内容（尤其是标题）通常非常耗时。他们假设，在博客创建界面中集成 AI 赋能的功能可以显著提高内容创作的质量和效率。他们的目标是提供一些工具，为博主提供灵感并帮助他们创作富有吸引力的内容。
CyberAgent 使用 Prompt API 开发了一款 Chrome 扩展程序。此扩展程序提供了一套依托 AI 技术的功能，旨在协助 Ameba 博客作者生成标题和标题、后续段落以及改进一般文案。
CyberAgent 希望功能灵活，因此直接使用了 Prompt API。借助一个 API 的无限可能，CyberAgent 能够准确确定哪些功能最适合 Ameba 创作者，以及哪些功能最有用。
CyberAgent 通过部分博主测试了该扩展程序，从而获得了有关所提供功能实用性的有价值的洞见。这些反馈帮助 CyberAgent 确定了更适合 AI 辅助功能的应用，并优化了扩展程序的设计。基于取得的积极成效和收到的反馈，CyberAgent 希望日后发布此功能，将客户端 AI 的强大功能直接引入其博客社区。
下面我们来详细了解一下这些功能。
撰写更出色的标题和标题
该扩展程序会根据完整的博文内容生成多个标题建议。博主可以使用“重新生成”“更礼貌”“更随意”或“生成类似标题”等选项，进一步优化这些建议。
CyberAgent 专门设计了界面，让用户无需编写任何提示。这样一来，任何不熟悉提示工程的用户也可以受益于 AI 的强大功能。
该扩展程序还可以为博客的各个部分生成引人注目的标题，作者只需为标题选择相关文本即可请求生成标题。
使用 Prompt API 生成标题的代码包含初始提示和用户提示。初始提示会提供上下文和指示，以获取特定类型的输出，而用户提示则要求模型与用户所写的内容互动。如需详细了解其代码，请参阅部署 AI 辅助功能。
生成后续段落
该扩展程序可根据所选文本生成后续段落，帮助博主克服写作障碍。借助上一段落的内容，AI 会起草该段落的后续内容，让作者能够保持创作节奏。
优化和修改文本
Gemini Nano 会分析所选文字，并提供改进建议。用户可以根据有关措辞和语言选择的其他备注，重新生成改进后的文案，使其更“简洁”或“简单”。
部署 AI 助理
CyberAgent 将其扩展程序代码分为三个步骤：会话创建、触发器和模型提示。
首先，他们会检查浏览器是否支持内置 AI。如果是，则会使用默认参数创建会话。
if (!LanguageModel) {
// Detect the feature and display "Not Supported" message as needed
return;
}
// Define default values for topK and temperature within the application
const DEFAULT_TOP_K = 3;
const DEFAULT_TEMPERATURE = 1;
let session = null;
async function createAISession({ initialPrompts, topK, temperature } = {}) {
const { available, defaultTopK, maxTopK, defaultTemperature } =
await LanguageModel.availability();
// "readily", "after-download", or "no"
if (available === "no") {
return Promise.reject(new Error('AI not available'));
}
const params = {
monitor(monitor) {
monitor.addEventListener('downloadprogress', event => {
console.log(`Downloaded: ${event.loaded} of ${event.total} bytes.`);
});
},
initialPrompts: initialPrompts || '',
topK: topK || defaultTopK,
temperature: temperature || defaultTemperature,
};
session = await LanguageModel.create(params);
return session;
}
每个功能都有一个由用户触发的辅助函数。触发后，当用户点击相关按钮时，系统会相应地更新会话。
async function updateSession({ initialPrompts, topK, temperature } = {
topK: DEFAULT_TOP_K,
temperature: DEFAULT_TEMPERATURE,
}) {
if (session) {
session.destroy();
session = null;
}
session = await createAISession({
initialPrompts,
topK,
temperature,
});
}
更新会话后，它们会根据函数向模型提示。例如，以下代码用于生成标题，并以更正式的语气重新生成标题。
async function generateTitle() {
// Initialize the model session
await updateSession({
initialPrompts: [
{ role: 'system',
content: `Create 3 titles suitable for the blog post's content,
within 128 characters, and respond in JSON array format.`,
}
]
});
const prompt = `Create a title for the following
blog post.${textareaEl.textContent}`;
const result = await session.prompt(prompt);
try {
const fixedJson = fixJSON(result);
// display result
displayResult(fixedJSON);
} catch (error) {
// display error
displayError();
}
}
async function generateMoreFormalTitle() {
// Do not execute updateSession to reuse the session during regeneration
const prompt = 'Create a more formal title.';
const result = await session.prompt(prompt);
...
}
内置 AI 的优势
内置 AI 是一种客户端 AI，这意味着推理会在用户设备上进行。CyberAgent 之所以选择将内置 AI API 与 Gemini Nano 搭配使用，是因为它为应用开发者和用户提供了强大的优势。
CyberAgent 重点关注的主要优势包括：
- 安全和隐私设置
- 费用
- 响应速度和可靠性
- 开发难度
安全和隐私设置
能够直接在用户设备上运行 AI 模型，而不必将数据传输到外部服务器，这一点至关重要。博客草稿不应向公众公开，因此 CyberAgent 不希望将这些草稿发送到第三方服务器。
内置 AI 会将 Gemini Nano 下载到用户设备，从而无需向服务器发送和接收数据。这在撰写时特别有用，因为草稿可能包含机密信息或意外表达。内置 AI 会将原始内容和生成的内容保留在本地，而不是将其发送到服务器，从而增强安全性并保护内容隐私。
节省费用
使用内置 AI 的一个主要优势是，浏览器包含 Gemini Nano，并且 API 可免费使用。没有额外费用或隐藏费用。
内置 AI 可显著降低服务器费用，并可完全消除与 AI 推理相关的费用。此解决方案可快速扩展到庞大的用户群，并允许用户连续提交问题以优化输出，而无需支付额外费用。
响应速度和可靠性
内置 AI 可提供一致且快速的响应时间，不受网络状况的影响。这样一来，用户就可以反复生成内容，从而更轻松地尝试新想法，并快速创作出令人满意的最终结果。
开发难度
Chrome 的内置 AI 通过提供随时可用的 API 来简化开发流程。开发者可以轻松为其应用创建 AI 赋能的功能，从而获益。
Gemini Nano 和内置 AI API 已安装在 Chrome 中，因此无需进行额外的设置或模型管理。这些 API 与其他浏览器 API 一样使用 JavaScript，并且无需机器学习专业知识。
应对挑战，取得更理想的成效
CyberAgent 在使用 Prompt API 的过程中获得了宝贵经验，这些经验有助于我们深入了解使用客户端 LLM 的细微之处。
- 回答不一致：与其他 LLM 一样，Gemini Nano 无法保证针对同一问题给出完全相同的输出。CyberAgent 遇到了格式不符合预期的响应（例如 Markdown 和无效的 JSON）。即使有说明，结果也可能会有很大差异。在实现任何内置 AI 的应用或 Chrome 扩展程序时，添加权宜解决方法可能有助于确保输出始终采用正确的格式。
- 令牌数量上限：管理令牌用量至关重要。CyberAgent 使用
inputUsage、inputQuota和measureInputUsage()等属性和方法来管理会话、维护上下文并减少令牌消耗。在优化标题时，这一点尤为重要。 - 模型大小限制：由于模型会下载到用户设备上，因此比基于服务器的模型小得多。这意味着，在问题中提供足够的背景信息至关重要，这样才能获得令人满意的结果，尤其是在总结方面。详细了解如何了解 LLM 尺寸。
CyberAgent 强调，虽然客户端模型尚未在所有浏览器和设备上通用，而且体积较小的模型存在局限性，但仍可针对特定任务提供出色的性能。由于无需支付服务器端费用，即可快速迭代和进行实验，因此它是一款非常有用的工具。
他们建议找到一个平衡点，因为无论是服务器端还是客户端，任何 AI 都很难提供完美的回答。最后，他们预见，未来将出现一种混合方法，结合服务器端 AI 和客户端 AI 的优势，从而释放出更大的潜力。
展望未来
CyberAgent 对内置 AI 的探索展示了顺畅 AI 集成可为提升用户体验带来令人兴奋的可能性。他们为 Ameba Blog 打造的扩展程序演示了如何将这些技术实际应用于解决实际问题，为更广泛的 Web 开发社区提供了宝贵的经验教训。
随着该技术的成熟以及对浏览器和设备的支持不断扩大，我们预计将看到更多创新的内置 AI 和其他形式的客户端 AI 应用。
资源
- 详细了解 Prompt API
- 开始在 Chrome 上使用内置 API
- CyberAgent 的 Web AI 案例研究，该研究也涵盖了这一主题。
- 观看 The future of AI is now，了解 CyberAgent 在客户端 AI 方面的案例研究
致谢
感谢 Ameba 博主 ao、Nodoka、Erin、Chiaki 和 socchi，他们提供了反馈并帮助改进了此扩展程序。感谢 Thomas Steiner、Alexandra Klepper 和 Sebastian Benz 在撰写和审核这篇博文时提供的帮助。