Giter VIP home page Giter VIP logo

Comments (6)

baobobby avatar baobobby commented on May 4, 2024

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?

from cnn-explainer.

xiaohk avatar xiaohk commented on May 4, 2024

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:

/**
* Draw one intermediate layer
* @param {number} curLayerIndex
* @param {number} leftX X value of intermediate layer left border
* @param {number} rightX X value of intermediate layer right border
* @param {number} rightStart X value of right component starting anchor
* @param {number} intermediateGap The inner gap
* @param {number} d Clicked node bounded data
* @param {number} i Clicked node index
* @param {function} intermediateNodeMouseOverHandler Mouse over handler
* @param {function} intermediateNodeMouseLeaveHandler Mouse leave handler
* @param {function} intermediateNodeClicked Mouse click handler
*/
const drawIntermediateLayer = (curLayerIndex, leftX, rightX, rightStart,
intermediateGap, d, i, intermediateNodeMouseOverHandler,
intermediateNodeMouseLeaveHandler, intermediateNodeClicked) => {

/**
* Draw the intermediate layer before conv_1_1
* @param {number} curLayerIndex Index of the selected layer
* @param {object} d Bounded d3 data
* @param {number} i Index of the selected node
* @param {number} width CNN group width
* @param {number} height CNN group height
* @param {function} intermediateNodeMouseOverHandler mouse over handler
* @param {function} intermediateNodeMouseLeaveHandler mouse leave handler
* @param {function} intermediateNodeClicked node clicking handler
*/
export const drawConv1 = (curLayerIndex, d, i, width, height,
intermediateNodeMouseOverHandler, intermediateNodeMouseLeaveHandler,
intermediateNodeClicked) => {

// Enter the second view (layer-view) when user clicks a conv node
if ((d.type === 'conv' || d.layerName === 'output') && !isInIntermediateView) {
prepareToEnterIntermediateView(d, g, nodeIndex, curLayerIndex);
if (d.layerName === 'conv_1_1') {
drawConv1(curLayerIndex, d, nodeIndex, width, height,
intermediateNodeMouseOverHandler, intermediateNodeMouseLeaveHandler,
intermediateNodeClicked);
}

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.

from cnn-explainer.

baobobby avatar baobobby commented on May 4, 2024

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?

from cnn-explainer.

xiaohk avatar xiaohk commented on May 4, 2024

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()).

wholeSvg = d3.select(overviewComponent)
.select('#cnn-svg');
svg = wholeSvg.append('g')
.attr('class', 'main-svg')
.attr('transform', `translate(${svgPaddings.left}, 0)`);
svgStore.set(svg);
width = Number(wholeSvg.style('width').replace('px', '')) -
svgPaddings.left - svgPaddings.right;
height = Number(wholeSvg.style('height').replace('px', '')) -
svgPaddings.top - svgPaddings.bottom;

/**
* Draw one intermediate layer
* @param {number} curLayerIndex
* @param {number} leftX X value of intermediate layer left border
* @param {number} rightX X value of intermediate layer right border
* @param {number} rightStart X value of right component starting anchor
* @param {number} intermediateGap The inner gap
* @param {number} d Clicked node bounded data
* @param {number} i Clicked node index
* @param {function} intermediateNodeMouseOverHandler Mouse over handler
* @param {function} intermediateNodeMouseLeaveHandler Mouse leave handler
* @param {function} intermediateNodeClicked Mouse click handler
*/
const drawIntermediateLayer = (curLayerIndex, leftX, rightX, rightStart,
intermediateGap, d, i, intermediateNodeMouseOverHandler,
intermediateNodeMouseLeaveHandler, intermediateNodeClicked) => {

from cnn-explainer.

baobobby avatar baobobby commented on May 4, 2024

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!
屏幕截图 2021-12-15 134030
屏幕截图 2021-12-15 134030

from cnn-explainer.

xiaohk avatar xiaohk commented on May 4, 2024

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

from cnn-explainer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.