React UI

The @torchjsorg/react-ui package provides a rich set of React components designed specifically for building interactive machine learning applications. From real-time training dashboards to advanced 3D embedding viewers, these components bridge the gap between low-level tensor operations and user-facing interfaces.

Showcase of various torch.js React components

Core Philosophy

Most react-ui components are designed to work directly with torch.js tensors. A significant portion of the library is WebGPU-native, meaning data can flow from your model to the screen without ever leaving GPU memory, enabling 60fps visualizations of massive datasets.

Installation

npm install @torchjsorg/torch.js @torchjsorg/react-ui;
# or
pnpm add @torchjsorg/torch.js @torchjsorg/react-ui;

Quick Start

Visualizing a tensor is as simple as passing it to the TensorViewer component.

import { TensorViewer } from '@torchjsorg/react-ui';
import torch from '@torchjsorg/torch.js';

function App() {
  const data = torch.randn([16, 16]);

  return (
    <div className="h-64 w-64">
      <TensorViewer data={data} colorScale="viridis" />
    </div>
  );
}

Component Categories

Category	Key Components	Best For
Training	GPUStreamingChart, TrainingControls	Real-time monitoring
Visualization	TensorViewer, AttentionViewer	Model interpretability
Input	ImageInput, ImageEditor, TextInput	Data collection & editing
Analysis	ConfusionMatrix, ROCPRCurve	Model evaluation

GPU-Accelerated Components

Components prefixed with GPU (e.g., GPUHeatmap, GPUPointCloud) utilize the high-performance @torchjsorg/viz backend. These components are designed for high-frequency updates and large-scale data.

Zero-Copy Rendering: GPU components can render tensors directly from WebGPU buffers. This avoids the expensive GPU-to-CPU readback stall, which is crucial for maintaining performance during active training.

Storybook

We maintain an interactive Storybook containing live demos and code snippets for every component in the library.

Browse all components at ui.torchjs.org

Next Steps

Training Dashboards - Build real-time monitoring tools.
Visualizing Tensors - Deep dive into interpretability components.
GPU Acceleration - Understanding zero-copy rendering.
Theming - Customizing the look and feel.

React UI

Quick Start

Visualizing a tensor is as simple as passing it to the TensorViewer component.

import { TensorViewer } from '@torchjsorg/react-ui';
import torch from '@torchjsorg/torch.js';

function App() {
  const data = torch.randn([16, 16]);

  return (
    <div className="h-64 w-64">
      <TensorViewer data={data} colorScale="viridis" />
    </div>
  );
}