'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // 粒子数量 const PARTICLE_COUNT = 150; // 向量场网格密度 const GRID_COLS = 20; const GRID_ROWS = 12; // 辅助函数：生成高斯分布噪声 const randomNormal = (mean: number, std: number) => { let u = 0, v = 0; while (u === 0) u = Math.random(); while (v === 0) v = Math.random(); return mean + std * Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v); }; // 辅助函数：缓动 const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; export const FlowMatchingAnimation = () => { // 动画状态 // 0: 展示分布 (Show Distributions) // 1: 建立连接 (Optimal Transport / Linear Paths) // 2: 向量场流 (Flow / Vector Field) // 3: 传输过程 (Transporting) const [phase, setPhase] = useState(0); const [t, setT] = useState(0); // 时间 t: 0 -> 1 // 这是一个循环动画，不需要用户交互 const requestRef = useRef(); const startTimeRef = useRef(null); // 生成数据：源分布 (Noise) 和目标分布 (Data - Double Spiral) const particles = useMemo(() => { const data = []; for (let i = 0; i < PARTICLE_COUNT; i++) { // Source: Gaussian Noise (N(0, I)) // 分布在画面中心，稍微分散一点 const startX = randomNormal(CENTER_X, 80); const startY = randomNormal(CENTER_Y, 80); // Target: Swiss Roll / Spiral shape // 使得目标分布具有结构感 const angle = (i / PARTICLE_COUNT) * 4 * Math.PI; // 2 circles const radius = 50 + (i / PARTICLE_COUNT) * 180; // 增加一些随机抖动，模拟真实数据分布 const targetX = CENTER_X + Math.cos(angle) * radius + randomNormal(0, 5); const targetY = CENTER_Y + Math.sin(angle) * radius + randomNormal(0, 5); data.push({ id: i, start: { x: startX, y: startY }, end: { x: targetX, y: targetY }, // 计算速度向量 (x1 - x0) velocity: { x: targetX - startX, y: targetY - startY } }); } return data; }, []); // 生成向量场网格 const vectorGrid = useMemo(() => { const grid = []; const cellW = VIEW_WIDTH / GRID_COLS; const cellH = VIEW_HEIGHT / GRID_ROWS; for (let i = 0; i <= GRID_COLS; i++) { for (let j = 0; j <= GRID_ROWS; j++) { const x = i * cellW; const y = j * cellH; // 简单的向量场拟合：找到最近的几个粒子，计算它们的平均速度向量 // 在真实 Flow Matching 中，这是通过神经网络训练得到的 v_t(x) let sumVx = 0; let sumVy = 0; let count = 0; // 采样几个样本来决定该点的向量场方向 particles.forEach(p => { // 计算中点位置大概的向量趋势 const midX = (p.start.x + p.end.x) / 2; const midY = (p.start.y + p.end.y) / 2; const dist = Math.hypot(x - midX, y - midY); if (dist < 150) { // 局部影响范围 const weight = 1 / (1 + dist); sumVx += p.velocity.x * weight; sumVy += p.velocity.y * weight; count += weight; } }); if (count > 0) { const avgVx = sumVx / count; const avgVy = sumVy / count; const len = Math.hypot(avgVx, avgVy); // 归一化并缩放用于显示 grid.push({ x, y, vx: (avgVx / len) * 20, // 箭头长度 vy: (avgVy / len) * 20, opacity: Math.min(len / 100, 1) // 速度越快越明显 }); } else { grid.push({ x, y, vx: 0, vy: 0, opacity: 0 }); } } } return grid; }, [particles]); // 动画循环逻辑 const animate = (time: number) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // 定义各阶段时长 (ms) const PHASE_0_DUR = 2000; // 展示静态分布 const PHASE_1_DUR = 2000; // 展示路径连线 const PHASE_2_DUR = 1500; // 向量场显现 const PHASE_3_DUR = 3000; // 粒子流动 const PAUSE_DUR = 1000; // 停顿 const totalCycle = PHASE_0_DUR + PHASE_1_DUR + PHASE_2_DUR + PHASE_3_DUR + PAUSE_DUR; const cycleTime = elapsed % totalCycle; let currentPhase = 0; let localT = 0; // 0 to 1 inside the phase if (cycleTime < PHASE_0_DUR) { currentPhase = 0; localT = 0; } else if (cycleTime < PHASE_0_DUR + PHASE_1_DUR) { currentPhase = 1; localT = (cycleTime - PHASE_0_DUR) / PHASE_1_DUR; } else if (cycleTime < PHASE_0_DUR + PHASE_1_DUR + PHASE_2_DUR) { currentPhase = 2; localT = (cycleTime - (PHASE_0_DUR + PHASE_1_DUR)) / PHASE_2_DUR; } else if (cycleTime < PHASE_0_DUR + PHASE_1_DUR + PHASE_2_DUR + PHASE_3_DUR) { currentPhase = 3; localT = (cycleTime - (PHASE_0_DUR + PHASE_1_DUR + PHASE_2_DUR)) / PHASE_3_DUR; } else { currentPhase = 4; // Reset/Pause localT = 1; } setPhase(currentPhase); // 如果在流动阶段，更新 t，否则 t 保持 0 或 1 if (currentPhase === 3) { setT(easeInOutCubic(localT)); } else if (currentPhase === 4) { setT(1); } else { setT(0); } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // 渲染相关颜色 const COLOR_BG = "#0f172a"; const COLOR_NOISE = "#38bdf8"; // Sky 400 const COLOR_DATA = "#e879f9"; // Fuchsia 400 const COLOR_VECTOR = "#64748b"; // Slate 500 // 计算当前粒子位置 const getParticlePos = (p: any, timeRatio: number) => { // Linear Interpolation: x_t = (1-t)x_0 + t*x_1 // Flow Matching 核心原理：最优传输路径通常是直线 const x = (1 - timeRatio) * p.start.x + timeRatio * p.end.x; const y = (1 - timeRatio) * p.start.y + timeRatio * p.end.y; return { x, y }; }; return (

); };