🎯 目標

提供一個 Web 前端介面，讓使用者可視化查詢與結果

顯示 推薦清單 + 科學證據 + 個人化警示

加入 知識圖譜可視化，幫助使用者理解「為什麼」

🏗️ 技術設計
1. 前端框架選擇

最小化方案：Spring Boot + Thymeleaf（快速整合，不需獨立前端專案）

進階方案：Vue.js / React 前端專案，後端提供 REST API

先走最小化方案，確保在 macbook m4 air 上能流暢開發

2. Dashboard 功能模組

首頁

輸入：效果類別 (E001 烏髮 / E002 抗皺)

選填：個人藥物清單

查詢按鈕

推薦結果頁

表格顯示：

食物名稱

分數/排名

證據摘要（PMID, 劑量, 研究設計）

警示訊息（FDA 限制 / DrugBank 交互作用）

顏色標示：

綠色：推薦

黃色：需注意

紅色：避免

知識圖譜可視化

使用 D3.js 或 vis-network.js

節點：Food / Compound / Effect / Drug

點擊節點 → 顯示細節（如 PubMed PMID, 劑量, FDA note）

使用者個人化區塊

顯示登入使用者（ex: grace）

偏好與避免清單

查詢歷史紀錄

3. API 對接

/api/effects → 下拉選單

/api/recommendations/personalized → 主清單

/api/recommendations/explain → 知識圖譜資料

🧪 測試計畫

瀏覽器開啟 http://localhost:8080/dashboard

查詢 E001/E002 → 顯示食物推薦

驗證警示（輸入 Atorvastatin → 出現葡萄柚交互作用）

點擊圖譜節點 → 能顯示成分/證據

✅ 驗收標準

使用者能透過 Web UI 完成查詢，而不是只能靠 curl

結果清晰標示 推薦 + 警示 + 證據

知識圖譜能顯示至少一條「食物 → 成分 → 效果」鏈路