Sidebar Navigation
Relevant source files
The following files were used as context for generating this wiki page:
The Sidebar Navigation component serves as the primary configuration interface for the ONNX Station workbench. It provides a structured, vertical control panel where users define model sources, task modalities, and ingestion parameters. Its purpose is to manage the ExportConfig state, which dictates how models are converted from source frameworks (like PyTorch or TensorFlow) into the ONNX format.
Located on the left side of the application, the Sidebar interacts directly with the WorkbenchContext to synchronize user inputs with the live command preview and the backend export engine. It organizes complex CLI flags into logical sections: Optimization Profiles, Model Source, Task Definition, and Model Ingestion Parameters.
Sources: src/App.tsx:16-19, src/components/Sidebar.tsx:10-30
Architecture and Layout
The Sidebar is a functional React component that utilizes a flexbox-based column layout. It is pinned to the left with a fixed width of 320px and features an overflow-y-auto container to handle various configuration sections.
The Sidebar consumes the useWorkbench hook to access and update the global configuration state.
Sources: src/components/Sidebar.tsx:32-34, src/WorkbenchContext.tsx:300-305
Optimization Profiles
This section manages Presets, which are pre-defined or user-saved configurations for specific hardware targets. Users can select from SYSTEM_PRESETS (e.g., "WebGPU fp16 Target", "CPU fp32 Portable") or save their current configuration as a custom profile.
Logic Flow: Loading a Preset
When a user selects a preset from the dropdown, the loadPreset function is triggered, which overwrites the current config state with the preset's values.
Model Source Strategy
The Sidebar allows users to toggle between two primary model acquisition strategies:
- Hugging Face Hub: Downloads models using a Repository ID (e.g.,
openai/whisper-base). - Local Path: References a directory path or allows "Local-First" ingestion via a file uploader.
Ingesting Local Models
If "Local Path" is selected, a specialized drop zone appears. This allows users to drag and drop .onnx, .bin, or .pb files directly into the browser. The Sidebar uses updateLocalFile to create an object URL for memory-mapped access during benchmarking.
Sources: src/components/Sidebar.tsx:125-175, src/WorkbenchContext.tsx:109-123
Task Definition and Modality
The Task Definition section controls how the Optimum CLI interprets the model's architecture.
| Parameter | Functionality | UI Element |
|---|---|---|
| Modality | Sets input/pre-processing specs (audio, text, vision). | Segmented Buttons |
| ONNX Task Map | Maps to the --task flag (e.g., automatic-speech-recognition). | Select Dropdown |
When the modality changes, the Sidebar automatically resets the available tasks via the TASKS constant defined in the project types.
Sources: src/components/Sidebar.tsx:205-236, src/WorkbenchContext.tsx:101-107
Model Ingestion Parameters
These parameters define the environment used to initialize the model before the ONNX export begins.
- Source Framework: Tied to the
--frameworkargument, allowing a choice between PyTorch (pt) and TensorFlow (tf). - Prefer Safetensors: Restricts weights discovery to
.safetensorsfiles for secure loading. - Cache Directory: Maps to
--cache_dirto avoid redundant downloads across sessions. - Trust Remote Code: A checkbox for the
--trust-remote-codeflag, necessary for custom model architectures.
Sources: src/components/Sidebar.tsx:244-290, src/WorkbenchContext.tsx:135-155
Helper Components
InfoTooltip
The Sidebar extensively uses the InfoTooltip component to provide context for CLI flags. These tooltips are triggered on a 400ms hover delay and display documentation derived from the Optimum CLI reference.
// Example usage in Sidebar.tsx
<InfoTooltip
position="bottom-left"
text="Configures whether the model is downloaded dynamically... or referenced from local workspace directories."
/>
Sources: src/components/InfoTooltip.tsx:10-25, src/components/Sidebar.tsx:106-108
Conclusion
The Sidebar Navigation acts as the command center of ONNX Station. By abstracting complex CLI arguments into a reactive UI, it ensures that the generated optimum-cli command (visible in the Center Canvas) is technically valid and optimized for the intended hardware target.
Sources: src/components/Sidebar.tsx:32-34, src/WorkbenchContext.tsx:125-127