A powerful web application that visualizes Convolutional Neural Network (CNN) feature maps and layer activations in real-time. This tool helps researchers, students, and machine learning enthusiasts have an idea on how CNNs(VGG16) process and interpret images through different layers of the network.
- Real-time visualization of CNN feature maps
- Interactive layer exploration
- Dynamic feature map rendering
- Modern and intuitive user interface
- Built with Next.js and TypeScript for optimal performance
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher)
- npm (v9 or higher)
Note: This is the frontend repository. The backend repository can be found at cnn-visualizer-backend
- Clone the repository:
git clone https://github.com/codeflamer/cnn-visualizer
cd cnn_visualizer- Install dependencies:
npm install- Set up environment variables:
Create a
.env.localfile in the root directory and add:
NEXT_PUBLIC_API_URL=your_backend_api_url
- Run the development server:
npm run devThe application will be available at http://localhost:3000
npm run dev- Starts the development servernpm run build- Builds the application for production
- Frontend Framework: Next.js 15.3.1
- Language: TypeScript
- UI Components: React 19
- Styling: Tailwind CSS
- Canvas Rendering: Konva.js
- Flow Visualization: @xyflow/react
cnn_visualizer/
├── app/ # Next.js app directory
├── components/ # React components
├── hooks/ # Custom React hooks
├── libs/ # Utility functions and libraries
├── public/ # Static assets
├── stores/ # State management
└── types/ # TypeScript type definitions
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request