'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export const TransformerFlowView = () => { // 动画状态管理 const [phase, setPhase] = useState(0); // 0: Embed, 1: PosEnc, 2: Attention, 3: AddNorm, 4: FFN, 5: Output const [tick, setTick] = useState(0); // 模拟输入数据 const tokens = useMemo(() => [ { text: "AI", id: 0 }, { text: "将", id: 1 }, { text: "改", id: 2 }, { text: "变", id: 3 }, { text: "未", id: 4 }, { text: "来", id: 5 } ], []); // 动画循环驱动 useEffect(() => { let animationFrameId: number; let startTime = Date.now(); const loop = () => { const now = Date.now(); const elapsed = now - startTime; setTick(elapsed); // 用于驱动连续动画（如光效、波动） // 状态机循环：总周期约 12秒 const cycle = 12000; const t = elapsed % cycle; if (t < 1500) setPhase(0); // Input & Embedding else if (t < 3000) setPhase(1); // Positional Encoding else if (t < 5500) setPhase(2); // Multi-Head Attention else if (t < 7000) setPhase(3); // Add & Norm else if (t < 9500) setPhase(4); // Feed Forward else setPhase(5); // Output Probabilities animationFrameId = requestAnimationFrame(loop); }; loop(); return () => cancelAnimationFrame(animationFrameId); }, []); // 辅助函数：生成正弦波路径 const getSinePath = (x: number, y: number, width: number, freq: number, amp: number) => { let d = `M ${x} ${y}`; for (let i = 0; i <= width; i+=5) { d += ` L ${x + i} ${y + Math.sin((i + tick/50) * freq) * amp}`; } return d; }; // 颜色定义 const colors = { bg: "#0f172a", token: "#e2e8f0", embed: "#38bdf8", // Sky blue pos: "#f472b6", // Pink attn: "#818cf8", // Indigo ffn: "#34d399", // Emerald glow: "#60a5fa" }; return ( ); };