detail view not work with new added convolution nodes

[baobobby]

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?

[baobobby]

I also find that the detailview works normally only when I set padding = 'vaild'. If I change padding to 'same' then detailview of existing convolution nodes will lose the lines, bais nodes and animation of former nodes. How can I fix this problem?

[xiaohk]

Nice! By detail view, are you referring to the intermediate convolution process at a layer-level? If so, you also need to change the intermediate layer drawing code.

You can check out the code here:

https://github.com/poloclub/cnn-explainer/blob/b9c1759050033850d4245d1a85bb74c475aa377e/src/overview/intermediate-draw.js#L393-L409

https://github.com/poloclub/cnn-explainer/blob/b9c1759050033850d4245d1a85bb74c475aa377e/src/overview/intermediate-draw.js#L1183-L1196

https://github.com/poloclub/cnn-explainer/blob/b9c1759050033850d4245d1a85bb74c475aa377e/src/overview/Overview.svelte#L894-L903

The detailedViewAbsCoords you mentioned controls where to put the interactive math formula view (visualizing how convolution works on one matrix). We refer to the formula view as "detailed view" in the code.

Good luck, and keep us updated! I would leave the issue open for now.

[baobobby]

Thanks for your reply, Im now getting deeper and deeper understanding about this program.

According to your suggestion I copied and changed some codes for the new added convolution layers in intermediate-draw.js and overview.svelte but the intermediate view of those layers still didn't work.

for example I changed the const drawIntermediateLayer of conv_2_2(export const drawConv4) which makes it the same as conv_2_1(export const drawConv3) and I copied those codes for conv_3_1(export const drawConv5), and finally I copied the original codes of conv_2_2(export const drawConv4) for conv_3_2(export const drawConv6). I was just going to see if this works, unfortunately it didn't.

I'm thinking if there are some limits to the size of the display area, which restrict the intermediate view of the new added layers ? Is there anyway I can change the size of the display area?

[xiaohk]

Did you get any error messages? Or nothing was shown on the screen? Flipping the code for drawing intermediate layers of these conv layers can be tricky, because animations work differently for each layer. For example, when users expand the conv_1_1, all layers are pushed to the right. However, when users expand the conv_2_1, only half of the layers are pushed to the left. You would need to manually change these animation definitions within drawnConv4 for example.

For the display area, CNN Explainer dynamically sets the SVG width based on the viewport width. Therefore, the layers are more spread out on wider monitors and more compact on smaller monitors. You can see the code below. The size of the intermediate layer is controlled within each drawing functions drawConv3 (with key variables such as leftX, targetX, and rightStart; good to check out the argument list of drawIntermediateLayer()).

https://github.com/poloclub/cnn-explainer/blob/2b75d287704c8a7134a99798cd3b771e896337fc/src/overview/Overview.svelte#L1052-L1062

https://github.com/poloclub/cnn-explainer/blob/b9c1759050033850d4245d1a85bb74c475aa377e/src/overview/intermediate-draw.js#L393-L408

[baobobby]

Hi @xiaohk, your advice is super helpful! Now I almost solve my problem but still have some issues to deal with. According to your lastest suggestion I did some change of the parameters of all drawConv parts to adjust to my model and I found that the intermediate view of new added layers still didn't work but I was sure that I was on the right direction. Today when I checked Overview.svelte I found the part of import { } from './intermediate-draw.js' only have four drawConv so I added the other two and It works! Now my conv_3_1 and conv_3_2 have the intermediate view too!

[xiaohk]

@baobobby Congrats!! ٩( ᐛ )و It looks very nice! Thanks for adding your new layers and share your work here. It would be very helpful for future users who want do customize the tiny VGG architecture! I will close the issue now. Let us know if you have more questions.