Building Neural Networks from Scratch: Design and Implementation of an Interactive Visualization Teaching Platform

This project is an interactive neural network building tool implemented from scratch using Python and NumPy. It helps understand deep learning principles through a seven-step visual workflow and is built following Clean Architecture and SOLID principles. It aims to solve the "black box" problem of deep learning frameworks, allowing learners to "see" every detail of how neural networks work while demonstrating best practices in software engineering.

The "black box" nature of deep learning is the biggest obstacle for beginners to understand neural networks. Modern frameworks like PyTorch and TensorFlow are convenient, but core mechanisms (forward propagation, backpropagation, weight updates) are hidden. This project takes the opposite approach, providing the most transparent implementation rather than the most efficient one. In terms of tech stack: the backend uses Flask, the frontend uses vanilla JS with DaisyUI and Tailwind CSS. The overall design follows Clean Architecture principles, separating core algorithms, business logic, and API layers—this architectural choice itself is part of the teaching.

Neural Network Core: neural_network.py implements a fully connected neural network class that supports arbitrary layer configurations. Weight initialization uses Xavier/He methods to mitigate gradient issues, and it supports forward propagation, backpropagation, and weight updates. Activation Function Library: activation_functions.py implements five functions including Sigmoid, ReLU, and Softmax, with interfaces for forward computation and derivatives. Loss Functions: Supports MSE, binary cross-entropy, and categorical cross-entropy, returning the loss and gradient with respect to the output. Optimizers: Implements basic GD, SGD, and SGD with momentum, encapsulating weight update strategies—momentum methods accelerate convergence.

The frontend is designed with seven progressive tabs: 1. Network Construction: Drag-and-drop to create structures, select number of layers/neurons, and use binary/multi-class classification templates. 2. Dataset Configuration: Upload custom datasets or select examples, display statistical features and distributions. 3. Forward Propagation: Step-by-step execution, view input, weights, weighted sums, and activation outputs for each layer. 4. Loss Calculation: Show errors between predictions and true labels, visualize loss changes. 5. Training Cycle: Set number of epochs, learning rate, etc., and observe loss curves in real time. 6. Training Results: Display metrics like accuracy, precision, and confusion matrix. 7. Result Analysis: Check activation value distributions layer by layer, diagnose gradient vanishing or neuron death issues.

Clean Architecture Layers: core/ contains the pure Python/NumPy algorithm core (no external dependencies); services/ encapsulates business logic; api/ handles HTTP requests. Layering allows core algorithms to be tested independently and makes it easy to replace front-end/back-end frameworks. SOLID Principle Application: Classes have single responsibilities; polymorphism is achieved via interfaces and abstract base classes; dependency injection reduces coupling (e.g., activation functions, loss functions, optimizers follow the strategy pattern and can be dynamically switched). Frontend Engineering: Uses ES6 modules; CSS uses PostCSS to compile modular styles, demonstrating real production environment practices.

Suitable for multiple scenarios: 1. Deep learning beginners: A "no magic" learning environment where every step of computation is visible; adjusting parameters gives an intuitive sense of their impact. 2. Educators: An ideal classroom demonstration tool that shows network construction stages step by step; interactive experiences enhance understanding depth. 3. Software engineering learners: A case study in architectural design, learning how to balance teaching clarity with code maintainability and scalability.

Current Limitations: Only fully connected layers are supported; no GPU acceleration; no support for modern techniques like batch normalization (deliberately limited to help understand basic principles). Improvement Directions: Add convolutional and recurrent layers; implement optimizers like Adam/RMSprop; introduce regularization (Dropout, L2); develop richer visualizations (weight heatmaps, gradient flow diagrams).

"Building Neural Networks from Scratch" project proves that teaching tools don't have to sacrifice engineering quality. It uses modern architecture and engineering practices while maintaining code readability and conceptual clarity. For learners who want to truly understand deep learning principles rather than just call APIs, this is a project worth investing time in.