Console Component
Relevant source files
The following files were used as context for generating this wiki page:
The Console Component serves as the primary diagnostic and feedback interface within the ONNX-Station workbench. It functions as a "Terminal / Orchestration Log," providing real-time visibility into the application's internal processes, including model compilation steps, benchmarking progress, and system resource utilization.
Positioned at the bottom of the main application layout, the component acts as a sink for log data generated by the WorkbenchProvider. It captures various event levels—such as informational updates, warnings, and critical errors—allowing developers to monitor the status of optimum-cli command simulations and ONNX Runtime execution providers.
Sources: src/components/Console.tsx:4-7, src/App.tsx:16-24, src/WorkbenchContext.tsx:90-111
Architecture and Data Flow
The Console component follows a reactive pattern, subscribing to the global state managed by WorkbenchContext. It consumes an array of LogEntry objects and renders them in a scrollable, monospace interface.
State Integration
The component utilizes the useWorkbench hook to access the logs state. Whenever a new log is added via the addLog function in the context, the Console component triggers a re-render and automatically scrolls to the most recent entry using a useRef tied to a "bottom" marker.
The diagram shows the unidirectional data flow from the WorkbenchContext to the Console component for log rendering and memory monitoring.
Sources: src/components/Console.tsx:5-13, src/WorkbenchContext.tsx:101-111
Memory Monitoring
The component implements a local effect to track browser-level memory metrics using the performance.memory API. It updates every 2000ms to provide a live view of the JS Heap Size.
| Metric | Source | Description |
|---|---|---|
| MEM | usedJSHeapSize | Current memory utilized by the JavaScript heap in MB. |
| PEAK | Math.max | The highest recorded memory usage during the session. |
Sources: src/components/Console.tsx:15-25
Log Categorization and Visualization
Logs are visually differentiated based on their LogLevel. The component maps internal levels to specific colors and icons to aid in quick status identification.
Log Levels and Formatting
The component identifies and formats logs based on the following criteria:
| Level | Icon | Color (Tailwind) | Description |
|---|---|---|---|
info | [INFO] | text-slate-400 | Standard orchestration messages. |
warn | [WARN] | text-amber-400 | Non-critical validation or compatibility alerts. |
error | [ERR!] | text-red-500 | Critical failures in compilation or benchmarking. |
success | [ OK ] | text-emerald-500 | Successful completion of operations. |
command | $ | text-emerald-400 | Simulated CLI commands (starts with optimum-cli). |
Sources: src/components/Console.tsx:32-65, src/types.ts:74-74
Sequence of Compilation Logs
When a user initiates the "Compile to ONNX" process, the WorkbenchContext generates a sequence of logs that are rendered in the Console.
The sequence diagram illustrates the typical progression of logs during a successful model export process.
Sources: src/WorkbenchContext.tsx:186-258
Component Layout
The Console is structured as a fixed-height footer (h-56) with two primary sub-sections:
- Status Bar (
h-7): Displays the "Terminal / Orchestration Log" label alongside live telemetry, including memory stats and aggregate counts for Successes, Warnings, and Errors. - Log Output Area: A scrollable container (
overflow-y-auto) usingfont-monoandtext-[11px]to mimic a terminal environment. Each log entry includes a timestamp and a color-coded level indicator.
Sources: src/components/Console.tsx:27-50
Conclusion
The Console Component provides a critical transparency layer for the ONNX-Station workbench. By integrating real-time system metrics with a structured event log, it enables users to debug complex model conversion and benchmarking pipelines directly within the browser interface. It ensures that the outcomes of background orchestration tasks in the WorkbenchContext are immediately actionable.
Sources: src/components/Console.tsx:5-9, src/WorkbenchContext.tsx:186-189