Center Canvas Component
Relevant source files
The following files were used as context for generating this wiki page:
The CenterCanvas component serves as the primary workspace and orchestration hub within the ONNX-Station application. It provides a centralized interface for configuring ONNX export parameters, visualizing model graph structures, and monitoring benchmarking performance. As the main interaction area between the Sidebar and the Console, it translates user configurations into actionable CLI commands and execution metrics.
Sources: src/App.tsx:16-19, src/components/CenterCanvas.tsx:8-10
Component Architecture and Layout
The CenterCanvas is structured as a flexible, vertical column container that occupies the remaining viewport space not taken by the sidebar. It is divided into three primary functional areas: a sticky top header for global actions, a generated command preview section, and a configuration grid for hardware targets and axiomatic dimensions.
The diagram above illustrates the hierarchical layout of the CenterCanvas and its child modules.
Sources: src/components/CenterCanvas.tsx:21-35, src/components/CenterCanvas.tsx:64-70
Sticky Header and Global Controls
The header maintains the application's state context, displaying status badges such as EXPORTING..., BENCHMARKING..., or READY. It hosts critical action buttons that interface with the WorkbenchContext to trigger the compilation and benchmarking pipelines.
| Action | Function Reference | Description |
|---|---|---|
| CONFIG.JSON | downloadConfig | Downloads the current ExportConfig as a JSON file. |
| BENCHMARK ORT | startBenchmark | Initiates the ONNX Runtime performance measurement sequence. |
| COMPILE TO ONNX | startExport | Triggers the Optimum-CLI compilation simulation and graph abstraction. |
| CANCEL | cancelExport/cancelBenchmark | Aborts active background processes and resets UI state. |
Sources: src/components/CenterCanvas.tsx:24-60, src/WorkbenchContext.tsx:191-206
Export Configuration and CLI Interoperability
A core feature of the CenterCanvas is the Generated Request String section. This block dynamically renders the optimum-cli command based on the current state of the ExportConfig object.
This flow demonstrates how user inputs in the canvas immediately propagate to the command preview via the shared context.
Sources: src/WorkbenchContext.tsx:165-190, src/components/CenterCanvas.tsx:73-80
Hardware Target & Execution Parameters
The canvas organizes optimum-cli flags into logical groupings. The "Hardware Target" section manages parameters that dictate the final runtime behavior of the ONNX model.
- Target Opset: Configures the
--opsetversion (e.g., 14, 15, 17) to enable modern neural components. - Graph Optimization Level: Maps to
--optimize(O1 through O4), directing the compiler to fuse sequential operations into unified kernels. - Execution Provider: Specifies the
--devicetarget, supportingcpuorcuda. - Precision Override: Specifies
--dtype, allowing forfp32,fp16, orbf16tensor memory optimization.
Sources: src/components/CenterCanvas.tsx:102-148, src/WorkbenchContext.tsx:168-175
Axiomatic Dimensions and Modality Overrides
The right column of the CenterCanvas provides inputs for structural dimension overrides, which vary based on the selected model modality (Text, Vision, or Audio). These inputs are essential for confirming dynamic axis capabilities and graph validation.
Input Mapping by Modality
| Modality | Parameters | CLI Mapping |
|---|---|---|
| Text | SEQUENCE_LENGTH, NUM_CHOICES, BATCH_SIZE | --sequence_length, --num_choices, --batch_size |
| Vision | WIDTH, HEIGHT, NUM_CHANNELS | --width, --height, --num_channels |
| Audio | FEATURE_SIZE, MAX_FRAMES, AUDIO_SEQ_LENGTH | --feature_size, --nb_max_frames, --audio_sequence_length |
Sources: src/components/CenterCanvas.tsx:205-230, src/WorkbenchContext.tsx:184-188
Performance Metrics Visualization
When a benchmark is successfully executed via runBenchmark, the CenterCanvas renders a Performance Execution Metrics card. This card displays data derived from the BenchmarkResult interface.
- Mean Latency: The average time in milliseconds for a single inference pass.
- Throughput: Measured in modality-specific units (e.g.,
tokens/secorimages/sec). - Memory Usage: Estimated VRAM/RAM footprint in MB.
- File Size: The actual size of the ONNX model binary on disk or in memory.
Sources: src/lib/benchmark.ts:20-30, src/components/CenterCanvas.tsx:252-276
Benchmark Result Processing
// src/components/CenterCanvas.tsx:258-267
<MetricBox label="Mean Latency" value={`${benchmarkResult.meanLatencyMs} ms`} />
<MetricBox label="Throughput" value={`${benchmarkResult.throughput} ${benchmarkResult.throughputUnit}`} />
<MetricBox label="Est. Memory" value={`${benchmarkResult.memoryUsageMb} MB`} />
<MetricBox label="File Size" value={`${((benchmarkResult.modelSizeBytes || 0) / 1024 / 1024).toFixed(2)} MB`} />
Summary
The CenterCanvas acts as the visual and logical bridge between high-level user configuration and low-level ONNX compilation details. By integrating the OnnxGraphVisualizer for structural analysis and the BenchmarkResult for performance validation, it provides a comprehensive environment for optimizing AI models for deployment.
Sources: src/components/CenterCanvas.tsx:8-20, src/components/OnnxGraphVisualizer.tsx:325-335