# Introduction（引言）

醫學教學常需要在同一張圖（如 X 光、心電圖、組織切片）上呈現多個重點區域，並依步驟揭露給學員。傳統 PowerPoint 的動畫雖可達成此目的，但維護成本高且不利版本控制。線上工具又常涉及上傳敏感影像。本專案提供一個本地網頁 GUI 工具，將「逐步揭露重點」的場景以結構化方式儲存，便於重複使用與分享。

# Methods（方法）

實作以 JavaScript 為主，以本地伺服器運行，使用者可載入圖片並以介面標註多個「場景（scene）」，每個場景對應一個重點區域與對應說明。所有場景以 JSON 格式儲存於本機，可被版本控制管理。匯出時可選擇靜態圖序、互動式 HTML 或包含 metadata 的封包，便於整合至既有簡報或教學平台。

設計重點為「資料即內容」：場景定義與圖片內容分離，學員看到的逐步揭露其實是同一張圖加上不同遮罩的呈現。如此使內容易於更新（例如修改說明文字不需重做整張圖），亦便於不同教師共用素材。

# Results（結果）

工具可被臨床教師在門診教學、晨會討論或考前複習中使用。對於影像判讀類主題（如胸部 X 光、骨髓塗片），逐步標示的形式比一次性框出全部重點更能訓練學員的觀察順序。本地運行的特性也滿足醫療影像不離院的隱私要求。

# Discussion（討論）

本專案展示了「以最少工程改善高頻教學情境」的價值。其貢獻在於提供一個輕量、可重複使用、可版本控制的圖片步驟標示工具。限制方面，當前僅支援靜態圖片，影片與 3D 影像尚未涵蓋；介面設計仍以工程友善為主，對非技術使用者門檻偏高。未來可加入 LLM 自動產生標註說明，並支援多人協作與評論。

# 連結

• GitHub：htlin222/image-step-by-step
• 主要語言：JavaScript
• 最後更新：2026-04-08