311 lines
13 KiB
Markdown
311 lines
13 KiB
Markdown
# RustyTorch++ Demo UI
|
|
|
|
React + TypeScript + Tauri frontend for the RustyTorch++ demo platform. Features 18 interactive demos with GPU-accelerated backends.
|
|
|
|
## Stack
|
|
|
|
- **React 19** - UI framework
|
|
- **TypeScript 5.6** - Type safety
|
|
- **Three.js** - WebGL 3D/2D visualization (via @react-three/fiber)
|
|
- **Recharts** - Data visualization and charts
|
|
- **Tauri 2.x** - Desktop app framework
|
|
- **Vite 6** - Build tooling
|
|
- **Vitest** - Testing framework
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# Install dependencies
|
|
pnpm install
|
|
|
|
# Development server (React only)
|
|
pnpm dev
|
|
|
|
# Development with Tauri backend
|
|
pnpm tauri dev
|
|
|
|
# Production build
|
|
pnpm tauri build
|
|
```
|
|
|
|
## Testing
|
|
|
|
```bash
|
|
# Run all tests
|
|
pnpm test
|
|
|
|
# Watch mode
|
|
pnpm test:watch
|
|
|
|
# Coverage report
|
|
pnpm test:coverage
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── App.tsx # Main router component
|
|
├── main.tsx # React entry point
|
|
├── index.css # Global styles
|
|
│
|
|
├── pages/
|
|
│ ├── Home.tsx # Demo gallery landing page
|
|
│ └── demos/
|
|
│ ├── HemodynamicsDemo.tsx # Virtual Catheter
|
|
│ ├── MREDemo.tsx # MRE Elastography
|
|
│ ├── BioheatDemo.tsx # Thermal Ablation
|
|
│ ├── SlideScopeDemo.tsx # SlideScope Pathology
|
|
│ ├── NeuroDemo.tsx # RustyNeuro MEG/EEG
|
|
│ ├── NeuralOperatorDemo.tsx # Neural Operator PDE
|
|
│ ├── PIDDMDemo.tsx # Physics-Informed Diffusion
|
|
│ ├── DigitalTwinDemo.tsx # Medical Digital Twin
|
|
│ ├── FNOBenchmarkDemo.tsx # FNO Benchmark
|
|
│ ├── PINNBenchmarkDemo.tsx # PINN Benchmark
|
|
│ ├── InferenceProfilerDemo.tsx # Inference Profiler
|
|
│ ├── ModelZooDemo.tsx # Model Zoo
|
|
│ ├── PortfolioDemo.tsx # Portfolio Optimizer
|
|
│ ├── RiskAnalyzerDemo.tsx # Risk Analyzer
|
|
│ ├── TimeSeriesDemo.tsx # Time Series Forecast
|
|
│ ├── ImageClassifierDemo.tsx # Image Classifier
|
|
│ ├── ObjectDetectorDemo.tsx # Object Detector
|
|
│ └── SegmentationDemo.tsx # Segmentation
|
|
│
|
|
├── components/
|
|
│ ├── index.ts # Barrel exports
|
|
│ ├── DemoCard.tsx # Demo gallery card
|
|
│ ├── DemoLayout.tsx # Common demo page layout
|
|
│ │
|
|
│ ├── hemodynamics/ # Virtual Catheter components
|
|
│ │ ├── VesselCanvas.tsx # Three.js 2D vessel renderer
|
|
│ │ ├── ControlPanel.tsx # Simulation parameters
|
|
│ │ ├── Colorbar.tsx # Dynamic color legend
|
|
│ │ ├── PerformanceMonitor.tsx # FPS/inference metrics
|
|
│ │ ├── GeometryTools.tsx # Tool selection toolbar
|
|
│ │ ├── GeometryEditor.tsx # Interactive canvas overlay
|
|
│ │ ├── PulsatileControls.tsx # Cardiac cycle controls
|
|
│ │ └── ExportControls.tsx # Screenshot/data export
|
|
│ │
|
|
│ ├── mre/ # MRE Elastography components
|
|
│ │ ├── MRECanvas.tsx # Wave field visualization
|
|
│ │ ├── MREControls.tsx # Frequency/wavelength controls
|
|
│ │ └── StiffnessMap.tsx # Stiffness colormap
|
|
│ │
|
|
│ ├── bioheat/ # Thermal Ablation components
|
|
│ │ ├── TemperatureCanvas.tsx # 3D temperature field
|
|
│ │ ├── HeatSourcePanel.tsx # Source configuration
|
|
│ │ └── ThermalDoseDisplay.tsx # CEM43 visualization
|
|
│ │
|
|
│ ├── slidescope/ # SlideScope components
|
|
│ │ ├── SlideViewer.tsx # Deep zoom tile viewer
|
|
│ │ ├── StainChannels.tsx # Individual stain display
|
|
│ │ └── NMFProgress.tsx # Processing progress
|
|
│ │
|
|
│ ├── neuro/ # RustyNeuro components
|
|
│ │ ├── SignalViewer.tsx # EEG/MEG signal display
|
|
│ │ ├── TopoMap.tsx # Topographic mapping
|
|
│ │ └── ConnectivityMatrix.tsx # Connectivity visualization
|
|
│ │
|
|
│ ├── neural-operator/ # Neural Operator components
|
|
│ │ ├── PDECanvas.tsx # Interactive PDE canvas
|
|
│ │ ├── PDEControls.tsx # PDE type selection
|
|
│ │ ├── TrainingProgress.tsx # Training status
|
|
│ │ └── LossChart.tsx # Loss curve visualization
|
|
│ │
|
|
│ ├── piddm/ # PIDDM components
|
|
│ │ ├── DiffusionCanvas.tsx # Diffusion process viz
|
|
│ │ ├── SamplingControls.tsx # Sampling configuration
|
|
│ │ └── PhysicsLossChart.tsx # Physics loss tracking
|
|
│ │
|
|
│ ├── digital-twin/ # Digital Twin components
|
|
│ │ ├── OrganViewer.tsx # 3D organ visualization
|
|
│ │ ├── ProbePanel.tsx # Probe placement
|
|
│ │ └── SimulationResults.tsx # Simulation output
|
|
│ │
|
|
│ ├── benchmark/ # Benchmark components
|
|
│ │ ├── BenchmarkChart.tsx # Comparison charts
|
|
│ │ ├── MetricsTable.tsx # Results table
|
|
│ │ └── ConfigPanel.tsx # Benchmark configuration
|
|
│ │
|
|
│ ├── inference-profiler/ # Profiler components
|
|
│ │ ├── LatencyChart.tsx # Latency distribution
|
|
│ │ ├── ThroughputChart.tsx # Throughput over batch sizes
|
|
│ │ ├── MemoryChart.tsx # Memory usage
|
|
│ │ └── ProfilerControls.tsx # Model/device selection
|
|
│ │
|
|
│ ├── model-zoo/ # Model Zoo components
|
|
│ │ ├── ModelGrid.tsx # Model card grid
|
|
│ │ ├── ModelCard.tsx # Individual model display
|
|
│ │ └── InferencePanel.tsx # Run inference UI
|
|
│ │
|
|
│ ├── portfolio/ # Portfolio components
|
|
│ │ ├── EfficientFrontier.tsx # Frontier visualization
|
|
│ │ ├── AssetAllocation.tsx # Pie chart allocation
|
|
│ │ └── CorrelationMatrix.tsx # Asset correlations
|
|
│ │
|
|
│ ├── risk/ # Risk Analyzer components
|
|
│ │ ├── VaRChart.tsx # Value-at-Risk visualization
|
|
│ │ ├── StressScenarios.tsx # Stress test results
|
|
│ │ └── RiskDecomposition.tsx # Risk breakdown
|
|
│ │
|
|
│ ├── timeseries/ # Time Series components
|
|
│ │ ├── ForecastChart.tsx # Forecast visualization
|
|
│ │ ├── ModelSelector.tsx # Model type selection
|
|
│ │ └── MetricsDisplay.tsx # RMSE, MAE, MAPE
|
|
│ │
|
|
│ ├── vision/ # Vision components (shared)
|
|
│ │ ├── ImageUploader.tsx # Image upload/sample select
|
|
│ │ ├── ImageCanvas.tsx # Base image canvas
|
|
│ │ └── SampleImages.tsx # Sample image gallery
|
|
│ │
|
|
│ ├── image-classifier/ # Classifier components
|
|
│ │ ├── ClassificationResults.tsx # Top-K predictions
|
|
│ │ └── ConfidenceBar.tsx # Confidence visualization
|
|
│ │
|
|
│ ├── object-detector/ # Detector components
|
|
│ │ ├── DetectionCanvas.tsx # Bounding box overlay
|
|
│ │ ├── DetectionList.tsx # Detection results list
|
|
│ │ └── DetectorControls.tsx # Model/threshold controls
|
|
│ │
|
|
│ └── segmentation/ # Segmentation components
|
|
│ ├── MaskOverlay.tsx # Segmentation mask display
|
|
│ ├── ClassLegend.tsx # Class color legend
|
|
│ └── SegmentationControls.tsx # Model/class set controls
|
|
│
|
|
├── lib/
|
|
│ ├── types.ts # Common TypeScript types
|
|
│ ├── simulation.ts # Hemodynamics IPC wrappers
|
|
│ ├── colors.ts # Colormap utilities
|
|
│ ├── mre-types.ts # MRE types
|
|
│ ├── bioheat-types.ts # Bioheat types
|
|
│ ├── slidescope-types.ts # SlideScope types
|
|
│ ├── neuro-types.ts # RustyNeuro types
|
|
│ ├── neural-operator-types.ts # Neural Operator types
|
|
│ ├── piddm-types.ts # PIDDM types
|
|
│ ├── digital-twin-types.ts # Digital Twin types
|
|
│ ├── benchmark-types.ts # Benchmark types
|
|
│ ├── inference-profiler-types.ts # Profiler types
|
|
│ ├── model-zoo-types.ts # Model Zoo types
|
|
│ ├── portfolio-types.ts # Portfolio types
|
|
│ ├── risk-types.ts # Risk Analyzer types
|
|
│ ├── timeseries-types.ts # Time Series types
|
|
│ ├── image-classifier-types.ts # Image Classifier types
|
|
│ ├── object-detector-types.ts # Object Detector types
|
|
│ └── segmentation-types.ts # Segmentation types
|
|
│
|
|
└── data/
|
|
└── demos.ts # Demo registry with metadata
|
|
```
|
|
|
|
## Demo Pages
|
|
|
|
### Medical / Science
|
|
|
|
| Demo | Components | Features |
|
|
|------|------------|----------|
|
|
| **Virtual Catheter** | VesselCanvas, GeometryEditor, PulsatileControls | Three.js rendering, geometry editing, cardiac waveforms |
|
|
| **MRE Elastography** | MRECanvas, StiffnessMap | Wave field visualization, stiffness colormap |
|
|
| **Thermal Ablation** | TemperatureCanvas, HeatSourcePanel | 3D temperature field, thermal dose |
|
|
| **SlideScope** | SlideViewer, StainChannels | Deep zoom tiles, NMF stain separation |
|
|
| **RustyNeuro** | SignalViewer, TopoMap, ConnectivityMatrix | Multi-channel signals, source localization |
|
|
| **Digital Twin** | OrganViewer, ProbePanel | 3D organ mesh, interactive simulation |
|
|
|
|
### AI / ML
|
|
|
|
| Demo | Components | Features |
|
|
|------|------------|----------|
|
|
| **Neural Operator** | PDECanvas, TrainingProgress, LossChart | Interactive boundary drawing, training UI |
|
|
| **PIDDM** | DiffusionCanvas, SamplingControls | Diffusion visualization, physics loss |
|
|
| **FNO Benchmark** | BenchmarkChart, MetricsTable | FNO vs FEM vs FDM comparison |
|
|
| **PINN Benchmark** | BenchmarkChart, ConfigPanel | Multi-PDE training comparison |
|
|
| **Inference Profiler** | LatencyChart, ThroughputChart, MemoryChart | Performance metrics, batch sweeps |
|
|
| **Model Zoo** | ModelGrid, InferencePanel | Model catalog, one-click inference |
|
|
|
|
### Finance
|
|
|
|
| Demo | Components | Features |
|
|
|------|------------|----------|
|
|
| **Portfolio Optimizer** | EfficientFrontier, CorrelationMatrix | Markowitz frontier, asset allocation |
|
|
| **Risk Analyzer** | VaRChart, StressScenarios | VaR visualization, stress testing |
|
|
| **Time Series** | ForecastChart, ModelSelector | Multi-model forecasting |
|
|
|
|
### Vision
|
|
|
|
| Demo | Components | Features |
|
|
|------|------------|----------|
|
|
| **Image Classifier** | ClassificationResults, ConfidenceBar | Top-K predictions |
|
|
| **Object Detector** | DetectionCanvas, DetectionList | Bounding boxes, NMS |
|
|
| **Segmentation** | MaskOverlay, ClassLegend | Pixel-wise masks, class colors |
|
|
|
|
## IPC Communication
|
|
|
|
Tauri commands are invoked via `@tauri-apps/api/core`:
|
|
|
|
```typescript
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
|
|
// Example: Initialize profiler
|
|
const status = await invoke<ProfilerResponse>("profiler_initialize", { config });
|
|
|
|
// Example: Run detection
|
|
const result = await invoke<DetectionResult>("detect_objects", { imageData });
|
|
|
|
// Example: Start training
|
|
const handle = await invoke<string>("neural_operator_start_training", { config });
|
|
```
|
|
|
|
All IPC types are defined in `src/lib/*-types.ts` and mirror the Rust shared crate definitions.
|
|
|
|
## Styling
|
|
|
|
Components use CSS-in-JS with inline styles for encapsulation. Global styles in `index.css`.
|
|
|
|
**Color Scheme:**
|
|
- Background: `#0f0f23` (dark blue)
|
|
- Panel background: `#16213e`
|
|
- Accent: `#3282b8` (cyan)
|
|
- Text: `#e4e4e4`
|
|
- Success: `#4ade80`
|
|
- Warning: `#f59e0b`
|
|
- Error: `#ef4444`
|
|
|
|
## Build
|
|
|
|
```bash
|
|
# Type check
|
|
pnpm type-check
|
|
|
|
# Lint
|
|
pnpm lint
|
|
|
|
# Build for production
|
|
pnpm build
|
|
```
|
|
|
|
Output: `dist/` (web assets), `src-tauri/target/release/` (desktop app)
|
|
|
|
## Test Summary
|
|
|
|
| Category | Test Files | Tests |
|
|
|----------|------------|-------|
|
|
| Hemodynamics | 9 | 290 |
|
|
| Neural Operator | 4 | 85 |
|
|
| Benchmark | 2 | 45 |
|
|
| Profiler | 3 | 65 |
|
|
| Vision | 6 | 120 |
|
|
| Finance | 4 | 80 |
|
|
| **Total** | **28** | **685** |
|
|
|
|
## Known Issues
|
|
|
|
- Three.js chunk size warning (~600KB) - expected for WebGL library
|
|
- "Not implemented: navigation" in tests - JSDOM limitation for download links
|
|
- Canvas operations not fully testable in JSDOM - mock implementations used
|
|
|
|
## Contributing
|
|
|
|
1. Follow TDD: Write tests first
|
|
2. Mirror Rust IPC types exactly in TypeScript
|
|
3. Use existing component patterns
|
|
4. Keep components focused and reusable
|