Dependencies and Libraries
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The ONNX-Station project is a React-based workbench designed for configuring, exporting, and benchmarking AI models using the ONNX (Open Neural Network Exchange) format. It leverages a modern frontend stack to provide a local-first environment for model optimization and performance analysis.
The architecture relies heavily on onnxruntime-web for in-browser inference and d3 for complex data visualizations of model operator distributions and memory maps. The project is built using Vite, ensuring a high-performance development environment with integrated support for Tailwind CSS and TypeScript.
Sources: package.json:1-38, src/WorkbenchContext.tsx:1-50, README.md:1-20
Core Runtime Dependencies
The project utilizes several critical libraries to handle model execution, UI rendering, and state management.
ONNX Runtime and Machine Learning
- onnxruntime-web (^1.26.0): The primary engine for running ONNX models within the browser. It supports multiple execution providers, including WebAssembly (WASM) for CPU tasks and WebGPU for accelerated hardware performance.
- @google/genai (^2.4.0): Integrated for generative AI capabilities, likely used in conjunction with the workbench's broader AI Studio integration.
Sources: package.json:19, package.json:27, src/lib/benchmark.ts:106-120
Frontend Framework and UI
- React (^19.0.1) & React-DOM: The core UI library used to build the component-based architecture of the workbench.
- Lucide-React (^0.546.0): Provides the iconography for the interface, including symbols for hardware, databases, and configuration tasks.
- Motion (^12.23.24): Used for fluid UI transitions and animations within the workbench components.
- Tailwind CSS (^4.1.14): The utility-first CSS framework used for styling the application.
Sources: package.json:25-30, src/components/Sidebar.tsx:3-4
Data Visualization
- D3 (^7.9.0): Used for rendering high-fidelity visualizations of the model's internal graph, specifically focusing on operator counts and VRAM allocation maps.
Sources: package.json:22, src/components/OnnxGraphVisualizer.tsx:2-6
Development and Build Tooling
The project environment is managed via Vite and TypeScript to ensure type safety and efficient bundling.
| Dependency | Purpose | File Reference |
|---|---|---|
vite | Next-generation frontend tool for development and building. | package.json:30 |
typescript | Static type checking for robust code analysis. | package.json:36 |
@tailwindcss/vite | Integration plugin for Tailwind CSS v4 in the Vite pipeline. | package.json:20 |
@vitejs/plugin-react | Official Vite plugin for React support (HMR, etc.). | package.json:21 |
tsx | Execute TypeScript files directly in Node.js. | package.json:35 |
Sources: package.json:20-36, vite.config.ts:1-10
Library Integration Architecture
The following diagram illustrates how the core libraries interact within the workbench system to process models and generate performance metrics.
The diagram shows the flow from the React UI through the workbench logic layer, which orchestrates benchmarks via the ONNX Runtime using specific hardware providers. D3 is then used to visualize the resulting model metadata back to the UI.
Sources: src/WorkbenchContext.tsx, src/lib/benchmark.ts, src/components/OnnxGraphVisualizer.tsx
Benchmarking Logic and ORT Configuration
The src/lib/benchmark.ts file directly interfaces with onnxruntime-web to initialize inference sessions and measure performance.
Execution Provider Resolution
The system attempts to resolve the best available hardware accelerator. If cuda (WebGPU) is requested but unavailable, it degrades to wasm.
ORT Session Options
The workbench configures the runtime using specific InferenceSession.SessionOptions:
executionProviders: Array containingwebgpuorwasm.graphOptimizationLevel: Maps workbench presets (O1-O4) to ORT levels (basic,extended,all, ordisabled).logSeverityLevel: Set to 3 to manage console output verbosity.
Sources: src/lib/benchmark.ts:153-170
Conclusion
The ONNX-Station workbench is a sophisticated integration of React, D3, and ONNX Runtime Web. By leveraging onnxruntime-web's ability to utilize WebGPU and WASM, it provides a high-performance environment for model analysis directly in the browser. The combination of Vite for build orchestration and D3 for data visualization ensures that developers have a responsive and informative interface for model optimization.
Sources: package.json, src/lib/benchmark.ts, src/WorkbenchContext.tsx