jim800121chen
c54f16fca0
local-tool/: visionA-local desktop app
- M1: Wails shell + Go server + Next.js UI + Mock mode (macOS dmg ready)
- M2: i18n (zh-TW/en) + Settings 4-tab refactor
- M3: Embedded Python 3.12 runtime (python-build-standalone) + KneronPLUS wheels
- M4: Windows Inno Setup script (build on Windows runner)
- M5: Linux AppImage script + udev rule (build on Linux runner)
- M6: ffmpeg (GPL, pending legal review) + yt-dlp bundled
- Lifecycle: watchServer health check, fatal native dialog,
Wails IPC raise endpoint, stale process cleanup
.autoflow/: full PRD / Design Spec / Architecture / Testing docs
(4 rounds tri-party discussion + cross review)
.github/workflows/: macOS / Windows / Linux build CI
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
240 lines
18 KiB
Markdown
240 lines
18 KiB
Markdown
# 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=<id>`
|
||
- 韌體燒錄按鈕**已移除**
|
||
- 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 版本）
|
||
|
||
**備註**：原規劃有「外觀」分頁，因為只剩語言一項且主題跟隨系統，合併到「一般」分頁。
|