Merge pull request poloclub#19 from poloclub/dev

Merge dev branch to master

README.md

@@ -13,7 +13,6 @@ For more information, check out our manuscript:
 Wang, Zijie J., Robert Turko, Omar Shaikh, Haekyu Park, Nilaksh Das, Fred Hohman, Minsuk Kahng, and Duen Horng Chau.
 arXiv preprint 2020. arXiv:2004.15004.
 
-
 ## Live Demo
 
 For a live demo, visit: https://poloclub.github.io/cnn-explainer/
@@ -22,7 +21,7 @@ For a live demo, visit: https://poloclub.github.io/cnn-explainer/
 
 Clone or download this repository:
 
-```
+```bash
 git clone [email protected]:poloclub/cnn-explainer.git
 
 # use degit if you don't want to download commit histories
@@ -31,19 +30,20 @@ degit poloclub/cnn-explainer
 
 Install the dependencies:
 
-```
+```bash
 npm install
 ```
 
 Then run CNN Explainer:
 
-```
+```bash
 npm run dev
 ```
 
 Navigate to [localhost:5000](https://localhost:5000). You should see CNN Explainer running in your broswer :)
 
 To see how we trained the CNN, visit the directory [`./tiny-vgg/`](tiny-vgg).
+If you want to use CNN Explainer with your own CNN model or image classes, see [#8](/../../issues/8) and [#14](/../../issues/14).
 
 ## Credits
 
@@ -65,9 +65,10 @@ We thank
 [Kantwon Rogers](https://www.kantwon.com), and the
 [Georgia Tech Visualization Lab](https://vis.gatech.edu)
 for their support and constructive feedback.
- 
+
 ## Citation
-```
+
+```bibTeX
 @article{wangCNNExplainerLearning2020,
   title = {{{CNN Explainer}}: {{Learning Convolutional Neural Networks}} with {{Interactive Visualization}}},
   shorttitle = {{{CNN Explainer}}},
@@ -82,10 +83,9 @@ for their support and constructive feedback.
 ```
 
 ## License
+
 The software is available under the [MIT License](https://github.com/poloclub/cnn-explainer/blob/master/LICENSE).
 
 ## Contact
 
-If you have any questions, feel free to [open an issue](https://github.com/poloclub/cnn-explainer/issues/new/choose) or contact [Jay Wang](https://www.zijie.wang).
-
-
+If you have any questions, feel free to [open an issue](https://github.com/poloclub/cnn-explainer/issues/new/choose) or contact [Jay Wang](https://zijie.wang).

src/Header.svelte

@@ -84,7 +84,7 @@
 	<div class="icons">
 
 		<div class="icon" title="Research paper">
-			<a target="_blank" href="http:https://zijie.wang/redirect/cnn-explainer/">
+			<a target="_blank" href="https:https://arxiv.org/abs/2004.15004">
 				<img src="PUBLIC_URL/assets/img/pdf.png" alt="pdf icon"/>
 			</a>
 		</div>

src/article/Article.svelte

@@ -181,7 +181,7 @@
   	The ReLU activation function is a one-to-one mathematical operation: {reluEquation}
     </p>
     <div class="figure">
-    <img src="PUBLIC_URL/assets/figures/relu_graph.svg" alt="relu graph" width="30%" height="30%"/>
+    <img src="PUBLIC_URL/assets/figures/relu_graph.png" alt="relu graph" width="30%" height="30%"/>
       <div class="figure-caption">
         Figure 3. The ReLU activation function graphed, which disregards all negative data.
       </div>

src/overview/Modal.svelte

@@ -178,8 +178,8 @@
             <label class="file-label">
               <input class="file-input" type="file" name="image"
                 accept=".png,.jpeg,.tiff,.jpg,.png"
-                on:change={imageUpload}
-                bind:files={files}>
+                bind:files={files}
+                on:change={imageUpload}>
               <span class="file-cta small-font">
                 <span class="file-icon">
                   <i class="fas fa-upload"></i>

src/overview/Overview.svelte

@@ -244,6 +244,7 @@
   }
 
   const intermediateNodeMouseLeaveHandler = (d, i, g) => {
+    // screenshot
     // return;
     if (detailedViewNum !== undefined) { return; }
     svg.select(`rect#underneath-gateway-${d.index}`)

src/overview/flatten-draw.js

@@ -1151,7 +1151,7 @@ export const drawFlatten = (curLayerIndex, d, i, width, height) => {
     let index = d.index;
 
     // screenshot
-    // if (index === 70) {return;}
+    // if (index === 32) {return;}
 
     // Update the hover info UI
     if (d.weight === undefined) {

tiny-vgg/README.md

@@ -77,7 +77,7 @@ Before loading the model using *tensorflow.js*, you want to convert the model fi
 from Keras `h5` format to [tensorflow.js format](https://www.tensorflow.org/js/tutorials/conversion/import_keras).
 
 ```
-ensorflowjs_converter --input_format keras trained_vgg_best.h5 ./
+tensorflowjs_converter --input_format keras trained_vgg_best.h5 ./
 ```
 
 Then you can put the output file `group1-shard1of1.bin` in `/public/data` and use

tiny-vgg/environment.yaml

@@ -2,61 +2,13 @@ name: tiny-vgg
 channels:
   - defaults
 dependencies:
-  - ca-certificates=2020.1.1=0
-  - certifi=2020.4.5.1=py36_0
-  - libcxx=4.0.1=hcfea43d_1
-  - libcxxabi=4.0.1=hcfea43d_1
-  - libedit=3.1.20181209=hb402a30_0
-  - libffi=3.2.1=h0a44026_6
-  - ncurses=6.2=h0a44026_1
-  - openssl=1.1.1g=h1de35cc_0
-  - pip=20.0.2=py36_1
-  - python=3.6.10=hc70fcce_1
-  - readline=8.0=h1de35cc_0
-  - setuptools=46.1.3=py36_0
-  - sqlite=3.31.1=h5c1f38d_1
-  - tk=8.6.8=ha441bb4_0
-  - wheel=0.34.2=py36_0
-  - xz=5.2.5=h1de35cc_0
-  - zlib=1.2.11=h1de35cc_3
+  - pip=20.0.2
+  - python=3.6.10
   - pip:
-    - absl-py==0.9.0
-    - astor==0.8.1
-    - cachetools==4.1.0
-    - chardet==3.0.4
-    - gast==0.2.2
-    - google-auth==1.14.1
-    - google-auth-oauthlib==0.4.1
-    - google-pasta==0.2.0
-    - grpcio==1.28.1
     - h5py==2.10.0
-    - idna==2.9
-    - keras-applications==1.0.8
-    - keras-preprocessing==1.1.0
-    - markdown==3.2.1
     - numpy==1.18.3
-    - oauthlib==3.1.0
-    - opt-einsum==3.2.1
-    - prompt-toolkit==1.0.14
-    - protobuf==3.11.3
-    - pyasn1==0.4.8
-    - pyasn1-modules==0.2.8
-    - pygments==2.6.1
-    - pyinquirer==1.0.3
-    - regex==2020.4.4
-    - requests==2.23.0
-    - requests-oauthlib==1.3.0
-    - rsa==4.0
+    - pandas==1.0.3
     - scipy==1.4.1
-    - six==1.14.0
-    - tensorboard==2.1.1
     - tensorflow==2.1.0
     - tensorflow-cpu==2.1.0
-    - tensorflow-estimator==2.1.0
-    - tensorflow-hub==0.7.0
     - tensorflowjs==1.7.4
-    - termcolor==1.1.0
-    - urllib3==1.25.9
-    - wcwidth==0.1.9
-    - werkzeug==1.0.1
-    - wrapt==1.12.1