Whether is possible to customize the CNN-Explainer

[ljjsfe]

Hi.

Thank you for sharing this excellent work. The explainer is super helpful for understanding the CNN.
Since I am not familiar with the TF.js. I wonder if I finetune the tiny-VGG on other datasets for example dog vs cat, will explainer automatically change to show how the CNN works on dog vs cat? Or I have to rewrite the part of the js to make it works. Thank you.

[xiaohk]

Good question :)

Unfortunately, you would need to change some javascript code if you fine-tune the underlying model to other classes. It would be very straightforward though, if you are using our tiny-VGG architecture (with 10 output classes).

Let me know if you are interested in trying out; I can give you some pointers to the functions you might need to change. I will close this issue for now.

[ljjsfe]

Sorry for duplicate the question. I thought I forget to submit it. :) I am interested in trying out to modify the functions. Can you point me the functions? Thx,

[xiaohk]

Sure! You can change the output class labels here:

cnn-explainer/src/config.js

Lines 30 to 31 in 0a6e09e

	classLists: ['lifeboat', 'ladybug', 'pizza', 'bell pepper', 'school bus',
	'koala', 'espresso', 'red panda', 'orange', 'sport car']

It matches the order of your output labels in your tiny-vgg model. If you are using 10 class, then changing the line above should be good to go. If you are using other number of classes, then here are some functions you want to look into:

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

Lines 495 to 510 in 0a6e09e

	nodeGroups.append('rect')
	.attr('class', 'output-rect')
	.attr('x', left)
	.attr('y', (d, i) => nodeCoordinate[l][i].y + nodeLength / 2 + 8)
	.attr('height', nodeLength / 4)
	.attr('width', 0)
	.style('fill', 'gray');
	nodeGroups.append('text')
	.attr('class', 'output-text')
	.attr('x', left)
	.attr('y', (d, i) => nodeCoordinate[l][i].y + nodeLength / 2)
	.style('dominant-baseline', 'middle')
	.style('font-size', '11px')
	.style('fill', 'black')
	.style('opacity', 0.5)
	.text((d, i) => classLists[i]);

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

Lines 540 to 542 in 0a6e09e

	svg.selectAll('g.node-output').each(
	(d, i, g) => drawOutputScore(d, i, g, outputRectScale)
	);

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

Lines 121 to 136 in 0a6e09e

	/**
	* Draw bar chart to encode the output value
	* @param {object} d d3 data
	* @param {index} i d3 data index
	* @param {[object]} g d3 group
	* @param {function} scale map value to length
	*/
	const drawOutputScore = (d, i, g, scale) => {
	let group = d3.select(g[i]);
	group.select('rect.output-rect')
	.transition('output')
	.delay(500)
	.duration(800)
	.ease(d3.easeCubicIn)
	.attr('width', scale(d.output))
	}

Keep me updated when you are trying out new classes. I'm happy to help :)

[ljjsfe]

Thank you so much for pointing out the classes. I will check it and let you know if there are any other questions. Thank you so much. Best regards, Yang Lin | Data Scientist [email protected] https://www.linkedin.com/in/yanglinly

…

On Mon, May 11, 2020 at 1:46 PM Jay Wang ***@***.***> wrote: Sure! You can change the output class labels here: https://github.com/poloclub/cnn-explainer/blob/0a6e09ea5548f97160b93b925a883f35a7d5b80e/src/config.js#L30-L31 It matches the order of your output labels in your tiny-vgg model. If you are using 10 class, then changing the line above should be good to go. If you are using other number of classes, then here are some functions you want to look into: https://github.com/poloclub/cnn-explainer/blob/0a6e09ea5548f97160b93b925a883f35a7d5b80e/src/overview/overview-draw.js#L495-L510 https://github.com/poloclub/cnn-explainer/blob/0a6e09ea5548f97160b93b925a883f35a7d5b80e/src/overview/overview-draw.js#L540-L542 https://github.com/poloclub/cnn-explainer/blob/0a6e09ea5548f97160b93b925a883f35a7d5b80e/src/overview/overview-draw.js#L121-L136 Keep me updated when you are trying out new classes. I'm happy to help :) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#9 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFHZB5K622HLSNI4GXIWUKLRRBBZ3ANCNFSM4M3NVZOA> .

[xiaohk]

A user has successfully adapted CNN Explainer to other dataset in #14 .

You can see their public GitHub page and code repository.

Hopefully you find these pointers helpful :)