'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const BG_COLOR = "#0f172a"; const PRIMARY_COLOR = "#38bdf8"; // sky-400 const ACCENT_COLOR = "#f472b6"; // pink-400 const SUCCESS_COLOR = "#4ade80"; // green-400 const GRID_COLOR = "#1e293b"; // 模拟神经网络结构 const LAYERS = [4, 6, 6, 3]; // Input, Hidden 1, Hidden 2, Output export const ModelTrainingView = () => { // 状态管理 const [phase, setPhase] = useState<'IDLE' | 'DATA_PREP' | 'INIT' | 'TRAINING' | 'COMPLETE'>('IDLE'); const [epoch, setEpoch] = useState(0); const [loss, setLoss] = useState(2.5); const [accuracy, setAccuracy] = useState(0.1); const [activeConnections, setActiveConnections] = useState>(new Set()); const [terminalLogs, setTerminalLogs] = useState([]); const [lossHistory, setLossHistory] = useState([]); // 动画引用 const frameRef = useRef(0); // 辅助函数：添加日志 const addLog = (text: string) => { setTerminalLogs(prev => [...prev.slice(-4), text]); }; // 主流程控制 useEffect(() => { let timeout: NodeJS.Timeout; const runSequence = async () => { // 1. 开始 addLog("> System initializing..."); await new Promise(r => setTimeout(r, 1000)); // 2. 数据预处理 setPhase('DATA_PREP'); addLog("> Loading dataset (MNIST)..."); addLog("> Normalizing inputs..."); addLog("> Batching data..."); await new Promise(r => setTimeout(r, 2500)); // 3. 模型初始化 setPhase('INIT'); addLog("> Building architecture..."); addLog("> Initializing weights (Xavier)..."); await new Promise(r => setTimeout(r, 1500)); // 4. 训练循环 setPhase('TRAINING'); addLog("> Starting training loop..."); const totalEpochs = 50; for (let e = 1; e <= totalEpochs; e++) { setEpoch(e); // 模拟 Loss 下降和 Accuracy 上升 const progress = e / totalEpochs; const currentLoss = 2.5 * Math.exp(-4 * progress) + (Math.random() * 0.1); const currentAcc = 0.1 + (0.85 * (1 - Math.exp(-3 * progress))); setLoss(Math.max(0, currentLoss)); setAccuracy(Math.min(1, currentAcc)); setLossHistory(prev => [...prev, currentLoss]); // 模拟日志输出 if (e % 10 === 0 || e === 1) { addLog(`> Epoch ${e}/${totalEpochs} - Loss: ${currentLoss.toFixed(4)} - Acc: ${(currentAcc * 100).toFixed(1)}%`); } // 每一个 Epoch 的延迟，前期慢后期快 const delay = Math.max(50, 400 - (e * 5)); await new Promise(r => setTimeout(r, delay)); } // 5. 完成 setPhase('COMPLETE'); addLog("> Model saved successfully."); addLog("> Training complete."); // 循环重置 timeout = setTimeout(() => { setPhase('IDLE'); setEpoch(0); setLoss(2.5); setAccuracy(0.1); setLossHistory([]); setTerminalLogs([]); runSequence(); }, 5000); }; runSequence(); return () => { clearTimeout(timeout); }; }, []); // 神经网络动画循环 (处理连接线的闪烁) useEffect(() => { if (phase !== 'TRAINING') { setActiveConnections(new Set()); return; } const animateNetwork = () => { // 随机激活一些连接线来模拟数据流向 const newActive = new Set(); const layerCount = LAYERS.length; // 简单的正向传播模拟：每一帧随机点亮一些层级之间的连线 const activeLayer = Math.floor((Date.now() / 300) % (layerCount - 1)); // 生成该层级的所有可能连线ID const sourceCount = LAYERS[activeLayer]; const targetCount = LAYERS[activeLayer + 1]; for(let i=0; i 0.3) { newActive.add(`${activeLayer}-${i}-${j}`); } } } setActiveConnections(newActive); frameRef.current = requestAnimationFrame(animateNetwork); }; frameRef.current = requestAnimationFrame(animateNetwork); return () => cancelAnimationFrame(frameRef.current); }, [phase]); // 计算节点位置 const getNodePos = (layerIdx: number, nodeIdx: number) => { const layerWidth = VIEW_WIDTH * 0.5; // 网络占宽度的50% const startX = VIEW_WIDTH * 0.1; const x = startX + (layerIdx / (LAYERS.length - 1)) * layerWidth; const layerHeight = VIEW_HEIGHT * 0.6; const startY = VIEW_HEIGHT * 0.2; const count = LAYERS[layerIdx]; const spacing = layerHeight / (count + 1); const y = startY + (nodeIdx + 1) * spacing; return { x, y }; }; // 生成连接线 const renderConnections = () => { const lines = []; for (let l = 0; l < LAYERS.length - 1; l++) { for (let s = 0; s < LAYERS[l]; s++) { for (let t = 0; t < LAYERS[l + 1]; t++) { const start = getNodePos(l, s); const end = getNodePos(l + 1, t); const id = `${l}-${s}-${t}`; const isActive = activeConnections.has(id); const isComplete = phase === 'COMPLETE'; lines.push( ); // 只有在训练时才有的粒子效果 if (isActive && phase === 'TRAINING') { lines.push( ) } } } } return lines; }; // 渲染节点 const renderNodes = () => { const nodes = []; for (let l = 0; l < LAYERS.length; l++) { for (let n = 0; n < LAYERS[l]; n++) { const { x, y } = getNodePos(l, n); const isInput = l === 0; const isOutput = l === LAYERS.length - 1; const isComplete = phase === 'COMPLETE'; let label = ''; if (isInput) label = `x${n}`; else if (isOutput) label = `y${n}`; nodes.push( {/* 外发光圈 */} {phase === 'INIT' && ( )} {/* 内部脉冲点 */} {(phase === 'TRAINING' || phase === 'COMPLETE') && ( )} {/* 标签 */} {(isInput || isOutput) && ( {isInput ? label : ''} )} {isOutput && ( {label} )} ); } } return nodes; }; // 渲染 Loss 曲线图 const renderChart = () => { if (lossHistory.length === 0) return null; const chartW = 300; const chartH = 150; const startX = VIEW_WIDTH - 350; const startY = 100; // 生成 path d const points = lossHistory.map((val, i) => { const x = startX + (i / 50) * chartW; // Assuming max 50 epochs roughly fitting const y = (startY + chartH) - (val / 3) * chartH; // Normalize loss (approx max 3) return `${x},${y}`; }).join(' '); return ( {/* Chart Axis */} Loss (损失函数) {/* Line */} {/* Area under curve (optional gradient effect) */} ); }; // 渲染数据预处理阶段的动画 const renderDataPrep = () => { if (phase !== 'DATA_PREP') return null; // 创建一个矩阵网格代表原始数据 const rawData = []; const startX = 100; const startY = 200; for(let i=0; i<5; i++){ for(let j=0; j<5; j++){ rawData.push( ) } } return ( Raw Data (原始数据) {rawData} Vectorization (向量化) ) } return (

); };