poloclub/cnn-explainer

★ 8,946JavaScriptAudience · generalComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((cnn-explainer))
    What it does
      Animate CNN layers
      Image classification
      Plain English labels
    How to use
      Upload an image
      Click any layer
      Read explanation
    Setup
      npm install
      Dev server
      Model included
    Audience
      Students
      Teachers
      Curious learners

mindmap root((cnn-explainer)) What it does Animate CNN layers Image classification Plain English labels How to use Upload an image Click any layer Read explanation Setup npm install Dev server Model included Audience Students Teachers Curious learners

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Explore how a convolutional neural network classifies images by watching each layer animate step by step in the browser.

USE CASE 2

Upload your own image to see how the pre-trained CNN processes and classifies it, with plain-English explanations at each layer.

USE CASE 3

Use as a teaching aid to explain neural networks to students or non-technical stakeholders without requiring any ML background.

Tech stack

JavaScriptnpm

Getting it running

Difficulty · easy Time to first run · 5min

MIT license, use freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

CNN Explainer is an interactive web tool that lets you see inside a convolutional neural network as it processes an image. A convolutional neural network, or CNN, is a type of AI model commonly used to recognize objects in photos. The project was created by researchers at Georgia Tech and Oregon State to help people with no machine learning background understand how these models actually work. When you open the tool, you see a small pre-trained network displayed visually. You can upload an image, and the tool animates how the network transforms it step by step, layer by layer, until it arrives at a final classification. Each intermediate stage is shown as a grid of colored squares, and you can click on any of them to get an explanation of what that step is doing in plain terms. The README is quite short and focuses mainly on how to run the project locally. You install dependencies with npm, start a development server, and then open it in a browser. The underlying model was trained on a small set of image categories and is included in the repository, so no external download is needed to get started. The project is published as a research paper in IEEE Transactions on Visualization and Computer Graphics and is available under the MIT license. A live version is hosted publicly so you can try it without setting anything up. If you want to use the visualizer with your own trained model or different image categories, the repository links to relevant issues that explain how to do that.

Copy-paste prompts

Prompt 1

I want to understand how a CNN processes images. Help me run cnn-explainer locally with npm so I can upload my own photos and watch each layer transform them.

Prompt 2

I'm teaching a class on AI and want to use CNN Explainer to demonstrate how convolutional layers work. Walk me through the dev server setup and explain what each animated grid represents.

Prompt 3

I want to adapt CNN Explainer to use my own trained model. Point me to the issues or docs that explain how to swap in a different model file.

Open on GitHub → Explain another repo

← poloclub on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.