'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 5x7 Dot Patterns for Digits 0-9 const DIGIT_PATTERNS = { 0: [ 0,1,1,1,0, 1,0,0,0,1, 1,0,0,0,1, 1,0,0,0,1, 1,0,0,0,1, 1,0,0,0,1, 0,1,1,1,0 ], 1: [ 0,0,1,0,0, 0,1,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,1,1,1,0 ], 2: [ 0,1,1,1,0, 1,0,0,0,1, 0,0,0,0,1, 0,0,0,1,0, 0,0,1,0,0, 0,1,0,0,0, 1,1,1,1,1 ], 3: [ 0,1,1,1,0, 1,0,0,0,1, 0,0,0,0,1, 0,0,1,1,0, 0,0,0,0,1, 1,0,0,0,1, 0,1,1,1,0 ], 4: [ 0,0,0,1,0, 0,0,1,1,0, 0,1,0,1,0, 1,0,0,1,0, 1,1,1,1,1, 0,0,0,1,0, 0,0,0,1,0 ], 5: [ 1,1,1,1,1, 1,0,0,0,0, 1,1,1,1,0, 0,0,0,0,1, 0,0,0,0,1, 1,0,0,0,1, 0,1,1,1,0 ], 6: [ 0,1,1,1,0, 1,0,0,0,0, 1,0,0,0,0, 1,1,1,1,0, 1,0,0,0,1, 1,0,0,0,1, 0,1,1,1,0 ], 7: [ 1,1,1,1,1, 0,0,0,0,1, 0,0,0,1,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0 ], 8: [ 0,1,1,1,0, 1,0,0,0,1, 1,0,0,0,1, 0,1,1,1,0, 1,0,0,0,1, 1,0,0,0,1, 0,1,1,1,0 ], 9: [ 0,1,1,1,0, 1,0,0,0,1, 1,0,0,0,1, 0,1,1,1,1, 0,0,0,0,1, 0,0,0,0,1, 0,1,1,1,0 ] }; // Utility to generate random fake probabilities const generateProbabilities = (targetDigit) => { const probs = Array(10).fill(0).map(() => Math.random() * 0.1); probs[targetDigit] = 0.85 + Math.random() * 0.1; // High confidence for target // Normalize roughly const sum = probs.reduce((a, b) => a + b, 0); return probs.map(p => p / sum); }; export const NeuralNetworkView = () => { const [currentDigit, setCurrentDigit] = useState(3); const [phase, setPhase] = useState('idle'); // idle, drawing, scanning, processing, output const [inputPixels, setInputPixels] = useState(Array(35).fill(0)); const [activeSynapses, setActiveSynapses] = useState([]); // Array of {layer, from, to} const [probabilities, setProbabilities] = useState(Array(10).fill(0)); const [scanLinePos, setScanLinePos] = useState(-20); // Simulation Loop useEffect(() => { let timeoutId; const runSimulation = async () => { // 1. Reset setPhase('idle'); setInputPixels(Array(35).fill(0)); setProbabilities(Array(10).fill(0.02)); // low baseline setActiveSynapses([]); setScanLinePos(-20); await new Promise(r => setTimeout(r, 1000)); // 2. Choose Digit & Draw const nextDigit = Math.floor(Math.random() * 10); setCurrentDigit(nextDigit); setPhase('drawing'); const pattern = DIGIT_PATTERNS[nextDigit]; // Animate drawing pixel by pixel for (let i = 0; i < 35; i++) { if (pattern[i]) { setInputPixels(prev => { const next = [...prev]; next[i] = 1; return next; }); await new Promise(r => setTimeout(r, 20)); } } await new Promise(r => setTimeout(r, 500)); // 3. Scan setPhase('scanning'); // Scan line animation logic handled by CSS or separate tick, // but here we just wait for visual effect for(let x = 0; x <= 140; x+=5) { setScanLinePos(x); await new Promise(r => setTimeout(r, 20)); } setScanLinePos(-20); // hide // 4. Processing (Forward Propagation) setPhase('processing'); // Layer 1 Activation (Input -> Hidden 1) setActiveSynapses(prev => [...prev, ...Array(20).fill(0).map((_, i) => ({ layer: 0, id: i }))]); await new Promise(r => setTimeout(r, 600)); // Layer 2 Activation (Hidden 1 -> Hidden 2) setActiveSynapses(prev => [...prev, ...Array(20).fill(0).map((_, i) => ({ layer: 1, id: i }))]); await new Promise(r => setTimeout(r, 600)); // Layer 3 Activation (Hidden 2 -> Output) setActiveSynapses(prev => [...prev, ...Array(20).fill(0).map((_, i) => ({ layer: 2, id: i }))]); await new Promise(r => setTimeout(r, 600)); // 5. Output Result setPhase('output'); const targetProbs = generateProbabilities(nextDigit); // Animate bars growing const steps = 20; for (let i = 1; i <= steps; i++) { setProbabilities(targetProbs.map(p => (p * i) / steps)); await new Promise(r => setTimeout(r, 30)); } await new Promise(r => setTimeout(r, 3000)); // Loop runSimulation(); }; runSimulation(); return () => clearTimeout(timeoutId); }, []); // Geometry Constants const GRID_SIZE = 20; const GRID_GAP = 5; const INPUT_OFFSET_X = 100; const INPUT_OFFSET_Y = 200; const HIDDEN_1_X = 400; const HIDDEN_2_X = 600; const OUTPUT_X = 850; const LAYER_Y_START = 100; const LAYER_HEIGHT = 400; // Render Helpers const renderInputGrid = () => { return inputPixels.map((val, i) => { const row = Math.floor(i / 5); const col = i % 5; const x = INPUT_OFFSET_X + col * (GRID_SIZE + GRID_GAP); const y = INPUT_OFFSET_Y + row * (GRID_SIZE + GRID_GAP); return ( ); }); }; const renderSynapses = () => { // Generate some static looking connections that light up // To save performance, we don't render n*m lines, but a subset for visual flair const connections = []; // Input -> Hidden 1 if (phase === 'processing' || phase === 'output') { for(let i=0; i<15; i++) { const startY = INPUT_OFFSET_Y + Math.random() * 150; const endY = LAYER_Y_START + Math.random() * LAYER_HEIGHT; connections.push( ) } } // Hidden 1 -> Hidden 2 if ((phase === 'processing' && activeSynapses.some(s => s.layer >= 1)) || phase === 'output') { for(let i=0; i<15; i++) { const startY = LAYER_Y_START + Math.random() * LAYER_HEIGHT; const endY = LAYER_Y_START + Math.random() * LAYER_HEIGHT; connections.push( ) } } // Hidden 2 -> Output if ((phase === 'processing' && activeSynapses.some(s => s.layer >= 2)) || phase === 'output') { for(let i=0; i<15; i++) { const startY = LAYER_Y_START + Math.random() * LAYER_HEIGHT; const endY = 120 + Math.random() * 380; // Output range roughly connections.push( ) } } return connections; }; const renderNodes = (x, count, color, active) => { return Array(count).fill(0).map((_, i) => { const y = LAYER_Y_START + (LAYER_HEIGHT / (count - 1)) * i; const isActive = active || (Math.random() > 0.3 && phase === 'output'); // Random activation flicker return ( {/* Halo ring */} {isActive && ( )} ); }); }; const renderOutputBars = () => { return probabilities.map((prob, i) => { const y = 120 + i * 40; const width = prob * 100; const isWinner = i === currentDigit && phase === 'output' && prob > 0.5; return ( {/* Label */} {i} {/* Bar Background */} {/* Active Bar */} {/* Percentage Text */} {(prob * 100).toFixed(1)}% ); }); }; return (

); };