Web UI Dashboard
Relevant source files
The following files were used as context for generating this wiki page:
The Web UI Dashboard provides a local interface for the Colibrì inference engine. It allows you to interact with large Mixture-of-Experts (MoE) models like GLM-5.2 through a web-based chat interface while monitoring real-time hardware telemetry and expert routing behavior.
The dashboard consists of three primary views: Chat, Brain, and Profiling. It connects to a local engine via an OpenAI-compatible API endpoint to stream responses and collect system metrics.
Sources: web/src/App.tsx:288-292, web/src/i18n/en.ts:4-6, site/index.html:12-14
Dashboard Architecture
The dashboard is built as a React-based single-page application (SPA) that communicates with a C-based backend engine. It uses a sidebar for persistent configuration and a main panel that toggles between the chat, brain, and profiling views.
The diagram above illustrates the communication paths between the React components and the backend engine API endpoints.
Sources: web/src/App.tsx:115-135, web/src/Brain.tsx:48-64, web/src/Profiling.tsx:69-80
Main Features and Components
Sidebar Controls
The sidebar manages the connection to the inference engine and provides controls for model parameters.
- Connection Management: You enter the API endpoint and optional API key to probe the server.
- Hardware Telemetry: Displays CPU information, GPU count, VRAM usage, and RAM availability.
- Runtime Status: Shows scheduler metrics including active, queued, and completed requests.
- Expert Tiering: A visual bar represents the distribution of experts across VRAM, RAM, and Disk.
- Inference Settings: You can select models, toggle reasoning modes, and adjust temperature or max token limits.
Sources: web/src/App.tsx:294-358, web/src/index.css:48-112
Chat Interface
The Chat view provides a standard LLM interaction experience. It uses the streamChat function to handle streaming responses from the engine.
- KV Sessions: Supports multiple KV cache slots (sessions) to maintain independent conversation contexts.
- Live Metrics: Displays real-time generation speed (tok/s), Time to First Token (TTFT), and total token usage.
- Truncation Alerts: Notifies you if a response is cut off by the
maxTokenslimit.
Sources: web/src/App.tsx:169-218, web/src/App.tsx:382-418, web/src/index.css:129-160
Expert Cortex (Brain View)
The Brain view visualizes the "Expert Cortex" of the model, rendering a grid of thousands of experts across model layers.
- Real-time Activity: A canvas-based grid flashes experts as they are routed during a turn.
- Heat Mapping: Brightness indicates routing heat (frequency of selection), while colors represent the hardware tier (VRAM, RAM, or Disk) where the expert resides.
- Expert Atlas: When available, hovering over an expert displays its specific role (e.g., "Specialist: medicine") and semantic affinity.
The rendering logic maps raw expert metadata into visual tiers and heat levels.
Sources: web/src/Brain.tsx:71-105, web/src/Brain.tsx:110-141
System Profiling
The Profiling view breaks down the engine's latency into specific phases for each generation turn.
| Phase | Description | Source File |
|---|---|---|
| I/O Wait | Time spent waiting for experts to stream from disk. | web/src/Profiling.tsx:9 |
| Expert Matmul | Time spent on expert matrix multiplication. | web/src/Profiling.tsx:10 |
| Attention | Time spent on self-attention mechanisms. | web/src/Profiling.tsx:11 |
| LM Head | Time spent on the Language Model head (output projection). | web/src/Profiling.tsx:12 |
| Other | Miscellaneous overhead (scheduler, networking, etc). | web/src/Profiling.tsx:13 |
The dashboard provides a ShareBar to visualize the percentage of time spent in each phase relative to the total "Wall time."
Sources: web/src/Profiling.tsx:19-27, web/src/Profiling.tsx:84-118
Data Models and State
Inference Configuration
The dashboard persists several settings in localStorage to maintain state across sessions.
| Setting | Type | Default | Description |
|---|---|---|---|
colibri.baseUrl | string | http://127.0.0.1:8000/v1 | Target engine API address. |
colibri.model | string | glm-5.2-colibri | Selected model ID. |
temperature | number | 0.7 | Controls randomness of output. |
maxTokens | number | 4096 | Upper limit for generated tokens. |
cacheSlot | number | 0 | Active KV cache session ID. |
Sources: web/src/App.tsx:57-75, web/src/App.tsx:103-105
API Integration
The dashboard relies on four primary backend interactions to populate its views.
Styling and Layout
The dashboard uses a dark-themed UI built with Tailwind CSS. It employs a responsive grid system (app-shell) that switches from a side-by-side layout (292px sidebar + flexible main) to a stacked layout on screens smaller than 820px.
Sources: web/src/index.css:21-46, web/src/index.css:168-175
The Web UI Dashboard serves as the primary observability tool for the Colibrì engine. By combining real-time hardware metrics with deep-dive expert visualization and performance profiling, it allows users to optimize model execution on consumer-grade hardware.