GPU Acceleration

For production-scale machine learning, CPU-based visualization can become a bottleneck. react-ui includes a suite of components prefixed with GPU that render data directly from WebGPU memory.

Diagram of zero-copy rendering: GPU Buffer -> Canvas

Why use GPU components?

Standard visualization tools (like SVG or 2D Canvas) require you to call await tensor.toArray() to move data from the GPU to the CPU before rendering. This "readback stall" can take 10-100ms, effectively killing your frame rate.

GPU components skip this step entirely. They use compute shaders to process the tensor and render it directly to a WebGPU canvas.

Key GPU Components

Component	Capability	Scale Limit
GPUStreamingChart	Real-time line plots	100,000+ points
GPUHeatmap	High-res activation maps	4K resolution tensors
GPUPointCloud	3D Embedding exploration	1,000,000+ points
GPUHistogram	Weight distribution monitoring	Immediate updates

Example: Large Scale Embeddings

Visualizing a 100,000 point point-cloud would crash most browsers if using DOM elements. With GPUPointCloud, it remains fluid at 60fps.

import { GPUPointCloud } from '@torchjsorg/react-ui';

function EmbeddingView({ embeddings }) {
  return (
    <GPUPointCloud 
      points={embeddings} 
      pointSize={2}
      colorBy="cluster"
    />
  );
}

Performance Comparison

Metric	CPU-based (TensorViewer)	GPU-based (GPUHeatmap)
Latency	High (Readback stall)	Low (Zero-copy)
Max Tensors	Small (< 1MB)	Unlimited (VRAM limited)
Interactivity	Static / Low FPS	Smooth / High FPS

Next Steps

Theming - Styling your GPU-powered dashboards.
torch.js Performance - General GPU optimization tips.