Interactive 3D Language Model Visualization

Features

Interactive 3D Visualization

Experience real-time token flows through neural layers with smooth animations and responsive controls.

JSON-Driven Architecture

Easily customize and extend visualizations by editing the simulation.json file — no code changes required.

{"tokens": [...], "flows": [...]}

Custom GLSL Shaders

Advanced rendering with glowing flow lines and animated pulses that bring data flows to life.

• Real-time intensity updates
• Smooth interpolation between frames
• Performance-optimized 60 FPS

Interactive Controls

Navigate, zoom, and interact with your model using intuitive keyboard shortcuts and mouse controls.

SPACE Play/Pause

L Toggle Layer View

Controls

SPACE

Play/Pause

Start or stop the animation

Layer View

Toggle layer isolation

Mouse

Orbit and zoom

Quick Start Guide

Get started in 30 seconds

1 Load your simulation.json file
2 Press SPACE to begin animation
3 Hover tokens to highlight flows

Demo

LLM Visualization

Live Example

Watch the visualization in action with sample data.

Custom Dataset

Upload your own simulation.json to visualize any model.

Documentation

Quick Start

1 Clone the repository and install dependencies with npm install
2 Start the development server with npm run dev
3 Load your custom simulation.json file

API Reference

LLMVisualizer Class

const visualizer = new LLMVisualizer({
  container: '#canvas-container',
  simulationData: './simulation.json',
  autoStart: true,
  fps: 60
});

JSON Schema

{
  "model": {
    "tokens": [...],
    "layers": [...]
  },
  "flows": [...],
  "animation": {
    "frameRate": 30,
    "duration": 4
  }
}

Configuration Options

Option	Type	Default	Description
backgroundColor	string	#000011	Scene background color
showGrid	boolean	true	Display layer grids
glowIntensity	number	0.8	Flow line glow strength
cameraDistance	number	15	Initial camera distance

Example JSON

{
  "model": {
    "tokens": [
      {
        "id": "t0",
        "text": "Hello",
        "position": [0, 0, 0]
      },
      {
        "id": "t1",
        "text": "world",
        "position": [2, 0, 0]
      }
    ],
    "layers": [
      {
        "id": "l0",
        "name": "Embedding",
        "z": 0
      },
      {
        "id": "l1",
        "name": "Attention",
        "z": 5
      }
    ]
  },
  "flows": [
    {
      "from": "t0",
      "to": "t1",
      "layer": "l1",
      "color": "#00ffff",
      "weight": 0.8
    }
  ],
  "animation": {
    "frameRate": 30,
    "duration": 4,
    "frames": [
      {
        "time": 0,
        "activations": [
          { "flow": 0, "intensity": 0 }
        ]
      },
      {
        "time": 1,
        "activations": [
          { "flow": 0, "intensity": 1 }
        ]
      }
    ]
  }
}

Resources

GitHub Repository API Documentation Privacy Policy

About

Created by LLM Visualizer Team

Interactive 3D LLM visualization

Built with Three.js, TypeScript, and custom GLSL shaders for real-time language model visualization.