Determine the number of output neurons

[davy-blavette]

Thanks for this work. I am trying to customize the number of output neurons to 7 instead of 10 to test another classification but without success. I have a compatibility problem between the trained model and CNN explainer.
I have customized the number of class on tiny-vgg.py, line 257, NUM_CLASS = 7 and adapted the classLists on config.js but it does not seem sufficient. Can you help me ?

[xiaohk]

Hey @davy-blavette, thank you so much for using CNN Explainer!

Currently the visualization is hardcoded to fit the architecture of tiny-vgg (number of layers and number of neurons at each layer). Therefore, to Use CNN Explainer on a different model architecture, you would need to manually modify the visualization code.

You can check out these related issues: #2, #8, #15, #34, #35. Some functions you want to look into are listed in this comment.

If you want to change the number of output neurons, you would also need to modify how the flatten layer and logit layer are drawn.

cnn-explainer/src/overview/flatten-draw.js

Lines 990 to 998 in b9c1759

	/**
	* Draw the flatten layer before output layer
	* @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
	*/
	export const drawFlatten = (curLayerIndex, d, i, width, height) => {

cnn-explainer/src/overview/flatten-draw.js

Lines 216 to 233 in b9c1759

	const drawLogitLayer = (arg) => {
	let curLayerIndex = arg.curLayerIndex,
	moveX = arg.moveX,
	softmaxLeftMid = arg.softmaxLeftMid,
	selectedI = arg.selectedI,
	intermediateX1 = arg.intermediateX1,
	intermediateX2 = arg.intermediateX2,
	pixelWidth = arg.pixelWidth,
	pixelHeight = arg.pixelHeight,
	topY = arg.topY,
	bottomY = arg.bottomY,
	softmaxX = arg.softmaxX,
	middleGap = arg.middleGap,
	middleRectHeight = arg.middleRectHeight,
	symbolGroup = arg.symbolGroup,
	symbolX = arg.symbolX,
	flattenRange = arg.flattenRange;

[davy-blavette]

Hey @xiaohk, Thank you for your answer. The solution was simpler, I just had an error in the generation of my model.json file, with a shape at 1690 for 10 layers instead of 1183 for 7 ...
However, I had to adapt lines :
replace :

cnn-explainer/src/overview/flatten-draw.js

Line 859 in b9c1759

for (let i = 0; i < 10; i++) {

for (let i = 0; i < nodeCoordinate[curLayerIndex - 1].length; i++) {

cnn-explainer/src/overview/flatten-draw.js

Line 879 in b9c1759

textY = nodeCoordinate[curLayerIndex - 1][9].y + nodeLength / 2;

textY = nodeCoordinate[curLayerIndex - 1][nodeCoordinate[curLayerIndex - 1].length - 1].y + nodeLength / 2;

cnn-explainer/src/overview/flatten-draw.js

Line 345 in b9c1759

let loopFactors = [0, 9];

let loopFactors = [0, nodeCoordinate[curLayerIndex - 1].length - 1];

after add :

cnn-explainer/src/overview/flatten-draw.js

Lines 998 to 1002 in b9c1759

	export const drawFlatten = (curLayerIndex, d, i, width, height) => {
	// Show the output legend
	svg.selectAll('.output-legend')
	.classed('hidden', false);

let maxLayer = nodeCoordinate[curLayerIndex - 1].length - 1;

replace :

cnn-explainer/src/overview/flatten-draw.js

Line 1096 in b9c1759

let bottomY = nodeCoordinate[curLayerIndex - 1][9].y + nodeLength -

let bottomY = nodeCoordinate[curLayerIndex - 1][maxLayer].y + nodeLength -

cnn-explainer/src/overview/flatten-draw.js

Line 345 in b9c1759

let loopFactors = [0, 9];

let loopFactors = [0, maxLayer];

cnn-explainer/src/overview/overview-draw.js

Lines 649 to 650 in b9c1759

	svgPaddings.top + vSpaceAroundGap * (10) + vSpaceAroundGap +
	nodeLength * 10

svgPaddings.top + vSpaceAroundGap * (classLists.length) + vSpaceAroundGap +
nodeLength * classLists.length

It's ok it works perfectly. Good job !

[xiaohk]

Hooray! That's nice @davy-blavette!

Thanks for using the GitHub discussion feature. I believe there will be users having similar questions in the future. I will point them to your thread. (๑•̀ㅂ•́)و✧

[davy-blavette]

Hey @xiaohk, so I have integrate cnnExplainer into my datatrainx project. I adapted it to read my own model on a FER2013 base on a single gray channel. You can see it in action on https://datatrainx.akairnet.fr/ via the menu, choose cnnExplainer. The server is on a home network so bad...I tried as much as possible to quote you, but if I've forgotten something, don't hesitate to tell me. Thank you for your work.

[xiaohk]

Hello @davy-blavette! Wow, your demo looks great!! It seems the simple model can classify emotions fairly well.

I really like this figure too:

[davy-blavette]

Your project @xiaohk, helped me a lot, I bequeath my image rights 😂