An interactive web-based platform for designing, building, and training Convolutional Neural Networks (CNNs) specifically for the MNIST handwritten digit classification task. This tool was developed as part of an IB Extended Essay research project to explore optimal CNN architectures for digit recognition.

The MNIST CNN Builder provides a comprehensive environment for understanding and experimenting with deep learning concepts. It combines an intuitive drag-and-drop interface with powerful machine learning capabilities, making CNN architecture design accessible to both beginners and advanced users.

• Visual Layer Construction: Build CNNs layer by layer with an intuitive interface
• Real-time Architecture Validation: Instant feedback on layer compatibility and sequencing
• Smart Layer Recommendations: AI-powered suggestions for optimal next layers
• Architecture Visualization: Clear display of model structure and data flow
• Parameter Configuration: Fine-tune each layer's hyperparameters with guided controls

• Browser-based Training: Complete model training using TensorFlow.js (no server required)
• MNIST Dataset Integration: Automatic loading and preprocessing of the full MNIST dataset
• Multiple Optimizers: Support for Adam, SGD, RMSprop, and Adagrad optimizers
• Customizable Training Parameters: Adjustable learning rates, batch sizes, and epoch counts
• Memory Management: Intelligent resource allocation for optimal browser performance

• Live Training Metrics: Real-time accuracy and loss tracking with interactive charts
• Feature Map Visualization: Explore what each convolutional layer learns
• Training Progress Monitoring: Detailed epoch-by-epoch performance analysis
• Model Performance Metrics: Comprehensive evaluation including precision, recall, and F1-score
• Interactive Data Exploration: Visualize MNIST samples and model predictions

• JSON Model Export/Import: Save and share complete model architectures
• Training History Preservation: Keep records of training sessions and results
• Model Comparison Tools: Compare different architectures side-by-side
• Configuration Templates: Pre-built starting points for common CNN patterns

For detailed information about each layer type, including how they work, their parameters, and best practices, visit our comprehensive CNN Layer Guide.

The guide covers:

• Convolutional Layers: Conv2D, MaxPooling2D
• Activation Layers: ReLU, Softmax
• Regularization Layers: Dropout, BatchNormalization
• Structural Layers: Flatten, Dense

Each layer includes detailed explanations, parameter descriptions, and best practices for optimal performance.

Explore what your CNN layers actually learn with our Feature Map Visualizer:

• Layer-by-layer Analysis: See feature maps for each convolutional layer
• Dense Layer Activations: Interactive bar charts showing neuron activations
• Real-time Visualization: Watch features activate as you feed images through the network
• Enhanced Rendering: Pixel-perfect visualization with crisp edges and optimal quality

• Architecture Only: Export just the layer structure and hyperparameters
• With Weights: Include trained model parameters for complete restoration
• Complete Export: Full model + training history + performance metrics
• JSON Format: Human-readable and easily shareable format

• Live Charts: Real-time accuracy and loss visualization using Chart.js
• Multiple Metrics: Track accuracy, validation accuracy, loss, and validation loss
• Training History: Complete record of all training sessions
• Model Comparison: Compare different architectures and their performance

1. Add Basic CNN Layers:

   • Conv2D: 8 filters, 3x3 kernel → Click "Add Layer"
   • ReLU: No parameters → Click "Add Layer"
   • MaxPooling2D: 2x2 pool → Click "Add Layer"
   • Flatten: No parameters → Click "Add Layer"
   • Dense: 10 units → Click "Add Layer"
   • Softmax: No parameters → Click "Add Layer"

2. Configure Training:

   • Epochs: 3 (for quick demo)
   • Batch Size: 32
   • Learning Rate: 0.001
   • Optimizer: Adam

3. Train: Click "Start Training" and watch the live chart update

4. Export: Save your model architecture for later use

• Start with fewer filters (8-16) and gradually increase
• Always use ReLU after Conv2D layers
• Add Dropout (0.25) before Dense layers to prevent overfitting
• Use BatchNormalization for faster training convergence

The platform includes sophisticated validation systems that ensure your CNN architectures are both valid and optimal:

• Layer Compatibility Checking: Automatically verifies that consecutive layers can connect properly
• Shape Inference: Calculates and displays tensor shapes at each layer
• Architecture Scoring: Provides feedback on architecture quality and efficiency
• Error Prevention: Blocks invalid configurations before they cause training failures
• Optimization Suggestions: Recommends improvements for better performance

• Adaptive Memory Management: Automatically adjusts batch sizes based on available browser memory
• Training Resume: Pause and resume training sessions without losing progress
• Early Stopping: Automatically stops training when validation performance plateaus
• Learning Rate Scheduling: Dynamic adjustment of learning rates during training
• Cross-Validation: Built-in k-fold validation for robust performance estimates

• Architecture Diagrams: Visual representation of your network structure
• Feature Map Explorer: Interactive visualization of what each layer learns
• Training Curves: Real-time plotting of accuracy, loss, and custom metrics
• Confusion Matrix: Detailed classification performance analysis
• Weight Histograms: Distribution analysis of learned parameters
• Gradient Flow Visualization: Monitor gradient propagation through layers

• Version Control: Track changes to your model architectures
• Performance Database: Historical records of all training sessions
• Model Comparison: Side-by-side analysis of different architectures
• Export Formats: Support for TensorFlow.js, JSON, and model summaries
• Sharing Capabilities: Generate shareable links for model configurations

• React 19: Modern component-based UI framework with latest features
• TypeScript: Type-safe development for robust code
• TensorFlow.js 4.22: State-of-the-art machine learning in the browser
• Chart.js + react-chartjs-2: Professional data visualization
• Custom CSS: Carefully crafted dark theme optimized for extended use

• WebGL Acceleration: GPU-accelerated training for faster performance
• Memory Optimization: Efficient tensor management and garbage collection
• Multi-threading: Web Workers for non-blocking computation
• Progressive Loading: Intelligent dataset loading and caching strategies

• MNIST Integration: Seamless loading of the complete MNIST dataset
• Data Augmentation: Built-in image transformations for improved generalization
• Preprocessing: Automatic normalization and formatting
• Batch Management: Efficient data batching for optimal training performance

• Browser: Chrome 90+, Firefox 88+, Safari 14+, or Edge 90+
• Memory: 4GB RAM minimum (8GB recommended for large models)
• Storage: 100MB free space for dataset caching
• Internet: Required for initial dataset download (50MB)

# Clone the repository
git clone https://github.com/AsleshSura/MNIST-CNN-Builder.git

cd MNIST-CNN-Builder/cnn-builder


# Install dependencies
npm install



# Start the application
npm startt

The application will automatically open at http://localhost:3000.

# Build for production
npm run build



# Deploy to GitHub Pages
npm run deploy



# Create Docker container
docker build -t mnist-cnn-builder  .
docker run -p 3000:3000 mnist-cnn-builderr

1. Start with Input Specification: The system automatically configures for MNIST (28×28×1)
2. Add Convolutional Layers: Begin with Conv2D layer (8-16 filters, 3×3 kernel)
3. Apply Activation: Add ReLU after each Conv2D layer
4. Include Pooling: Use MaxPooling2D to reduce spatial dimensions
5. Add Regularization: Include BatchNormalization or Dropout as needed
6. Transition to Dense: Use Flatten to prepare for fully connected layers
7. Final Classification: End with Dense(10) + Softmax for digit classification

Each layer offers extensive customization options:

Conv2D Configuration:

• Filter Count: Start with 8-16, increase in deeper layers (8→16→32→64)
• Kernel Size: 3×3 recommended for most cases, 5×5 for larger patterns
• Strides: Usually 1, use 2 for downsampling without pooling
• Padding: 'same' preserves dimensions, 'valid' reduces them
• Activation: Can include ReLU directly or use separate layer

Training Parameters:

• Learning Rate: 0.001 (Adam), 0.01 (SGD) as starting points
• Batch Size: 32-64 for most models, reduce for memory constraints
• Epochs: 10-20 for experimentation, 50+ for final models
• Optimizer: Adam for beginners, SGD with momentum for fine-tuning

1. Validation: System checks architecture validity
2. Compilation: Model is compiled with specified parameters
3. Data Loading: MNIST dataset loads with progress indication
4. Training Loop: Real-time monitoring of metrics and visualizations
5. Evaluation: Comprehensive performance analysis on test set

• Review Metrics: Examine accuracy, loss, and convergence patterns
• Analyze Visualizations: Study feature maps and training curves
• Identify Issues: Use built-in diagnostic tools
• Iterate Design: Apply recommendations for architecture improvements

// Example: Systematic hyperparameter exploration

const experiments = [
   { filters: [8, 16, 32], learningRate: 0.001 },
   { filters: [16, 32, 64], learningRate: 0.001 },
   { filters: [32, 64, 128], learningRate: 0.0005 }

];


// Platform supports batch experiment execution

experiments.forEach(config =>gt; {
   createModel(config);
   trainModel();
   exportResults();

});

The platform supports implementation of popular CNN architectures:

• LeNet-5 Style: Classic architecture with alternating Conv/Pool layers
• Modern CNN: BatchNormalization + Dropout for regularization
• Residual Connections: (Advanced feature, experimental support)
• Dense Connections: Multiple parallel paths through the network

Perfect for learning CNN fundamentals:

Input (28×28×1)
├── Conv2D(8 filters, 3×3) → ReLU
├── MaxPooling2D(2×2)
├── Conv2D(16 filters, 3×3) → ReLU
├── MaxPooling2D(2×2)
├── Flatten
├── Dense(64) → ReLU
├── Dropout(0.25)
├── Dense(10) → Softmax
Output (10 classes)
classes)

Expected Performance: 97-98% accuracy, ~2-3 minutes training

Balanced complexity and performance:

Input (28×28×1)
├── Conv2D(16 filters, 3×3) → BatchNorm → ReLU
├── Conv2D(16 filters, 3×3) → BatchNorm → ReLU
├── MaxPooling2D(2×2) → Dropout(0.1)
├── Conv2D(32 filters, 3×3) → BatchNorm → ReLU
├── Conv2D(32 filters, 3×3) → BatchNorm → ReLU
├── MaxPooling2D(2×2) → Dropout(0.1)
├── Flatten
├── Dense(128) → ReLU → Dropout(0.3)
├── Dense(10) → Softmax
Output (10 classes)
 classes)

Expected Performance: 98-99% accuracy, ~5-7 minutes training

Research-grade performance:

Input (28×28×1)
├── Conv2D(32 filters, 3×3) → BatchNorm → ReLU
├── Conv2D(32 filters, 3×3) → BatchNorm → ReLU
├── MaxPooling2D(2×2) → Dropout(0.1)
├── Conv2D(64 filters, 3×3) → BatchNorm → ReLU
├── Conv2D(64 filters, 3×3) → BatchNorm → ReLU
├── MaxPooling2D(2×2) → Dropout(0.1)
├── Conv2D(128 filters, 3×3) → BatchNorm → ReLU
├── Conv2D(128 filters, 3×3) → BatchNorm → ReLU
├── MaxPooling2D(2×2) → Dropout(0.2)
├── Flatten
├── Dense(256) → ReLU → Dropout(0.4)
├── Dense(128) → ReLU → Dropout(0.3)
├── Dense(10) → Softmax
Output (10 classes)
 (10 classes)

Expected Performance: 99%+ accuracy, ~10-15 minutes training

• Machine Learning Students: Hands-on experience with CNN architecture design
• Computer Science Educators: Interactive teaching tool for deep learning concepts
• Research Scientists: Rapid prototyping platform for architectural experiments
• Industry Practitioners: Training ground for understanding CNN fundamentals
• Hobbyist Developers: Accessible entry point into deep learning

1. Understanding Layer Functions: Learn what each CNN layer type accomplishes
2. Architecture Design Principles: Discover effective patterns for network construction
3. Hyperparameter Effects: Explore how different settings impact performance
4. Training Dynamics: Observe how networks learn through visualization
5. Performance Optimization: Develop intuition for improving model accuracy

• Progressive Complexity: Start simple, advance to sophisticated architectures
• Immediate Feedback: Real-time validation and suggestions guide learning
• Visual Learning: Charts and diagrams reinforce conceptual understanding
• Experimentation: Safe environment to try ideas without consequences
• Best Practices: Built-in guidance toward proven architectural patterns

• Code Generation: Export architectures as TensorFlow/PyTorch code
• Performance Profiling: Detailed analysis of computational bottlenecks
• Memory Usage Tracking: Monitor resource consumption during training
• Gradient Analysis: Visualize gradient flow and potential vanishing/exploding issues
• Layer-wise Learning Rates: Advanced optimization techniques

• Architecture Search: Automated exploration of design spaces
• Ablation Studies: Systematic removal of components to assess contributions
• Hyperparameter Optimization: Grid search and random search implementations
• Cross-validation: Robust performance estimation techniques
• Statistical Analysis: Confidence intervals and significance testing

• API Access: Programmatic control for automated experiments
• Data Export: CSV, JSON, and HDF5 format support for analysis
• Model Deployment: Export models for production use
• Cloud Integration: Save models to cloud storage services
• Collaboration Tools: Share experiments with team members

Slow Convergence:

• Reduce learning rate (try 0.0001 instead of 0.001)
• Increase batch size for more stable gradients
• Add BatchNormalization layers for faster convergence
• Check for proper weight initialization

Overfitting Symptoms:

• Training accuracy >> Validation accuracycuracy
• Add Dropout layers (start with 0.25 rate)
• Reduce model complexity (fewer filters/units)
• Implement early stopping
• Consider data augmentation

Underfitting Issues:

• Increase model capacity (more filters, layers)
• Reduce regularization (lower dropout rates)
• Increase training epochs
• Verify data preprocessing is correct

Memory Errors:

• Reduce batch size (try 16 or 8)
• Use fewer filters in convolutional layers
• Close other browser tabs
• Restart browser to clear memory

Data Loading Issues:

• Check internet connection for MNIST download
• Clear browser cache and reload
• Try different browser if persistent issues
• Use fallback dummy data option

Training Failures:

• Verify model ends with Dense(10) + Softmax
• Check for NaN values in loss (reduce learning rate)
• Ensure proper layer sequencing
• Review browser console for detailed errors

• Layer Ordering: Conv2D → BatchNorm → ReLU → Pooling
• Filter Progression: Increase filters gradually (8→16→32→64)
• Pooling Strategy: Use 2×2 pooling with stride 2
• Dense Layer Sizing: Start large, reduce toward output

• Learning Rate Scheduling: Start high, reduce when plateau
• Batch Size Selection: Larger batches = more stable, smaller = more updates
• Optimizer Choice: Adam for general use, SGD for fine-tuning
• Early Stopping: Monitor validation loss, stop when increasing

• Memory Management: Manually dispose tensors when possible
• Background Tabs: Close unnecessary tabs during training
• WebGL Utilization: Ensure GPU acceleration is enabled
• Caching Strategy: Leverage browser storage for datasets

• Architecture Analysis: Compare different CNN designs systematically
• Educational Studies: Measure learning effectiveness of interactive tools
• Algorithm Development: Test new layer types and training techniques
• Performance Benchmarking: Establish baselines for MNIST classification

• Custom Datasets: Upload your own image classification problems
• Transfer Learning: Pre-trained model integration
• Advanced Layers: Attention mechanisms, residual connections
• Ensemble Methods: Combine multiple models for better performance
• Adversarial Training: Robustness testing against adversarial examples

The platform has been tested against standard MNIST benchmarks:

# Local development
.\deploy.ps1  -Local


# Deploy to GitHub Pages
.\deploy.ps1  -Pages

# Local development
./deploy.sh  local


# Deploy to GitHub Pages  
./deploy.sh pagess

# Install and build
npm run install-deps
npm run build



# Deploy to production
npm run deployy

🌐 Visit the live application: https://asleshsura.github.io/MNIST-CNN-Builder/docs/

For detailed deployment instructions, see DEPLOYMENT.md.

This project is licensed under the MIT License - see the LICENSE file for details.

If you use this tool in academic research, please cite:

@software{mnist_cnn_builder,
   title={MNIST CNN Builder: Interactive Deep Learning Architecture Design},
   author={[Your Name]},
   year={2025},
   url={https://github.com/AsleshSura/MNIST-CNN-Builder},
   note={IB Extended Essay Research Project}
}}

• TensorFlow.js Team: For the excellent browser-based ML framework
• MNIST Dataset: LeCun, Bottou, Bengio, and Haffner for the benchmark dataset
• React Community: For the robust frontend framework
• Open Source Contributors: For libraries and tools that made this possible

Built with ❤️ for advancing deep learning education and research. Empowering the next generation of AI practitioners through interactive, accessible tools.

This project represents the intersection of education, technology, and research - making complex machine learning concepts tangible and explorable for learners worldwide.