Learning Convolutional Neural Networks with Interactive Visualization.

Overview

CNN Explainer

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

build arxiv badge DOI:10.1109/TVCG.2020.3030418

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

    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. 屏幕截图 2021-12-06 171833

    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

    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

    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

    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

    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

    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 :( image image

    opened by Anindya18081010098 4
  • no CNN Explainer running in broswer

    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" ! 1

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

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

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

    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

    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:

    image image image

    opened by LqYe 3
  • vue中无法运行

    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?

    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)
Owner
Polo Club of Data Science
Research project repositories, from the Polo Club of Data Science at Georgia Tech
Polo Club of Data Science
Domain Connectivity Analysis Tools to analyze aggregate connectivity patterns across a set of domains during security investigations

DomainCAT (Domain Connectivity Analysis Tool) Domain Connectivity Analysis Tool is used to analyze aggregate connectivity patterns across a set of dom

DomainTools 34 Dec 09, 2022
哔咔漫画window客户端,界面使用PySide2,已实现分类、搜索、收藏夹、下载、在线观看、waifu2x等功能。

picacomic-windows 哔咔漫画window客户端,界面使用PySide2,已实现分类、搜索、收藏夹、下载、在线观看等功能。 功能介绍 登陆分流,还原安卓端的三个分流入口 分类,搜索,排行,收藏夹使用同一的逻辑,滚轮下滑自动加载下一页,双击打开 漫画详情,章节列表和评论列表 下载功能,目

1.8k Dec 31, 2022
Colormaps for astronomers

cmastro: colormaps for astronomers 🔭 This package contains custom colormaps that have been used in various astronomical applications, similar to cmoc

Adrian Price-Whelan 12 Oct 11, 2022
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

Patrik Hlobil 822 Jan 07, 2023
Missing data visualization module for Python.

missingno Messy datasets? Missing values? missingno provides a small toolset of flexible and easy-to-use missing data visualizations and utilities tha

Aleksey Bilogur 3.4k Dec 29, 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

Vignesh M 45 Jul 31, 2022
LabGraph is a a Python-first framework used to build sophisticated research systems with real-time streaming, graph API, and parallelism.

LabGraph is a a Python-first framework used to build sophisticated research systems with real-time streaming, graph API, and parallelism.

MLH Fellowship 7 Oct 05, 2022
Easily convert matplotlib plots from Python into interactive Leaflet web maps.

mplleaflet mplleaflet is a Python library that converts a matplotlib plot into a webpage containing a pannable, zoomable Leaflet map. It can also embe

Jacob Wasserman 502 Dec 28, 2022
Python Data. Leaflet.js Maps.

folium Python Data, Leaflet.js Maps folium builds on the data wrangling strengths of the Python ecosystem and the mapping strengths of the Leaflet.js

6k Jan 02, 2023
Python script to generate a visualization of various sorting algorithms, image or video.

sorting_algo_visualizer Python script to generate a visualization of various sorting algorithms, image or video.

146 Nov 12, 2022
A Python package that provides evaluation and visualization tools for the DexYCB dataset

DexYCB Toolkit DexYCB Toolkit is a Python package that provides evaluation and visualization tools for the DexYCB dataset. The dataset and results wer

NVIDIA Research Projects 107 Dec 26, 2022
Make your BSC transaction simple.

bsc_trade_history Make your BSC transaction simple. 中文ReadMe Background: inspired by debank ,Practice my hands on this small project Blog:Crypto-BscTr

foolisheddy 7 Jul 06, 2022
Browse Dash docsets inside emacs

Helm Dash What's it This package uses Dash docsets inside emacs to browse documentation. Here's an article explaining the basic usage of it. It doesn'

504 Dec 15, 2022
A package for plotting maps in R with ggplot2

Attention! Google has recently changed its API requirements, and ggmap users are now required to register with Google. From a user’s perspective, ther

David Kahle 719 Jan 04, 2023
Tandem Mass Spectrum Prediction with Graph Transformers

MassFormer This is the original implementation of MassFormer, a graph transformer for small molecule MS/MS prediction. Check out the preprint on arxiv

Röst Lab 13 Oct 27, 2022
Regress.me is an easy to use data visualization tool powered by Dash/Plotly.

Regress.me Regress.me is an easy to use data visualization tool powered by Dash/Plotly. Regress.me.-.Google.Chrome.2022-05-10.15-58-59.mp4 Get Started

Amar 14 Aug 14, 2022
Curvipy - The Python package for visualizing curves and linear transformations in a super simple way

Curvipy - The Python package for visualizing curves and linear transformations in a super simple way

Dylan Tintenfich 55 Dec 28, 2022
Example Code Notebooks for Data Visualization in Python

This repository contains sample code scripts for creating awesome data visualizations from scratch using different python libraries (such as matplotli

Javed Ali 27 Jan 04, 2023
Bcc2telegraf: An integration that sends ebpf-based bcc histogram metrics to telegraf daemon

bcc2telegraf bcc2telegraf is an integration that sends ebpf-based bcc histogram

Peter Bobrov 2 Feb 17, 2022
Python library that makes it easy for data scientists to create charts.

Chartify Chartify is a Python library that makes it easy for data scientists to create charts. Why use Chartify? Consistent input data format: Spend l

Spotify 3.2k Jan 01, 2023