發布日期：2025 年 4 月 28 日，上次更新日期：2025 年 5 月 21 日
AI 技術的快速演進為網頁應用程式開啟了新的前景，尤其是在裝置端功能推出後。瞭解日本領先網路公司 CyberAgent 如何運用 Chrome 的內建 AI 和提示 API，提升自家平台 Ameba Blog 的部落格體驗。
我們將分享他們的目標、使用內建 AI 的優點、面臨的挑戰，以及其他使用內建 AI 的開發人員可參考的寶貴洞察資料。
什麼是 Prompt API？
| 說明 | 網頁 | 額外資訊 | Chrome 狀態 | Intent |
|---|---|---|---|---|
| GitHub |  在 EPP 中 |
 Chrome 137 開發人員預覽版 |
查看 | 意圖進行實驗 |
提示 API 可協助開發人員使用大型語言模型，直接將 AI 功能加入應用程式。透過定義自訂提示，應用程式就能執行資料擷取、內容產生和個人化回應等工作。在 Chrome 中，提示 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 輔助功能」。
產生後續段落
這個擴充功能可根據所選文字產生後續段落，協助部落客克服寫作障礙。系統會根據前一個段落的內容，草擬段落的後續內容，讓作者維持創作流程。
改善及編輯文字
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，是因為這些 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 與其他瀏覽器 API 一樣使用 JavaScript，不需要任何機器學習專業知識。
克服挑戰，爭取更優異的成果
CyberAgent 使用 Prompt API 的歷程，提供了寶貴的經驗教訓，讓我們瞭解使用用戶端端 LLM 的細微差異。
- 回覆不一致：與其他 LLM 一樣，Gemini Nano 無法保證相同提示的輸出內容會一模一樣。CyberAgent 遇到非預期格式的回應 (例如 Markdown 和無效的 JSON)。即使有操作說明，結果可能也會有極大差異。在實作任何內建 AI 的應用程式或 Chrome 擴充功能時，建議您加入解決方法，確保輸出內容一律採用正確的格式。
- 符記限制：管理符記用途至關重要。CyberAgent 使用
inputUsage、inputQuota和measureInputUsage()等屬性和方法來管理工作階段、維持情境，並減少憑證用量。這點在精修標題時尤其重要。 - 模型大小限制：由於模型會下載並儲存在使用者的裝置上，因此比伺服器型模型小得多。也就是說，您必須在提示中提供足夠的背景資訊，才能獲得滿意的結果，尤其是摘要。進一步瞭解LLM 尺寸。
CyberAgent 強調，雖然用戶端模型尚未普遍適用於所有瀏覽器和裝置，且較小的模型也有限制，但仍可針對特定工作提供出色的效能。這項工具可讓您快速迭代及試驗，且不必支付伺服器端費用，因此非常實用。
他們建議找到平衡點，因為無論是伺服器端還是用戶端，任何 AI 都很難提供完美的回覆。最後，他們認為未來將會採用混合式方法，結合伺服器端和用戶端 AI 的優點，發揮更大的潛力。
展望未來
CyberAgent 對內建 AI 的探索，展現了 AI 完美整合的無限可能，可提升使用者體驗。他們為 Ameba Blog 打造的擴充功能，展示了如何實際運用這些技術解決實際問題，為更廣泛的網頁開發社群提供寶貴的經驗教訓。
隨著技術成熟，以及瀏覽器和裝置的支援範圍擴大，我們預期內建 AI 和其他形式的用戶端 AI 將有更多創新應用。
資源
- 進一步瞭解 Prompt API
- 開始在 Chrome 上使用內建 API
- CyberAgent 的 Web AI 個案研究，涵蓋這個主題。
- 觀看「AI 的未來已然展開」影片，瞭解 CyberAgent 在用戶端 AI 方面的研究案例
特別銘謝
感謝 Ameba 的部落客 ao、Nodoka、Erin、Chiaki 和 socchi，他們提供意見回饋並協助改善擴充功能。感謝 Thomas Steiner、Alexandra Klepper 和 Sebastian Benz 協助撰寫及審查這篇網誌文章。