👉 ai2033.taipei
開著臺北小黃，在 3D 臺北親眼看松山機場變身 300 公頃「臺北AI園區」
2026/10/08，臺北市長蔣萬安在「打造AI黃金世紀、全面釋放都市潛力」記者會宣布：規劃遷移松山機場，整合機場及周邊 300 公頃打造「臺北AI園區」，包括 100 公頃 AI 產業聚落、90 公頃國際永續生活聚落與 110 公頃中央公園，並解鎖 570 公頃受航高限制的都更地區。
這個網站把那場記者會整理成四種好入口：大字版懶人包、GTA 風格的 3D 臺北、可搜尋的新聞稿與答問整理，以及可線上翻閱或下載的簡報。
製作紀錄：106 分鐘，從幾句 prompt 到一座可以開車的 3D 臺北 — 原始需求、開發時間軸、人與 AI 的分工，以及從初版到公開維護的過程。
點圖看完整影片（MP4，約 50 秒）：開小黃上敦化北路 → 時光機啟動 2026 → 2033 → 中央公園、AI 產業聚落、生活聚落 → 入夜的園區
| 內容 | 連結 | |
|---|---|---|
| 🌐 | 大字版互動網站：重點整理、前後對比滑桿、300 公頃怎麼用、XY 軸捷運、大台北新矽谷、問答 | https://ai2033.taipei/ |
| 🚕 | 3D 臺北 2033：開車到松機，按下時光機看 2026 ⇄ 2033 | https://ai2033.taipei/3d/ |
| 📜 | 記者會文字整理：大字、可搜尋、可下載 Markdown | https://ai2033.taipei/transcript/ |
| 📊 | 簡報：16 頁線上翻閱＋講者備註，PPTX／PDF 下載 | https://ai2033.taipei/slides/ |
2026 松山機場 ⇄ 2033 臺北AI園區（3D 示意）
 任務 1：沿敦化北路開往松山機場航廈 |
 時光機啟動：2026 → 2033 |
 大字版網站（字級可調） |
 前後對比滑桿 |
 文字整理：可搜尋、可下載 |
 簡報：線上翻閱＋講者備註 |
手機版
- 任務 1：開往松山機場 從敦化北路出發（離航廈約 500 公尺），開進航廈前的金色光圈。
- 時光機啟動 鏡頭繞著松機轉一圈，跑道消失，中央公園、AI 產業聚落與生活聚落一棟棟長出來。
- 任務 2：探索 2033 依序通過金色光圈：中央公園、AI 產業聚落、生活聚落、XY 軸捷運、跨河廊道、570 公頃都更。
- 自由探索 隨時切換 2026 ⇄ 2033、空拍、夜晚、導覽動畫。
開著小黃在 2033 年的園區裡依序送 5 單，越快越好。總榜比 5 單全送完的時間，另外每一單都有自己的任務榜：這單進前 10 名就會暫停計時，讓你馬上登錄，或繼續送、最後一起登錄。登錄時像早期大型電玩一樣輸入 3 個英文字母，再把挑戰連結分享出去。
- 直接開賽：https://ai2033.taipei/3d/?race；分享出去的連結會帶上成績（
?race&vs=ABC.83450），朋友開場就看到要挑戰的時間 - 路線：🥛 鮮奶 → 國際永續生活聚落、🍱 雞腿便當 → AI 產業聚落、🧋 珍珠奶茶 → 中央公園、🍍 鳳梨酥 → XY 軸捷運松機站、🍗 鹹酥雞 → 基隆河岸，全程約 3.3 公里
- 比賽中不能空拍、切年份、看導覽或瞬移回道路
- 排行榜：全台共用（Supabase），伺服器會逐點檢查路線；連不上時先存在玩家自己的裝置（見
tools/leaderboard/） - 不用玩也能看榜：https://ai2033.taipei/rank/
- 分享卡：每筆成績的分享連結都有自己的預覽圖（名字、時間、名次），由
og/的小型 Vercel 服務產生
| 操作 | 電腦 | 手機 |
|---|---|---|
| 開車 | W A S D／方向鍵，空白 煞車；按住 Shift 三段加速（加速 → 衝刺 → 極速） |
左下搖桿；按住 ⚡ 三段加速 |
| 空拍 | F 切換；W A S D 移動，E／Q 升降，拖曳轉視角 |
🚁 按鈕 |
| 其他 | Y 年份、N 日夜、T 導覽、R 回到道路、H 說明、G 外送賽 |
下方工具列 |
- 真實街廓：OpenStreetMap 臺灣圖資（Geofabrik），以
osmium擷取臺北範圍，tools/build/build_city.py轉成約 6 萬棟建築、道路、河川、捷運與地標的精簡 JSON（3d/data/city.json）。 - 園區配置：依新聞稿文字，在機場與鄰近營區範圍上切出北側 110 公頃中央公園、南側 100 公頃 AI 產業聚落與 90 公頃生活聚落（示意，非正式設計圖）。
- 3D：three.js r160（
vendor/three/，無打包工具）；instanced mesh、shader 窗光與日夜、成長動畫、UnrealBloom、陰影、小地圖；手機自動降畫質。 - 網站：純 HTML／CSS／JS，字級三段可調、深色高對比、行動優先。
- 逐字稿：
tools/build/build_transcript.py由市府新聞稿與媒體答問整理；有音檔時可用 Whisper 重新轉寫（見下方）。 - 簡報：
tools/build/deck.js（pptxgenjs）產生 PPTX，LibreOffice 轉 PDF；tools/build/slides_page.py產生線上翻閱頁。 - 素材：
render.mjs（3D 靜態圖）、screenshots.mjs（README 截圖）、cards.mjs（社群預覽圖與片頭片尾）、record_demo.mjs＋make_demo.sh（以虛擬時鐘逐格錄製示範影片）。
index.html 大字版互動網站
3d/ 3D 臺北 2033（index.html、style.css、js/、data/city.json）
transcript/ 新聞稿、答問整理與 transcript.md
slides/ 簡報 PPTX／PDF 與線上翻閱頁（img/、thumb/）
assets/ 網站樣式、照片（含授權資訊）、3D 渲染圖、社群分享圖
docs/ README 用的示範影片、截圖、社群預覽圖
tools/build/ 資料與素材產生腳本
tools/fetch/ 在 GitHub Actions 抓取照片、OSM、新聞原文與音訊
rank/ 外送王排行榜頁
og/ 分享卡服務（Vercel）：每筆成績的分享頁與預覽圖
tools/leaderboard/ 外送賽全台排行榜的 Supabase 設定（SQL 與說明）
tools/verify/ 上線後的連結與瀏覽器檢查
.github/workflows/ 上述抓取與檢查的工作流程
CNAME, sitemap.xml, robots.txt
python3 -m http.server 8123 --bind 127.0.0.1
# 開啟 http://127.0.0.1:8123/ 與 http://127.0.0.1:8123/3d/本站部署於 GitHub Pages（本分支根目錄），自訂網域 ai2033.taipei 由 CNAME 設定，推送後約一分鐘生效。
文字整理頁目前是市府新聞稿全文，加上媒體報導整理的答問重點。可用以下方式處理有權使用的影音；Whisper 結果仍需人工校對後才能稱為完整逐字稿：
在本機處理：把影音放進已忽略的 research/youtube/input/，執行 bash tools/fetch/youtube.sh，再執行 python tools/fetch/transcribe.py /tmp/yt/audio16k.wav 及 python tools/build/build_transcript.py。只提交校對過的文字結果。
來源必須是你有權取得與使用的影音；不要將登入 cookies、API 密鑰或原始人聲檔提交到公開倉庫。
- 內容依據：臺北市政府新聞稿（2026/10/08）、記者會影片，以及中央社、自由時報、TVBS、聯合報等報導
- 地圖：© OpenStreetMap 貢獻者（ODbL），Geofabrik 擷取
- 照片：Wikimedia Commons（作者與授權見
assets/photos/credits.json與網站底部） - 3D 園區配置、產值與戶數為依新聞稿文字繪製或引用之示意與市府估算，非正式設計圖
本站為非官方粉絲整理，與臺北市政府無隸屬關係；正式內容請以臺北市政府公告為準。
本專案的原創程式碼與原創技術文件採 MIT License，著作權聲明為 © 2026 Ju-Chun Ko and contributors。使用、修改與散布時，請保留著作權聲明與授權全文。
MIT 授權不涵蓋第三方程式、引用內容、照片、圖資、字型、影音及其他媒體素材；這些內容各依原授權或權利人許可使用，也不授予商標、人物肖像或聲音的使用權。適用範圍與逐項來源見 CREDITS.md。
| 元件 | 使用範圍 | 授權 |
|---|---|---|
| three.js 0.160.0（r160）及 addons | 3D 網頁 | MIT，保留 vendor/three/LICENSE |
| satori 0.33.5、@resvg/resvg-js 2.6.2 | 分享卡服務 | MPL-2.0 |
| React、React DOM | 影片製作 | MIT |
| Remotion 4.0.484 | 影片製作工具，不是網站執行時依賴 | Remotion 特定授權，需依使用者／組織資格確認 |
| Noto Sans TC、JetBrains Mono | 網頁／分享卡／影片字型 | SIL OFL 1.1；分享卡字型已子集化 |
| OpenStreetMap／Geofabrik | 3D 圖資、衍生資料庫、渲染圖 | ODbL 1.0，© OpenStreetMap contributors |
| Wikimedia Commons 照片 | 人物與城市照片 | 逐張不同，見 assets/photos/credits.json 與網站署名 |
| Mixkit 音樂與音效 | 介紹影片製作素材 | Mixkit 特定素材授權；新版不附獨立原檔，不是開源素材 |
| PGlite | 隔離資料庫測試 | Apache-2.0 |
- 完整 npm 直接與間接依賴清單：DEPENDENCIES.md。依
package-lock.json鎖定版本，以npm ci安裝。 - 其他資料／影片／簡報建置工具及來源：CREDITS.md。原製作環境的
APPLY_THEME輔助程式未附，不能宣稱所有建置流程已可完全重現。 - 媒體文章保留來源索引，不再附全文；獨立音效原檔需由製作者依授權自行取得。
- 3D 園區是概念示意，2033 是此構想的目標年，產值／戶數為引用的市府估算，均不是已核定設計或保證實現的承諾。
- 此專案由擁有者與 AI 協作；外部程式與素材需保留來源，AI 生成不能作為無侵權保證。繁體中文與臺灣常用詞為介面標準。
Supabase publishable key 是給瀏覽器使用的公開金鑰，不能賦予直接讀寫資料表的能力。資料表啟用 RLS 並撤銷 anon／authenticated 的直接權限，公開成績經限定欄位的 RPC 提供。成績寫入另外驗證資料型別、時間、路線、速限及重複登錄。
npm ci --ignore-scripts
npm ci --prefix og --ignore-scripts
npm test
npm audit --prefix og
npm audit --prefix video --package-lock-only
npm run credits測試使用隔離的 PGlite，不會把測試成績寫入公榜。排行榜功能與切換方式維持原有設計。
請閱讀 SECURITY.md 的安全界線與回報方式，以及隱私與資料說明。純前端遊戲不能保證完全防作弊；不要將其排行當成有獎競賽或身分驗證依據。