通过交互式的LLM算法可视化工具学习大语言模型原理

项目简介

该项目是一个交互式的LLM（大语言模型）算法可视化工具，旨在帮助用户直观地了解类似OpenAI ChatGPT等Transformer架构模型的内部工作原理。通过3D可视化和分步讲解，用户可以深入探索LLM从输入处理到输出生成的完整过程。

项目需求

展示完整的Transformer架构和工作流程
提供交互式分步讲解，帮助用户理解复杂的深度学习概念
支持实时3D视角控制，让用户能够深入查看算法的每个细节
使用WebGL实现高性能可视化渲染，确保流畅的用户体验
覆盖LLM从输入处理到输出生成的整个过程
适配不同设备的响应式设计

项目设计

架构设计

基于React 19构建的现代Web应用
使用TypeScript确保类型安全和代码质量
采用模块化设计，将不同功能组件分离
使用WebGL进行高性能3D可视化渲染
实现GPU加速计算，通过着色器执行矩阵运算
集成D3.js辅助数据可视化

核心组件

可视化引擎：使用WebGL实现3D模型渲染和数据流动展示
LLM模型实现：完整的Transformer架构实现，包括嵌入层、自注意力机制、前馈网络等
交互式讲解系统：提供10个阶段的分步引导，从基础概念到完整模型工作原理
模型选择工具：允许用户选择不同的模型配置
用户界面：直观的控制界面和信息展示，包括侧边栏、工具栏等
3D相机控制：支持旋转、缩放、平移等交互操作

实现的功能

LLM算法可视化

完整的Transformer架构可视化，包括所有核心组件
数据流动过程的动画展示，直观呈现信息传递
各层计算过程的详细说明和可视化
注意力机制的可视化呈现，展示权重分布
输出生成过程的动态展示

交互式功能

10个阶段的分步讲解，支持暂停和继续
3D视角控制，可旋转、缩放、平移查看模型
模型参数调整和选择
实时显示计算结果和数据变化
响应式设计，适配桌面和移动设备

技术特点

GPU加速计算，使用WebGL着色器实现高性能矩阵运算
完整的Transformer实现，包括：
- 词嵌入和位置嵌入
- 多头自注意力机制
- 层归一化
- 前馈神经网络
- Softmax和线性输出层
模块化设计，便于扩展和维护
丰富的可视化组件库
支持状态保存和恢复
样式系统从CSS模块迁移到常规CSS，简化了样式管理和部署

技术栈

前端框架：React 19
编程语言：TypeScript
构建工具：Webpack 5
可视化：WebGL + D3.js
样式：CSS (从SCSS迁移，已移除CSS模块依赖)
图标：FontAwesome 7
路由：React Router 7
HTTP请求：Axios
测试：Jest 29
代码质量：ESLint 9

运行项目

bash 复制代码

# 安装依赖

npm install

# 开发模式运行

npm start

# 构建生产版本

npm run build

# 运行测试

npm test

项目结构

复制代码

src/

  ├── app/                 # 应用布局

  ├── homepage/            # 主页组件

  ├── llm/                 # LLM可视化核心

  │   ├── components/      # 可视化组件

  │   ├── render/          # WebGL渲染相关

  │   ├── walkthrough/     # 交互式讲解系统（10个阶段）

  │   ├── Camera.ts        # 3D相机控制

  │   ├── CanvasEventSurface.tsx # 画布交互

  │   ├── GptModel.ts      # Transformer模型实现

  │   ├── LayerView.tsx    # 3D视图组件

  │   ├── Program.ts       # 主程序控制

  │   ├── Sidebar.tsx      # 侧边栏组件

  │   └── ...              # 其他核心组件

  ├── styles/              # 全局样式

  │   ├── main.css         # 主要样式文件，包含所有组件样式

  │   └── variables.scss   # SCSS变量定义（用于部分遗留样式）

  ├── utils/               # 工具函数和组件

  ├── App.tsx              # 应用入口组件

  └── index.tsx            # React渲染入口

核心功能展示

1. 输入处理

词嵌入和位置嵌入过程的可视化
输入序列的表示方法

2. 自注意力机制

注意力权重计算和可视化
多头注意力的并行计算
查询、键、值的交互过程

3. 前馈网络

特征提取和转换过程
激活函数的作用
信息传递的可视化

4. 层归一化

稳定训练过程的机制
归一化前后数据分布的变化

5. 输出生成

Softmax概率计算
下一个词预测过程
完整序列生成的可视化

项目亮点

教育价值：通过可视化和分步讲解，降低了理解复杂AI模型的门槛
交互体验：实时3D交互让用户能够从不同角度观察模型结构
技术实现：结合WebGL和GPU加速，实现了高性能的可视化效果
内容全面：覆盖了Transformer模型的所有核心组件和工作流程
可扩展性：模块化设计便于添加新的模型和可视化功能

未来发展

添加更多LLM模型变体的支持
增加更详细的数学原理解释
支持自定义模型参数和架构
添加多国语言支持
优化移动设备上的体验

参见：

https://bbycroft.net/llm