Ứng dụng giám sát hệ thống thời gian thực với trực quan hoá 3D CPU, RAM, GPU và Network
Orbit System Manager là desktop app giám sát hiệu năng hệ thống theo thời gian thực. Sử dụng trực quan hoá 3D hiển thị tải CPU dưới dạng topology động, kết hợp biểu đồ thống kê (boxplot, density plot, time‑series) và HUD hiển thị thông số chi tiết.
- Truy cập Releases của repo này
- Tải file mới nhất:
Orbit-System-Manager_x64-setup.exe— dành cho Windows (NSIS installer)
- Double-click file vừa tải → chạy trình cài đặt
- Sau khi cài xong, app sẽ có trong Start Menu 🎉
Lưu ý: Windows Defender có thể hiện cảnh báo "Windows protected your PC". Nhấn "More info" → "Run anyway" để tiếp tục.
Trong mục Releases, tải file .zip và giải nén, chạy Orbit System Manager.exe.
App sẽ tự động:
- Mở cửa sổ desktop với giao diện 3 cột
- Kết nối WebSocket đến backend thu thập dữ liệu hệ thống
- Nếu không có backend, app tự động dùng dữ liệu giả lập — bạn vẫn xem được đầy đủ demo
| Thao tác | Mô tả |
|---|---|
| 🖱️ Kéo thả splitter (gạch dọc) | Resize 3 cột, kích thước được lưu tự động |
| ◀▶ Nhấn nút mũi tên trên thanh top bar | Ẩn/hiện panel trái và phải |
| 🔄 Xoay 3D | Giữ chuột trái + kéo trên canvas 3D |
| 🔍 Zoom 3D | Lăn chuột trên canvas 3D |
| 📌 Pan 3D | Giữ chuột phải + kéo |
Panel trái (bên trái):
- System Memory — thanh RAM tổng quan + dung lượng đã dùng
- CPU Cores — 16 lõi CPU với thanh tải % + sparkline 40 mẫu
- HUD — Avg utilization, std dev, variance, kết nối real-time
Trung tâm (Canvas 3D):
- CPU topology 3D — mỗi cột là một lõi CPU, cao/thấp theo tải
- Boxplot + stripplot phân bố tải 16 lõi
- RAM time‑series (30 giây)
- Network chart (Sent / Received)
Panel phải (bên phải):
- GPU0 / GPU1 — Density plot + Time‑series (load %, VRAM, temperature)
- RAM Time‑Series — biểu đồ đường RAM 30 giây
- Network — Sent / Received (KB/s)
| Yêu cầu | Tối thiểu |
|---|---|
| Hệ điều hành | Windows 10 / 11 (64-bit) |
| RAM | 2 GB |
| GPU | Không bắt buộc (có càng tốt để xem GPU charts) |
| Thành phần | Công nghệ |
|---|---|
| Desktop shell | Tauri v2 (Rust) |
| Frontend | Vanilla JS + Three.js |
| Backend | Python + websockets |
| System metrics | psutil + GPUtil |
| Bundler | Rollup |
| Công cụ | Phiên bản |
|---|---|
| Miniconda / Conda | ≥ 24 |
| Node.js | ≥ 18 |
| Rust | ≥ 1.77 |
| OS | Windows 10/11 |
Dự án sử dụng Miniconda để quản lý môi trường Python độc lập. Môi trường được định nghĩa trong environment.yml:
# 1. Tạo môi trường từ file cấu hình
conda env create -f environment.yml
# 2. Kích hoạt môi trường
conda activate orbit-system
# 3. Kiểm tra backend hoạt động
python app.py --port 8080Nếu cần cập nhật dependencies sau khi pull code mới:
conda env update -f environment.yml --pruneĐể export lại môi trường sau khi thay đổi:
conda env export -n orbit-system --no-builds > environment.yml# 1. Clone repo
git clone https://github.com/ryantr-statinops/task_manager_3D_visualize.git
cd task_manager_3D_visualize
# 2. Thiết lập Python environment (Miniconda)
conda env create -f environment.yml
conda activate orbit-system
# 3. Cài npm dependencies
npm install
# 4. Build frontend
npm run build
# 5. Build desktop app (ra file .msi / .exe)
npm run build:appFile cài đặt sau khi build sẽ nằm tại:
| Định dạng | Đường dẫn |
|---|---|
| 📦 MSI | src-tauri/target/release/bundle/msi/ |
| 📦 NSIS | src-tauri/target/release/bundle/nsis/ |
# Terminal 1: Python backend (với conda environment)
conda activate orbit-system
python app.py --port 8080
# Terminal 2: Frontend dev + Tauri desktop
npm run devLệnh npm run dev sẽ tự động:
- Chạy
node scripts/dev-server.mjs(static server tại port 3000) - Mở WebView window của Tauri trỏ tới
http://localhost:3000 - Frontend kết nối WebSocket tới Python backend
task_manager_3D_visualize/
├── src-tauri/ # Tauri (Rust) — desktop app
├── src/ # Frontend source (JS modules)
│ ├── index.js # Entry point
│ ├── state.js # Global state
│ ├── ui.js # Charts, HUD, layout
│ ├── threeScene.js # 3D CPU topology (Three.js)
│ ├── timeSeries.js # Time‑series data structures
│ ├── websocket.js # WebSocket + mock fallback
│ └── constants.js # Constants
├── agent/ # AI agent specifications & documentation
│ ├── promts/ # Agent prompt specifications
│ └── about/ # Project reference docs
├── assets/images/ # Screenshots & assets
├── app.py # Python backend
├── environment.yml # Conda environment definition
├── index.html # Entry HTML
├── style.css # Styles
└── package.json # npm scripts & dependencies
| Vấn đề | Giải pháp |
|---|---|
| 🛡️ Windows Defender chặn | Nhấn "More info" → "Run anyway" |
| ❌ App mở ra nhưng trắng | Tắt và mở lại app, hoặc restart máy |
| 📊 Không có dữ liệu GPU | Máy không có GPU NVIDIA hoặc không hỗ trợ — các charts khác vẫn hoạt động |
| 🔌 Mất kết nối | App tự động reconnect, nếu lâu quá thì restart app |
| 💾 Dung lượng RAM hiển thị sai | App dùng dữ liệu từ psutil, dung lượng được tính theo hệ nhị phân (1 GB = 1024³ bytes) |
| 🐍 Conda environment lỗi | Chạy conda env update -f environment.yml --prune để đồng bộ lại |
MIT