MODULE 6 — ADVANCED
頁面即時呼叫 AI
AI 抽籤解語、客製祝福文、活動 QA。標準:照著抄能動。
先講清楚
API key 等於信用卡。
key 放前端 = 把信用卡貼在店門口。
架構:中間加一個免費代理
訪客瀏覽器 ──> Cloudflare Worker(key 藏在這)──> AI API
GitHub Pages 免費 10 萬次/天
- 網頁呼叫代理、代理拿著藏好的 key 呼叫 AI、答案傳回來
- 真實案例:ai-tarot-companion 整站就是這個架構,全部免費 tier
三步驟
- 1. 建 Worker — Cloudflare 免費註冊,貼上講義的完整範本(含 CORS 處理)
- 2. 藏 key — Groq 免費 key 放進 Worker 的 Secret,名稱 GROQ_API_KEY;永遠不出現在網頁程式碼
- 3. 網頁接上 — 給 AI 的 prompt 只能出現 Worker 網址,不能出現 key
範本內建的兩道閘門
- 長度限制 — 訊息超過 500 字直接擋,防止被當免費 ChatGPT 玩
- 範圍限制 — system prompt 寫死「只回答咖啡與本次活動,其他婉拒」
- 想換更高品質模型:只改 fetch 的網址、模型名與 key,架構不變
進階捷徑:wrangler CLI(配 agent 用)
- Cloudflare 官方 CLI,跟模組 5 的 gh 同邏輯:授權一次,agent 代你部署
- npm install -g wrangler → wrangler login
- key 用 wrangler secret put 自己貼,不進對話(模組 8 紀律)
- 驗收清單寫進指令:部署完叫 agent 用 curl 測活動題 + 無關題
- 本課的示範 Worker 就是這樣部署的
驗收
- 問三題活動相關,回答合理
- 問「幫我寫作業」,確認有婉拒
- F12 → Network:瀏覽器只連 workers.dev,看不到任何 API key
- Console 出現含 CORS 的紅字 → 範本 headers 區塊被改壞,整段還原
對照成品:demos/06-ai-helper(Worker 模式 + BYO key 體驗模式)
動手做
- 任務 — 照三步驟建一個 Cloudflare Worker AI 代理,頁面加一個「問 AI」對話框
- 預期 — 問活動相關問題有合理回答,F12 → Network 看不到任何 API key
- 卡關 — Console 出現含 CORS 的紅字,把 Worker 的 headers 區塊整段還原成範本
← → 翻頁