Back to All Projects
Perceptron Demo - Interactive AI Learning

ReactTypeScriptFramer MotionCanvas APIInteractive Visualization
Perceptron Demo - Interactive AI Learning
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.