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/

A customized interface for single cell track visualisation based on pcnaDeep and napari.

pcnaDeep-napari A customized interface for single cell track visualisation based on pcnaDeep and napari. 👀 Under construction You can get test image

2 Nov 07, 2021

An intuitive library to add plotting functionality to scikit-learn objects.

Welcome to Scikit-plot Single line functions for detailed visualizations The quickest and easiest way to go from analysis... ...to this. Scikit-plot i

2.3k Dec 31, 2022

This repository contains a streaming Dataflow pipeline written in Python with Apache Beam, reading data from PubSub.

Sample streaming Dataflow pipeline written in Python This repository contains a streaming Dataflow pipeline written in Python with Apache Beam, readin

9 Mar 18, 2022

A workshop on data visualization in Python with notebooks and exercises for following along.

Beyond the Basics: Data Visualization in Python The human brain excels at finding patterns in visual representations, which is why data visualizations

162 Dec 05, 2022

Fractals plotted on MatPlotLib in Python.

About The Project Learning more about fractals through the process of visualization. Built With Matplotlib Numpy License This project is licensed unde

2 Aug 30, 2022

Backend app for visualizing CANedge log files in Grafana (directly from local disk or S3)

CANedge Grafana Backend - Visualize CAN/LIN Data in Dashboards This project enables easy dashboard visualization of log files from the CANedge CAN/LIN

13 Dec 15, 2022

Visualize your pandas data with one-line code

PandasEcharts 简介基于pandas和pyecharts的可视化工具安装 pip 安装 $ pip install pandasecharts 源码安装 $ git clone https://github.com/gamersover/pandasecharts $ cd pand

2 Apr 13, 2022

University of Missouri - Kansas City: CS451R: Capstone

CS451RC University of Missouri - Kansas City: CS451R: Capstone Installation cd git clone https://github.com/ala2q6/CS451RC.git cd CS451RC pip3 instal

1 Nov 17, 2021

Visualization ideas for data science

Nuance I use Nuance to curate varied visualization thoughts during my data scientist career. It is not yet a package but a list of small ideas. Welcom

16 Nov 03, 2022

Attractors is a package for simulation and visualization of strange attractors.

attractors Attractors is a package for simulation and visualization of strange attractors. Installation The simplest way to install the module is via

45 Jul 31, 2022

Visualize the training curve from the *.csv file (tensorboard format).

Training-Curve-Vis Visualize the training curve from the *.csv file (tensorboard format). Feature Custom labels Curve smoothing Support for multiple c

7 Feb 23, 2022

Tools for exploratory data analysis in Python

Dora Exploratory data analysis toolkit for Python. Contents Summary Setup Usage Reading Data & Configuration Cleaning Feature Selection & Extraction V

599 Dec 25, 2022

Define fortify and autoplot functions to allow ggplot2 to handle some popular R packages.

ggfortify This package offers fortify and autoplot functions to allow automatic ggplot2 to visualize statistical result of popular R packages. Check o

504 Dec 23, 2022

1900-2016 Olympic Data Analysis in Python by plotting different graphs

🔥 Olympics Data Analysis 🔥 In Data Science field, there is a big topic before creating a model for future prediction is Data Analysis. We can find o

1 Feb 06, 2022

This project is an Algorithm Visualizer where a user can visualize algorithms like Bubble Sort, Merge Sort, Quick Sort, Selection Sort, Linear Search and Binary Search.

Algo_Visualizer This project is an Algorithm Visualizer where a user can visualize common algorithms like "Bubble Sort", "Merge Sort", "Quick Sort", "

4 Feb 07, 2022