DeepLab is an interactive educational tool designed to demystify the Convolutional Neural Network (CNN). It provides a hands-on environment for students and AI enthusiasts to visualize exactly how mathematical operations transform raw images into abstract feature maps.
- Interactive Input Layer: Draw digits or shapes directly on a 14x14 pixel grid or upload your own image.
- Real-Time Convolution: Visualizes the entire pipeline with customizable parameters:
- Kernels: Experiment with Edge Detection, Sharpen, and Emboss filters.
- Activation Functions: Observe the effects of ReLU, Sigmoid, and Tanh activation on feature values.
- Mathematical Transparency:
- Microscope Mode: Hover over any pixel in the output feature map to reveal the exact calculation.
- Animation Mode: Watch the kernel physically slide across the input grid step-by-step to understand the convolution process.
- Dynamic Parameters: Adjust Kernel Size (3x3, 5x5) to see how dimensionality changes instantly.
Try the tool directly in your browser: simonnchong.github.io/convolution_visualization_tool/
- Framework: React (v18)
- Build Tool: Vite
- Styling: Tailwind CSS
- Icons: Lucide React
- Deployment: GitHub Pages (via GitHub Actions)
If you want to run this project on your own machine:
- Clone the repository:
git clone https://github.com/simonnchong/convolution_visualization_tool.git
- Navigate to the directory:
cd convolution_visualization_tool - Install dependencies (requires Node.js):
npm install
- Start the development server:
npm run dev
This project is open source and available under the MIT License.