Hi. Thank you for sharing this excellent work. The explainer is supe

Sure! You can change the output class labels here: <div class="B

Whether is possible to customize the CNN-Explainer,about poloclub/cnn-explainer

xiaohk commented on May 3, 2024

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.

from cnn-explainer.

ljjsfe commented on May 3, 2024

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,

from cnn-explainer.

xiaohk commented on May 3, 2024

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 :)

from cnn-explainer.

ljjsfe commented on May 3, 2024

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

from cnn-explainer.

xiaohk commented on May 3, 2024

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 :)

from cnn-explainer.

Whether is possible to customize the CNN-Explainer about cnn-explainer HOT 5 CLOSED

Comments (5)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

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

	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]);

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

	/**
	* 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))
	}