使用 Chrome 內建 AI 建構新功能

Thomas Steiner

發布日期：2026 年 5 月 26 日

這篇貼文是 Thomas Steiner 在 2026 年 Google I/O 大會上發表的演講內容。

想像一下，您正在建立旅遊網誌，網誌文章編輯器不僅儲存文字，還會在您撰寫內容時提供積極支援。認識 trAIlblazers 的創作者 Maya 和 Ashok。他們使用 Chrome 內建的 AI。直接在使用者裝置上執行模型，可讓開發人員避開高昂的雲端費用和延遲問題，同時將機密資料保留在裝置上。

我們與 Build Awesome (舊稱 Eleventy) 合作，發布了網誌範本，其中包含演講中列出的所有 AI 功能。

為什麼要使用內建 AI？

  • 經濟實惠：不需要雲端推論費用，所有運算作業都會在使用者支援的裝置上進行。
  • 隱私權優先：敏感資料絕不會離開瀏覽器。
  • 離線功能：下載模型後，AI 功能即可在沒有網路連線的狀態下運作。
  • 效能：硬體加速功能可讓裝置端模型達到與雲端速度相近的效能 (有時甚至更快)。
  • 混合式推論：使用 Polyfill 和 Firebase AI Logic 等工具，您可以在不支援的裝置 (例如行動裝置) 上回復到雲端，同時在桌機上保持原生狀態。

現代網頁應用程式的 AI 功能

Summarizer API

trAIlblazers 編輯器會使用 Summarizer API 自動生成廣告標題和有利於 SEO 的中繼說明。

範例：產生廣告標題

const blogPost = document.querySelector('.article-body').innerText;
const summarizer = await Summarizer.create({
  type: 'headline',
  sharedContext: 'Write headlines that make people want to read the blog post',
});

for await (const chunk of summarizer.summarizeStreaming(blogPost)) {
  headline.append(chunk);
}

提示 API (含結構化輸出內容)

需要特定資料嗎？透過 Prompt APIJSON 結構定義，您可以讓 AI 傳回可預測的格式。trAIlblazers 團隊會將這項技術用於下列用途：

  • 標記生成：從預先定義的清單建議類別，例如「冒險」或「海灘」。
  • 留言管理：在留言發布前，將留言歸類為「安全」或「有害」。

媒體無障礙功能

編輯器會自動處理 Markdown 的「困難部分」。當您拖曳圖片時，提示 API (支援多模態輸入) 會分析像素，生成無障礙替代文字和資訊豐富的說明文字。

撰寫和改寫

透過 Writer 和 Rewriter API，使用者只要按一下滑鼠，就能將項目符號擴展為完整段落，以及將段落的語氣改為「更隨性」或「更簡短」。

流暢翻譯

Translator API 可讓創作者以英文撰寫內容，並即時翻譯成西班牙文或日文，供當地讀者閱讀，母語人士則可進一步潤飾。

Translator API 運作範例。
使用 Translator API 以英文草擬內容，並立即翻譯成西班牙文和日文。

真實成功案例

許多合作夥伴已在正式環境中發布這些 API。重要範例如下：

  • Drupal：在 CKEditor 中使用 Summarizer API 生成 SEO 標記。
  • Yahoo! 日本：使用 Prompt API 管理社群留言。
  • Trip.com:透過 AI 摘要，協助購物者瞭解複雜的航班預訂選項。

演講中的資源

準備好打造自己的「trAIlblazers」體驗了嗎？歡迎參考下列資源：