'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BACKGROUND_COLOR = '#e6e6e6'; // Utils const randomRange = (min, max) => Math.random() * (max - min) + min; // Types type Particle = { id: number; x: number; y: number; type: 'image' | 'text' | 'audio'; color: string; targetX: number; targetY: number; speed: number; delay: number; }; type Node = { x: number; y: number; layer: number }; export const ModelTrainingPipeline = () => { const [time, setTime] = useState(0); const requestRef = useRef(); // Phase Management // 0-300: Data Collection // 300-600: Data Processing // 600-1100: Training // 1100-1400: Evaluation/Deployment const TOTAL_CYCLE = 1400; useEffect(() => { const animate = () => { setTime(prev => (prev + 1) % TOTAL_CYCLE); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); const phase = useMemo(() => { if (time < 300) return 'COLLECTION'; if (time < 600) return 'PROCESSING'; if (time < 1100) return 'TRAINING'; return 'DEPLOYMENT'; }, [time]); // --- PHASE 1: Data Collection Logic --- const rawDataParticles: Particle[] = useMemo(() => { return Array.from({ length: 20 }).map((_, i) => { const angle = (i / 20) * Math.PI * 2; const dist = 400; return { id: i, x: VIEW_WIDTH / 2 + Math.cos(angle) * dist, y: VIEW_HEIGHT / 2 + Math.sin(angle) * dist, targetX: VIEW_WIDTH / 2, targetY: VIEW_HEIGHT / 2, type: i % 3 === 0 ? 'image' : i % 3 === 1 ? 'text' : 'audio', color: i % 3 === 0 ? '#3b82f6' : i % 3 === 1 ? '#8b5cf6' : '#10b981', speed: randomRange(0.02, 0.05), delay: randomRange(0, 50) }; }); }, []); // --- PHASE 3: Neural Network Logic --- const networkLayers = [4, 6, 6, 3]; const nodes: Node[] = useMemo(() => { const n: Node[] = []; const layerGap = 150; const startX = (VIEW_WIDTH - (networkLayers.length - 1) * layerGap) / 2; networkLayers.forEach((count, layerIdx) => { const nodeGap = 50; const startY = (VIEW_HEIGHT - (count - 1) * nodeGap) / 2; for (let i = 0; i < count; i++) { n.push({ x: startX + layerIdx * layerGap, y: startY + i * nodeGap, layer: layerIdx }); } }); return n; }, []); const connections = useMemo(() => { const links: {x1: number, y1: number, x2: number, y2: number, id: string}[] = []; nodes.forEach((src, i) => { nodes.forEach((tgt, j) => { if (tgt.layer === src.layer + 1) { links.push({ x1: src.x, y1: src.y, x2: tgt.x, y2: tgt.y, id: `${i}-${j}` }); } }); }); return links; }, [nodes]); // --- RENDERERS --- const renderCollection = () => { const progress = Math.min(1, time / 250); const scale = 1 + Math.sin(time * 0.05) * 0.05; return ( 步骤 1: 数据采集 (Data Collection) 来源: 图像库 / 文本语料 / 传感器 {/* Central Database Icon */} {/* Particles */} {rawDataParticles.map((p) => { const activeTime = time - p.delay; if (activeTime < 0) return null; const t = Math.min(1, activeTime * p.speed); const currentX = p.x + (p.targetX - p.x) * t; const currentY = p.y + (p.targetY - p.y) * t; const opacity = 1 - t; // Fade out as they enter DB return ( {p.type === 'image' && } {p.type === 'text' && } {p.type === 'audio' && } ); })} ); }; const renderProcessing = () => { const localTime = time - 300; const items = Array.from({length: 12}); return ( 步骤 2: 数据清洗与预处理 (Processing) 去噪 / 归一化 / 特征提取 {/* Pipeline Track */} {/* Filter Box */} FILTER {/* Animated Scanning Line inside Filter */} {/* Moving Items */} {items.map((_, i) => { const itemTime = (localTime + i * 40) % 400; // Loop duration const x = 100 + (itemTime / 400) * 800; // Move from 100 to 900 // Logic: Before center (500), chaotic. After center, organized. const isBefore = x < 500; const isBad = i % 3 === 0; // Every 3rd item is "bad" data let y = VIEW_HEIGHT/2; let color = isBad ? '#ef4444' : '#10b981'; let opacity = 1; let shape = 'circle'; if (isBefore) { // Chaotic Y before filter y += Math.sin(i * 10 + x * 0.05) * 30; shape = isBad ? 'cross' : 'circle'; } else { // Organized Y after filter if (isBad) { // Drop down and fade y += (x - 500) * 0.5; opacity = 1 - (x - 500) / 200; } else { // Perfectly aligned y = VIEW_HEIGHT/2; color = '#3b82f6'; // Becomes normalized blue shape = 'rect'; // Becomes Tensor } } if (opacity <= 0) return null; return ( {shape === 'circle' && } {shape === 'rect' && } {shape === 'cross' && ( )} ); })} {/* Labels */} 原始数据 (Raw) 张量 (Tensor) ); }; const renderTraining = () => { const localTime = time - 600; const epoch = Math.floor(localTime / 10); const loss = Math.max(0.01, 2.5 * Math.exp(-localTime / 200) + Math.random() * 0.05).toFixed(4); // Pulse animation logic const pulseSpeed = 100; const pulsePos = (localTime % pulseSpeed) / pulseSpeed; // 0 to 1 const isBackprop = Math.floor(localTime / pulseSpeed) % 2 === 1; return ( 步骤 3: 模型训练 (Model Training) {/* Stats Board */} Epoch {epoch}/100 Loss {loss} {/* Mini Loss Chart */} { const x = 20 + i * 3.2; const l = 2.5 * Math.exp(-(localTime - 50 + i)/200); const y = 90 - l * 20; return `${x},${Math.min(90, Math.max(60, y))}`; }).join(' ')} fill="none" stroke="#ef4444" strokeWidth="2" /> {/* Neural Net Visual */} {/* Connections */} {connections.map((link, i) => { // Calculate if this link is currently active // Layer 0->1 active at 0-0.33, 1->2 at 0.33-0.66, etc. // Simplified: just flow left to right or right to left return ( ); })} {/* Active Pulses */} {connections.map((link, i) => { const layerIdx = nodes.find(n => n.x === link.x1)?.layer || 0; // Forward Propagation (Blue) if (!isBackprop) { const activeStart = layerIdx / 3; const activeEnd = (layerIdx + 1) / 3; if (pulsePos >= activeStart && pulsePos <= activeEnd) { return ; } } // Back Propagation (Red) else { const revLayer = 2 - layerIdx; const activeStart = revLayer / 3; const activeEnd = (revLayer + 1) / 3; if (pulsePos >= activeStart && pulsePos <= activeEnd) { return ; } } return null; })} {/* Nodes */} {nodes.map((node, i) => ( ))} {isBackprop ? "◀ 反向传播 (Backpropagation) - 更新权重" : "▶ 前向传播 (Forward Propagation) - 计算预测"} ); }; const renderDeployment = () => { const localTime = time - 1100; // Animation stages: 0-50 (Package), 50-150 (Input), 150-250 (Process), 250+ (Output) const chipScale = localTime < 50 ? localTime / 50 : 1; const inputX = Math.min(VIEW_WIDTH/2 - 150, 100 + (localTime - 50) * 5); const showOutput = localTime > 200; return ( 步骤 4: 模型评估与部署 (Inference) {/* The "Brain" / Chip */} MODEL v1.0.0 {/* Processing Glow */} {localTime > 150 && localTime < 250 && ( )} {/* Input Data */} {localTime > 50 && localTime < 200 && ( 🐱 Input )} {/* Output Result */} {showOutput && ( Result CAT Conf: 99.8% )} ); }; return (

); };