发布时间：2025 年 4 月 28 日，上次更新时间：2025 年 5 月 21 日
AI 的快速发展为 Web 应用开辟了新的领域，尤其是在设备端功能出现之后。了解日本领先的互联网公司 CyberAgent 如何使用 Chrome 的 内置 AI 和 Prompt API 来提升其平台 Ameba Blog 上的博客体验。
我们将分享他们的目标、使用内置 AI 的优势、他们面临的挑战，以及为其他使用内置 AI 的开发者提供的宝贵见解。
什么是 Prompt API？
| 说明类视频 | Web | 扩展程序 | Chrome 状态 | 目的 |
|---|---|---|---|---|
| GitHub |  源试用 |
 Chrome 138 |
查看 | 实验意向 |
| GitHub | 采样参数的源试用 |
Chrome 148 |
查看 | 实验意向 |
Prompt 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 是否可用且受支持。 如果可用且受支持，他们会使用默认参数创建会话。
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 选择使用采用 Gemini Nano 的内置 AI API，是因为它为应用开发者和用户都提供了令人信服的优势。
CyberAgent 重点关注的主要优势包括：
- 安全和隐私设置
- 费用
- 响应速度和可靠性
- 易于开发
安全和隐私设置
能够直接在用户的设备上运行 AI 模型，而无需将数据传输到外部服务器，这一点至关重要。博客草稿不应公开，因此 CyberAgent 不希望将这些草稿发送到第三方服务器。
内置 AI 会将 Gemini Nano 下载到用户设备，从而无需从服务器发送和接收数据。这在撰写时尤其有用，因为草稿可能包含机密信息或无意表达的内容。内置 AI 会将原始内容和生成的内容保留在本地，而不是将其发送到服务器，这样可以提高安全性并保护内容隐私。
节省费用
使用内置 AI 的一个主要优势是，浏览器包含 Gemini Nano，并且 API 可以免费使用。没有额外的或隐藏的费用。
内置 AI 可显著降低服务器费用，并完全消除与 AI 推理相关的费用。此解决方案可以快速扩展到庞大的用户群，并允许用户提交连续提示来优化输出，而无需支付额外费用。
响应速度和可靠性
内置 AI 提供一致且快速的响应时间，不受网络状况的影响。这使得用户能够反复生成内容，从而让用户能够更轻松地尝试新想法并快速获得令人满意的最终结果。
易于开发
Chrome 的内置 AI 通过提供现成的 API 简化了开发流程。开发者可以轻松地为其应用创建 AI 赋能的功能。
Gemini Nano 和内置 AI API 安装在 Chrome 中，因此无需进行额外的设置或模型管理。这些 API 使用 JavaScript，与其他浏览器 API 一样，不需要机器学习方面的专业知识。
应对挑战，获得更佳结果
CyberAgent 在使用 Prompt API 的过程中，获得了有关使用客户端 LLM 的细微差别的宝贵经验。
- 响应不一致：与其他 LLM 一样，Gemini Nano 也无法保证为同一提示提供相同的输出。CyberAgent 遇到了格式不符合预期的响应（例如 Markdown 和无效 JSON）。即使有说明，结果也可能存在很大差异。在使用内置 AI 实现任何应用或 Chrome 扩展程序时，添加一种变通方法可能有助于确保输出始终采用正确的格式。
- 令牌限制：管理令牌使用情况至关重要。CyberAgent 使用
contextUsage、contextWindow和measureContextUsage()等属性和方法来 管理会话、维护上下文并减少令牌消耗。这在优化标题时尤其重要。 - 模型大小限制：由于模型是在用户的设备上下载和运行的，因此它比基于服务器的模型小得多。这意味着，在提示中提供足够的上下文对于获得令人满意的结果至关重要，尤其是在摘要方面。详细了解 LLM 大小。
CyberAgent 强调，虽然客户端模型尚未在所有浏览器和设备上普遍可用，并且较小的模型存在限制，但它仍然可以为特定任务提供令人印象深刻的性能。能够快速迭代和进行实验，而无需支付服务器端费用，使其成为一种有价值的工具。
他们建议找到平衡点，认识到无论使用服务器端 AI 还是客户端 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's 关于客户端 AI 的案例研究
致谢
感谢 Ameba 的博主 ao、 Nodoka、Erin、 Chiaki 和 socchi 提供反馈并帮助改进扩展程序。感谢 Thomas Steiner、 Alexandra Klepper 和 Sebastian Benz 帮助撰写和 审核这篇博文。