---
GA: UA-34467841-15
---

# 純前端也能搞 AI？Gemini Nano 簡介 - 黃銘（Mike Huang）

###### tags: `HelloWorld2025` `HWDC2025` `2025` `A 會議室` `前端嶄新技術`

<blockquote>
Google Chrome 瀏覽器在 138 版後開始內建了代號 Gemini Nano 的 LLM AI 模型，並透過多項 API 開放給開發者使用，這讓前端開發 AI 應用程式多了一個全新的選擇！開發者可以利用這些內建 AI API，直接在前端實現即時翻譯、多語內容摘要、自動撰寫與改寫等智慧功能，而無需依賴雲端服務，本次演講將介紹一個純前端開發人員如何有機會透過 Gemini Nao 開發各種 AI 應用程式，為網站帶來更快速、創新且以使用者為中心的體驗。

聽眾收穫：

學習如何使用 Gemini Nano 開發純前端 AI 應用程式
</blockquote>

{%hackmd @HWDC/announcement-2025 %}

## 會議資訊

**時間：** 14:10 ~ 14:55
**地點：** A 會議室
**日期：** 2025年10月15日
**語言：** 中文
**難度：** 中階

**相關連結：**
- [Hello World Dev Conference 2025 官方網站](https://hwdc.ithome.com.tw/2025) [target=_blank]
- [Hello World 2025 議程表](https://hwdc.ithome.com.tw/2025/agenda) [target=_blank]

## 筆記區

範例程式：https://github.com/wellwind/hwdc25-gemini-nano

#### 為何需要內建 AI 模型

- 雲端 API: 強大但受延遲、隱私、成本限制
- 前端自帶模型: 體積與效能難控
- 需求: 兼顧及時體驗與治理
- 解方: 由瀏覽器管理模型與硬體

#### 缺少內建 AI 模型時的前端方案

- REST/WebSocket 呼叫雲端模型 API
- Web Worker + WebGPU/Web
-
-

#### 瀏覽器內建 AI 的價值

- 自動管理模型版本與更新
- 整合 CPU/GPU/NPU 降低延遲
- 推論留在裝置滿足隱私
- 離線與弱網仍可運作
- 可與雲端模型混合備援

#### 架構速覽

- Web App 或擴充功能呼叫內建 API
- Chrome AI Runtime 調度本地模型與專家模型
- Runtime 依照硬體選擇最佳後端並快取
- 回應於裝置內完成後送回前端

須注意仍存在基本的硬體限制

#### 當前可用的 API

- 穩定版
- Translator API
- Language Detector API
- Summarizer API
- 實驗版
- Writer API
- Rewriter APO
- Prompt API
- Proofreader API
- <a href="https://developer.chrome.com/docs/ai/built-in-apis?hl=zh-tw" target="_blank" rel="noopener noreferrer">內建 AI API</a>

#### 使用案例範疇
- 內容消費：摘要客服、評論聚合
- 內容創作：語氣調整、草稿生成
- 多語支援：即時翻譯與語言切換
- 多模態助手：圖片描述、音訊轉碼

#### 開發前檢查清單
- 特性偵測：`if('Summarizer' in self)`
- 使用者啟用：`navigator.userActivation.isActive`
- 間天 `downloadprogress` 取得模型下載進度
- 設計雲端/本地備援測略
- 跨來源 iframe 需 `allow="language-model"` 等權限

## 討論區

> 歡迎在此進行討論與 Q&A

## 相關資源

- 投影片連結：(待講者提供)
- 相關文件：(待更新)