```tsx 'use client'; import React, { useState, useEffect, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // simple 8x8 bitmap representations const CAT_GRID = [ 0,0,0,0,0,0,0,0, 0,1,0,0,0,0,1,0, // Ears 1,1,1,0,0,1,1,1, 1,1,1,1,1,1,1,1, // Head 1,0,1,1,1,1,0,1, // Eyes 1,1,1,1,1,1,1,1, 0,1,1,1,1,1,1,0, // Chin 0,0,1,1,1,1,0,0, ]; const DOG_GRID = [ 0,0,0,0,0,0,0,0, 0,0,1,1,1,1,0,0, // Head top 0,1,1,1,1,1,1,0, 1,1,1,1,1,1,1,1, // Ears flop 1,0,1,1,1,1,0,1, // Eyes 1,1,1,1,1,1,1,1, 0,0,1,1,1,1,0,0, // Snout 0,0,1,1,1,1,0,0, ]; // Utility to generate network structure const LAYERS = [6, 8, 8, 2]; // Input (features), Hidden 1, Hidden 2, Output const generateNetwork = () => { const nodes: { x: number; y: number; layer: number; id: string }[] = []; const links: { source: string; target: string; id: string }[] = []; const layerX = [350, 500, 650, 800]; LAYERS.forEach((count, layerIdx) => { const startY = (VIEW_HEIGHT - (count * 60)) / 2; for (let i = 0; i < count; i++) { const id = `l${layerIdx}-n${i}`; nodes.push({ x: layerX[layerIdx], y: startY + i * 60 + 30, layer: layerIdx, id }); } }); // Create connections nodes.forEach(node => { if (node.layer < LAYERS.length - 1) { const nextLayerNodes = nodes.filter(n => n.layer === node.layer + 1); nextLayerNodes.forEach(target => { links.push({ source: node.id, target: target.id, id: `${node.id}-${target.id}` }); }); } }); return { nodes, links }; }; export default function NeuralNetworkAnimation() { const [subject, setSubject] = useState<'cat' | 'dog'>('cat'); const [phase, setPhase] = useState(0); // 0:Idle, 1:Scan, 2:Propagate, 3:Result const [confidence, setConfidence] = useState(0); const { nodes, links } = useMemo(() => generateNetwork(), []); // Animation Loop useEffect(() => { let timer: NodeJS.Timeout; const runCycle = async () => { // Reset setPhase(0); setConfidence(0); // 1. Scan Image await new Promise(r => setTimeout(r, 500)); setPhase(1); // 2. Propagate Network await new Promise(r => setTimeout(r, 1500)); setPhase(2); // 3. Show Result await new Promise(r => setTimeout(r, 1200)); setPhase(3); // Animate confidence number const targetConf = 92 + Math.floor(Math.random() * 7); let currentConf = 0; const confInterval = setInterval(() => { currentConf += 5; if (currentConf >= targetConf) { currentConf = targetConf; clearInterval(confInterval); } setConfidence(currentConf); }, 30); // 4. Wait and Switch await new Promise(r => setTimeout(r, 3000)); setSubject(prev => prev === 'cat' ? 'dog' : 'cat'); runCycle(); }; runCycle(); return () => clearTimeout(timer); }, [subject]); const activeGrid = subject === 'cat' ? CAT_GRID : DOG_GRID; const resultColor = subject === 'cat' ? '#10b981' : '#3b82f6'; // Green for Cat, Blue for Dog const subjectLabel = subject === 'cat' ? '猫 (CAT)' : '狗 (DOG)'; return (

); } ```