# 03 — 主要頁面 Wireframe（結構化描述） 以下為文字版 wireframe。所有尺寸以 Desktop 1280×800 為基準，sidebar 固定 240px。 ## 3.1 Dashboard（`/`） **設計意圖**：原本是叢集總覽，local 版改為「快速開始 + 單機狀態」，幫使用者 3 秒內決定下一步動作。 ``` ┌─ Sidebar ─┬──────────────────────── Content ───────────────────────┐ │ │ Dashboard [Mock?] [●Server] [?] │ │ ├────────────────────────────────────────────────────────┤ │ │ │ │ │ 你好 👋 │ │ │ visionA-local 已準備就緒 │ │ │ │ │ │ ┌─ Quick Start ──────────────────────────────────┐ │ │ │ │ [①接上裝置] [②選擇模型] [③前往 Workspace →] │ │ │ │ │ （步驟卡，已完成的打勾） │ │ │ │ └────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ Status ────┐ ┌─ Status ────┐ ┌─ Status ────┐ │ │ │ │ 🔌 已連裝置 │ │ 📦 可用模型 │ │ ⏱ Uptime │ │ │ │ │ 2 │ │ 6 │ │ 00:12:34 │ │ │ │ │ (KL720×1, │ │ (預置 5 + │ │ │ │ │ │ │ KL520×1) │ │ 自訂 1) │ │ │ │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ │ │ ┌─ 最近活動 ────────────────────────────────────┐ │ │ │ │ • 10:42 USB 裝置「KL720-A」已連線 │ │ │ │ │ • 10:41 模型「fd_mask.nef」已載入 │ │ │ │ │ • 10:40 Server 已啟動（localhost:3721） │ │ │ │ │ ... │ │ │ │ └────────────────────────────────────────────────┘ │ │ │ │ └───────────┴────────────────────────────────────────────────────────┘ ``` **元件組成：** - `QuickStartCard`：3 步卡片，根據狀態打勾（狀態來自 `/api/devices` + `/api/models`） - 3 個 `StatCard`：已連裝置 / 可用模型 / Uptime（原有元件，調整 label） - `ActivityTimeline`：沿用，過濾掉 cluster 事件 **互動：** - 點「③前往 Workspace」= 跳到 `/workspace` - 點 StatCard 上的數字可跳到對應頁 - 最近活動項目可 hover 顯示完整時間戳 **空狀態**：若還沒有任何裝置／模型，步驟卡會顯示引導文字「先接上一顆 Kneron 裝置吧」並附 CTA 到 Devices。 --- ## 3.2 Models（`/models`） **設計意圖**：沿用原設計（model-grid + filters + detail drawer），只移除 cluster 欄位。 ``` ┌─ Sidebar ─┬────────────────────────── Content ─────────────────────┐ │ │ Models [+ 上傳模型] │ │ ├────────────────────────────────────────────────────────┤ │ │ [搜尋____] [架構▾] [類別▾] [排序▾] 共 6 個模型 │ │ │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ │ Card │ │ Card │ │ Card │ │ Card │ │ │ │ │ 縮圖 │ │ 縮圖 │ │ 縮圖 │ │ 縮圖 │ │ │ │ │ 名稱 │ │ 名稱 │ │ 名稱 │ │ 名稱 │ │ │ │ │ 類別 │ │ 類別 │ │ 類別 │ │ 類別 │ │ │ │ │ [詳情]│ │ [詳情]│ │ [詳情]│ │ [詳情]│ │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ │ │ │ │ ┌──────┐ ┌──────┐ │ │ │ │ Card │ │ Card │ │ │ │ └──────┘ └──────┘ │ │ │ │ │ │ [將 .nef 拖放到這裡也可以上傳] ← dropzone 提示 │ └───────────┴────────────────────────────────────────────────────────┘ ``` - 拖放區域覆蓋整個 Models 頁面，hover 拖曳時變藍色高亮 - 點 Card 開啟 Detail Drawer（側邊滑出） - 上傳 Dialog 沿用原 `model-upload-dialog` **空狀態**：無模型時顯示「還沒有模型，上傳一個 .nef 試試 →」，附大型上傳按鈕與預置模型列表連結。 --- ## 3.3 Devices（`/devices`） ``` ┌─ Sidebar ─┬────────────────────────── Content ─────────────────────┐ │ │ Devices [🔄 重新掃描] [真實 / Mock]│ │ ├────────────────────────────────────────────────────────┤ │ │ ⓘ 插上 Kneron USB 裝置後自動出現在下方 │ │ │ │ │ │ ┌─ Connected ─────────────────────────────────────┐ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ KL720-A │ │ KL520-B │ │ │ │ │ │ │ 🟢 Ready │ │ 🟢 Ready │ │ │ │ │ │ │ FW 2.1.0 │ │ FW 1.8.3 │ │ │ │ │ │ │ [Workspc]│ │ [Workspc]│ │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ Disconnected History ──────────────────────────┐ │ │ │ │ (過去連接過的裝置，用於顯示連線紀錄) │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ ⓘ Connection Log (drawer, 點右下角按鈕展開) │ └───────────┴────────────────────────────────────────────────────────┘ ``` - 右上角 `真實 / Mock` 是切換 pill，點擊彈出確認對話框（避免誤觸） - Device Card 點「Workspace」直接跳到 `/workspace?device=` - 韌體燒錄按鈕**已移除** - Connection Log drawer 從右側滑出（沿用 `device-connection-log.tsx`） **空狀態**： - 真實模式無裝置：顯示大型 empty state — 插圖（USB 接頭）+ 「沒偵測到 Kneron 裝置」+ 排錯清單（重插 USB / 檢查權限 / 切到 Mock 模式） - Mock 模式：固定顯示 3 顆假裝置，每個都有 `Mock` 小標 --- ## 3.4 Workspace（`/workspace`） **設計意圖**：核心操作頁，左右分欄 — 左邊攝影機畫面＋推論 overlay，右邊控制面板。 ``` ┌─ Sidebar ─┬────────────────────────── Content ─────────────────────┐ │ │ Workspace [裝置▾ KL720-A] [▣ Live | ▤ Batch | ▧ Video]│ │ ├────────────────────────────────────────────────────────┤ │ │ ┌─────────── Camera Feed ────────────┐ ┌─ Control ──┐ │ │ │ │ │ │ 模型: │ │ │ │ │ │ │ [fd_mask]│ │ │ │ │ [MJPEG + Overlay] │ │ │ │ │ │ │ │ │ Confidence│ │ │ │ │ │ │ ━━━● 0.7 │ │ │ │ │ │ │ │ │ │ │ │ │ │ Source: │ │ │ │ │ │ │ [webcam ▾]│ │ │ │ │ │ │ │ │ │ │ │ │ │ [▶ Start] │ │ │ │ └────────────────────────────────────┘ │ │ │ │ │ ┌── Results Timeline ─────────────────┐ │ Perf: │ │ │ │ │ (bounding boxes / classes list) │ │ FPS: 24 │ │ │ │ └────────────────────────────────────┘ │ Latency: │ │ │ │ │ 180ms │ │ │ │ └────────────┘ │ └───────────┴────────────────────────────────────────────────────────┘ ``` - **頂部 Tab**：Live（即時串流）/ Batch（批次圖片）/ Video（影片檔）— 三模式切換 - **裝置選擇器**：top bar 左邊，下拉選單顯示所有已連裝置；只有 1 顆時直接顯示名稱；無裝置時顯示 EmptyWorkspace - **Camera Feed**：沿用 `camera-feed` + `camera-overlay` - **Control Panel**：沿用 `inference-panel` + `confidence-slider` + `source-selector` - **Results Timeline**：底部時間軸，顯示每秒的推論結果摘要 - **Perf 指標說明**： - `FPS` 顯示目前即時影格率 - `Latency` 指 **MJPEG 端到端延遲**（拍到→瀏覽器顯示），第四輪 R4-2 定案目標：**首次 ≤250ms、穩定後 ≤150ms**。上圖示例 180ms 為「穩定後但略高於理想」的典型值；實際數字會隨硬體與解析度變動。 - 當 Latency > 250ms 時以 `warning` 顏色顯示，使用者可點擊查看瓶頸（未來功能） **空狀態**（EmptyWorkspace 元件）： ``` ┌────────────────────────────────────────────────────┐ │ │ │ 🔌 │ │ │ │ 還沒有可用的裝置 │ │ │ │ 接上一顆 Kneron USB 裝置，或切到 Mock 模式 │ │ 先體驗看看。 │ │ │ │ [前往 Devices] [切到 Mock 模式] │ │ │ └────────────────────────────────────────────────────┘ ``` --- ## 3.5 Settings（`/settings/[tab]`） ``` ┌─ Sidebar ─┬────────────────────────── Content ─────────────────────┐ │ │ Settings │ │ ├────────────────────────────────────────────────────────┤ │ │ ┌── Tabs ──┬── Panel ────────────────────────────────┐│ │ │ │ ● 一般 │ ││ │ │ │ ○ 硬體 │ 語言 [繁中 ▾] ││ │ │ │ ○ 模型 │ ││ │ │ │ ○ 進階 │ 啟動時開啟 [Dashboard ▾] ││ │ │ │ │ ││ │ │ │ │ 資料目錄 ~/Library/Application ││ │ │ │ │ Support/visiona-local/ ││ │ │ │ │ [在 Finder 顯示] ││ │ │ │ │ ││ │ │ │ │ 主題 跟隨系統（目前：深色） ││ │ │ │ │ ⓘ 深色模式自動跟隨系統 ││ │ │ │ │ ││ │ │ └──────────┴──────────────────────────────────────────┘│ └───────────┴────────────────────────────────────────────────────────┘ ``` ### 分頁內容 **一般** - 語言（繁中 / English / 跟隨系統） - 啟動時預設頁（Dashboard / Workspace / 上次開啟的頁） - 資料目錄（唯讀顯示 + 「在 Finder/Explorer 顯示」按鈕） - 主題（唯讀顯示「跟隨系統」+ 當前 light/dark 狀態） **硬體** - 執行模式（真實硬體 / Mock）— 切換時有確認對話框 - USB 權限狀態（唯讀） - Server Port（預設 3721，衝突時可改） - 裝置自動掃描頻率（預設 5 秒） **模型** - 預置模型顯示開關（可隱藏內建模型只看自訂） - 自訂模型路徑（唯讀顯示 + 「新增路徑」） - 清除模型快取 **進階** - 開啟日誌 viewer（嵌入 `server-log-viewer`） - 開啟 Server 狀態（嵌入 `server-status-dashboard`） - **Server Port** 唯讀顯示（預設 3721，若被占用會自動挑下一個；顯示實際使用的 port + 「複製」按鈕） - **Python 執行模式**（第四輪新增 UI 入口，對應 Architect `dependency-bundling.md §1.5` 的 `--python-mode` CLI flag）： ``` Python 執行模式 [內嵌 (推薦) ▾] 選項： • 內嵌 — 使用 App 內建的 python-build-standalone（完全離線） • 系統 — 使用系統 Python（需自行安裝 KneronPLUS） • 自動 — 優先內嵌，失敗時退回系統 目前狀態：內嵌 Python 3.11.7（✓ 已就緒） [重新偵測] ``` 切換後**需要重啟 App** 才能生效（顯示 toast 提示）。此區塊資料來源：Architect 需提供 `/api/system/python-mode`（GET 讀目前狀態、POST 切換）。 - 重置所有設定（危險操作，雙重確認） - 關於 visionA-local（版本、授權、第三方套件、Kneron SDK 版本） **備註**：原規劃有「外觀」分頁，因為只剩語言一項且主題跟隨系統，合併到「一般」分頁。