✈Departures · 出發看板
Live
ai.detectddd.com
--:--
AI TRAVEL ITINERARY PLANNER
AI 旅遊行程規劃師
結合生成式 AI 的全端旅遊網站 —— 輸入目的地、天數與喜好，AI 在幾秒內生出一份專屬於你的逐日行程。
Live 線上展示
ai.detectddd.com
✈Problem · 為什麼做Live01 / 問題
製作動機
規劃一趟旅行，
常常要開十幾個分頁查資料。
查景點、比交通、湊行程、排順序…… 既花時間又容易漏。
有沒有可能：一句話，就生出一整趟可執行的行程？
✈Solution · 解法Live02 / 解法
核心流程
三步驟，交給 AI。
01
輸入需求目的地 · 天數 · 旅遊偏好（美食 / 親子 / 文青…）
INPUT
02
AI 即時生成Cloudflare Workers AI 在邊緣節點跑 LLM，產生逐日行程
GENERATE
03
儲存與管理喜歡的行程存進 D1 資料庫，「我的行程」隨時回看
SAVE · D1
✈Feature · AI 生成Live03 / 功能
功能一
AI 即時
生成行程
- 實測約 11 秒生出完整逐日行程，全程繁體中文
- 時間軸呈現：上午 / 中午 / 下午 / 晚上一目了然
- 自動標示 景點 · 美食 · 交通 · 住宿 類型標籤
- 附上貼心提醒，內容具體、可直接執行
✈Feature · 儲存與 RWDLive04 / 功能
功能二
儲存管理
＋ 響應式
- 一鍵把行程存進 Cloudflare D1 資料庫
- 「我的行程」可重看、刪除，卡片式管理
- RWD 響應式：手機、平板、電腦版面自動適配
✈Architecture · 系統架構Live05 / 架構
全端架構
單一 Worker，前後端一條龍。
🖥️
使用者瀏覽器
VUE 3 · HTML5 · CSS
→
⚡
Cloudflare Worker
REST API · 路由
→
前端＝看得到的 UI/UX；後端＝看不到的 API、AI 與資料庫，前後端職責清楚分離。
✈Tech Stack · 技術亮點Live06 / 技術
使用技術
技術亮點
🤖
Workers AICF-AI
在邊緣節點直接跑 700 億參數的 Llama 3.3，不是串別人的 API。
🟢
Vue 3FRONTEND
Composition API，以 ref / reactive / computed 管理狀態與畫面。
🗄️
Cloudflare D1DATABASE
邊緣 SQLite 資料庫，CRUD 全做、參數化查詢防注入。
🚀
Wrangler 部署DEPLOY
一行指令上線，並綁定自訂網域 ai.detectddd.com（自動 SSL）。
✈Security · 資訊安全Live07 / 資安
資訊安全 · 防呆
資安，從頭做滿
- 密碼雜湊 PBKDF2(SHA-256·10萬次)＋隨機 salt，不存明碼
- Session 強化 token 存雜湊、HttpOnly cookie、30 天過期
- 防暴力破解 登入失敗 5 次鎖 15 分鐘、constant-time 比對
- 防 SQL Injection 所有查詢一律參數化 .bind()
- 權限控管 每筆資料檢查擁有權，看不到別人的
- 雙層防呆＋AI 容錯 前後端驗證、AI 回傳格式容錯解析
// 密碼以 PBKDF2 雜湊，不存明碼
hash = await pbkdf2(pw, salt, 100000);
// 登入失敗 5 次 → 鎖 15 分鐘
if (fails >= 5) lock = now + 15m;
// session 只存雜湊 + HttpOnly cookie
db.put(sha256(token));
// → 外洩也無法冒用登入
✈Results · 成果Live08 / 成果
專題成果
已實際上線運作。
Live ▸https://ai.detectddd.com
✈Upgrades · 進階功能Live09 / 擴充
第二階段擴充（已實作）
不只如此，還有這些功能！
🌐
多國語言i18n
介面＋行程內容支援 中／EN／日／한 四種語言。
🗺️
行程地圖LEAFLET
每天景點標點＋路線；AI 一併回傳經緯度。
🖼️
AI 封面圖FLUX
Diffusion 文生圖，依目的地即時生成封面。
🔗
分享 ＋ PDFSHARE
唯讀分享連結 /s/token，一鍵匯出 PDF。
👤
會員系統AUTH
註冊登入、私人收藏；密碼 PBKDF2 雜湊。
🧠
生成式 AI呼應課堂重點
Transformer(LLM) + Diffusion(文生圖) 兩大主題。
✈What's Next · 未來展望Liveai.detectddd.com
未來展望
未來，還能更好 ✦
🧬 LoRA 微調封面風格
📍 景點資料庫校正座標
👥 多人即時協作
🧭 導航與票價查詢
那麼，最後現場 demo 給大家看 👇
✈Boarding Now · 現場實機展示Liveai.detectddd.com
謝謝聆聽 · 現場 Demo
那麼，
起飛吧 ✈
Open ▸ai.detectddd.com
