ezyang/convolution-visualizer

Convolution visualizations

Convolution Visualizer

Live at Convolution Visualizer.

Made with the help of our fine friends at React and D3.js.

Things to do

Want to play around with the code? Clone this repository and run yarn start to start a development instance. The main code lives in src/index.js. This React manual may be of interest.

Here are some project ideas:

• Tweak the CSS so that the weight and output matrices are displayed to the right of the input if there is space.
• Add a slider for adjusting speed of the animation.
• Add a slider which specifies the animation timestep you are on; this way, you can run the animation forward and backward by dragging the slider.
• Add output size and output padding sliders. When these sliders are adjusted, you recompute the input size using the transposed convolution formula.
• Add an onClick handler, which pins your selection at the current mouse collection until another click occurs (disabling the hover behavior.)
• Add a mode which, when enabled, labels cells with variables and renders the mathematical formula to compute the output cell you are moused over.
• Render code for PyTorch (or your favorite framework) which performs the selected convolution.
• Add more exotic convolution types like circular convolution.
• Add a "true" convolution mode, where the weights are flipped before multiplication.
• Support bigger input sizes than 16 (decreasing the size of the squares when inputs are large), and optimize the code so that it still runs quickly in these cases.
• Support assymmetric inputs/kernels/strides/dilations.

Bigger projects:

• Create an in-browser canvas application, which convolves an input image against a displayed filter. Bonus points if your canvas supports painting capabilities.
• Design a visualization which demonstrates the principles of group convolution, allowing you to slide from standard to depthwise convolution.

convolution-visualizer's Issues

Feature request: traspose convolution, 1D convolutions, causal convolutions

In deep learning setup I am experimenting with fancy convolutions, such as transpose conv, 1D and causal.
(For an example of causal conv, see this: https://github.com/locuslab/TCN/blob/ec2ee1038c941a2f56af66915135a1a892043aed/TCN/tcn.py#L6, you shift the input so that it is "centered right" instead of "centered middle").
I would love to have these available for easier experimentation.

But I see that in your readme you already have a long list of features you would like to add, so I may have do write those features myself...

Use Backspace key in the input area of input size causes everything to disappear

Hi @ezyang,
Thanks for your useful tools. I found that when using Backspace key in the input area of input size causes everything to disappear. Could you help to fix this issue? Thanks.

I am using Ubuntu 16.04 and Chrome 70

`0` stride breaks everything

I tried with some random convolutions, then set stride to 2, then back to 0 and everything was blank

Drag input slider to the left causes everything to dissapear

I'm on mobile right now so didn't look at the js log.
Start with settings 2/2/0/1/8 and drag the first slider to the left.

Feature request: more big size ; with image

thanks your great work!!!
very helpful

more big size, smaller Interactive element
can support real image?
like
https://github.com/tinymilky/Interactive-Convolution-Visualization
keep Weight , Output Interactive