HOP UI - Human Operation Platform

HOP (Human Operation Platform) 是一個基於 AI 視覺辨識的智慧工廠監控系統前端介面，提供即時影像監控、人員行為分析、設備狀態追蹤與標準作業程序(SOP)驗證功能。

✨ 核心功能

📹 即時監控 (Live View)

• 多攝影機即時影像串流
• AI 物件偵測即時標記（人員、設備、PPE）
• 即時警報通知與事件記錄
• 支援多達 8 個攝影機同時監控

🔍 智慧搜尋 (Smart Search)

• 基於時間和條件的影像搜尋
• 多條件組合查詢（人員、物品、區域、時間）
• 搜尋結果視覺化呈現
• 支援匯出搜尋結果

🎯 智慧分析 (Intelligence)

• 人流統計：即時人數統計與趨勢分析
• 區域熱力圖：人員活動熱區視覺化
• 滯留時間分析：偵測異常滯留行為
• 軌跡追蹤：完整記錄人員移動路徑

📋 SOP 管理與驗證

• 標準作業流程(SOP)：定義步驟式檢測流程
  • 視覺化區域繪製工具
  • 多步驟檢測順序設定
  • 時間與條件驗證
• 區域監控規則：設定單一條件監控
  • 攝影機與區域選擇
  • 物件數量/狀態監控
  • 持續時間閾值設定
• 影片驗證：上傳影片自動驗證 SOP 執行狀況

🎓 模型訓練 (Training)

• 視覺化標註工具
• 支援 YOLO/EfficientNet 等主流模型
• 自訂類別訓練
• 訓練進度即時監控

🏗️ 技術架構

HOP_UI/
├── src/
│   ├── components/          # React 元件
│   │   ├── figma/          # UI 基礎元件
│   │   ├── sop/            # SOP 相關元件
│   │   │   ├── RegionDrawer.tsx    # 區域繪製工具
│   │   │   └── VisualRuleEditor.tsx # SOP 編輯器
│   │   ├── LiveView.tsx    # 即時監控
│   │   ├── SearchView.tsx  # 智慧搜尋
│   │   ├── Intelligence.tsx # 智慧分析
│   │   ├── SOPView.tsx     # SOP 管理
│   │   └── TrainingView.tsx # 模型訓練
│   ├── App.tsx             # 主應用程式
│   └── main.tsx            # 入口點
├── public/
│   └── images/             # 靜態圖片資源
└── package.json

🚀 快速開始

環境需求

• Node.js >= 16.0.0
• npm 或 yarn

安裝

# 克隆專案
git clone https://github.com/bj7261716/HOP_UI.git
cd HOP_UI

# 安裝依賴
npm install

開發

# 啟動開發伺服器
npm run dev

開發伺服器會在 http://localhost:5173 啟動

建置

# 建置生產版本
npm run build

# 預覽生產版本
npm run preview

📦 主要依賴

• React 18 - UI 框架
• TypeScript - 型別安全
• Vite - 建置工具
• Tailwind CSS - 樣式框架
• Radix UI - 無障礙 UI 元件庫
• Lucide React - 圖示庫
• Recharts - 資料視覺化

🎨 設計特色

• Material Design 3 設計語言
• 響應式設計：支援桌面與平板
• 深色模式：護眼的深色主題
• 流暢動畫：Tailwind CSS 動畫
• 直覺操作：所見即所得的視覺化編輯工具

🔧 主要功能說明

SOP 規則引擎

HOP UI 提供兩種類型的規則設定：

1. 標準作業流程 (Sequential SOP)

適用於需要按照特定順序執行的檢測流程。

使用場景：

• 品質檢驗（例如：依序檢查面板各區域）
• 安全檢查（例如：確認 PPE 穿戴順序）
• 組裝流程驗證

功能：

• 視覺化區域繪製
• 多步驟定義與排序
• 每個步驟可設定物件、條件、時間

2. 區域監控規則 (Zone Monitor)

適用於持續監控特定條件的場景。

使用場景：

• 人員數量管制
• 物品遺留偵測
• 區域闖入警報

功能：

• 攝影機與區域選擇
• 單一條件監控
• 數值與持續時間閾值

📝 授權

請參閱 Attributions.md 了解第三方套件授權資訊。

👥 貢獻

歡迎提交 Issue 和 Pull Request！

📧 聯絡

如有任何問題或建議，請透過 GitHub Issues 聯繫我們。

---

Built with ❤️ for Smart Manufacturing