feat: Add dynamic weather system to Evolution Aurora

- Lightning strikes on major fitness improvements (>0.005)
- Rain effect when evolution plateaus (<0.002 improvement)
- Rainbow appears when reaching 95% fitness milestone
- Integrated with existing particle and neural network systems
- Weather renders as background layer for proper visual hierarchy

app.py

@@ -61,7 +61,7 @@ AURORA_HTML = """
             Watch AI Learn to Code in Real-Time
         </p>
         <p id="welcome-msg" style="color: #00AAFF; font-size: 20px; margin-top: 20px; opacity: 0; animation: fadeIn 2s ease-in 2s forwards;">
-            🚀 Welcome to the Future of AI Development
+            🧠 Neural Network Visualization | 🚀 Synapses Fire with Each Improvement
         </p>
     </div>
 </div>
@@ -91,6 +91,13 @@ AURORA_HTML = """
 const canvas = document.getElementById('aurora-canvas');
 const ctx = canvas.getContext('2d');
 let particles = [];
+let weatherSystem = {
+    raindrops: [],
+    lightning: false,
+    lightningTimer: 0,
+    rainbow: false,
+    rainbowOpacity: 0
+};
 
 function resizeCanvas() {
     canvas.width = canvas.offsetWidth;
@@ -337,11 +344,152 @@ canvas.addEventListener('click', (e) => {
     }
 });
 
+// Track current fitness for neural network
+let currentFitness = 0.9333;
+
+// Weather System
+class Raindrop {
+    constructor() {
+        this.x = Math.random() * canvas.width;
+        this.y = -10;
+        this.speed = Math.random() * 5 + 10;
+        this.length = Math.random() * 20 + 10;
+        this.opacity = Math.random() * 0.5 + 0.3;
+    }
+    
+    update() {
+        this.y += this.speed;
+        if (this.y > canvas.height) {
+            this.y = -10;
+            this.x = Math.random() * canvas.width;
+        }
+    }
+    
+    draw() {
+        ctx.save();
+        ctx.strokeStyle = `rgba(100, 150, 255, ${this.opacity})`;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(this.x, this.y);
+        ctx.lineTo(this.x, this.y + this.length);
+        ctx.stroke();
+        ctx.restore();
+    }
+}
+
+function drawWeather() {
+    // Rain effect
+    weatherSystem.raindrops.forEach(drop => {
+        drop.update();
+        drop.draw();
+    });
+    
+    // Lightning effect
+    if (weatherSystem.lightning && weatherSystem.lightningTimer > 0) {
+        ctx.save();
+        ctx.fillStyle = `rgba(255, 255, 255, ${weatherSystem.lightningTimer / 10})`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        // Draw lightning bolt
+        if (weatherSystem.lightningTimer > 5) {
+            ctx.strokeStyle = '#FFFFFF';
+            ctx.lineWidth = 3;
+            ctx.shadowBlur = 20;
+            ctx.shadowColor = '#00AAFF';
+            
+            const startX = Math.random() * canvas.width;
+            const segments = 5;
+            let x = startX;
+            let y = 0;
+            
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            
+            for (let i = 0; i < segments; i++) {
+                x += (Math.random() - 0.5) * 100;
+                y += canvas.height / segments;
+                ctx.lineTo(x, y);
+            }
+            
+            ctx.stroke();
+        }
+        
+        ctx.restore();
+        weatherSystem.lightningTimer--;
+    }
+    
+    // Rainbow effect
+    if (weatherSystem.rainbow && weatherSystem.rainbowOpacity > 0) {
+        ctx.save();
+        const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height / 2);
+        const colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#9400D3'];
+        
+        colors.forEach((color, i) => {
+            gradient.addColorStop(i / (colors.length - 1), color);
+        });
+        
+        ctx.fillStyle = gradient;
+        ctx.globalAlpha = weatherSystem.rainbowOpacity;
+        ctx.beginPath();
+        ctx.arc(canvas.width / 2, canvas.height, canvas.width, 0, Math.PI, true);
+        ctx.fill();
+        ctx.restore();
+    }
+}
+
+function triggerLightning() {
+    weatherSystem.lightning = true;
+    weatherSystem.lightningTimer = 10;
+    
+    // Create burst at lightning strike point
+    createBurst(3);
+}
+
+function startRain() {
+    // Create raindrops
+    for (let i = 0; i < 50; i++) {
+        weatherSystem.raindrops.push(new Raindrop());
+    }
+}
+
+function stopRain() {
+    weatherSystem.raindrops = [];
+}
+
+function showRainbow() {
+    weatherSystem.rainbow = true;
+    // Fade in
+    const fadeIn = setInterval(() => {
+        weatherSystem.rainbowOpacity += 0.02;
+        if (weatherSystem.rainbowOpacity >= 0.3) {
+            clearInterval(fadeIn);
+            // Fade out after 3 seconds
+            setTimeout(() => {
+                const fadeOut = setInterval(() => {
+                    weatherSystem.rainbowOpacity -= 0.02;
+                    if (weatherSystem.rainbowOpacity <= 0) {
+                        weatherSystem.rainbow = false;
+                        weatherSystem.rainbowOpacity = 0;
+                        clearInterval(fadeOut);
+                    }
+                }, 50);
+            }, 3000);
+        }
+    }, 50);
+}
+
 function animate() {
     ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     
-    // Draw boss first (behind particles)
+    // Draw weather effects first (background)
+    drawWeather();
+    
+    // Draw neural network (middle layer)
+    neuralNetwork.update(currentFitness);
+    neuralNetwork.draw(ctx);
+    
+    // Draw boss (above neural network)
     drawBoss();
     
     // Mouse glow effect
@@ -352,6 +500,7 @@ function animate() {
     ctx.fillStyle = gradient;
     ctx.fillRect(mouseX - 100, mouseY - 100, 200, 200);
     
+    // Draw particles (foreground layer)
     particles = particles.filter(p => {
         p.update();
         p.draw();
@@ -486,12 +635,57 @@ const watchQuantum = new MutationObserver((mutations) => {
             triggerGlitch();
             speak("Victory! You have achieved perfection! 100 percent fitness!", 1.2, 1.2);
         }
+        
+        // Check for fitness updates
+        const fitnessMatch = text.match(/Fitness (\d+\.\d+)/);
+        if (fitnessMatch) {
+            const newFitness = parseFloat(fitnessMatch[1]);
+            if (newFitness > currentFitness) {
+                const improvement = newFitness - currentFitness;
+                currentFitness = newFitness;
+                // Trigger neural network firing
+                neuralNetwork.triggerFitnessImprovement(improvement);
+                
+                // Weather effects based on improvement
+                if (improvement > 0.005) {
+                    triggerLightning(); // Lightning for major improvements
+                }
+                
+                // Rainbow at 95%
+                if (newFitness >= 0.95 && currentFitness < 0.96) {
+                    showRainbow();
+                    stopRain();
+                }
+                
+                // Rain when plateauing
+                if (improvement < 0.002 && weatherSystem.raindrops.length === 0) {
+                    startRain();
+                }
+            }
+        }
     });
 });
 
 setTimeout(() => {
     const eventLog = document.querySelector('[id*="event_log"]');
     if (eventLog) watchQuantum.observe(eventLog, { childList: true, subtree: true });
+    
+    // Also watch fitness display directly
+    const fitnessDisplay = document.querySelector('[id*="fitness_display"]');
+    if (fitnessDisplay) {
+        const fitnessObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                const input = mutation.target.querySelector('input');
+                if (input && input.value) {
+                    const newFitness = parseFloat(input.value);
+                    if (!isNaN(newFitness) && newFitness !== currentFitness) {
+                        currentFitness = newFitness;
+                    }
+                }
+            });
+        });
+        fitnessObserver.observe(fitnessDisplay, { childList: true, subtree: true, attributes: true });
+    }
 }, 2000);
 
 // Epic initial burst sequence
@@ -503,6 +697,359 @@ setTimeout(() => {
 setTimeout(() => createBurst(3), 1500);
 setTimeout(() => createBurst(4), 2500);
 
+// Neural Network Visualization
+class NeuralNetwork {
+    constructor() {
+        this.neurons = [];
+        this.synapses = [];
+        this.layers = [5, 8, 6, 4, 1]; // Network architecture
+        this.setupNetwork();
+        this.pulsePhase = 0;
+        this.lastFitness = 0.9333;
+        this.firingNeurons = new Set();
+        this.brainWavePhase = 0;
+    }
+    
+    setupNetwork() {
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        const networkWidth = 400;
+        const networkHeight = 300;
+        
+        // Create neurons for each layer
+        for (let layer = 0; layer < this.layers.length; layer++) {
+            const layerNeurons = [];
+            const x = centerX - networkWidth/2 + (layer / (this.layers.length - 1)) * networkWidth;
+            
+            for (let i = 0; i < this.layers[layer]; i++) {
+                const y = centerY - networkHeight/2 + ((i + 0.5) / this.layers[layer]) * networkHeight;
+                layerNeurons.push({
+                    x: x,
+                    y: y,
+                    layer: layer,
+                    index: i,
+                    activation: Math.random() * 0.3,
+                    pulseOffset: Math.random() * Math.PI * 2,
+                    size: layer === this.layers.length - 1 ? 15 : 8 - layer // Output neuron is bigger
+                });
+            }
+            this.neurons.push(layerNeurons);
+        }
+        
+        // Create synapses between layers
+        for (let layer = 0; layer < this.layers.length - 1; layer++) {
+            for (let i = 0; i < this.neurons[layer].length; i++) {
+                for (let j = 0; j < this.neurons[layer + 1].length; j++) {
+                    this.synapses.push({
+                        from: this.neurons[layer][i],
+                        to: this.neurons[layer + 1][j],
+                        weight: Math.random() * 0.5 + 0.1,
+                        active: false,
+                        pulseProgress: 0
+                    });
+                }
+            }
+        }
+    }
+    
+    update(currentFitness) {
+        this.pulsePhase += 0.02;
+        this.brainWavePhase += 0.015;
+        
+        // Check if fitness improved
+        const fitnessImproved = currentFitness > this.lastFitness + 0.0001;
+        
+        if (fitnessImproved) {
+            // Activate firing sequence
+            this.triggerFitnessImprovement(currentFitness - this.lastFitness);
+        }
+        
+        this.lastFitness = currentFitness;
+        
+        // Update neuron activations with brain wave effect
+        for (let layer of this.neurons) {
+            for (let neuron of layer) {
+                // Base pulsing
+                neuron.activation = 0.3 + 0.2 * Math.sin(this.pulsePhase + neuron.pulseOffset);
+                
+                // Add brain wave effect
+                const waveInfluence = Math.sin(this.brainWavePhase + neuron.x * 0.01 + neuron.y * 0.01) * 0.2;
+                neuron.activation += waveInfluence;
+                
+                // Firing neurons glow brighter
+                if (this.firingNeurons.has(neuron)) {
+                    neuron.activation = Math.min(1, neuron.activation + 0.5);
+                }
+            }
+        }
+        
+        // Update synapses
+        for (let synapse of this.synapses) {
+            if (synapse.active) {
+                synapse.pulseProgress += 0.05;
+                if (synapse.pulseProgress >= 1) {
+                    synapse.active = false;
+                    synapse.pulseProgress = 0;
+                    // Activate the target neuron
+                    this.firingNeurons.add(synapse.to);
+                    setTimeout(() => this.firingNeurons.delete(synapse.to), 500);
+                }
+            }
+        }
+    }
+    
+    triggerFitnessImprovement(improvement) {
+        // Fire neurons based on improvement magnitude
+        const fireCount = Math.min(20, Math.floor(improvement * 1000));
+        
+        // Major milestone effects
+        if (this.lastFitness >= 0.95 && this.lastFitness < 0.95 + improvement) {
+            // 95% milestone - neural storm
+            this.triggerNeuralStorm();
+        }
+        if (this.lastFitness >= 0.99 && this.lastFitness < 0.99 + improvement) {
+            // 99% milestone - neural overload
+            this.triggerNeuralOverload();
+        }
+        
+        // Start with random input neurons
+        for (let i = 0; i < fireCount; i++) {
+            const neuron = this.neurons[0][Math.floor(Math.random() * this.neurons[0].length)];
+            this.firingNeurons.add(neuron);
+            
+            // Propagate through network
+            setTimeout(() => {
+                this.propagateActivation(neuron);
+            }, i * 50);
+        }
+        
+        // Create synapse firing wave
+        const synapsesToFire = this.synapses.filter(s => Math.random() < improvement * 50);
+        synapsesToFire.forEach((synapse, i) => {
+            setTimeout(() => {
+                synapse.active = true;
+                synapse.pulseProgress = 0;
+            }, i * 20);
+        });
+    }
+    
+    triggerNeuralStorm() {
+        // Fire all neurons in waves
+        for (let layer = 0; layer < this.neurons.length; layer++) {
+            setTimeout(() => {
+                this.neurons[layer].forEach(neuron => {
+                    this.firingNeurons.add(neuron);
+                    setTimeout(() => this.firingNeurons.delete(neuron), 1000);
+                });
+            }, layer * 200);
+        }
+        
+        // Activate many synapses
+        this.synapses.forEach((synapse, i) => {
+            if (Math.random() < 0.7) {
+                setTimeout(() => {
+                    synapse.active = true;
+                    synapse.pulseProgress = 0;
+                }, Math.random() * 1000);
+            }
+        });
+    }
+    
+    triggerNeuralOverload() {
+        // Extreme effect - all neurons and synapses fire rapidly
+        const overloadDuration = 3000;
+        const overloadInterval = setInterval(() => {
+            // Random neurons fire
+            for (let i = 0; i < 10; i++) {
+                const layer = Math.floor(Math.random() * this.neurons.length);
+                const index = Math.floor(Math.random() * this.neurons[layer].length);
+                const neuron = this.neurons[layer][index];
+                this.firingNeurons.add(neuron);
+                setTimeout(() => this.firingNeurons.delete(neuron), 200);
+            }
+            
+            // Random synapses fire
+            for (let i = 0; i < 20; i++) {
+                const synapse = this.synapses[Math.floor(Math.random() * this.synapses.length)];
+                synapse.active = true;
+                synapse.pulseProgress = 0;
+            }
+        }, 100);
+        
+        setTimeout(() => clearInterval(overloadInterval), overloadDuration);
+    }
+    
+    propagateActivation(neuron) {
+        // Find synapses from this neuron
+        const outgoingSynapses = this.synapses.filter(s => s.from === neuron);
+        
+        outgoingSynapses.forEach((synapse, i) => {
+            setTimeout(() => {
+                synapse.active = true;
+                synapse.pulseProgress = 0;
+            }, i * 100);
+        });
+    }
+    
+    draw(ctx) {
+        ctx.save();
+        
+        // Set overall neural network opacity
+        ctx.globalAlpha = 0.7;
+        
+        // Draw brain scan background effect
+        this.drawBrainScan(ctx);
+        
+        // Draw synapses
+        for (let synapse of this.synapses) {
+            ctx.save();
+            
+            const baseAlpha = 0.2 + synapse.weight * 0.3;
+            ctx.globalAlpha = synapse.active ? Math.min(1, baseAlpha + 0.6) : baseAlpha;
+            
+            // Draw synapse line
+            ctx.beginPath();
+            ctx.moveTo(synapse.from.x, synapse.from.y);
+            ctx.lineTo(synapse.to.x, synapse.to.y);
+            
+            const gradient = ctx.createLinearGradient(
+                synapse.from.x, synapse.from.y,
+                synapse.to.x, synapse.to.y
+            );
+            
+            if (synapse.active) {
+                // Firing synapse - animated pulse
+                const pulsePos = synapse.pulseProgress;
+                gradient.addColorStop(0, 'rgba(0, 255, 136, 0.1)');
+                gradient.addColorStop(Math.max(0, pulsePos - 0.1), 'rgba(0, 255, 136, 0.1)');
+                gradient.addColorStop(pulsePos, 'rgba(255, 255, 255, 1)');
+                gradient.addColorStop(Math.min(1, pulsePos + 0.1), 'rgba(0, 255, 136, 0.1)');
+                gradient.addColorStop(1, 'rgba(123, 63, 242, 0.1)');
+                
+                ctx.lineWidth = 3;
+                ctx.shadowBlur = 20;
+                ctx.shadowColor = '#00FF88';
+            } else {
+                gradient.addColorStop(0, 'rgba(0, 170, 255, 0.2)');
+                gradient.addColorStop(1, 'rgba(123, 63, 242, 0.2)');
+                ctx.lineWidth = 1;
+            }
+            
+            ctx.strokeStyle = gradient;
+            ctx.stroke();
+            ctx.restore();
+        }
+        
+        // Draw neurons
+        for (let layer of this.neurons) {
+            for (let neuron of layer) {
+                ctx.save();
+                
+                const isFiring = this.firingNeurons.has(neuron);
+                const isOutput = neuron.layer === this.layers.length - 1;
+                
+                // Neuron glow
+                if (isFiring || isOutput) {
+                    const glowGradient = ctx.createRadialGradient(
+                        neuron.x, neuron.y, 0,
+                        neuron.x, neuron.y, neuron.size * 3
+                    );
+                    glowGradient.addColorStop(0, isFiring ? 'rgba(255, 255, 255, 0.5)' : 'rgba(255, 215, 0, 0.3)');
+                    glowGradient.addColorStop(0.5, isFiring ? 'rgba(0, 255, 136, 0.3)' : 'rgba(255, 215, 0, 0.1)');
+                    glowGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+                    
+                    ctx.fillStyle = glowGradient;
+                    ctx.fillRect(neuron.x - neuron.size * 3, neuron.y - neuron.size * 3, 
+                                neuron.size * 6, neuron.size * 6);
+                }
+                
+                // Neuron body
+                ctx.beginPath();
+                ctx.arc(neuron.x, neuron.y, neuron.size, 0, Math.PI * 2);
+                
+                const neuronGradient = ctx.createRadialGradient(
+                    neuron.x - neuron.size/3, neuron.y - neuron.size/3, 0,
+                    neuron.x, neuron.y, neuron.size
+                );
+                
+                if (isOutput) {
+                    // Output neuron - golden
+                    neuronGradient.addColorStop(0, '#FFD700');
+                    neuronGradient.addColorStop(1, '#FFA500');
+                } else if (isFiring) {
+                    // Firing neuron - bright white/green
+                    neuronGradient.addColorStop(0, '#FFFFFF');
+                    neuronGradient.addColorStop(1, '#00FF88');
+                } else {
+                    // Normal neuron - blue/purple gradient
+                    const brightness = neuron.activation;
+                    neuronGradient.addColorStop(0, `rgba(0, 170, 255, ${brightness})`);
+                    neuronGradient.addColorStop(1, `rgba(123, 63, 242, ${brightness * 0.7})`);
+                }
+                
+                ctx.fillStyle = neuronGradient;
+                ctx.fill();
+                
+                // Neuron outline
+                ctx.strokeStyle = isFiring ? '#FFFFFF' : 'rgba(255, 255, 255, 0.2)';
+                ctx.lineWidth = isFiring ? 2 : 1;
+                ctx.stroke();
+                
+                ctx.restore();
+            }
+        }
+        
+        ctx.restore();
+    }
+    
+    drawBrainScan(ctx) {
+        // Brain scan effect - concentric circles emanating from center
+        const centerX = canvas.width / 2;
+        const centerY = canvas.height / 2;
+        
+        ctx.save();
+        
+        // Draw multiple scan waves
+        for (let i = 0; i < 5; i++) {
+            const radius = (this.brainWavePhase * 100 + i * 100) % 500;
+            const alpha = Math.max(0, 1 - radius / 500) * 0.3;
+            
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+            
+            // Create gradient stroke
+            const gradient = ctx.createRadialGradient(centerX, centerY, radius - 10, centerX, centerY, radius + 10);
+            gradient.addColorStop(0, `rgba(0, 255, 136, 0)`);
+            gradient.addColorStop(0.5, `rgba(0, 255, 136, ${alpha})`);
+            gradient.addColorStop(1, `rgba(123, 63, 242, 0)`);
+            
+            ctx.strokeStyle = gradient;
+            ctx.lineWidth = 3;
+            ctx.stroke();
+        }
+        
+        // Add "thinking" pulses randomly
+        if (Math.random() < 0.05) {
+            // Random thinking pulse
+            const pulseX = centerX + (Math.random() - 0.5) * 300;
+            const pulseY = centerY + (Math.random() - 0.5) * 200;
+            
+            const pulseGradient = ctx.createRadialGradient(pulseX, pulseY, 0, pulseX, pulseY, 50);
+            pulseGradient.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
+            pulseGradient.addColorStop(0.5, 'rgba(0, 170, 255, 0.2)');
+            pulseGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+            
+            ctx.fillStyle = pulseGradient;
+            ctx.fillRect(pulseX - 50, pulseY - 50, 100, 100);
+        }
+        
+        ctx.restore();
+    }
+}
+
+// Initialize neural network
+const neuralNetwork = new NeuralNetwork();
+
 // Mouse interaction
 let mouseX = canvas.width / 2;
 let mouseY = canvas.height / 2;
@@ -1043,7 +1590,7 @@ with gr.Blocks(
         gr.Markdown("""
         # 🌟 Evolution Aurora - AI Learning to Code
         
-        Watch as AI evolves code in real-time, with stunning visual effects that react to fitness improvements!
+        Watch as AI evolves code in real-time with neural network visualization! See synapses fire and neurons activate as the AI discovers improvements. The neural network shows the AI's "thoughts" as it learns.
         """)
         gr.HTML('''
         <div style="text-align: right; padding: 10px;">