返回作品列表
網頁應用 · AI 三層判斷 Cloudflare

SDGs News

17 項聯合國永續發展目標判定器

貼上新聞,關鍵字快篩、雲端語意向量、自帶金鑰的 Gemini——三層判斷把它落到 17 項 SDGs 上。免金鑰也能用、自帶金鑰更準、全程不扣錢。

類型
純前端網頁應用
前端
Next.js 15 · React 19(靜態匯出)
後端
Cloudflare Pages Functions
AI
Gemini · Workers AI(bge-m3)· 瀏覽器端 MiniLM
部署
Cloudflare Pages(免費)
sdgs-news.pages.dev
貼上新聞,讓 AI 為你落 SDG
https://news.example.com/article/climate-2026-report
⚡ 自動 關鍵字 語意(免金鑰) Gemini
13
氣候行動Climate Action
88%
7
可負擔的潔淨能源Affordable & Clean Energy
62%
11
永續城市與社區Sustainable Cities
41%
為什麼做這個

SDG 判定,本來就不該綁一張信用卡

要把一篇新聞落到 17 項 SDGs 上,最直覺的做法是「呼叫個大型語言模型讓它判」——但這通常意味著服務要付雲端費用、要綁卡、要收使用者的金鑰或做付費機制。對一個作品集小工具來說,這些都是負擔。

這支工具的核心設計是「不綁卡就零費用」:每個用到雲端額度的地方都有「用完自動降級、不綁卡就零費用」的保護,功能只會降級、不會扣錢。同時,凡是能在瀏覽器做的判斷都留在瀏覽器裡——使用者自帶的 Gemini 金鑰完全不經過任何伺服器

判斷邏輯

三層判斷,一層備援

1

關鍵字快篩

17 項 SDG 各自維護一組關鍵字清單,做為最終保底——就算所有 AI 服務都失效,這一層也一定能給出結果。免任何服務、免任何金鑰。

保底
2

雲端語意 / 瀏覽器本機語意

先用 Cloudflare Workers AI 的 bge-m3 算語意向量(免下載);額度用完自動改用瀏覽器內的 MiniLM(@huggingface/transformers,WASM/CPU)。只給相關度分數、不給理由。

免金鑰
3

Gemini(自帶金鑰)

最準的一層,會套用防偏差規則並給出判斷理由。金鑰只存在使用者自己的瀏覽器(localStorage,30 天未用自動清除),完全不經過伺服器——伺服器沒東西可外洩。

最準

預設模式「⚡自動」:有金鑰就走 Gemini,沒有就走語意模式,兩者都不可用時退回關鍵字。三層之間隨時自動切換,使用者不會遇到「請先設定 XXX」的死胡同

核心設計

前端為主、後端極簡,兩支 function 就夠

1

能在瀏覽器做的都在瀏覽器做

關鍵字比對、Gemini 呼叫、本機語意模型全跑在瀏覽器——使用者的 Gemini 金鑰完全不經過伺服器。這是把「不外洩」直接寫進架構,而不是靠信任伺服器不儲存。

2

後端只做兩件事:代抓與算向量

/api/fetch 代抓網頁(解決跨域)+ Jina 閱讀模式備援;/api/embed 算 Workers AI 向量 + 每日上限防扣費。後端不碰任何金鑰、不留任何日誌,只是一層極薄的代理。

3

每日上限鎖在 KV 裡

Workers AI 的免費額度是每天 10,000 Neurons,用超要收費。程式端另有一個 DAILY_CAP 存在 Cloudflare KV,達標即刻改用瀏覽器本機模型——用完不會扣錢,只會功能降級

4

17 項 SDG 的雲端向量預先算好、快取住

SDG 的語意描述是靜態內容,沒必要每次都花額度算。預先跑一次、把 17 個向量存進 lib/sdgEmbeddingsCloud.json,執行時只算「這篇新聞」一個向量與 17 個做 cosine similarity,額度用量降到最低。

5

刻意用 JS 而非 TS

整個專案(前端、後端 function、工具邏輯)都是 ES Modules 的 JavaScript——刻意不引入 TypeScript,降低作品集專案未來被別人接手或自己回來看的維護門檻。

成本設計

不綁卡就零費用

Cloudflare Workers AI

10,000 Neurons / 天

每天重置;另外程式端有 DAILY_CAP 二次上限。用完 → 自動切瀏覽器本機模型。

Jina Reader

一次性免費 token

試用金鑰(免登入),額度不自動回充。用完 → 閱讀模式退回「請貼文字」。

Google Gemini

使用者金鑰

由使用者的免費金鑰承擔額度;本站不做任何金鑰儲存或轉發,沒有共享成本可言。

只要 Cloudflare 與 Jina 都不綁信用卡,額度用完只會功能降級,絕對不會產生任何費用——這是作品集展示型專案該有的成本模型。

技術棧總覽

JavaScript 一條龍

前端Next.js 15(App Router · output: 'export' 靜態匯出)· React 19 · 純手寫 CSS(無 UI 框架)
後端Cloudflare Pages Functions(Workers 執行環境)· functions/api/*
AIGoogle Gemini(gemini-*-flash)· Workers AI(@cf/baai/bge-m3)· @huggingface/transformers(MiniLM,瀏覽器)· Jina Reader(備援)
儲存Cloudflare KV(每日上限計數)· localStorage(使用者 Gemini 金鑰,30 天自動清除)
部署 / CICloudflare Pages · Wrangler CLI · Pages Secret(JINA_API_KEY