import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Brain, Cpu, Zap, ArrowRight, CheckCircle, XCircle, Activity, GitBranch } from 'lucide-react'; const WIDTH = 1200; const HEIGHT = 700; const CENTER_LEFT = WIDTH * 0.25; // 300 const CENTER_RIGHT = WIDTH * 0.75; // 900 const INPUT_Y = 100; const BRAIN_Y = 300; const OUTPUT_Y = 600; // Helper to generate random number const random = (min, max) => Math.random() * (max - min) + min; export default function LLMThinkingModelComparison() { const [active, setActive] = useState(false); // Animation State Refs (Mutable to avoid re-renders) const frameRef = useRef(0); const timeRef = useRef(0); const phaseRef = useRef('IDLE'); // IDLE, INPUT, PROCESSING, OUTPUT, RESET const phaseTimerRef = useRef(0); // Particle Systems const inputParticlesRef = useRef([]); // {x, y, targetX, targetY, speed, active} const leftStreamRef = useRef([]); // Standard model output stream const rightThoughtsRef = useRef([]); // Reasoning model thought nodes {x, y, parentX, parentY, status, scale, age} const rightSolutionPathRef = useRef([]); // Final successful path // Trigger re-renders for UI updates only when necessary const [, setTick] = useState(0); // Background Grid (Memoized) const gridLines = useMemo(() => { const lines = []; for (let x = 0; x <= WIDTH; x += 40) lines.push({ x1: x, y1: 0, x2: x, y2: HEIGHT }); for (let y = 0; y <= HEIGHT; y += 40) lines.push({ x1: 0, y1: y, x2: WIDTH, y2: y }); return lines; }, []); // Initialize Animation Loop useEffect(() => { const loop = () => { timeRef.current += 0.016; frameRef.current++; const phase = phaseRef.current; const timer = phaseTimerRef.current; // Phase Management if (phase === 'IDLE') { if (timeRef.current > 1) { phaseRef.current = 'INPUT'; phaseTimerRef.current = 0; // Spawn input particles for(let i=0; i<5; i++) { inputParticlesRef.current.push({ x: WIDTH / 2, y: 30, // Start from top center targetXLeft: CENTER_LEFT, targetYLeft: INPUT_Y, targetXRight: CENTER_RIGHT, targetYRight: INPUT_Y, progress: 0, speed: 0.02 + i * 0.005, id: i }); } } } else if (phase === 'INPUT') { phaseTimerRef.current += 0.016; // Move particles to respective inputs inputParticlesRef.current.forEach(p => { if (p.progress < 1) p.progress += p.speed; }); if (phaseTimerRef.current > 1.5) { phaseRef.current = 'PROCESSING'; phaseTimerRef.current = 0; } } else if (phase === 'PROCESSING') { phaseTimerRef.current += 0.016; // --- LEFT SIDE (Standard) --- // Fast, linear processing if (timer > 0.5 && timer < 2.0) { if (Math.random() > 0.8) { leftStreamRef.current.push({ y: BRAIN_Y + 40, speed: random(5, 10), opacity: 1 }); } } // --- RIGHT SIDE (Thinking) --- // Complex branching thought process // Spawn thought nodes over time if (timer > 0.5 && timer < 5.5) { if (frameRef.current % 10 === 0 && rightThoughtsRef.current.length < 30) { const parent = rightThoughtsRef.current.length > 0 ? rightThoughtsRef.current[Math.floor(random(0, rightThoughtsRef.current.length))] : { x: CENTER_RIGHT, y: BRAIN_Y + 20 }; // Start from brain // Bias downwards towards output const angle = random(Math.PI * 0.2, Math.PI * 0.8); const dist = random(40, 80); const node = { x: parent.x + Math.cos(angle) * dist, y: parent.y + Math.sin(angle) * dist, parentX: parent.x, parentY: parent.y, status: 'thinking', // thinking, rejected, verified scale: 0, age: 0, id: Math.random() }; // Clamp to area if (node.x > CENTER_RIGHT - 200 && node.x < CENTER_RIGHT + 200 && node.y < OUTPUT_Y - 50) { rightThoughtsRef.current.push(node); } } } // Evaluate thoughts (simulate checking) rightThoughtsRef.current.forEach(node => { if (node.scale < 1) node.scale += 0.1; node.age += 0.016; if (node.status === 'thinking' && node.age > 1.0) { // Randomly reject or verify paths if (Math.random() > 0.7) node.status = 'rejected'; else node.status = 'verified'; } }); if (timer > 6.0) { phaseRef.current = 'OUTPUT'; phaseTimerRef.current = 0; } } else if (phase === 'OUTPUT') { phaseTimerRef.current += 0.016; if (phaseTimerRef.current > 4.0) { // Reset phaseRef.current = 'RESET'; } } else if (phase === 'RESET') { // Clear all arrays inputParticlesRef.current = []; leftStreamRef.current = []; rightThoughtsRef.current = []; phaseRef.current = 'IDLE'; phaseTimerRef.current = 0; timeRef.current = 0; } // Update Left Stream Particles leftStreamRef.current.forEach(p => { p.y += p.speed; p.opacity -= 0.02; }); leftStreamRef.current = leftStreamRef.current.filter(p => p.opacity > 0); setTick(prev => prev + 1); // Trigger render requestAnimationFrame(loop); }; const raf = requestAnimationFrame(loop); setActive(true); return () => cancelAnimationFrame(raf); }, []); // --- Render Helpers --- // Generate connector path for thinking nodes const renderThoughtConnections = () => { return rightThoughtsRef.current.map((node, i) => ( )); }; const renderThoughtNodes = () => { return rightThoughtsRef.current.map((node, i) => { let color = '#a855f7'; // Purple (Thinking) let Icon = Activity; if (node.status === 'rejected') { color = '#ef4444'; // Red Icon = XCircle; } else if (node.status === 'verified') { color = '#10b981'; // Green Icon = CheckCircle; } return ( {node.status === 'thinking' && ( )} ); }); }; return (

{/* --- SVG Layer --- */}

); }