✈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
✈Upgrades · 進階功能Live09 / 擴充
第二階段擴充（已實作）
原本的「未來展望」全做出來了
🌐
多國語言i18n
介面＋行程內容支援 中／EN／日／한 四種語言。
🗺️
行程地圖LEAFLET
每天景點標點＋路線；AI 一併回傳經緯度。
🖼️
AI 封面圖FLUX
Diffusion 文生圖，依目的地即時生成封面。
🔗
分享 ＋ PDFSHARE
唯讀分享連結 /s/token，一鍵匯出 PDF。
👤
會員系統AUTH
註冊登入、私人收藏；密碼 PBKDF2 雜湊。
🧠
生成式 AI對應 CV 課
Transformer(LLM) + Diffusion(文生圖) 兩大主題。
✈Thank You · 謝謝Liveai.detectddd.com
未來展望
謝謝聆聽 ✈
🧬 LoRA 微調封面風格
📍 景點資料庫校正座標
👥 多人即時協作
🧭 導航與票價查詢
歡迎現在就打開 → ai.detectddd.com
