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>
18 KiB
18 KiB
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-modeCLI flag）：
切換後需要重啟 App 才能生效（顯示 toast 提示）。此區塊資料來源：Architect 需提供Python 執行模式 [內嵌 (推薦) ▾] 選項： • 內嵌 — 使用 App 內建的 python-build-standalone（完全離線） • 系統 — 使用系統 Python（需自行安裝 KneronPLUS） • 自動 — 優先內嵌，失敗時退回系統 目前狀態：內嵌 Python 3.11.7（✓ 已就緒） [重新偵測]/api/system/python-mode（GET 讀目前狀態、POST 切換）。 - 重置所有設定（危險操作，雙重確認）
- 關於 visionA-local（版本、授權、第三方套件、Kneron SDK 版本）
備註：原規劃有「外觀」分頁，因為只剩語言一項且主題跟隨系統，合併到「一般」分頁。