Glassbox: An Interactive Educational Tool for Visualizing Neural Network Training Processes

This article introduces Glassbox, an open-source educational tool. It uses real-time visualization technology to make the internal working mechanisms of neural networks transparent, allowing learners to intuitively understand core concepts such as signal propagation, weight updates, and backpropagation without writing code, thus solving the black-box dilemma in neural network learning.

Neural networks are widely used but remain a mysterious black box for beginners. Traditional learning requires mastering complex mathematics, programming, and deep learning frameworks, which has a high threshold. Glassbox, as a browser-based zero-code tool, provides a solution to this problem.

The name Glassbox implies transparency (like a glass box). It uses a simplified structure with 5 input neurons, 3 hidden neurons, and 5 output neurons. The inputs and outputs correspond to five geometric shapes such as squares and circles, and learners train the network by clicking on the input shapes.

Follows the "Observe-Interact-Feedback" cycle:

1. Signal propagation visualization: Dynamic SVG displays signal flow, where the thickness/color of connecting lines reflects intensity/positive/negative values, and the winning neuron is highlighted;
2. Real-time weight panel updates: After feedback, backpropagation occurs, showing weight changes and explanations;
3. Learning progress tracking: Training logs record history, and accuracy tracking quantifies results.

1. Pure front-end architecture: Single HTML file, no framework dependencies, easy to deploy;
2. WordPress compatibility: Namespace isolation avoids theme conflicts;
3. Real-time SVG rendering: Dynamically displays signal paths and weight changes with smooth interaction.

• Lower entry barrier: Zero-code environment is suitable for those without programming experience;
• Concept concretization: Abstract formulas are transformed into visual interactions;
• Classroom demonstration tool: Helps teachers explain vividly;
• Algorithm debugging intuition: Assists engineers in understanding network behavior.

Current limitations: Small network scale, simplified activation functions, fixed dataset, non-adjustable hyperparameters; Improvement suggestions: Add adjustable network scale, activation function options, custom data upload, and hyperparameter adjustment functions.

Glassbox helps cultivate AI intuition and critical thinking. In the future, it can develop multilingual support, advanced modes, collaboration functions, and course integration; as an open-source project, it provides a reference implementation for the educational technology community.