'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const BG_COLOR = "#0f172a"; // 颜色定义 const COLORS = { primary: "#38bdf8", // Sky blue secondary: "#818cf8", // Indigo accent: "#f472b6", // Pink moe: "#34d399", // Emerald for Experts grid: "#1e293b", text: "#e2e8f0", highlight: "#fbbf24" }; export default function TransformerArchitectureView() { // 动画阶段: 0=Input, 1=Encoder, 2=CrossAttn, 3=Decoder(MoE), 4=Output const [phase, setPhase] = useState(0); const [tick, setTick] = useState(0); // 模拟输入Token const tokens = ["AI", "改变", "世界"]; // 模拟输出Token const outputToken = "未来"; // 动画循环 useEffect(() => { const interval = setInterval(() => { setTick(t => { const nextTick = t + 1; // 完整的动画周期约为 800 ticks (约13秒) if (nextTick > 800) return 0; return nextTick; }); }, 16); // ~60fps return () => clearInterval(interval); }, []); // 根据Tick决定Phase useEffect(() => { if (tick < 100) setPhase(0); // Input & Embedding else if (tick < 250) setPhase(1); // Encoder Layer else if (tick < 400) setPhase(2); // Cross Attention else if (tick < 650) setPhase(3); // Decoder & MoE else if (tick < 800) setPhase(4); // Output }, [tick]); // 工具：计算透明度，用于平滑过渡 const getOpacity = (startTick: number, duration: number) => { if (tick < startTick) return 0; if (tick > startTick + duration) return 1; return (tick - startTick) / duration; }; const getFadeOut = (startTick: number, duration: number) => { if (tick < startTick) return 1; if (tick > startTick + duration) return 0; return 1 - (tick - startTick) / duration; }; // --- 子组件渲染辅助 --- // 1. 背景网格 const renderBackground = () => ( {/* 装饰性数据流背景 */} {[...Array(5)].map((_, i) => ( ))} ); // 2. 编码器 (Encoder) const renderEncoder = () => { const baseX = 150; const baseY = 450; const isActive = phase >= 1 && phase <= 2; const opacity = getOpacity(50, 50); // 自注意力连线动画 const renderAttentionLines = () => { if (phase !== 1) return null; return ( {[0, 1, 2].map(i => [0, 1, 2].map(j => ( )) )} ); }; return ( {/* 框体 */} Encoder (编码器) {/* 内部层级 */} {/* FFN */} Feed Forward (前馈网络) {/* Add & Norm */} Add & Norm {/* Multi-Head Attention */} {isActive && } Multi-Head Attention (自注意力机制) {renderAttentionLines()} {/* 输入Tokens */} {tokens.map((t, i) => ( {t} {/* 嵌入向量示意 */} ))} {/* 数据流向上的箭头 */} {isActive && ( )} ); }; // 3. 解码器 (Decoder) - 包含 MoE 展示 const renderDecoder = () => { const baseX = 650; const baseY = 450; const isActive = phase >= 3; const isCrossAttn = phase === 2; const isMoE = phase === 3; // MoE activation phase const opacity = getOpacity(250, 50); return ( {/* 框体 */} Decoder (解码器) {/* MoE Layer (替代普通 FFN) */} {/* 背景框 */} {/* 标题 */} {isMoE ? "MoE Layer (混合专家模型)" : "Feed Forward"} {isMoE ? ( {/* Gating Network (路由) */} Gate {/* Experts */} {[0, 1, 2, 3].map((exp, i) => { const isActiveExpert = (i === 0 || i === 3); // 假设激活专家0和3 return ( Expert {i+1} {/* 路由连线 */} {isActiveExpert && ( )} ); })} 稀疏激活: 仅使用 Top-K 专家 ) : ( Dense Layer )} {/* Add & Norm */} {/* Cross Attention */} {isCrossAttn && } Cross-Attention (交叉注意力) {/* Masked Attention */} Masked Self-Attention {/* 已生成的Tokens */} Start Token {/* Output Generation Animation */} {phase === 4 && ( {outputToken} Probability Distribution )} ); }; // 4. 交叉注意力连接线 (Cross Attention Beams) const renderCrossConnections = () => { if (phase < 2) return null; const opacity = phase === 2 ? 1 : 0.2; // Dim after phase 2 return ( {/* KV Cache lines from Encoder to Decoder */} {/* Label */} {phase === 2 && ( K, V Matrix Transfer )} ); }; // 5. 进度条与状态文字 const renderStatus = () => { const steps = [ { label: "Input Embedding", zh: "输入嵌入" }, { label: "Encoder Stack", zh: "编码器处理" }, { label: "Cross Attention", zh: "交叉注意力" }, { label: "Decoder (MoE)", zh: "混合专家解码" }, { label: "Output Generation", zh: "输出生成" } ]; return ( {steps.map((s, i) => { const isActive = phase === i; return ( {s.label} {s.zh} {i < steps.length - 1 && ( )} ); })} ); }; // 6. 顶部标题与MoE解释 const renderHeader = () => ( Transformer Architecture Flow Visualization of Encoder-Decoder & Mixture of Experts (MoE) {/* MoE Legend */} MoE Highlight: Replaces dense FFN with sparse Experts. Scaling parameters efficiently. ); return (

); }