Trang tổng quan web
#Bảng điều khiển web
Trang tổng quan web là giao diện người dùng dựa trên trình duyệt để quản lý cài đặt Đại lý Hermes của bạn. Thay vì chỉnh sửa tệp YAML hoặc chạy lệnh CLI, bạn có thể định cấu hình cài đặt, quản lý khóa API và giám sát các phiên từ giao diện web sạch.
Bắt đầu nhanh
Hermes dashboard
`
``Thao tác này khởi động máy chủ web cục bộ và mở
`http://127.0.0.1:9119
` trong trình duyệt của bạn. Trang tổng quan chạy hoàn toàn trên máy của bạn — không có dữ liệu nào rời khỏi localhost.
### Tùy chọn
| Cờ | Mặc định | Mô tả |
|------|----------|-------------|
|
`
--port
` |
`9119
` | Cổng chạy máy chủ web trên |
|
--host
` |
`127.0.0.1
` | Địa chỉ ràng buộc |
|
--no-open
` | — | Đừng tự động mở trình duyệt |
|
--insecure
` | tắt | Cho phép liên kết với các máy chủ không phải máy chủ cục bộ (**NGUY HIỂM** — hiển thị các khóa API trên mạng; ghép nối với tường lửa và xác thực mạnh) |
|
--TUI
` | tắt | Hiển thị tab Trò chuyện trong trình duyệt (được nhúng
`Hermes --TUI
` qua PTY/WebSocket). Hoặc đặt
`Hermes_DASHBOARD_TUI=1
. |
``` bash
# Custom port
Hermes dashboard --port 8080
# Bind to all interfaces (use with caution on shared networks)
Hermes dashboard --host 0.0.0.0
# Start without opening browser
Hermes dashboard --no-open
# Enable the in-browser Chat tab
Hermes dashboard --TUI
`
## Điều kiện tiên quyết
Cài đặt
`Hermes-agent
` mặc định không gửi ngăn xếp HTTP hoặc trình trợ giúp PTY - đó là những tính năng bổ sung tùy chọn. **Trang tổng quan web** cần FastAPI và Uvicorn (bổ sung
`web
). Tab **Trò chuyện** cũng cần
`ptyprocess
` để tạo TUI được nhúng phía sau terminal giả (bổ sung
`pty
` trên POSIX). Cài đặt cả hai với:
``` bash
pip install 'Hermes-agent[web,pty]'
`
```web
` bổ sung kéo theo FastAPI/Uvicorn;
`pty
` kéo theo
`ptyprocess
` (POSIX) hoặc
`pywinpty
` (Windows gốc — lưu ý rằng bản thân TUI được nhúng vẫn yêu cầu WSL).
`pip install Hermes-agent[all]
` bao gồm cả hai tính năng bổ sung và là con đường dễ dàng nhất nếu bạn cũng muốn nhắn tin/thoại/v.v.
Khi bạn chạy
`Hermes dashboard
` mà không có phần phụ thuộc, nó sẽ cho bạn biết cần cài đặt những gì. Nếu giao diện người dùng chưa được xây dựng và
`npm
` có sẵn, nó sẽ tự động được xây dựng trong lần khởi chạy đầu tiên.
Tab Trò chuyện bị cố ý tắt để khởi chạy
`Hermes dashboard
` đơn giản. Bắt đầu trang tổng quan với
`Hermes dashboard --TUI
` hoặc đặt
`Hermes_DASHBOARD_TUI=1
` khi bạn muốn có khung trò chuyện được nhúng trên trình duyệt.
## trang
### Trạng thái
Trang đích hiển thị tổng quan trực tiếp về quá trình cài đặt của bạn:
- **Phiên bản đại lý** và ngày phát hành
- **Trạng thái cổng** — đang chạy/đã dừng, PID, nền tảng được kết nối và trạng thái của chúng
- **Phiên hoạt động** — số phiên hoạt động trong 5 phút qua
- **Phiên gần đây** — danh sách 20 phiên gần đây nhất có mô hình, số lượng tin nhắn, mức sử dụng mã thông báo và bản xem trước của cuộc trò chuyện
Trang trạng thái tự động làm mới sau mỗi 5 giây.
### Trò chuyện
Tab **Trò chuyện** nhúng trực tiếp toàn bộ Hermes TUI (giao diện giống như bạn nhận được từ
`Hermes --TUI
) vào trình duyệt. Mọi thứ bạn có thể thực hiện trong TUI terminal — lệnh gạch chéo, bộ chọn mô hình, thẻ gọi công cụ, truyền phát đánh dấu, lời nhắc làm rõ/sudo/phê duyệt, chủ đề giao diện — đều hoạt động giống hệt ở đây, vì bảng điều khiển đang chạy tệp nhị phân TUI thực và hiển thị đầu ra ANSI của nó thông qua [xterm.js](https://xtermjs.org/) với trình kết xuất WebGL của nó để tạo bố cục ô hoàn hảo đến từng pixel.
**Cách thức hoạt động:**
-
/API/pty
` mở WebSocket được xác thực bằng mã thông báo phiên của trang tổng quan
- Máy chủ sinh ra
`Hermes --TUI
` đằng sau terminal giả POSIX
- Tổ hợp phím di chuyển đến PTY; Dòng đầu ra ANSI quay trở lại trình duyệt
- Trình kết xuất WebGL của xterm.js vẽ từng ô vào một lưới pixel số nguyên; theo dõi chuột (SGR 1006), ký tự rộng (Unicode 11) và glyph vẽ hộp đều hiển thị nguyên bản
- Thay đổi kích thước cửa sổ trình duyệt thay đổi kích thước TUI thông qua addon
@xterm/addon-fit
``**Tiếp tục phiên hiện có:** từ tab **Phiên**, hãy nhấp vào biểu tượng phát (XXX) bên cạnh bất kỳ phiên nào. Điều đó chuyển sang
/chat?resume=<id
` và khởi chạy TUI với
--resume
, tải toàn bộ lịch sử.
**Điều kiện tiên quyết:**
- Node.js (yêu cầu tương tự như
`Hermes --TUI
; gói TUI được xây dựng trong lần ra mắt đầu tiên)
-
`ptyprocess
` — được cài đặt thêm bởi
`pty
` (
`pip install 'Hermes-agent[web,pty]'
` hoặc
[all]
` bao gồm cả hai)
- Hạt nhân POSIX (Linux, macOS hoặc WSL2). Ngăn terminal
/chat
` đặc biệt cần POSIX PTY - Windows Python gốc không có tương đương, vì vậy, trên bản cài đặt Windows gốc, phần còn lại của bảng điều khiển (phiên, công việc, số liệu, trình chỉnh sửa cấu hình) hoạt động nhưng tab
/chat
` sẽ hiển thị biểu ngữ yêu cầu bạn sử dụng WSL2 cho tính năng đó.Đóng tab trình duyệt và PTY sẽ được thu thập rõ ràng trên máy chủ. Việc mở lại sẽ tạo ra một phiên mới.
### Cấu hình
Trình chỉnh sửa dựa trên biểu mẫu cho
`config.yaml
. Tất cả hơn 150 trường cấu hình đều được tự động phát hiện từ
`DEFAULT_CONFIG
` và được sắp xếp thành các danh mục theo thẻ:
- **model** — mô hình mặc định, nhà cung cấp, URL cơ sở, cài đặt lý do
- **terminal** — chương trình phụ trợ (local/Docker/SSH/modal), thời gian chờ, tùy chọn shell
- **hiển thị** — giao diện, tiến trình công cụ, hiển thị sơ yếu lý lịch, cài đặt vòng quay
- **tác nhân** — số lần lặp tối đa, thời gian chờ của cổng, cấp dịch vụ
- **ủy quyền** — giới hạn tác nhân phụ, nỗ lực lý luận
- **bộ nhớ** — lựa chọn nhà cung cấp, cài đặt chèn ngữ cảnh
- **phê duyệt** — chế độ phê duyệt lệnh nguy hiểm (hỏi/yolo/từ chối)
- Và hơn thế nữa — mọi phần của config.yaml đều có các trường biểu mẫu tương ứng
Các trường có giá trị hợp lệ đã biết (phụ trợ terminal, giao diện, chế độ phê duyệt, v.v.) hiển thị dưới dạng menu thả xuống. Booleans hiển thị dưới dạng chuyển đổi. Mọi thứ khác là một kiểu nhập văn bản.
**Hành động:**
- **Save** — ghi các thay đổi vào
`config.yaml
` ngay lập tức
- **Đặt lại về mặc định** — hoàn nguyên tất cả các trường về giá trị mặc định của chúng (không lưu cho đến khi bạn nhấp vào Lưu)
- **Xuất** — tải xuống cấu hình hiện tại dưới dạng JSON
- **Nhập** — tải lên tệp cấu hình JSON để thay thế các giá trị hiện tại
:::tip
Các thay đổi về cấu hình sẽ có hiệu lực trong phiên tác nhân tiếp theo hoặc khởi động lại cổng. Trang tổng quan web chỉnh sửa cùng một tệp
`config.yaml
` mà
`Hermes config set
` và cổng đọc từ đó.
:::
### Khóa API
Quản lý tệp
.env
` nơi lưu trữ khóa API và thông tin xác thực. Các khóa được nhóm theo danh mục:
- **Nhà cung cấp LLM** — OpenRouter, Anthropic, OpenAI, DeepSeek, v.v.
- **Khóa API công cụ** — Browserbase, Firecrawl, Tavily, ElevenLabs, v.v.
- **Nền tảng nhắn tin** — Telegram, Discord, Slack bot token, v.v.
- **Cài đặt tác nhân** — các biến env không bí mật như
`API_SERVER_ENABLED
``Mỗi phím hiển thị:
- Liệu nó hiện có được đặt hay không (với bản xem trước giá trị đã được chỉnh sửa lại)
- Một mô tả về mục đích của nó
- Một liên kết đến trang đăng ký/chìa khóa của nhà cung cấp
- Trường đầu vào để đặt hoặc cập nhật giá trị
- Nút xóa để xóa nó
Theo mặc định, các phím nâng cao/hiếm khi được sử dụng được ẩn sau nút chuyển đổi.
### Phiên
Duyệt và kiểm tra tất cả các phiên đại lý. Mỗi hàng hiển thị tiêu đề phiên, biểu tượng nền tảng nguồn (CLI, Telegram, Discord, Slack, cron), tên mô hình, số lượng tin nhắn, số lượng cuộc gọi công cụ và thời gian hoạt động của nó. Các phiên trực tiếp được đánh dấu bằng huy hiệu rung.
- **Tìm kiếm** — tìm kiếm toàn văn trên tất cả nội dung tin nhắn bằng FTS5. Kết quả hiển thị các đoạn được đánh dấu và tự động cuộn đến tin nhắn phù hợp đầu tiên khi được mở rộng.
- **Mở rộng** — nhấp vào một phiên để tải toàn bộ lịch sử tin nhắn của phiên đó. Tin nhắn được mã hóa màu theo vai trò (người dùng, trợ lý, hệ thống, công cụ) và được hiển thị dưới dạng Markdown kèm theo đánh dấu cú pháp.
- **Cuộc gọi công cụ** — thông báo trợ lý có lệnh gọi công cụ hiển thị các khối có thể thu gọn với tên hàm và đối số JSON.
- **Xóa** — xóa phiên và lịch sử tin nhắn của phiên đó bằng biểu tượng thùng rác.
### Nhật ký
Xem các tệp nhật ký tác nhân, cổng và lỗi bằng tính năng lọc và theo dõi trực tiếp.
- **Tệp** — chuyển đổi giữa các tệp nhật ký
`agent
,
`errors
` và
`gateway
- **Cấp độ** — lọc theo cấp độ nhật ký: TẤT CẢ, GỠ LỖI, THÔNG TIN, CẢNH BÁO hoặc LỖI
- **Thành phần** — lọc theo thành phần nguồn: tất cả, cổng, tác nhân, công cụ, CLI hoặc cron
- **Dòng** — chọn số dòng hiển thị (50, 100, 200 hoặc 500)
- **Tự động làm mới** — chuyển đổi chế độ theo dõi trực tiếp để thăm dò các dòng nhật ký mới cứ sau 5 giây
- **Mã màu** — dòng nhật ký được tô màu theo mức độ nghiêm trọng (màu đỏ cho lỗi, màu vàng cho cảnh báo, mờ để gỡ lỗi)
### Phân tích
Phân tích mức sử dụng và chi phí được tính toán từ lịch sử phiên. Chọn khoảng thời gian (7, 30 hoặc 90 ngày) để xem:
- **Thẻ tóm tắt** — tổng số mã thông báo (đầu vào/đầu ra), tỷ lệ phần trăm truy cập bộ đệm, tổng chi phí ước tính hoặc thực tế và tổng số phiên với mức trung bình hàng ngày
- **Biểu đồ mã thông báo hàng ngày** — biểu đồ thanh xếp chồng hiển thị mức sử dụng mã thông báo đầu vào và đầu ra mỗi ngày, với chú giải công cụ di chuột hiển thị số liệu chi tiết và chi phí
- **Bảng phân tích hàng ngày** — ngày, số phiên, mã thông báo đầu vào, mã thông báo đầu ra, tỷ lệ truy cập bộ đệm và chi phí cho mỗi ngày
- **Chi tiết theo từng mô hình** — bảng hiển thị từng mô hình được sử dụng, số phiên, mức sử dụng mã thông báo và chi phí ước tính`###Cron
Tạo và quản lý các công việc định kỳ đã lên lịch để chạy lời nhắc của tổng đài viên theo lịch định kỳ.- **Tạo** — điền tên (tùy chọn), lời nhắc, biểu thức cron (ví dụ:
`0 9 * * *
) và mục tiêu phân phối (địa phương, Telegram, Discord, Slack hoặc email)
- **Danh sách công việc** — mỗi công việc hiển thị tên, bản xem trước lời nhắc, biểu thức lịch biểu, huy hiệu trạng thái (đã bật/tạm dừng/lỗi), mục tiêu phân phối, thời gian chạy lần cuối và thời gian chạy tiếp theo
- **Tạm dừng / Tiếp tục** — chuyển đổi công việc giữa trạng thái hoạt động và tạm dừng
- **Kích hoạt ngay** — thực hiện ngay công việc ngoài lịch trình thông thường
- **Xóa** — xóa vĩnh viễn một công việc định kỳ
### Kỹ năng
Duyệt, tìm kiếm và chuyển đổi các kỹ năng và bộ công cụ. Các kỹ năng được tải từ
~/.Hermes/skills/
` và được nhóm theo danh mục.
- **Tìm kiếm** — lọc các kỹ năng và bộ công cụ theo tên, mô tả hoặc danh mục
- **Bộ lọc danh mục** — nhấp vào danh mục thuốc để thu hẹp danh sách (ví dụ: MLOps, MCP, Red Teaming, AI)
- **Chuyển đổi** — bật hoặc tắt các kỹ năng riêng lẻ bằng một công tắc. Những thay đổi có hiệu lực vào phiên tiếp theo.
- **Bộ công cụ** — một phần riêng biệt hiển thị các bộ công cụ tích hợp (thao tác với tệp, duyệt web, v.v.) cùng với trạng thái hoạt động/không hoạt động, yêu cầu thiết lập và danh sách các công cụ đi kèm
:::warning[Security]
Trang tổng quan web đọc và ghi tệp
.env
` của bạn, tệp này chứa các khóa và bí mật API. Nó liên kết với
`127.0.0.1
` theo mặc định - chỉ có thể truy cập được từ máy cục bộ của bạn. Nếu bạn liên kết với
`0.0.0.0
, bất kỳ ai trên mạng của bạn đều có thể xem và sửa đổi thông tin đăng nhập của bạn. Bảng điều khiển không có xác thực riêng.
:::
## Lệnh gạch chéo
/reload
``Bảng điều khiển PR cũng thêm lệnh gạch chéo
/reload
` vào CLI tương tác. Sau khi thay đổi khóa API thông qua trang tổng quan web (hoặc bằng cách chỉnh sửa trực tiếp
.env
), hãy sử dụng
/reload
` trong phiên CLI đang hoạt động để nhận các thay đổi mà không cần khởi động lại:
`
You → /reload
Reloaded .env (3 var(s) updated)
`
``Điều này sẽ đọc lại
~/.Hermes/.env
` vào môi trường của tiến trình đang chạy. Hữu ích khi bạn đã thêm khóa nhà cung cấp mới thông qua trang tổng quan và muốn sử dụng khóa đó ngay lập tức.
## API REST
Trang tổng quan web hiển thị API REST mà giao diện người dùng sử dụng. Bạn cũng có thể gọi trực tiếp các điểm cuối này để tự động hóa:
### NHẬN /API/trạng thái
Trả về phiên bản tác nhân, trạng thái cổng, trạng thái nền tảng và số phiên hoạt động.
### NHẬN /API/phiên
Trả về 20 phiên gần đây nhất cùng với siêu dữ liệu (mô hình, số lượng mã thông báo, dấu thời gian, bản xem trước).
### NHẬN /API/config
Trả về nội dung
`config.yaml
` hiện tại dưới dạng JSON.
### NHẬN /API/config/mặc định
Trả về các giá trị cấu hình mặc định.
### NHẬN /API/config/schema
Trả về một lược đồ mô tả mọi trường cấu hình — loại, mô tả, danh mục và các tùy chọn chọn nếu có. Giao diện người dùng sử dụng điều này để hiển thị tiện ích đầu vào chính xác cho từng trường.
### PUT /API/config
Lưu cấu hình mới. Thân máy:
\{"config": \{...}}
.
### NHẬN /API/env
Trả về tất cả các biến môi trường đã biết với trạng thái đã đặt/không đặt, giá trị được xử lý lại, mô tả và danh mục.
### PUT /API/env
Đặt một biến môi trường. Thân máy:
\{"key": "VAR_NAME", "value": "secret"}
.
### XÓA /API/env
Loại bỏ một biến môi trường. Thân máy:
\{"key": "VAR_NAME"}
.
### NHẬN /API/sessions/\\{session_id\}
Trả về siêu dữ liệu cho một phiên duy nhất.
### NHẬN /API/sessions/\\{session_id\}/messages
Trả về toàn bộ lịch sử tin nhắn cho một phiên, bao gồm các lệnh gọi công cụ và dấu thời gian.
### NHẬN /API/sessions/tìm kiếm
Tìm kiếm toàn văn trên nội dung tin nhắn. Tham số truy vấn:
`q
. Trả về ID phiên phù hợp với đoạn mã được đánh dấu.
### XÓA /API/sessions/\\{session_id\}
Xóa một phiên và lịch sử tin nhắn của phiên đó.
### NHẬN /API/log
Trả về dòng nhật ký. Tham số truy vấn:
`file
` (tác nhân/lỗi/cổng),
`lines
` (số lượng),
`level
,
`component
.
### NHẬN /API/phân tích/cách sử dụng
Trả về việc sử dụng mã thông báo, chi phí và phân tích phiên. Tham số truy vấn:
`days
` (mặc định 30). Phản hồi bao gồm số liệu chi tiết hàng ngày và tổng hợp theo từng mô hình.
### NHẬN /API/cron/jobs
Trả về tất cả các công việc định kỳ đã được định cấu hình cùng với trạng thái, lịch trình và lịch sử chạy của chúng.
### BÀI ĐĂNG /API/cron/jobs
Tạo một công việc định kỳ mới. Thân máy:
\{"prompt": "...", "schedule": "0 9 * * *", "name": "...", "deliver": "local"}
.
### ĐĂNG /API/cron/jobs/\\{job_id\}/pause
Tạm dừng một công việc định kỳ.
### ĐĂNG /API/cron/jobs/\\{job_id\}/sơ yếu lý lịch
Tiếp tục một công việc định kỳ đã tạm dừng.
### POST /API/cron/jobs/\\{job_id\}/trigger
Ngay lập tức kích hoạt một công việc định kỳ ngoài lịch trình của nó.
### XÓA /API/cron/jobs/\\{job_id\}
Xóa một công việc định kỳ.
### NHẬN /API/kỹ năngTrả về tất cả các kỹ năng với tên, mô tả, danh mục và trạng thái kích hoạt của chúng.
### PUT /API/skills/chuyển đổi
Kích hoạt hoặc vô hiệu hóa một kỹ năng. Thân máy:
\{"name": "skill-name", "enabled": true}
.
### NHẬN /API/tools/bộ công cụ
Trả về tất cả các bộ công cụ có nhãn, mô tả, danh sách công cụ và trạng thái hoạt động/được định cấu hình.
## CORS
Máy chủ web chỉ giới hạn CORS ở nguồn gốc localhost:
-
`http://localhost:9119
` /
`http://127.0.0.1:9119
` (sản xuất)
-
`http://localhost:3000
` /
`http://127.0.0.1:3000
-
`http://localhost:5173
` /
`http://127.0.0.1:5173
` (máy chủ Vite dev)
Nếu bạn chạy máy chủ trên một cổng tùy chỉnh, nguồn gốc đó sẽ tự động được thêm vào.
## Phát triển
Nếu bạn đang đóng góp cho giao diện trang tổng quan web:
``` bash
# Terminal 1: start the backend API
Hermes dashboard --no-open
# Terminal 2: start the Vite dev server with HMR
cd web/
npm install
npm run dev
`
``Máy chủ nhà phát triển Vite tại
`http://localhost:5173
` ủy quyền
/API
` tới phần phụ trợ FastAPI tại
`http://127.0.0.1:9119
.
Giao diện người dùng được xây dựng với các thành phần React 19, TypeScript, Tailwind CSS v4 và shadcn/ui-style. Quá trình sản xuất xây dựng đầu ra thành
`Hermes_CLI/web_dist/
` mà máy chủ FastAPI hoạt động như một SPA tĩnh.
## Tự động xây dựng khi cập nhật
Khi bạn chạy
`Hermes update
, giao diện người dùng web sẽ tự động được xây dựng lại nếu có
`npm
. Điều này giúp bảng thông tin được đồng bộ hóa với các bản cập nhật mã. Nếu
`npm
` chưa được cài đặt, bản cập nhật sẽ bỏ qua quá trình xây dựng giao diện người dùng và
`Hermes dashboard
` sẽ xây dựng nó trong lần khởi chạy đầu tiên.
## Chủ đề & plugin
Trang tổng quan có sáu chủ đề tích hợp sẵn và có thể được mở rộng với các chủ đề do người dùng xác định, tab plugin và tuyến API phụ trợ — tất cả đều có thể thả vào, không cần bản sao kho lưu trữ.
**Chuyển chủ đề trực tiếp** từ thanh tiêu đề — nhấp vào biểu tượng bảng màu bên cạnh trình chuyển đổi ngôn ngữ. Lựa chọn vẫn tiếp tục đối với
`config.yaml
` trong
`dashboard.theme
` và được khôi phục khi tải trang.
Các chủ đề tích hợp:
| Chủ đề | Nhân vật |
|-------|----------|
| **Hermes Teal** (
`default
) | Màu xanh mòng két + kem, phông chữ hệ thống, khoảng cách thoải mái |
| **Hermes Teal (Lớn)** (
`default-large
) | Tương tự như mặc định với văn bản 18px và khoảng cách rộng rãi hơn |
| **Nửa đêm** (
`midnight
) | Màu xanh tím đậm, Inter + JetBrains Mono |
| **Ember** (
`ember
) | Màu đỏ thẫm + đồng, Spectral serif + IBM Plex Mono |
| **Mono** (
`mono
) | Thang độ xám, IBM Plex, nhỏ gọn |
| **Cyberpunk** (
`cyberpunk
) | Màu xanh neon trên nền đen, Chia sẻ Tech Mono |
| **Rosé** (
`rose
) | Hồng + ngà, Fraunces serif, rộng rãi |
Để xây dựng chủ đề của riêng bạn, hãy thêm tab plugin, đưa vào các khe shell hoặc hiển thị các điểm cuối REST dành riêng cho plugin, hãy xem **[Extending the Dashboard](./extending-the-dashboard)** — hướng dẫn đầy đủ bao gồm:
- Lược đồ YAML chủ đề - bảng màu, kiểu chữ, bố cục, nội dung, kiểu thành phần, colorOverrides, customCSS
- Các biến thể về bố cục —
`standard
,
`cockpit
,
`tiled
- Tệp kê khai plugin, SDK, vị trí shell, vị trí trong phạm vi trang (đưa tiện ích vào các trang tích hợp mà không ghi đè chúng), các tuyến FastAPI phụ trợ
- Hướng dẫn đầy đủ về chủ đề và plugin kết hợp (Bản demo buồng lái Strike Freedom)
- Khám phá, tải lại và xử lý sự cố