Transformer 可视化实验室

交互式探索 Transformer 架构的每一个细节 —— 从位置编码到多头注意力，从采样策略到训练过程，8 个模块全景可视化。

Pure HTML/CSS/JS SVG Visualization Zero Dependencies Interactive Dark Theme
01

Transformer 架构概览

Architecture Overview 编码器-解码器架构全流程动画演示
架构流程图
控制
统计
说明
transformer.py

    

  


  

    

      02
位置编码
Positional Encoding
      正弦余弦位置编码可视化与热力图
    

    

      
PE 波形与热力图

      

        
控制

        
统计

        
说明

      

      
positional_encoding.py

    

  


  

    

      03
自注意力机制
Self-Attention
      Q/K/V 矩阵运算与注意力权重可视化
    

    

      
注意力计算流程

      

        
控制

        
统计

        
说明

      

      
self_attention.py

    

  


  

    

      04
多头注意力
Multi-Head Attention
      多注意力头并行计算与模式对比
    

    

      
多头注意力模式

      

        
控制

        
统计

        
说明

      

      
multi_head_attention.py

    

  


  

    

      05
前馈网络与残差
FFN + Residual + LayerNorm
      前馈网络、残差连接与层归一化数据流
    

    

      
FFN 数据流与残差连接

      

        
控制

        
统计

        
说明

      

      
ffn_residual.py

    

  


  

    

      06
编码器-解码器交互
Cross-Attention
      交叉注意力与因果掩码可视化
    

    

      
编码器-解码器交叉注意力

      

        
控制

        
统计

        
说明

      

      
cross_attention.py

    

  


  

    

      07
采样与解码策略
Sampling & Decoding
      温度、Top-k、Top-p 采样策略对比
    

    

      
概率分布与采样

      

        
控制

        
统计

        
说明

      

      
sampling.py

    

  


  

    

      08
训练过程
Training Process
      预训练、微调、RLHF 三阶段与损失曲线
    

    

      
训练阶段与损失曲线

      

        
控制

        
统计

        
说明

      

      
training.py

    

  


  

    
MIT License · Copyright 2026 wangzifan396-wzf

    
Built with pure HTML/CSS/JS + SVG · Zero dependencies