search

poloclub / cnn-explainer

Learning Convolutional Neural Networks with Interactive Visualization.
https://poloclub.github.io/cnn-explainer/
MIT License
8.1k stars 1.22k forks source link

How to display images on git pages with cnn explainer #14

Closed NikaMasa51 closed 4 years ago

NikaMasa51 commented 4 years ago

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/

xiaohk commented 4 years ago

Hey @NikaMasa51, I am thrilled to see you are trying out CNN Explainer and adapting it to your dataset (the plants are very cute btw)!! (๑•̀ㅂ•́)و✧

I think you have noticed that hosting svelte app on GitHub page is a bit different from hosting from a local environment. In the master branch, assets files are accessed by /assets, while we have to write /Study_CNN_Explainer/assets in the gh-page branch. I saw you have changed it in the index.html file 👍

Below is my debugging process:

In Chrome console, I saw the following error messages:

GET https://nikamasa51-d4c7cc0837.drafts.github.io/Study_CNN_Explainer/assets/img/hakidamegiku_1.jpeg 
...

I got 404 response when I visited https://nikamasa51-d4c7cc0837.drafts.github.io/Study_CNN_Explainer/assets/img/hakidamegiku_1.jpeg.

Then, I found image files like hakidamegiku_1.jpeg are saved as hakidamegiku_1.JPEG in https://github.com/NikaMasa51/Study_CNN_Explainer/tree/gh-pages/assets/img. I suggest renaming these files from hakidamegiku_1.JPEG to hakidamegiku_1.jpeg and see if CNN Explainer visualization can load on your GitHub page.

NikaMasa51 commented 4 years ago

I'm glad you praised our plant images! I was able to display it in the browser as a result of executing it according to your advice. Thank you very much!!!

xiaohk commented 4 years ago

@NikaMasa51 No problem. I'm glad I can help :)

I'm maintaining a list of institutions and researchers who are using CNN Explainer. Do you mind sharing a little bit about what tasks/problems you are using CNN Explainer to solve? For example, are you trying to explain to other biologists how CNNs can be used to classify plant images?

I will close this issue for now, but feel free to reply to this issue. Thanks!

NikaMasa51 commented 4 years ago

Yes. As you say, we plan to use this improved CNN Explainer to teach botany students. This helps to visually explain how to classify plant images using CNN.

xiaohk commented 4 years ago

Thats very cool!! I'm happy that CNN Explainer can help. Feel free to open a new issue when you encounter any other problems. Thanks!