給一般民眾
從常見問題與疾病主題開始，逐步理解症狀、檢查、治療與日常照護。
- 胸痛、心悸、喘、血壓與膽固醇、心臟檢查、瓣膜疾病等 15 個主題入口
- 心臟、上肢、下肢 3D 互動解剖，看懂血管、血流與常見心導管治療
- 知道何時觀察、何時安排門診、何時儘速就醫
BetterHeart Platform
從臨床需求出發，打造雙向分流的心臟健康平台
本網站由黃天祈醫師自行架設與維護，並公開技術細節，供有興趣自建醫療衛教網站的醫師參考。
BetterHeart 不只是心臟衛教文章，也不只是計算器集合。它把醫師在診間反覆解釋的問題、需要快速核對的規則，以及民眾真正關心的下一步，整理成兩條清楚的使用路徑；而心臟、上肢與下肢的 3D 互動解剖，則讓兩邊都能直接在瀏覽器裡「看見」解剖與手術過程。
Synology NASDockerDSM 反向代理CaddyNode.jsExpress原生 JavaScriptVite 預建 SPAThree.js / WebGLSharp / WebPUmamiJSON
Why BetterHeart
為真實的臨床與衛教需求而生
面對同一個心血管問題，一般民眾需要的是容易理解的說明、何時該就醫與如何照護；醫療專業人員需要的則是能迅速核對的公式、給付條件、藥物劑量與注意事項。
如果把這些內容全部放進同一層選單，民眾容易被艱深資訊淹沒，專業使用者也得在大量衛教文字中尋找工具。因此 BetterHeart 從首頁就依「此刻要完成什麼」分流，而不是只按網站欄目分類。
每一項功能都從實際問題往回設計：先確認誰要使用、需要做什麼決定，再選擇文章、計算器、條件快查、時間軸或 3D 互動模型作為最合適的呈現方式。技術是支撐這段流程的工具，不是網站的主角。
同一個網站，兩條清楚的路徑；共同目標是讓重要資訊更快被找到、理解與正確使用。
Two-way Navigation
首頁的雙向分流
入口不是依網站欄目分類，而是依使用者當下要完成的事情分類。
給醫療專業人員
從臨床情境直接進入計算與快查，降低在多份條文或公式之間切換的負擔。
- 心血管風險、Echo、Cath、術前評估與腎功能等近 20 項計算工具，另有門診日期試算表
- 降血脂藥、抗凝抗栓、術前停藥與肺癌藥物基因檢測的條件快查
- 心衰竭治療流程圖，以及 TSOC 經胸超音波、ASE 右心與肺高壓 2025 指引整理頁
Functions
不只呈現內容，也協助完成任務
結構化衛教文章
以標題、內文目錄與區塊化內容整理醫療知識；後台可直接編輯，並輸出符合搜尋引擎與社群分享的結構化資料。
即時計算與完成度提示
常用公式寫成瀏覽器端固定運算邏輯，邊填邊算；欄位未填完會標示尚缺項目，並可輸出可貼進病歷的文字。
健保條件快查
依臨床情境篩選降血脂與抗凝抗栓用藥、術前停藥建議與肺癌藥物基因檢測，帶出適用條件、劑量、療程時間軸與重要限制。
指引互動整理頁
把心衰竭治療流程圖、TSOC 經胸超音波共識與 ASE 右心及肺高壓指引整理成可瀏覽、可查圖表的頁面，保留章節與出處。
3D 互動解剖
心臟、上肢（升主動脈到指尖）與下肢（腹主動脈到腳底）可旋轉、縮放、點名稱高亮，並有血流動態、超音波切面與 PCI、TAVI 等介入手術教學動畫。
雙向分流首頁
一般民眾從症狀與疾病主題進入；醫療專業人員由計算器與快查工具進入，各自快速抵達需要的內容。
跨工具數值帶入
年齡、性別、血壓、腎功能等基本數值在不同計算器之間自動沿用，減少重複輸入與抄寫錯誤。
行動優先介面
工具、卡片與療程時間軸皆針對手機與桌面調整，讓診間、病房或居家閱讀都能清楚操作。
圖片自動最佳化
上傳圖片保留原始檔，並以 Sharp 產生 WebP 與縮圖版本，兼顧畫質、社群分享與載入速度。
3D Anatomy
3D 互動解剖的技術
心臟、上肢與下肢三個 3D 頁面直接在瀏覽器以 WebGL 呈現，不需安裝外掛；以下是它們共通的技術做法。
Three.js 原生 ES 模組
三個 3D 頁面都不使用打包器或前端框架；three.js 與 OrbitControls 只放一份（約 0.74 MB，傳輸時壓縮），由三頁共用並被瀏覽器快取。
開放圖譜 → 預處理網格
來源為 Z-Anatomy／BodyParts3D 圖譜。建置時用自寫的 GLB 解析器依名稱挑出血管、神經、骨骼與肌肉，焊接頂點後打包成座標加索引的 .bin 與 manifest JSON；約 31 MB 的原始 glb 與 obj 只在建置時使用，不上線。
血流動畫
依血管幾何算出中心線（由親血管起算的測地距離，再分成分支樹），以 instanced 亮點沿線流動：動脈為脈動、靜脈為緩慢反向。心臟頁的冠狀動脈與瓣膜血流使用同一概念。
點名稱高亮與標籤
選取時在同一份幾何上疊一層綠色材質，粗細與其他構造不變、也不使其他構造變暗；標籤以單側肢體為錨點，手機版改為單欄排列並保留英文副標。
肢體導覽
下肢用垂直高度滑桿，上肢用可在 X 與 Y 方向拖曳的半身小地圖，手機上以視角偏移讓選定肢體完整露出。
介入手術教學動畫
PCI、TAVI、ASD 封堵、二尖瓣氣球擴張與旋磨以程式化方式生成導管、氣球、支架與瓣膜，全部沿導線移動；以透視（X 光）方式繪製，並共用步驟面板與自動跟隨相機。
檔案大小
資料夾約為：心臟 2.0 MB（含共用 three.js）、上肢 3.2 MB、下肢 3.5 MB；首次開頁下載約 1.4、3.3、3.6 MB。網格 .bin 目前未壓縮傳輸，是日後最容易優化的部分。
授權與驗證
模型為 CC BY-SA；各頁附 MODEL-NOTICES.txt 說明來源與修改，改編後的網格以相同授權提供。以無頭 Chromium（SwiftShader）在桌面與手機尺寸擷圖，並於實際網址上驗證。
Architecture
一張圖看懂 BetterHeart 如何運作
讀者看到的是一個網站，背後其實是一趟從「需求」出發、經過安全入口與應用服務，再回到有用資訊的完整旅程。整套平台部署在自行管理的 Synology NAS 上。
- 1
需求從人開始
民眾想理解疾病與下一步；醫療專業人員想快速核對公式、劑量與給付條件。
- 2
DSM 守住 HTTPS 入口
Synology DSM 反向代理處理公開網域、TLS 憑證與加密連線，先建立安全入口。
- 3
Caddy 依路徑分流
Caddy 判斷網址路徑，將 /betterheart、統計與其他服務送往正確的內部容器。
- 4
Docker 與 Node.js 完成任務
Express 組合頁面、處理後台與圖片；預建 SPA 與靜態工具頁負責互動較複雜的快查、指引與 3D 解剖。
- 5
資料留在自己的 NAS
文章、設定與圖片由自有儲存空間提供，再把適合手機或桌面的結果送回讀者。
瀏覽器HTTPS 請求
DSM憑證與入口
Caddy路徑分流
Docker / Node.js頁面與工具
NAS / JSON內容與圖片
混合式渲染：多數公開頁面由 Node.js 在伺服器端即時組合，有利於直接閱讀與搜尋引擎理解；互動較複雜的快查工具採預先建置的單頁應用，3D 解剖頁則以靜態 ES 模組在瀏覽器端用 WebGL 繪製。網站流量以自架 Umami 做無 cookie 統計，分析資料同樣留在自己的環境。
Development Workflow
直接在 NAS 上讀寫程式碼、線上重新建置
維護這個網站不是「寫好程式碼、包裝、上傳更新」的傳統流程，而是透過同一個瀏覽器終端機介面，讓 Codex CLI 與 Claude Code CLI 兩種編碼代理直接在 NAS 的專案目錄裡工作。
傳統方式
每次修改都要在多台裝置與服務之間來回搬運檔案：
- 從 NAS 下載程式碼到 PC
- 上傳到 ChatGPT／Claude 網頁版
- 等 AI 寫好，再下載回 PC
- 把改好的檔案上傳回 NAS
- 手動重新建置（rebuild）或重啟服務
- 若有問題，整個流程再跑一次
現在的方式
Codex CLI 與 Claude Code CLI 共用同一個瀏覽器終端機介面，直接在 NAS 上：
- 讀寫實際運作中的程式碼與設定檔
- 改完立即用 Docker Compose 線上重新建置／重啟
- 透過真實網址即時驗證結果
- 若重啟後無法正常啟動，自動排查並修改，直到重新測試成功、順利上線為止
- 省下下載、上傳、來回搬運檔案的每一步
安全邊界：編碼代理只能操作專案掛載的目錄，部署動作也僅限白名單內的 restart／up／rebuild／status／logs，不能任意存取 NAS 其他區域或執行未列入白名單的指令。
Content Lifecycle
從臨床經驗到可使用的內容
網站的價值不只在伺服器架構，更在於醫療資訊如何被整理、覆核、發布與持續修正。
醫師定義問題與邊界
從診間常見疑問與實際核對需求選題，先寫清楚適用對象、用途與不能取代的臨床判斷。
內容與工具各司其職
需要理解脈絡的主題寫成衛教文章；需要重複運算或逐項核對的工作，才做成計算器與快查。
結構化後再發布
文章透過區塊式後台整理標題、摘要、圖片與來源；頁面同步輸出 canonical、結構化資料、sitemap 與 RSS。
用回饋持續改善
以隱私友善的整體流量觀察哪些頁面真正被使用，再改善入口、說明與操作流程，而不是追蹤個別讀者。
AI 的角色：後台可用 AI 協助整理草稿與欄位，但不讓 AI 自動診斷、決定處方或跳過醫師覆核；公開內容與工具規則仍由人負責。
Technology
技術組成與用途
Synology NAS
自主管理的伺服器環境，集中保存服務、內容資料與圖片資產，不依賴外部雲端主機。
Docker
將網站執行環境封裝成容器，讓部署、重啟與版本更新一致且可重現。
Codex CLI／Claude Code CLI
透過瀏覽器終端機直接在 NAS 上讀寫實際運作中的程式碼並線上重新建置，取代下載、上傳來回搬運檔案的傳統更新流程。
DSM 反向代理 + Caddy
DSM 反向代理負責對外 HTTPS 與憑證；Caddy 再依網址路徑（/betterheart）把請求轉送到對應容器。
Node.js + Express
伺服器端即時渲染公開頁面，並處理後台管理、文章與設定資料、圖片上傳與 SEO 檔案。
原生 HTML / CSS / JavaScript
前端不使用大型框架，以漸進增強方式建立互動介面、即時計算與視覺化時間軸。
Vite 預建 SPA
「降血脂藥健保快查」等互動較複雜的工具，以現代前端工具預先建置為靜態單頁應用，掛在同一個服務下，兼顧複雜互動與載入速度。
JSON + Sharp
文章與設定以 JSON 檔保存（約 30 秒快取，直接編輯即更新）；Sharp 自動產生 WebP 與縮圖。
後台編輯與 AI 輔助
區塊式文章編輯器與圖片庫；可選擇呼叫 AI 協助整理草稿，API 金鑰只保留在 NAS，不會傳到瀏覽器。
Umami（自架分析）
隱私友善的流量統計，不使用 cookie、不建立個人識別，分析資料留在自己的 NAS。
SEO 與結構化資料
為頁面建立英文網址、canonical、Open Graph、JSON-LD、sitemap 與 RSS。
Clinical Design
臨床工具的設計原則
公式與規則可追蹤
風險分數、腎功能與給付條件以明確公式及條件分支執行，讓相同輸入得到一致結果。
先分清楚臨床用途
例如 eGFR 與 Cockcroft–Gault CrCl 分別呈現，避免把 CKD 分期與藥物劑量評估混為一談。
結果帶著限制一起顯示
除了候選藥物，也顯示劑量、療程、禁忌、健保狀態與需進一步核對的條件。
適合快速核對，不取代判斷
工具協助整理資訊與減少遺漏，最終處方仍須結合病人的完整病史、檢驗與最新規範。
醫療提醒：網站工具供醫療資訊整理與臨床核對使用，不能取代個別診斷、專業判斷或最新藥品仿單與健保公告。
