Perceptron Demo

Overview

An interactive educational demonstration that teaches how perceptrons work - the building blocks of all neural networks. Created to accompany my YouTube video about the history and mechanics of artificial neurons.

What You'll Learn

• How perceptrons make decisions - See the math in action with real-time calculations
• Decision boundaries - Visualize how perceptrons divide feature space
• Training process - Watch weights update as the perceptron learns from mistakes
• The XOR limitation - Understand why single perceptrons failed and nearly killed AI research
• Neural network solution - See how multiple layers solve the XOR problem

Interactive Features

Fruit Classification

• Drop fruits and watch the perceptron classify them as bananas or apples
• See real-time equation calculations: yellowness × weight + elongation × weight + bias
• Adjust weights with sliders to see the decision boundary move instantly

Training Mode

• Start with random weights and watch the perceptron learn
• Click "Learn from Mistake" to see weight updates in real-time
• Auto-training mode: watch it learn from random fruits until 95% accuracy

The XOR Problem

• Interactive demonstration of the problem that stumped early AI researchers
• Truth table and visual representation showing why linear separation fails
• Historical context about the "AI Winter" of the 1970s

Neural Network Solution

• See how multiple perceptrons working together solve XOR
• Mathematical implementation with actual neural network equations
• Curved decision boundaries that single perceptrons could never create

YouTube Integration

This demo was created for my YouTube video "How a 1957 Machine Became the Foundation of Modern AI" where I explain:

• Frank Rosenblatt's original perceptron (1957)
• The Navy's bold predictions about conscious machines
• Minsky & Papert's devastating critique (1969)
• How modern AI like ChatGPT, Claude, and Gemini use millions of these simple building blocks

Technical Implementation

• React + TypeScript for component architecture
• Framer Motion for smooth animations and transitions
• Canvas API for real-time mathematical visualizations
• Interactive equations showing actual perceptron calculations
• Gaussian noise distribution for realistic fruit generation
• Weight clipping to prevent training instability

Educational Value

Perfect for:

• CS students learning about neural networks
• Developers wanting to understand AI fundamentals
• Anyone curious about how modern AI actually works
• Teachers looking for interactive demonstrations

The demo bridges the gap between abstract mathematical concepts and intuitive understanding, making perceptrons accessible to anyone with basic programming knowledge.