发布时间：2025 年 4 月 28 日；最后更新时间：2025 年 5 月 21 日
随着 AI 的快速发展，Web 应用正在开辟新的领域，尤其是在设备端功能出现之后。了解日本领先的互联网公司 CyberAgent 如何使用 Chrome 的内置 AI 和 Prompt API 来提升其平台 Ameba Blog 上的博客撰写体验。
我们分享了他们的目标、使用内置 AI 的好处、他们面临的挑战，以及为其他使用内置 AI 的开发者提供的宝贵见解。
什么是 Prompt API？
| 说明类视频 | Web | 扩展程序 | Chrome 状态 | 意向 |
|---|---|---|---|---|
| GitHub |  在 Origin 试用中 |
 Chrome 138 |
视图 | 实验意向 |
提示 API 可帮助开发者使用大语言模型直接在应用中添加 AI 功能。通过定义自定义提示，应用可以执行数据提取、内容生成和个性化回答等任务。在 Chrome 中，Prompt API 使用 Gemini Nano 执行客户端推理。无论使用何种模型，这种本地处理方式都能提高数据隐私保护水平和响应速度。无论使用何种模型，客户响应速度。
面向 Ameba Blog 作者的 AI 辅助功能
CyberAgent 发现，作者普遍面临一个痛点：制作引人入胜的内容（尤其是标题）往往非常耗时。他们假设，在博客创建界面中集成 AI 赋能的功能可以显著提高内容创作的质量和效率。他们的目标是提供可激发灵感的工具，帮助博主创作富有吸引力的内容。
CyberAgent 使用 Prompt API 开发了一款 Chrome 扩展程序。此扩展程序提供了一套依托 AI 技术的功能，旨在帮助 Ameba Blog 作者生成标题和标题、后续段落，并改进一般文案。
CyberAgent 希望获得灵活的功能，这直接促使他们选择了 Prompt API。凭借一个 API 中的无限可能，CyberAgent 能够准确确定哪些功能最适合 Ameba 作者，哪些功能对他们最有用。
CyberAgent 邀请了部分博主测试该扩展程序，从而获得了有关所提供功能的实用性的宝贵见解。这些反馈帮助 CyberAgent 确定了 AI 辅助功能的更佳应用，并改进了扩展程序的设计。根据积极的成果和反馈，CyberAgent 计划在未来发布此功能，将客户端 AI 的强大功能直接带给其博客社区。
下面我们来详细了解一下这些功能。
撰写更出色的标题和标题
该扩展程序会根据完整的博文内容生成多条标题建议。博客撰写者可以进一步优化这些建议，选项包括：“重新生成”“更礼貌”“更随意”或“生成类似标题”等。
CyberAgent 专门设计了界面，以便用户无需编写任何提示。这样一来，即使是不熟悉提示工程的用户也能受益于 AI 的强大功能。
该扩展程序还可以为博客的各个部分生成引人注目的标题，作者只需选择标题的相关文字即可提出请求。
使用 Prompt API 生成标题的代码包含初始提示和用户提示。初始提示提供背景信息和指令，以获得特定类型的输出；而用户提示则要求模型与用户撰写的内容互动。如需详细了解其代码，请参阅部署 AI 辅助功能。
生成后续段落
该扩展程序可根据所选文本生成后续段落，帮助博主克服写作障碍。根据上一段的上下文，AI 会起草一段续写内容，让作者能够保持创作灵感。
改进和修改文本
Gemini Nano 会分析所选文本，并提供改进建议。用户可以根据语气和语言选择方面的其他注释重新生成改进内容，使文案更“可爱”或更“简单”。
部署 AI 助理
CyberAgent 将其扩展程序代码分为三个步骤：会话创建、触发和模型提示。
首先，他们会与浏览器核实内置 AI 是否可用且受支持。 如果为 true，则使用默认参数创建会话。
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 和客户端 AI 的优势）将释放出更大的潜力。
展望未来
CyberAgent 对内置 AI 的探索展示了无缝 AI 集成在提升用户体验方面的巨大潜力。他们为 Ameba Blog 构建的扩展程序展示了如何将这些技术实际应用于解决现实问题，为更广泛的 Web 开发社区提供了宝贵的经验。
随着技术的成熟和对浏览器及设备的支持范围的扩大，我们预计内置 AI 和其他形式的客户端 AI 将会涌现出更多创新应用。
资源
- 详细了解 Prompt API
- 开始在 Chrome 上使用内置 API
- CyberAgent 关于 Web AI 的案例研究，其中涵盖了相同的主题。
- 观看 AI 的未来就在眼前，了解 CyberAgent 关于客户端 AI 的案例研究
致谢
感谢 Ameba 的博主 ao、Nodoka、Erin、Chiaki 和 socchi，他们提供了反馈意见，帮助我们改进了此扩展程序。感谢 Thomas Steiner、Alexandra Klepper 和 Sebastian Benz 在撰写和审核这篇博文时提供的帮助。