Main App Shell
Relevant source files
The following files were used as context for generating this wiki page:
The Main App Shell of the ONNX-Station project serves as the primary user interface and orchestration layer for managing ONNX model exports and benchmarks. It provides a unified environment where users can configure model parameters, visualize graph distributions, execute compilation simulations, and monitor real-time orchestration logs. The shell is built using React and utilizes a centralized context provider to synchronize state across its various layout components.
Sources: src/App.tsx:11-25, src/WorkbenchContext.tsx:84-118
Architecture and Layout
The application shell follows a classic IDE-style layout, partitioned into three main functional areas wrapped in a global WorkbenchProvider. This provider manages the complex state involving export configurations, benchmarking results, and logging.
Component Structure
- Sidebar: Located on the left, it contains the input controls for model sources, tasks, and ingestion parameters.
- CenterCanvas: The primary workspace that displays generated CLI commands, graph visualizations, and hardware target settings.
- Console: A persistent footer panel that serves as a terminal for orchestration logs and system memory monitoring.
The application uses a flexbox-based column layout for the root, with the main work area (Sidebar and CenterCanvas) occupying the available vertical space above the Console.
Sources: src/App.tsx:13-25, src/WorkbenchContext.tsx:120-140
State Orchestration
The WorkbenchProvider is the engine of the App Shell. It maintains the ExportConfig object, which defines how the optimum-cli command is generated and how the benchmark runner behaves.
Core Data Flow
When a user updates a setting in the Sidebar or CenterCanvas, the updateConfig function is triggered. This invalidates the current "compiled" status and prepares the shell for a new export or benchmark run.
Key UI Components
1. Sidebar (Configuration Panel)
The Sidebar handles the "Model Ingestion" phase. It allows users to toggle between Hugging Face Hub sources and local file paths. It also dynamically updates the available "ONNX Task Map" based on the selected modality (audio, text, or vision).
| Feature | Description | File Reference |
|---|---|---|
| Optimization Profiles | Load system presets or save custom user configurations to local storage. | Sidebar.tsx:37-88 |
| Source Strategy | Toggle between 'hub' and 'local' model ingestion. | Sidebar.tsx:93-113 |
| Task Definition | Select modality and specific ONNX tasks (e.g., causal-lm, speech-recognition). | Sidebar.tsx:189-222 |
Sources: src/components/Sidebar.tsx, src/types.ts:3-23
2. CenterCanvas (Workspace)
The CenterCanvas serves as the interactive dashboard for the export process. It provides a real-time preview of the optimum-cli command string and hosts the hardware target selectors.
- Command Preview: Uses
getCommandPreview()to generate a formatted shell command based on the current state ofExportConfig. - Export Specifications: Controls for Opset version, Graph Optimization Level (O1-O4), Execution Provider (CPU/CUDA), and Precision Overrides (fp32, fp16, bf16).
- Benchmark Metrics: Displays Mean/p50/p95 latency, Throughput, and Estimated Memory usage once a benchmark completes.
Sources: src/components/CenterCanvas.tsx:14-110, src/WorkbenchContext.tsx:174-210
3. Console (Terminal/Orchestration Log)
The Console provides feedback on the internal operations of the App Shell. It tracks success, warning, and error counts while monitoring browser memory usage via the performance.memory API.
Configuration and Presets
The system includes pre-defined SYSTEM_PRESETS to guide users toward common optimization targets. These are defined within the context and can be applied to the shell state instantly.
| Preset Name | Opset | Device | Dtype | Optimization |
|---|---|---|---|---|
| WebGPU fp16 Target | 17 | cuda | fp16 | O3 |
| CPU fp32 Portable | 14 | cpu | fp32 | O1 |
| CUDA bf16 Heavy | 17 | cuda | bf16 | O4 |
| Low-Memory Raw Debug | 14 | cpu | fp32 | none |
Sources: src/WorkbenchContext.tsx:7-44
Summary
The Main App Shell functions as a comprehensive IDE for ONNX model lifecycle management. By centralizing logic in the WorkbenchContext and distributing UI responsibilities across specialized components like the Sidebar and CenterCanvas, the shell ensures a consistent state for generating CLI commands and executing performance benchmarks. The inclusion of a real-time Console and memory monitor provides the necessary transparency for debugging complex model transformations.