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 simple python tool for explore your object detection dataset

A simple tool for explore your object detection dataset. The goal of this library is to provide simple and intuitive visualizations from your dataset and automatically find the best parameters for ge

142 Dec 25, 2022

FURY - A software library for scientific visualization in Python

Free Unified Rendering in Python A software library for scientific visualization in Python. General Information • Key Features • Installation • How to

169 Dec 21, 2022

Streamlit component for Let's-Plot visualization library

streamlit-letsplot This is a work-in-progress, providing a convenience function to plot charts from the Lets-Plot visualization library. Example usage

9 Nov 03, 2022

Create artistic visualisations with your exercise data (Python version)

strava_py Create artistic visualisations with your exercise data (Python version). This is a port of the R strava package to Python. Examples Facets A

53 Dec 28, 2022

Schema validation just got Pythonic

Schema validation just got Pythonic schema is a library for validating Python data structures, such as those obtained from config-files, forms, extern

2.7k Jan 06, 2023

Automatically generate GitHub activity!

Commit Bot Automatically generate GitHub activity! We've all wanted to be the developer that commits every day, but that requires a lot of work. Let's

4 Jun 07, 2022

Sprint planner considering JIRA issues and google calendar meetings schedule.

Sprint planner Sprint planner is a Python script for planning your Jira tasks based on your calendar availability. Installation Use the package manage

2 Dec 05, 2021

This GitHub Repository contains Data Analysis projects that I have completed so far! While most of th project are focused on Data Analysis, some of them are also put here to show off other skills that I have learned.

Welcome to my Data Analysis projects page! This GitHub Repository contains Data Analysis projects that I have completed so far! While most of th proje

1 Jan 31, 2022

A tool for creating Toontown-style nametags in Panda3D

Toontown-Nametag Toontown-Nametag is a tool for creating Toontown Online/Toontown Rewritten-style nametags in Panda3D. It contains a function, createN

2 Dec 23, 2021

Generate a roam research like Network Graph view from your Notion pages.

Notion Graph View Export Notion pages to a Roam Research like graph view.

214 Jan 07, 2023

Datapane is the easiest way to create data science reports from Python.

744 Jan 06, 2023

Bokeh Plotting Backend for Pandas and GeoPandas

Pandas-Bokeh provides a Bokeh plotting backend for Pandas, GeoPandas and Pyspark DataFrames, similar to the already existing Visualization feature of

822 Jan 07, 2023

:small_red_triangle: Ternary plotting library for python with matplotlib

python-ternary This is a plotting library for use with matplotlib to make ternary plots plots in the two dimensional simplex projected onto a two dime

611 Dec 29, 2022

python partial dependence plot toolbox

PDPbox python partial dependence plot toolbox Motivation This repository is inspired by ICEbox. The goal is to visualize the impact of certain feature

723 Jan 07, 2023

Fastest Gephi's ForceAtlas2 graph layout algorithm implemented for Python and NetworkX

ForceAtlas2 for Python A port of Gephi's Force Atlas 2 layout algorithm to Python 2 and Python 3 (with a wrapper for NetworkX and igraph). This is the

227 Jan 05, 2023

An interactive GUI for WhiteboxTools in a Jupyter-based environment

whiteboxgui An interactive GUI for WhiteboxTools in a Jupyter-based environment GitHub repo: https://github.com/giswqs/whiteboxgui Documentation: http

105 Dec 15, 2022

Here are my graphs for hw_02

Let's Have A Look At Some Graphs! Graph 1: State Mentions in Congressperson's Tweets on 10/01/2017 The graph below uses this data set to demonstrate h

7 Sep 02, 2022

Open-questions - Open questions for Bellingcat technical contributors

Open questions for Bellingcat technical contributors These are difficult, long-term projects that would contribute to open source investigations at Be

234 Dec 31, 2022

Turn a STAC catalog into a dask-based xarray

StackSTAC Turn a list of STAC items into a 4D xarray DataArray (dims: time, band, y, x), including reprojection to a common grid. The array is a lazy

148 Dec 19, 2022

EPViz is a tool to aid researchers in developing, validating, and reporting their predictive modeling outputs.

EPViz (EEG Prediction Visualizer) EPViz is a tool to aid researchers in developing, validating, and reporting their predictive modeling outputs. A lig

2 Oct 19, 2022