✈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
✈Boarding Now · 實機展示Liveai.detectddd.com
現場 Demo
現在，
實機操作。
Open ▸ai.detectddd.com
也可以拿手機掃 QR Code，
現在就打開來玩玩看。
✈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 與資料庫。正好對應課程的「前端 vs 後端」概念。
✈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）。
✈Engineering · 穩定與資安Live07 / 細節
工程細節
把「不穩定」處理好
- AI 輸出容錯
模型有時回傳物件、有時字串，兩種都判斷處理，前端才能穩定渲染。
- 防 SQL Injection
所有查詢用 prepared statement + .bind()，不字串拼接。
- 輸入防呆
前端必填檢查、天數限制；後端再用 trim / clamp 二次驗證。
// AI 輸出容錯：物件 / 字串都能解析
const raw = aiResp.response ?? aiResp.result;
const itinerary =
raw && typeof raw === 'object'
? raw : extractJson(raw);
// 參數化查詢，防注入
env.DB.prepare(sql).bind(dest, days).run();
✈Results · 成果Live08 / 成果
專題成果
已實際上線運作。
Live ▸https://ai.detectddd.com
✈Thank You · 謝謝Liveai.detectddd.com
未來展望
謝謝聆聽 ✈
🗺️ 整合地圖與路線
👤 會員系統
📄 匯出 PDF / 分享連結
🖼️ AI 生成封面圖
🌐 多國語言
歡迎現在就打開 → ai.detectddd.com
