How to display images on git pages with cnn explainer

[NikaMasa51]

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]

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]

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]

@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]

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]

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!