Skip to content

xukache/model-architecture

BranchesTags

Repository files navigation

大模型架构可视化平台

本项目旨在通过交互式可视化的方式，展示主流大型语言模型的内部架构和核心工作原理，帮助读者直观地理解复杂的模型结构和算法机制。

项目特点

  • 交互式可视化：使用动态SVG图表和交互式演示，直观展示大模型内部复杂机制
  • 全面的模型覆盖：包含Transformer、LLaMA、GPT、Deepseek等主流大模型架构
  • 深入浅出的讲解：将复杂的技术概念以直观、易懂的方式呈现
  • 响应式设计：在各种设备上（手机、平板、桌面）提供优秀的浏览体验
  • 深色/浅色模式：支持自动跟随系统设置的外观模式切换，默认启用暗色主题
  • 精细化组件解析：拆解模型关键组件（如RoPE位置编码），单独进行可视化说明
  • 数据流动可视化：展示模型内部数据的流动过程，包括注意力机制的权重分布
  • 交互式动画控制：提供动画播放、暂停、步进等控制功能，方便理解模型工作流程

技术栈

  • HTML5
  • TailwindCSS 3.3.0
  • PostCSS 8.4.35
  • JavaScript
  • Font Awesome图标库
  • Canvas动画系统
  • SVG图形可视化
  • 动画控制系统
  • 注意力权重可视化

项目构建

# 安装依赖
pnpm install

# 开发模式（实时编译CSS）
pnpm run dev

# 构建生产版本
pnpm run build:css

# 清理构建目录
pnpm run clean

# 构建完整项目到dist目录
pnpm run build:prod

# 打包项目为zip文件以便部署
pnpm run zip

# 本地预览构建结果
pnpm run serve

部署说明

本项目支持多种部署方式：

  1. 本地预览：使用pnpm run serve命令在本地启动HTTP服务器进行预览
  2. 静态文件部署：
    • 运行pnpm run zip命令生成dist.zip文件
    • 将zip文件上传至服务器并解压
    • 使用Nginx、Apache等Web服务器托管解压后的文件

所有构建和部署命令均已实现跨平台兼容，可在Windows、MacOS和Linux环境下使用。

技术亮点

-动态演示系统：使用Canvas实现复数平面上的向量旋转动画 -交互控制：提供旋转速度和序列位置的实时调节 -实时状态更新：动态显示向量状态和旋转角度 -主题自适应：所有可视化组件都支持深色/浅色主题切换 -代码展示优化：实现了Python代码的语法高亮，支持多种配色方案 -响应式设计：所有动画和可视化组件都能自适应不同屏幕尺寸 -跨平台构建系统：支持在不同操作系统上一致地构建和部署项目 -数据流动动画：实现了Transformer模型中数据流动的动态可视化 -注意力机制可视化：通过热力图展示注意力权重分布 -动画控制系统：支持动画的播放、暂停、步进和速度调节 -组件高亮系统：在数据流动过程中动态高亮相关组件

项目结构

├── index.html # 主页面，展示所有模型架构
├── models/ # 各个模型的详细页面
│ ├── components/ # 通用模型组件
│ │ └── rope/ # 旋转位置编码(RoPE)可视化
│ │ └── index.html # RoPE旋转位置编码作用Q、K矩阵的详细页面
│ ├── llama/ # LLaMA模型架构
│ │ └── index.html # LLaMA模型架构概览页面
│ ├── transformer/ # Transformer模型架构（计划中）
│ ├── gpt/ # GPT系列模型架构（计划中）
│ └── deepseek/ # Deepseek模型架构（计划中）
├── applications/ # 大模型应用开发相关页面
├── about/ # 关于我们页面
├── common/ # 共享资源
│ ├── styles/ # 样式文件
│ │ ├── input.css # TailwindCSS输入文件
│ │ └── output.css # 编译后的CSS文件
│ └── js/ # JavaScript文件
├── dist/ # 构建输出目录
├── dist.zip # 打包后的部署文件
└── README.md # 项目说明文档

功能特性

  • 统一的设计风格：所有页面采用Linear App风格的简约现代设计
  • 深色/浅色模式切换：支持一键切换主题，默认使用暗色主题
  • 响应式导航：桌面端和移动端均有优化的导航体验
  • 返回顶部功能：长页面浏览时的便捷导航
  • 模块化组织：将不同模型和技术组件独立展示，便于扩展
  • 目录导航系统：每个模型页面都有相关组件的目录导航，方便查找
  • SVG架构图：使用可缩放矢量图形展示模型架构，保证在任何设备上的清晰度
  • 代码示例对照：提供实现细节的代码示例，帮助深入理解技术原理
  • 动态演示：通过交互式动画展示关键算法原理，如RoPE旋转位置编码的向量旋转过程
  • 实时代码高亮：支持多种主题的代码语法高亮，提升代码可读性
  • PostCSS工作流：使用PostCSS和TailwindCSS实现高效的CSS处理
  • 实时CSS编译：支持开发时CSS的实时编译和热重载
  • 模块化CSS：采用组件化的CSS架构，提高代码复用
  • 自动化构建：集成了CSS的自动化构建和优化流程
  • 跨平台打包部署：支持一键打包和多环境部署
  • 404错误页面：提供友好的"页面开发中"提示，增强用户体验

已实现的内容

  • 主页设计与实现
  • 响应式布局适配
  • 深色/浅色模式切换
  • 返回顶部功能
  • CSS构建系统
    • PostCSS配置完成
    • TailwindCSS集成
    • 自动化编译流程
    • 开发环境热重载
  • 打包部署系统
    • 跨平台构建脚本
    • 资源文件复制优化
    • ZIP打包功能
    • 构建前自动清理
  • 用户体验优化
    • 404页面实现
    • 页面未实现友好提示
  • LLaMA模型架构解析
    • 整体架构概览（SVG可视化）
    • 自注意力机制讲解
    • 前馈网络实现
    • 组件目录导航
  • 模型组件详解
    • 旋转位置编码(RoPE)作用于Q、K矩阵可视化详解
      • 完整源代码展示与语法高亮
      • 步骤分解说明
      • 复数平面动态演示
      • 向量旋转可视化
      • 实时状态展示
      • 深色模式适配优化
  • Transformer架构详解
    • 整体架构SVG可视化
    • 数据流动动画实现
    • 注意力权重可视化
    • 动画控制系统
    • 组件交互说明
  • GPT系列模型解析
  • Deepseek模型分析

架构图特性

  • 精确的组件结构：SVG图形准确展示模型各层次的组成和连接关系
  • 清晰的数据流向：使用带箭头的连接线展示信息在模型中的流动方向
  • 特殊组件标注：如RoPE位置编码、Grouped Multi-Query Attention等创新点都有特别标注
  • 分层次的视觉区分：使用不同颜色和形状区分不同功能的组件
  • 残差连接可视化：清晰展示LLaMA等模型中的残差连接路径
  • 动态数据流动：展示数据在模型各组件间的流动过程
  • 注意力分布展示：通过热力图直观显示注意力权重分布
  • 交互式控制：支持动画播放、暂停、步进等操作
  • 组件状态反馈：在数据流动过程中动态显示组件状态

开发计划

  • 实现RoPE位置编码的动态演示功能
  • 添加代码语法高亮支持
  • 完善CSS构建系统
  • 优化深色模式适配
  • 实现跨平台打包部署功能
  • 添加"开发中"提示页面（404友好提示）
  • 完成更多模型组件的可视化（如多头注意力、LayerNorm等）
  • 添加更多交互式动画展示模型训练和推理过程
  • 实现模型对比功能，直观展示不同架构的异同
  • 优化移动端体验，提高页面加载性能
  • 增加更多代码示例，配合可视化深入讲解原理
  • 完善文档和注释

如何使用

  1. 克隆本仓库到本地
  2. 安装依赖：
pnpm install
  1. 启动开发服务器：
pnpm run dev
  1. 构建生产版本：
pnpm run build:prod
  1. 打包部署文件：
pnpm run zip
  1. 本地预览构建结果：
pnpm run serve
  1. 使用右上角的主题切换按钮可以在深色/浅色模式之间切换

如何贡献

欢迎对本项目做出贡献！无论是添加新的模型解析、改进现有可视化，还是修复错误，都请遵循以下步骤：

  1. Fork本仓库
  2. 创建您的特性分支 (git checkout -b feature/amazing-feature)
  3. 提交您的更改 (git commit -m 'Add some amazing feature')
  4. 推送到分支 (git push origin feature/amazing-feature)
  5. 开启一个Pull Request

贡献指南

  • 保持与现有设计风格一致
  • 确保深色/浅色模式都能正常显示
  • 为新添加的模型或组件创建清晰的文档
  • 使用TailwindCSS进行样式设计
  • 优化SVG和Canvas内容，确保性能良好

许可证

本项目采用MIT许可证 - 详情请参见LICENSE文件

联系方式

如有任何问题或建议，请通过以下方式联系：

© 2024 大模型架构可视化平台 | 使用HTML5 + TailwindCSS构建

特性

  • 交互式可视化：通过可交互的3D模型展示大模型内部架构
  • 黑暗/亮色模式切换：支持暗色和亮色主题，适应不同场景
  • 响应式设计：自适应不同设备屏幕尺寸
  • 详细的组件说明：提供每个模型组件的详细介绍
  • 用户友好的UI：简洁直观的界面设计
  • 导航功能：方便在不同模型和视图之间切换
  • 404错误页面：当访问不存在的页面时，提供友好的提示和导航选项
  • 自动重定向：使用.htaccess配置，自动将无效的URL重定向到404页面

部署

项目支持以下部署方式：

  1. 开发模式：

    pnpm run dev

  2. 构建生产版本：

    pnpm run build:prod

  3. 启动本地服务器：

    pnpm run serve

  4. 一键部署：

    pnpm run deploy

  5. 打包项目：

    pnpm run zip

服务器配置

项目包含.htaccess文件，用于Apache服务器配置，主要功能：

  • 设置404错误页面重定向
  • 配置URL重写规则，当访问不存在的页面时自动重定向到404页面
  • 设置文件缓存控制
  • 确保字符集为UTF-8

如果使用其他服务器（如Nginx），需要相应调整配置。

About

主流模型架构可视化

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages