Visualizing Tensors
Deep learning models are often "black boxes." react-ui provides high-level components to peer inside your models and understand their internal state.
General Purpose: TensorViewer
The TensorViewer is the standard tool for inspecting any tensor. It automatically handles high-dimensional data by providing slicing controls.
import { TensorViewer } from '@torchjsorg/react-ui';
// Renders a heatmap of the tensor
<TensorViewer
data={activations}
colorScale="magma"
showValues={false}
/>Transformer Interpretability: AttentionViewer
Specifically designed for Transformer architectures, this component visualizes the relationship between tokens.
import { AttentionViewer } from '@torchjsorg/react-ui';
<AttentionViewer
tensor={attentionWeights} // [Heads, Seq, Seq]
tokens={['[CLS]', 'the', 'cat', 'sat', '[SEP]']}
activeHead={0}
/>Classification: SoftmaxHeatmap
Visualizes probability distributions from model outputs.
import { SoftmaxHeatmap } from '@torchjsorg/react-ui';
<SoftmaxHeatmap
data={logits}
labels={['Dog', 'Cat', 'Bird', 'Fish']}
orientation="horizontal"
/>Comparison of Visualization Components
| Component | Target Data | Visualization Type |
|---|---|---|
| TensorViewer | Any Tensor | 2D Heatmap / Grid |
| AttentionViewer | Attention Weights | Connection Graph |
| GpuPointCloud | Embeddings | 3D Interactive Space |
| GpuHistogram | Weights / Grads | Frequency Distribution |
Advanced: HeatmapOverlay
For computer vision tasks, use HeatmapOverlay to project saliency maps or Class Activation Maps (CAM) directly onto input images.
<HeatmapOverlay
imageSrc="/input.jpg"
heatmap={saliencyTensor}
opacity={0.6}
/>Next Steps
- GPU Acceleration - Learn about rendering large tensors efficiently.
- Interactive Inputs - How to provide data to your models.