Learning Convolutional Neural Networks with Interactive Visualization.

Last update: Jan 01, 2023

Overview

CNN Explainer

An interactive visualization system designed to help non-experts learn about Convolutional Neural Networks (CNNs)

For more information, check out our manuscript:

CNN Explainer: Learning Convolutional Neural Networks with Interactive Visualization. Wang, Zijie J., Robert Turko, Omar Shaikh, Haekyu Park, Nilaksh Das, Fred Hohman, Minsuk Kahng, and Duen Horng Chau. IEEE Transactions on Visualization and Computer Graphics (TVCG), 2020.

Live Demo

For a live demo, visit: http://poloclub.github.io/cnn-explainer/

Running Locally

Clone or download this repository:

git clone [email protected]:poloclub/cnn-explainer.git

# use degit if you don't want to download commit histories
degit poloclub/cnn-explainer

Install the dependencies:

npm install

Then run CNN Explainer:

npm run dev

Navigate to localhost:5000. You should see CNN Explainer running in your broswer :)

To see how we trained the CNN, visit the directory ./tiny-vgg/. If you want to use CNN Explainer with your own CNN model or image classes, see #8 and #14.

Credits

CNN Explainer was created by Jay Wang, Robert Turko, Omar Shaikh, Haekyu Park, Nilaksh Das, Fred Hohman, Minsuk Kahng, and Polo Chau, which was the result of a research collaboration between Georgia Tech and Oregon State.

We thank Anmol Chhabria, Kaan Sancak, Kantwon Rogers, and the Georgia Tech Visualization Lab for their support and constructive feedback.

Citation

@article{wangCNNExplainerLearning2020,
  title = {{{CNN Explainer}}: {{Learning Convolutional Neural Networks}} with {{Interactive Visualization}}},
  shorttitle = {{{CNN Explainer}}},
  author = {Wang, Zijie J. and Turko, Robert and Shaikh, Omar and Park, Haekyu and Das, Nilaksh and Hohman, Fred and Kahng, Minsuk and Chau, Duen Horng},
  journal={IEEE Transactions on Visualization and Computer Graphics (TVCG)},
  year={2020},
  publisher={IEEE}
}

License

The software is available under the MIT License.

Contact

If you have any questions, feel free to open an issue or contact Jay Wang.

Comments

detail view not work with new added convolution nodes

Hallo @xiaohk, thank you very much for your reply, it is very helpful. I now fixed several problems I have met, for example the detail view of existing convolution nodes now are displayed with their former nodes and bais normally. But I still cant make new added convolution nodes show their detail view animation.

and here are the codes I changed:

const layerIndexDict = { 'input': 0, 'conv_1_1': 1, 'relu_1_1': 2, 'conv_1_2': 3, 'relu_1_2': 4, 'max_pool_1': 5, 'conv_2_1': 6, 'relu_2_1': 7, 'conv_2_2': 8, 'relu_2_2': 9, 'max_pool_2': 10, 'conv_3_1': 11, 'relu_3_1': 12, 'conv_3_2': 13, 'relu_3_2': 14, 'max_pool_3': 15, 'output': 16 }

const layerLegendDict = { 0: {local: 'input-legend', module: 'input-legend', global: 'input-legend'}, 1: {local: 'local-legend-0-1', module: 'module-legend-0', global: 'global-legend'}, 2: {local: 'local-legend-0-1', module: 'module-legend-0', global: 'global-legend'}, 3: {local: 'local-legend-0-2', module: 'module-legend-0', global: 'global-legend'}, 4: {local: 'local-legend-0-2', module: 'module-legend-0', global: 'global-legend'}, 5: {local: 'local-legend-0-2', module: 'module-legend-0', global: 'global-legend'}, 6: {local: 'local-legend-1-1', module: 'module-legend-1', global: 'global-legend'}, 7: {local: 'local-legend-1-1', module: 'module-legend-1', global: 'global-legend'}, 8: {local: 'local-legend-1-2', module: 'module-legend-1', global: 'global-legend'}, 9: {local: 'local-legend-1-2', module: 'module-legend-1', global: 'global-legend'}, 10: {local: 'local-legend-1-2', module: 'module-legend-1', global: 'global-legend'}, 11: {local: 'local-legend-2-1', module: 'module-legend-2', global: 'global-legend'}, 12: {local: 'local-legend-2-1', module: 'module-legend-2', global: 'global-legend'}, 13: {local: 'local-legend-2-2', module: 'module-legend-2', global: 'global-legend'}, 14: {local: 'local-legend-2-2', module: 'module-legend-2', global: 'global-legend'}, 15: {local: 'local-legend-2-2', module: 'module-legend-2', global: 'global-legend'}, 16: {local: 'output-legend', module: 'output-legend', global: 'output-legend'} } // I'm not sure if I did right here

let updatingLayerIndexDict = { local: { module: [1, 2, 8, 9, 10, 13, 14, 15], global: [1, 2, 3, 4, 5, 8, 9, 10, 13, 14, 15] }, module: { local: [1, 2, 8, 9, 10, 13, 14, 15], global: [1, 2, 3, 4, 5, 8, 9, 10, 13, 14, 15] }, global: { local: [1, 2, 3, 4, 5, 8, 9, 10, 13, 14, 15], module: [1, 2, 3, 4, 5] } }; // about this part I dont really understand how this works and how can people change it to adjust to another model

and I have a question about the following part:

let detailedViewAbsCoords = { 1 : [600, 270, 490, 290], 2 : [500, 270, 490, 290], 3 : [700, 270, 490, 290], 4 : [600, 270, 490, 290], 5 : [650, 270, 490, 290], 6 : [775, 270, 490, 290], 7 : [100, 270, 490, 290], 8 : [60, 270, 490, 290], 9 : [200, 270, 490, 290], 10: [300, 270, 490, 290], } what does this part mean? should I change this part to adjust to my model? and how?

opened by baobobby 6
cnn _ explainer in local host

hi ... i tried to rub the package.jason in eclipse . the message console shows the local host port . but when i open the local host in chrome the CNN explainer remains blank.

opened by swetha311295 6
Error in running tiny-vgg.py

Hi,

I ran the tiny-vgg.py following the conda env (supposedly all dependencies are installed), and I got error like below. ValueError: Input 0 of layer sequential is incompatible with the layer: its rank is undefined, but the layer requires a defined rank. I'm seeking your thoughts on what is going on. No one else seems have this issue. Thanks for your time answering this.

opened by ScorpLee 6
How to display images on git pages with cnn explainer

I am training on tiny-vgg using a plant image dataset and am trying to display it in browser in cnn-explainer. I could run npm run dev command and see it in my local environment, but when I run npm run build command and try to view it on github pages it doesn't work. Only the layer part of the neural network is not displayed. What should i do? Please tell me how to solve it. https://nikamasa51-d4c7cc0837.drafts.github.io/Study_CNN_Explainer/

opened by NikaMasa51 5
Whether is possible to customize the CNN-Explainer

Hi.

Thank you for sharing this excellent work. The explainer is super helpful for understanding the CNN. Since I am not familiar with the TF.js. I wonder if I finetune the tiny-VGG on other datasets for example dog vs cat, will explainer automatically change to show how the CNN works on dog vs cat? Or I have to rewrite the part of the js to make it works. Thank you.

opened by ljjsfe 5
The explainer won't show up in the browser

Hi! First of all I really do appreciate you and your team hard work! But, a problem occurred in my browser, Well the rest of the page is working smoothly, Unfortunately the explainer wouldn't show up.. is there anything that I could do? I've also try to open it locally, but still the problem occurred :(

opened by Anindya18081010098 4
no CNN Explainer running in broswer

Hi, I have download git and npm, and the cnn-explainer was downloaded successfully, then I used npm run dev, it showed "you application is ready" !

but when I input "localhost:5000" in my broswer, there is nothing in my broswer,

I don't know where was wrong. Please help me, thank you.

opened by homingZhang 4
ReLu function max(0,a) gives 0

Using Ladybug pic as an example, the ReLU function after the top one layer (orange colour) gives 0 when the max value is not zero. For example, I got max(0,0.64)=0. Should it be 0.64? Thank you.

opened by jeromecy 3
Layout messed up

Hello,

Kudos to this awesome project!!! I love it.

I just downloaded the repo and I was able to run it locally. But the layout seems completely messed up. It's not as organized as the live demo. I've tried it on Chrome, Safari and Firefox and they all have the same messed layout.

I wonder if there is a way to get it fixed. Thanks

See images below:

opened by LqYe 3
vue中无法运行

当我运行程序的时候就会报错，也不知道是什么原因，哪位大神帮忙指点迷津，谢谢！ D:\works\qianduan\ywgz-mini-program>npm run dev npm ERR! Windows_NT 10.0.19042 npm ERR! argv "D:\software\node\node_new\node.exe" "C:\Users\86152\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "ru n" "dev" npm ERR! node v16.14.0 npm ERR! npm v3.8.6 npm ERR! path D:\works\qianduan\ywgz-mini-program\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open 'D:\works\qianduan\ywgz-mini-program\package.json' npm ERR! enoent ENOENT: no such file or directory, open 'D:\works\qianduan\ywgz-mini-program\package.json' npm ERR! enoent This is most likely not a problem with npm itself npm ERR! enoent and is related to npm not being able to find a file. npm ERR! enoent

npm ERR! Please include the following file with any support request: npm ERR! D:\works\qianduan\ywgz-mini-program\npm-debug.log

opened by ChenWeiJiaGitHub 2
Possible to support loading and introspecting via ONNX.js?

Relates #2 and #8: Might it be possible to support loading / introspecting (a subset of) models loaded via ONNX.js? https://github.com/Microsoft/onnxjs

Curious because we would like to visualize our own PyTorch model / networks.

I'm assuming that this may be closed as out-of-scope, which is totally fine! Just wanna put it out there ;)

opened by EricCousineau-TRI 2

Releases(0.9.1)

0.9.1(Jul 30, 2020)

CNN Explainer code for a research paper revision
Source code(tar.gz)
Source code(zip)
v0.9(Apr 30, 2020)

CNN Explainer code for a research paper submission
Source code(tar.gz)
Source code(zip)

Owner

Polo Club of Data Science

Research project repositories, from the Polo Club of Data Science at Georgia Tech

GitHub Repository https://poloclub.github.io/cnn-explainer/

Simple and lightweight Spotify Overlay written in Python.

Simple Spotify Overlay This is a simple yet powerful Spotify Overlay. About I have been looking for something like this ever since I got Spotify. I th

27 Sep 03, 2022

A Python function that makes flower plots.

Flower plot A Python 3.9+ function that makes flower plots. Installation This package requires at least Python 3.9. pip install

4 Jun 12, 2022

Create SVG drawings from vector geodata files (SHP, geojson, etc).

SVGIS Create SVG drawings from vector geodata files (SHP, geojson, etc). SVGIS is great for: creating small multiples, combining lots of datasets in a

78 Dec 09, 2022

Type-safe YAML parser and validator.

StrictYAML StrictYAML is a type-safe YAML parser that parses and validates a restricted subset of the YAML specification. Priorities: Beautiful API Re

1.2k Jan 04, 2023

Rubrix is a free and open-source tool for exploring and iterating on data for artificial intelligence projects.

Open-source tool for exploring, labeling, and monitoring data for AI projects

1.5k Jan 07, 2023

Set of matplotlib operations that are not trivial

Matplotlib Snippets This repository contains a set of matplotlib operations that are not trivial. Histograms Histogram with bins adapted to log scale

1 Nov 15, 2021

NW 2022 Hackathon Project by Angelique Clara Hanzel, Aryan Sonik, Damien Fung, Ramit Brata Biswas

Spiral-Data-Visualizer NW 2022 Hackathon Project by Angelique Clara Hanzell, Aryan Sonik, Damien Fung, Ramit Brata Biswas Description This project vis

2 Jan 16, 2022

🌀❄️🌩️ This repository contains some examples for creating 2d and 3d weather plots using matplotlib and cartopy libraries in python3.

Weather-Plotting 🌀 ❄️ 🌩️ This repository contains some examples for creating 2d and 3d weather plots using matplotlib and cartopy libraries in pytho

21 Dec 10, 2022

Advanced_Data_Visualization_Tools - The present hands-on lab mainly uses Immigration to Canada dataset and employs advanced visualization tools such as word cloud, and waffle plot to display relations between features within the dataset.

Hands-on Practice Learning Lab for Data Science Overview This hands on practice lab is a part of Data Visualization with Python course offered by Cour

1 Jan 05, 2022

DataVisualization - The evolution of my arduino and python journey. New level of competence achieved

1 Jan 03, 2022

matplotlib: plotting with Python

Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python. Check out our home page for more inform

16.7k Jan 08, 2023

Python toolkit for defining+simulating+visualizing+analyzing attractors, dynamical systems, iterated function systems, roulette curves, and more

Attractors A small module that provides functions and classes for very efficient simulation and rendering of iterated function systems; dynamical syst

1 Aug 04, 2021

Learning Convolutional Neural Networks with Interactive Visualization.

Related tags