🧠 Neural Network Visualizer

An interactive, educational web app that visualizes how neural networks learn in real-time. Built with React, TensorFlow.js, and Framer Motion.

✨ Features

• Real-time Visualization: Watch neurons activate and weights adjust during training
• 3 Problem Types:
  • XOR Problem - Classic non-linear classification (Beginner)
  • Curve Fitting - Regression with 5 different functions (Intermediate)
  • Digit Classification - 8×8 pixel digit recognition (Advanced)
• Full Interactivity: Adjust architecture, learning rate, activation functions, and batch size
• Educational Content: Tooltips and guides explaining every concept
• Beautiful UI: Dark theme with smooth animations and glow effects

📋 Prerequisites

• Node.js 18+ (check with node --version)
• npm 9+ (check with npm --version)

🚀 Quick Start

# Clone the repository
git clone https://github.com/ai-vibe-hackathon/Raphael-NN-Visualizer.git
cd Raphael-NN-Visualizer

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

📦 Available Scripts

Command	Description
npm run dev	Start development server with hot reload
npm run build	Build for production (outputs to dist/)
npm run preview	Preview production build locally
npm run lint	Run ESLint to check code quality

🌐 Deployment

To deploy the app:

# Build for production
npm run build

# The dist/ folder contains static files ready for any hosting:
# - Vercel, Netlify, GitHub Pages, etc.

Deploy to Vercel (Recommended)

npx vercel

Deploy to GitHub Pages

npm run build
# Push dist/ contents to gh-pages branch

🎮 How to Use

1. Select a Problem: Choose XOR, Regression, or Digits
2. Configure the Network: Adjust hidden layers, activation function, learning rate
3. Train: Press "Train" to start, watch the network learn!
4. Explore: Hover over (?) icons for educational explanations

🏗️ Architecture

src/
├── components/
│   ├── NetworkVisualizer.jsx   # SVG-based network diagram
│   ├── ControlPanel.jsx        # Training controls & hyperparameters
│   ├── MetricsPanel.jsx        # Loss/accuracy charts
│   ├── DataPreview.jsx         # Decision boundary & predictions
│   ├── EducationalPanel.jsx    # Learning guides
│   └── InfoTooltip.jsx         # Contextual help tooltips
├── engine/
│   ├── network.js              # TensorFlow.js wrapper
│   ├── training.js             # Training loop controller
│   └── problems/               # XOR, Regression, Digits generators
└── hooks/
    ├── useNetwork.js           # Network state management
    └── useTraining.js          # Training state & controls

🧪 Problem Types Explained

XOR Problem

The classic test for neural networks - learn the exclusive OR function. Demonstrates why hidden layers are necessary for non-linear problems.

Curve Fitting (Regression)

Approximate mathematical functions (sine, quadratic, cubic, step, gaussian). Shows the "universal approximation theorem" in action.

Digit Classification

Recognize 8×8 pixel images of digits (0-9). A simplified version of MNIST - real machine learning!

🛠️ Tech Stack

• React 18 - UI framework
• TensorFlow.js - Neural network training in the browser
• Framer Motion - Smooth animations
• Tailwind CSS - Styling
• Vite - Fast build tool

📚 Learning Resources

This visualizer helps you understand:

• Forward propagation
• Backpropagation
• Loss functions
• Activation functions (ReLU, Sigmoid, Tanh)
• Hyperparameter tuning
• Overfitting and underfitting

📄 License

MIT License - feel free to use, modify, and share!

---

Built with ❤️ for the AI Vibe Hackathon