Interactive web app that visualizes how Genetic Algorithms solve the 0/1 Knapsack optimization problem in real-time.
- Multiple Selection Methods - Truncation (75%) and Tournament selection with adjustable K
- Flexible Crossover - One-point and two-point crossover with configurable rates (0-100%)
- Smart Mutation - Bit-flip mutation with adjustable probability per gene
- Elitism Support - Preserve top performers across generations
- Automatic Fitness Evaluation - Instant penalty for overweight solutions
- Population Grid - Color-coded chromosomes showing fitness levels at a glance
- Purple/Blue gradient for high fitness
- Gray for low fitness
- Red outline for invalid (overweight) solutions
- Crown icons marking elite chromosomes
- Live Fitness Chart - Track best, average, and median fitness evolution over generations
- Best Solution Panel - Always displays optimal solution with item breakdown
- Chromosome Inspector - Deep-dive into any solution with detailed gene analysis
- Operation Logs - Real-time explanations of selection, crossover, and mutation events
- Step-by-Step Mode - Execute one generation at a time to understand each operation
- Auto-Run Mode - Watch evolution happen with adjustable speed (slow to fast)
- Manual Experimentation - Click chromosomes to inspect, compare, and learn
- Live Parameter Tuning - Change GA settings on the fly and see immediate effects
- Editable Problem Dataset - Add, remove, or modify items and capacity anytime
- Reproducible Experiments - Seeded random number generator ensures identical runs
- Convergence Detection - Smart stopping on stagnation (20 gens) or optimal solution
- Stagnation Warnings - Visual alerts when algorithm isn't improving
- Parameter Comparison - Test different settings with same seed for fair analysis
- What-If Analysis - Instantly see how mutation/crossover rates affect outcomes
-
Problem Configuration
- Adjustable knapsack capacity
- Custom items with any weight/value
- Pre-loaded example with 10 items
- Add/delete items on the fly
-
GA Hyperparameters
- Population size (4-100)
- Selection method (Truncate/Tournament)
- Crossover rate (0-100%)
- Crossover type (One-point/Two-point)
- Mutation rate (0-50%)
- Elitism count (0-population)
- Max generations (10-1000)
- Random seed for reproducibility
- Multiple Convergence Criteria
- Maximum generations reached
- No improvement for 20 generations (stagnation)
- All valid solutions identical (optimal convergence)
- Overweight Handling - Invalid solutions receive fitness = 0
- Elite Preservation - Best solutions automatically advance
- Generation Tracking - Full history with statistics
- Click "Initialize" → Creates random population of 20 chromosomes
- Click "Run" → Watch automatic evolution OR "Step" → Execute one generation at a time
- Click any chromosome → Inspect genes, weight, value, and fitness
- Adjust parameters → Change mutation rate, crossover type, population size
- Compare runs → Use same seed with different parameters to see effects
- Left Panel - Problem setup and GA parameter controls
- Top Bar - Run/pause/step controls with speed slider
- Center - Population grid and best solution display
- Bottom - Fitness trends chart and operation logs
- Inspector - Click any chromosome for detailed analysis
Given items with weights and values, find the optimal combination that maximizes total value without exceeding weight capacity.
Default Example: 10 items, capacity = 15 units
Challenge: 2^10 = 1,024 possible combinations to explore
Applications: Resource allocation, budgeting, cargo loading, portfolio optimization
- Parameter Sensitivity - Run with mutation rates 0.01, 0.05, 0.1, 0.2 and compare
- Selection Comparison - Test Truncation vs Tournament with identical seeds
- Crossover Analysis - Observe one-point vs two-point recombination
- Elitism Impact - Compare runs with elitism = 0, 2, 5, 10
- How does population size affect convergence speed?
- What's the optimal mutation rate for this problem?
- When does elitism help vs hurt diversity?
- How many generations until stagnation?
React 18 • Tailwind CSS • Recharts • Lucide React
MIT License - Free to use for educational and commercial purposes.
About:
🧬 Educational GA visualizer for 0/1 Knapsack with step-by-step mode, live fitness tracking,
chromosome inspection, and full parameter customization. Perfect for learning evolutionary algorithms!
Made for students, educators, and AI enthusiasts ⭐