https://github.com/smrfeld/convolution-calculator
Convolution calculator for CNNs
https://github.com/smrfeld/convolution-calculator
artificial-intelligence artificial-neural-networks convolution convolutional-layers convolutional-neural-network convolutional-neural-networks machine-learning neural-network neural-networks
Last synced: 11 months ago
JSON representation
Convolution calculator for CNNs
- Host: GitHub
- URL: https://github.com/smrfeld/convolution-calculator
- Owner: smrfeld
- License: mit
- Created: 2021-12-20T17:51:54.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-29T19:31:13.000Z (over 4 years ago)
- Last Synced: 2025-04-20T09:44:40.616Z (about 1 year ago)
- Topics: artificial-intelligence, artificial-neural-networks, convolution, convolutional-layers, convolutional-neural-network, convolutional-neural-networks, machine-learning, neural-network, neural-networks
- Language: JavaScript
- Homepage: https://oliver-ernst.com/convolution-calculator
- Size: 235 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Convolution calculator
This is a calculator to help you construct convolution layers in neural networks.
See the finished product at [https://oliver-ernst.com/convolution-calculator](https://oliver-ernst.com/convolution-calculator).
Or, embed this calculator on your own site by following the instructions below.

## Embed this on your site
This is a JS project (relies on jQuery, Bootstrap 4, and Material icons). You can embedd it on your own page (it is under MIT license).
1. Add the required jQuery, Bootstrap 4, and Material icons to your page.
```
```
2. Grab the main JS file `convCalc.js` from this repo and add it to your page assets. Alternatively, use the awesome `jsDelivr` CDN:
```
```
Or you can even get the minified version:
```
```
3. Insert the div where the content will be loaded.
```
```
You can also specify the width:
```
```
4. Trigger the JS to inject the drawing into the div when the page loads.
```
$(document).ready(function() {
// Set up
ccSetUp();
});
```
This will populate the `ccContainer` div.
## CDN
CDN is hosted over GitHub assets using jsDelivr as described [here](https://medium.com/javarevisited/how-to-host-your-repository-js-css-on-open-source-cdn-jsdelivr-4de252d6fbad).
## About convolutions
This calculator supports inputs which are 2-dimensional such as images or 1-dimensional such as timeseries (set one of the width/height dimensions to 1).
You can visualize how the different choices tile your input data and what the output sizes will be.
The basic formula for the number of outputs from the convolution operation is:
```
(W−F+2P)/S+1
```
where `W` is the size of the input (width or height), `F` is filter extent, `P` is the padding, and `S` is the stride.
Note that for this calculator, only square filters are supported (the filter extent `F` controls both the width and height of the convolution)
- in reality, non-square convolutions are also possible.