返回作品列表
網頁應用 · AI 全端 Live

Walk to Awareness

佛光山香雲寺 × 美國獨立 250 週年互動遊戲

參加者掃碼加入,用中文或英文自由作答,由 Gemini 即時判分並雙語回饋,分數同步到現場大螢幕的即時排行榜——一場關於美國獨立歷史的雙語知識問答遊戲。

類型
雙語互動網頁 · 現場活動
前端
Vanilla JS(無框架、無建置)
後端
Cloudflare Pages Functions
AI
Google Gemini · Structured Output
儲存
Cloudflare KV(題庫 + 排行榜)
活動日期
2026-07-04(Fo Guang Shan Hsiang Yun Temple, Austin)
✦ Walk to Awareness ✦
Question 4 / 10
《獨立宣言》是在哪一年通過的?
In what year was the Declaration of Independence adopted?
1776
送出答案 · Submit
▸ Live Leaderboard · 即時排行榜

Top 5

1
Sunny Chen
960
2
阿德
918
3
你(Yu-Ming)
895
4
Yifan
862
5
小豆
840
專案介紹

為 250 週年活動打造的線上互動環節

「Walk to Awareness(覺察之行)」是佛光山德州奧斯汀香雲寺於 2026 年 7 月 4 日舉辦的活動,這個網站是活動的線上互動環節:參加者用手機掃碼即可加入一場關於美國獨立歷史的知識問答遊戲。

有別於一般靜態問答,本網站以 AI 作為裁判——使用者用中文或英文自由作答,由 Gemini 比對答案是否正確(可辨識同義詞、暱稱、只給姓氏等),並以雙語回饋正確答案與一則趣味小知識。每題 0–100 分,完成後即時上榜,現場大螢幕可投影排行榜炒熱氣氛。

整個系統採無伺服器邊緣運算架構部署於 Cloudflare,零維運成本、全球加速,且 API 金鑰完全隱藏於後端,前端無法取得。

專案亮點

七件事,讓它不只是「串個 API」

FEAT 01

AI 評分(不是關鍵字比對)

自由文字作答,Gemini 依「答案 key」判斷正確 / 接近 / 錯誤,容忍同義詞、部分名稱、跨語言、拼字誤差。

FEAT 02

自建後台管理系統(CMS)

密碼登入的管理後台,可即時新增/編輯/刪除題庫、管理排行榜——非技術主辦方也能自助維護內容,不需改程式或重新部署

FEAT 03

中英雙語 + AI 自動翻譯

介面與題目全雙語;管理者只需輸入一種語言,後端偵測缺漏並以低溫度呼叫 Gemini 自動翻譯另一種。

FEAT 04

跨裝置即時排行榜

分數存於 Cloudflare KV(全球同步),以暱稱為識別、保留最高分;獨立可自動刷新的排行榜頁,適合現場大螢幕投影。

FEAT 05

一套核心、雙運行環境

同一份商業邏輯同時跑在 Node.js/Express(本地開發)與 Cloudflare Workers(正式),環境差異由外部注入。

FEAT 06

模型自動偵測 + 自動降級

自動挑選最省成本的可用模型;過載時無縫切換備援,並記住能用的優先序,避免下次再撞牆。

FEAT 07

安全設計

金鑰後端代理、機密以 Cloudflare Secret 加密保存不進版控;管理入口低調隱藏 + 密碼保護——完整活動所需的營運安全都想過。

核心技術亮點

最花心思的幾個工程決定

1

自建 CMS:從零打造的內容管理後台

不是寫死內容的靜態頁面。管理者密碼登入後,透過視覺化介面對題庫做完整的新增 / 編輯 / 刪除(CRUD),變更即時寫入雲端資料庫並反映到線上——讓非技術背景的活動主辦方也能自助維運內容。包含一組受權限保護的 /api/admin/* RESTful API(密碼標頭驗證)、以 KV 儲存的資料持久層(首次存取自動載入種子資料)、AI 輔助編輯,以及排行榜一鍵重置。

2

一套核心、雙運行環境(Runtime-agnostic core)

把商業邏輯抽象成不依賴特定執行環境的模組——gemini.js(以工廠函式建立實例,只用標準 fetch)與 api.js(路由處理,回傳標準 Response)。同一份程式碼同時運行於 Node.js/Express 與 Cloudflare Workers,環境變數、儲存差異由外部注入,避免邏輯重複與分岔。

3

Gemini 模型自動偵測 + 自動降級(Self-healing)

不寫死模型版本。啟動時呼叫 ListModels API,以評分函式依成本階梯挑最省的可用模型(flash-lite < flash < pro、排除影像/語音類);呼叫時若模型回傳 503 / 429 / timeout,會自動切換至備援模型,並以 AbortSignal.timeout 設定單次逾時上限,避免卡死。成功的模型會被提升至優先序——實測在模型過載時,系統從 34 秒卡頓自動優化到約 1.5 秒回應。

4

結構化 AI 輸出(Structured output)

使用 Gemini 的 responseSchema(JSON Schema)強制模型輸出符合結構的 JSON(評分、中英回饋、小知識),免去脆弱的字串解析,確保前端永遠拿到可用資料,不會因為 AI 一句「Sure, here's the answer:」就崩掉。

5

AI 評分與自動翻譯

評分:將使用者的自由文字答案與題目「答案 key」交給 Gemini 判斷,能容忍同義詞、部分名稱、跨語言、拼字誤差,回傳 正確 / 接近 / 錯誤 與 0–100 分。翻譯:管理者新增題目時只需填一種語言,後端偵測缺漏並以低溫度呼叫 Gemini 補齊;失敗時原樣儲存,不阻斷流程。

6

安全設計:金鑰不進前端

API 金鑰與管理密碼以 Cloudflare Secret 加密保存,不進版控、不外洩至前端;前端僅呼叫自家後端代理。管理後台以密碼保護,入口以低調的角落圖示隱藏,避免一般使用者干擾。

7

跨裝置即時排行榜

分數寫入 Cloudflare KV(全球同步),以暱稱為識別、保留最高分;提供獨立、可自動刷新的排行榜頁,適合活動現場大螢幕投影,為活動注入即時競爭氣氛。

API 一覽

前端只跟自家後端說話

MethodPath說明
GET/api/questions取得題目(隱藏答案)
POST/api/evaluate送出答案 → Gemini 評分
GET/api/leaderboard取得排行榜
POST/api/score送出分數,回傳名次
POST/api/admin/login管理者登入
*/api/admin/questions[/:id]題庫 CRUD(受權限保護)
技術棧總覽

邊緣運算 + 純原生 JavaScript

前端原生 HTML5 / CSS3 / JavaScript(ES Modules · 零框架、零建置)· 響應式設計
後端(正式)Cloudflare Pages Functions(邊緣 serverless,Web 標準 fetch API)
後端(本地開發)Node.js 24 + Express(與正式版共用同一份核心邏輯)
資料儲存Cloudflare KV(題庫、排行榜)
AIGoogle Gemini API(REST,結構化 JSON 輸出)
部署 / CICloudflare Pages + Wrangler CLI · Pages Secret 管理機密
我負責 / 技術決策

全端獨立完成

全端開發:從前端 UI、後端 API 與後台管理系統(CMS)、AI 整合到雲端部署,獨立完成。

不只是「串接 API」:除了整合 Gemini,更自建了含權限、資料持久化與 CRUD 的後台管理系統,讓主辦方能自助維護內容——這是本專案跳脫「單純套用 AI」的關鍵。

架構選型:評估後選擇 Cloudflare Pages 而非傳統伺服器 / GitHub Pages——因網站需要隱藏金鑰的後端與資料庫,又要零維運與乾淨網址。

抽象共用核心:讓同一份邏輯同時支援本地與邊緣環境,兼顧開發體驗與部署彈性。

穩定性工程:針對 AI 服務不穩定(過載、逾時)設計自動降級與模型記憶機制,確保活動當天順暢。