High-Level Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• src/App.tsx
• src/WorkbenchContext.tsx
• src/lib/benchmark.ts
• src/utils/modelInfo.ts
• src/components/Sidebar.tsx
• src/components/CenterCanvas.tsx
• src/components/OnnxGraphVisualizer.tsx
• src/types.ts

The ONNX-Station (also referred to as OPTIMUM.WORKBENCH) is a specialized web-based IDE designed for configuring, simulating, and benchmarking the export of machine learning models to the ONNX format via the Hugging Face Optimum CLI. It provides a local-first environment where users can define model ingestion parameters, execution providers, and optimization levels while visualizing the resulting operator distribution and performance metrics.

The architecture is built on a React-based frontend that leverages a centralized context for state management, D3.js for complex data visualization of model graphs, and onnxruntime-web for client-side benchmarking.

Sources: src/App.tsx, src/WorkbenchContext.tsx:103, src/components/CenterCanvas.tsx:28

Core System Components

The system is organized into three primary architectural layers: the Application State Layer (Context), the UI Composition Layer, and the Logic Engines (Benchmark & Simulation).

Application State Layer

The WorkbenchContext serves as the "brain" of the application. It manages the ExportConfig, which encapsulates all parameters required for an optimum-cli command, as well as the application lifecycle states such as exporting, benchmarking, and log orchestration.

Sources: src/WorkbenchContext.tsx:64-101, src/types.ts:32-62

Component Hierarchy

The UI is composed of functional blocks that interact directly with the Workbench state:

• Sidebar: Handles model sourcing (Hub vs Local), task definition, and ingestion parameters.
• CenterCanvas: Displays the generated CLI command string and the operator visualizer.
• Console: Provides a real-time terminal-like log of orchestration steps and system memory usage.

Sources: src/App.tsx:16-24, src/components/Sidebar.tsx:32, src/components/Console.tsx:31

The diagram above shows the component hierarchy and the flow of state/actions from the WorkbenchProvider to the functional UI modules. Sources: src/App.tsx, src/WorkbenchContext.tsx

Data Flow and Orchestration

The application facilitates two primary workflows: Model Export Simulation and Live Performance Benchmarking.

Export Simulation Workflow

When a user triggers "Compile to ONNX," the system does not execute the Python-based Optimum CLI directly in the browser. Instead, it simulates the export pipeline, providing granular logs of execution steps (e.g., resolving execution providers, tracing PyTorch operations) and uses a simulation utility to predict the ONNX operator distribution.

Sources: src/WorkbenchContext.tsx:216-259, src/utils/modelInfo.ts:7-14

The sequence shows the simulated export process where logs are piped to the console while model information is generated based on the configuration. Sources: src/WorkbenchContext.tsx:216-300, src/utils/modelInfo.ts

Benchmarking Logic

The benchmarking module uses onnxruntime-web to execute real inference passes if a model is accessible (via CORS on Hugging Face or via a locally ingested .onnx file).

• Execution Providers: Defaults to wasm but attempts webgpu if CUDA is selected and the browser supports it.
• Input Generation: Uses generateSyntheticInputs to create tensors based on the selected modality (Text, Vision, Audio) and shape overrides.
• Metrics: Calculates Mean Latency, p50/p95 percentiles, and throughput (tokens/sec, images/sec, or frames/sec).

Sources: src/lib/benchmark.ts:46-78, src/lib/benchmark.ts:133-145, src/lib/benchmark.ts:245-265

Technical Configuration Model

The ExportConfig interface defines the schema for the entire application state, mapping UI inputs to CLI arguments.

Field	Type	Description	CLI Mapping
modelPath	string	Repository ID or local file path	-m
task	string	ONNX task mapping (e.g., causal-lm)	--task
opset	number	ONNX operator version (14, 15, 17)	--opset
dtype	string	Precision override (fp32, fp16, bf16)	--dtype
optimize	string	Optimization level (O1 through O4)	--optimize
monolith	boolean	Prevent weight sharding	--monolith

Sources: src/types.ts:32-62, src/WorkbenchContext.tsx:135-165

Model Information & Visualization

The OnnxGraphVisualizer uses D3.js to render the theoretical or actual results of a compilation.

1. Operator Instance Counts: A horizontal bar chart showing the frequency of operations like MatMul, Conv, or LayerNormalization.
2. VRAM Map: A donut chart estimating memory allocation per operator category.
3. Simulation Logic: The generateCompiledModelInfo function calculates these values by applying multipliers based on the numLayers (derived from model name), dtypeScale (e.g., 0.5 for fp16), and optMemMultiplier (based on optimization level).

Sources: src/components/OnnxGraphVisualizer.tsx:101-115, src/utils/modelInfo.ts:41-65

The class diagram illustrates the relationship between the user configuration and the resulting analyzed model metadata. Sources: src/types.ts:32-90

Conclusion

ONNX-Station architecture centers on a robust state management system that bridges the gap between static CLI configuration and dynamic performance feedback. By combining a simulation engine with a live Web runtime (ONNX Runtime Web), it provides developers with a predictive workspace for optimizing transformer and CNN architectures for edge deployment.

Sources: src/WorkbenchContext.tsx, src/lib/benchmark.ts, src/utils/modelInfo.ts