dl-world: Walk Through a Visualized City of Neural Networks in Your Browser

dl-world is an innovative interactive learning project that transforms deep learning concepts into an explorable 3D city, enabling learners to intuitively understand the working principles of neural networks in a virtual environment from a first-person perspective. Built on Web technologies, this project reduces the abstract barrier of deep learning through spatialized visual mapping, providing a new path from 'watching' to 'experiencing' for AI education.

As the core technology of AI, deep learning is too abstract for beginners. Traditional learning relies on mathematical formulas and static charts, making it difficult to build an intuitive understanding. Existing visualization tools like TensorBoard and Netron have made attempts, but most focus on displaying network structures or training processes, lacking the immersive experience that allows learners to 'enter' the network and explore its interior. dl-world addresses this pain point with a brand-new approach of 3D city modeling.

dl-world maps neural network elements to 3D city components:

• Neurons → Buildings (light up when activated; intensity corresponds to brightness; different activation functions correspond to different styles)
• Connections → Streets (data flow paths)
• Layers → City Districts (input layer at the edge, output layer at the center, hidden layers in between)
• Activation → Traffic (visualization of data flow)
• Abstract Concepts → Landmarks (loss functions, optimizers, etc.) In addition, it dynamically displays data flow (batch processing as fleets of data packets) and backpropagation (reverse flow of gradient signals), helping learners intuitively understand the processes of forward propagation and weight update.

dl-world is built on a modern Web technology stack: Three.js (3D rendering), React (UI and state management), WebGL (hardware acceleration), and Web Workers (background computing to ensure responsiveness). It has a built-in lightweight JS neural network engine that supports common layer types and activation functions, prioritizing interpretability over performance; it also supports importing pre-trained models in ONNX or TensorFlow.js formats to explore real-world network architectures.

Educational Value: Enhances concept retention using spatial memory; supports experimental learning such as real-time parameter modification, fault injection, comparison mode, and time travel; multiplayer mode promotes collaboration. Application Scenarios: Classroom teaching (replacing slides), self-study for beginners (low-threshold browser access), interview preparation (consolidating basics), cross-disciplinary communication (intuitively explaining AI to non-technical personnel).

Current Limitations: Browser performance constraints lead to limited model size (unable to display large Transformers), slow training speed (visualization takes priority), and insufficient coverage of advanced concepts (e.g., attention mechanisms). Future Directions: Support VR/AR (WebXR), expand to more architectures (CNN/RNN/Transformer), dataset visualization, and community contribution features (users create and share concept cities).

dl-world represents an innovative direction for AI education tools. Although it does not replace traditional math and programming learning, as an auxiliary tool, it can help build intuition and lower the entry barrier. In today's era of AI popularization, such projects make deep learning accessible through immersive visualization, which has important social significance for promoting AI understanding and provides a friendly entry point for learners who are intimidated by abstract concepts.