import React, { useState, useEffect, useMemo } from 'react'; const ModelExplainer = () => { const [phase, setPhase] = useState(0); const [timer, setTimer] = useState(0); // Phases: // 0: Transformer (Base) // 1: BERT (Encoder-only) // 2: T5 (Encoder-Decoder Unified) // 3: ChatGPT/GPT (Decoder-only) // 4: Summary/Comparison const PHASE_DURATION = 8000; // ms per phase const TOTAL_PHASES = 5; useEffect(() => { const interval = setInterval(() => { setTimer(t => t + 50); }, 50); return () => clearInterval(interval); }, []); useEffect(() => { const currentPhase = Math.floor(timer / PHASE_DURATION) % TOTAL_PHASES; if (currentPhase !== phase) { setPhase(currentPhase); } }, [timer, phase]); // Helper to calculate opacity/position based on phase transitions const getTransitionStyle = (isActive) => ({ opacity: isActive ? 1 : 0.2, transform: isActive ? 'scale(1)' : 'scale(0.9)', transition: 'all 1s ease-in-out' }); // Background Particles const particles = useMemo(() => { return Array.from({ length: 30 }).map((_, i) => ({ x: Math.random() * 1000, y: Math.random() * 600, r: Math.random() * 2 + 1, speed: Math.random() * 0.5 + 0.1, opacity: Math.random() * 0.5 + 0.1, })); }, []); // Text content for each phase const phaseInfo = [ { title: "Transformer (Google 2017)", subtitle: "现代LLM的基石：编码器-解码器架构", desc: "由Encoder（提取特征）和Decoder（生成结果）组成，引入了自注意力机制 (Self-Attention)。", color: "#6366f1" // Indigo }, { title: "BERT (Google 2018)", subtitle: "仅编码器 (Encoder-Only)", desc: "擅长理解任务。利用掩码语言模型 (MLM) 双向理解上下文。如：完形填空、情感分析。", color: "#06b6d4" // Cyan }, { title: "T5 (Google 2019)", subtitle: "Text-to-Text Transfer Transformer", desc: "回归Encoder-Decoder架构。将所有NLP任务统一视为'文本到文本'的转换问题。", color: "#ec4899" // Pink }, { title: "ChatGPT / GPT Series (OpenAI)", subtitle: "仅解码器 (Decoder-Only)", desc: "擅长生成任务。自回归模型 (Autoregressive)，根据上文预测下一个字。", color: "#22c55e" // Green }, { title: "架构对比总结", subtitle: "不同架构决定了擅长的领域", desc: "BERT(理解) vs GPT(生成) vs T5(转化)", color: "#f59e0b" // Amber } ]; const currentInfo = phaseInfo[phase]; return ( ); }; // --- Sub-Components --- const Block = ({ x, y, width, height, color, label, glow = false }) => ( {label} ); const Stack = ({ x, y, count, color, label, width = 120 }) => ( {label} {Array.from({ length: count }).map((_, i) => ( ))} ); const DataFlow = ({ start, end, color }) => ( ); // 1. Transformer / T5 Architecture const TransformerArch = ({ x, y, mode, isActive }) => { if (!isActive) return null; const isT5 = mode === "t5"; return ( {/* Encoder Stack */} {/* Decoder Stack */} {/* Connection */} {/* Animated Data Particles */} {/* Input/Output */} Input {isT5 ? "translate: Hello" : "我爱AI"} Output {isT5 ? "Bonjour" : "I love AI"} ); }; // 2. BERT Architecture const BertArch = ({ x, y, isActive }) => { if (!isActive) return null; return ( {/* Bidirectional Arrows Overlay */} 双向注意力 (Bidirectional) {/* MLM Task */} Masked Language Modeling The [MASK] is nice {/* Prediction */} cat? ); }; // 3. GPT Architecture const GptArch = ({ x, y, isActive }) => { if (!isActive) return null; return ( {/* Causal Masking Visual */} 自回归 (Autoregressive) 只能看左边 (Causal Mask) {/* Generation Process */} Next Token Prediction Once upon a time {/* Loop arrow indicating feedback */} ); }; // 4. Comparison Table const ComparisonTable = ({ x, y, isActive }) => { if (!isActive) return null; const models = [ { name: "BERT", type: "Encoder", task: "理解/分类", ex: "情感分析", col: "#06b6d4" }, { name: "T5", type: "Enc-Dec", task: "文本转化", ex: "翻译/摘要", col: "#ec4899" }, { name: "ChatGPT", type: "Decoder", task: "生成/对话", ex: "写作/问答", col: "#22c55e" }, ]; return ( {/* Header */} 模型架构核心擅长任务代表应用 {/* Rows */} {models.map((m, i) => ( {/* Card BG */} {m.name} {/* Architecture Icon */} {m.type === "Encoder" && } {m.type === "Decoder" && } {m.type === "Enc-Dec" && ( )} {m.type} {m.task} {m.ex} ))} ); }; export default ModelExplainer;