# 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("profiler_initialize", { config }); // Example: Run detection const result = await invoke("detect_objects", { imageData }); // Example: Start training const handle = await invoke("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