Neural Network Visualizer

A Step Towards More Interpretable AI Systems.

Comment 6

Neural Network Visualizer 🧠🔍

Inspiration 🌟

Understanding how neural networks make decisions remains one of the biggest challenges in AI. While neural networks are incredibly powerful, their lack of transparency—commonly referred to as the "black box" problem—limits their usability in critical applications. Inspired by this challenge, we set out to create an interactive tool that demystifies neural networks, making them interpretable and user-friendly.

The Neural Network Visualizer project was born at SwampHacks X, a 24-hour hackathon at the University of Florida. Our goal was to help researchers, students, and enthusiasts visualize how logic gate neural networks operate at the structural and functional levels.

What It Does 🎮💡

The Neural Network Visualizer provides:

  1. Graph-Based Visualization: Displays the structure of logic gate neural networks, with neurons as nodes and connections as edges.
  2. Interactive Insights: Allows users to upload trained .pth models and analyze their forward pass on images, revealing activated paths and decision-making processes.
  3. Educational Features: Offers intuitive explanations of neural network components, activation paths, and classification processes.
  4. User Interaction: Features tools to zoom, filter, and explore layers, providing a hands-on learning experience.

How We Built It 🛠️👨‍💻

Our tool combines powerful backend processing with an engaging front-end interface:

  • Backend: We used Django to handle the processing of .pth files and PyTorch for model inference.
  • Frontend: Built with Next.js and React, featuring D3.js to create dynamic and interactive visualizations.
  • Design Considerations: Prioritized a user-friendly interface to make the tool accessible to both beginners and experts.

Challenges We Ran Into 🚧

  1. Real-Time Visualization: Handling large models while maintaining real-time interaction was a technical hurdle. We optimized data processing to ensure smooth user experiences.
  2. Interactive Graphs: Designing a responsive and informative graph visualization required integrating advanced D3.js techniques with modern front-end frameworks.
  3. Time Constraints: Creating a fully functional product within 24 hours was an exciting challenge, pushing us to prioritize and work efficiently.

Accomplishments We're Proud Of 🎉

  • Successfully creating a seamless pipeline for uploading, visualizing, and interacting with logic gate neural networks.
  • Designing an interface that bridges the gap between complex neural network operations and human understanding.
  • Positive feedback from SwampHacks participants, who found the tool engaging and educational.

What We Learned 🧠📚

  • The importance of visual tools in demystifying complex AI models.
  • How to balance backend efficiency with front-end interactivity to achieve a smooth user experience.
  • The value of user feedback in refining educational tools.

What's Next for Neural Network Visualizer 🚀

  1. Expanded Compatibility: Support for additional model formats (TensorFlow, ONNX).
  2. Generative AI Integration: Provide natural language explanations of activation paths and decisions.
  3. Export Features: Allow users to save visualizations as images or PDFs.
  4. Performance Optimization: Scale the tool for larger and more complex models.

Cited Research 📚

Petersen, P., et al. (2022). "Deep Differentiable Logic Gate Networks." NeurIPS. Link

Built With

+ 35 more
Share this project:

Updates