Initial commit

src/apps/SnakeAI/SnakeAI.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import AppContainer from '../../components/AppContainer';
+import SnakeGrid from './SnakeGrid';
+import Controls from './Controls';
+import Stats from './Stats';
+import Tips from './Tips';
+import BestSnakeDisplay from './BestSnakeDisplay';
+import {
+    createPopulation,
+    evaluatePopulation,
+    evolveGeneration,
+    getBestIndividual,
+    getAverageFitness,
+    type Population,
+} from '../../lib/snakeAI/evolution';
+import type { EvolutionConfig } from '../../lib/snakeAI/types';
+import './SnakeAI.css';
+
+const DEFAULT_CONFIG: EvolutionConfig = {
+    populationSize: 25,
+    mutationRate: 0.1,
+    eliteCount: 5,
+    gridSize: 20,
+    maxGameSteps: 500,
+};
+
+export default function SnakeAI() {
+    const [population, setPopulation] = useState<Population>(() =>
+        createPopulation(DEFAULT_CONFIG)
+    );
+    const [config, setConfig] = useState<EvolutionConfig>(DEFAULT_CONFIG);
+    const [isRunning, setIsRunning] = useState(false);
+    const [speed, setSpeed] = useState(5);
+    const [gamesPlayed, setGamesPlayed] = useState(0);
+
+    // Compute derived values from population
+    const bestIndividual = getBestIndividual(population);
+    const averageFitness = getAverageFitness(population);
+
+    const animationFrameRef = useRef<number>();
+    const lastUpdateRef = useRef<number>(0);
+
+    const runGeneration = useCallback(() => {
+        setPopulation((prev) => {
+            try {
+                // Evaluate current generation
+                const evaluated = evaluatePopulation(prev, config);
+
+                // Evolve to next generation
+                const nextGen = evolveGeneration(evaluated, config);
+
+                return nextGen;
+            } catch (error) {
+                console.error("SnakeAI: Generation update failed", error);
+                return prev;
+            }
+        });
+    }, [config]);
+
+    // Update stats when generation changes
+    useEffect(() => {
+        if (population.generation > 1) {
+            setGamesPlayed((count) => count + config.populationSize);
+        }
+    }, [population.generation, config.populationSize]);
+
+    useEffect(() => {
+        if (!isRunning) {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            return;
+        }
+
+        const animate = (timestamp: number) => {
+            const elapsed = timestamp - lastUpdateRef.current;
+
+            // Non-linear speed scaling:
+            // Speed 1: ~5000ms (5s) per generation - Observation mode
+            // Speed 5: ~1000ms (1s)
+            // Speed 20: ~50ms - Turbo training
+            // Formula: Base delay divided by speed, with a visual observation bias
+
+            let updateInterval;
+            if (speed <= 5) {
+                // Speeds 1-5: 10s down to 2s
+                updateInterval = 12000 / speed;
+            } else {
+                // Speeds 6-20: Linear fast
+                updateInterval = 1000 / (speed - 4);
+            }
+
+            if (elapsed >= updateInterval) {
+                runGeneration();
+                lastUpdateRef.current = timestamp;
+            }
+
+            animationFrameRef.current = requestAnimationFrame(animate);
+        };
+
+        animationFrameRef.current = requestAnimationFrame(animate);
+
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [isRunning, speed, runGeneration]);
+
+    const handleReset = () => {
+        setIsRunning(false);
+        setPopulation(createPopulation(config));
+        setGamesPlayed(0);
+    };
+
+    const handleMutationRateChange = (rate: number) => {
+        setConfig((prev) => ({ ...prev, mutationRate: rate }));
+    };
+
+    return (
+        <AppContainer title="Neural Network Snake Evolution">
+            <div className="snake-ai-layout">
+                <div className="left-panel">
+                    <BestSnakeDisplay
+                        network={population.bestNetworkEver}
+                        gridSize={config.gridSize}
+                        fitness={population.bestFitnessEver}
+                    />
+                    <SnakeGrid
+                        individuals={population.individuals}
+                        gridSize={config.gridSize}
+                        count={config.populationSize}
+                        columns={5}
+                    />
+
+                </div>
+
+                <div className="right-panel">
+                    <Controls
+                        isRunning={isRunning}
+                        onToggleRunning={() => setIsRunning(!isRunning)}
+                        onReset={handleReset}
+                        speed={speed}
+                        onSpeedChange={setSpeed}
+                        mutationRate={config.mutationRate}
+                        onMutationRateChange={handleMutationRateChange}
+                        populationSize={config.populationSize}
+                    />
+
+                    <Stats
+                        generation={population.generation}
+                        bestFitness={bestIndividual.fitness}
+                        bestFitnessEver={population.bestFitnessEver}
+                        averageFitness={averageFitness}
+                        gamesPlayed={gamesPlayed}
+                    />
+
+                    <Tips />
+
+                </div>
+            </div>
+        </AppContainer>
+    );
+}