About

This JS calculator helps to calculate parameters for layers in convolution neural networks.

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

Embed this on your site

This is a JS project (relies on jQuery, Bootstrap 4 and Google Material icons). You can embed it on your own page (it is under MIT license).

You can follow the instructions on the GitHub page of this project, which roughly are:

  1. Add the required jQuery JS, Bootstrap 4 and Google Material icons to your page.
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Google Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  2. Add this calculator (using jsDelivr):
    <script src="https://cdn.jsdelivr.net/gh/smrfeld/convolution-calculator/convCalc.min.js"></script>
     Alternatively, you can grab the JS file from the GitHub page of this project.
  3. Insert the div where the content will be loaded.
    <div id='ccContainer'></div>
    You can also specify the width and height of the drawing; note however that this excludes the controls at the top, only the actual image is resized.
    <div id='ccContainer' style="width:800px;"></div>
  4. Trigger the JS to inject the drawing into the div when the page loads.
    <script>
    $(document).ready(function() {
    // Set up
    ccSetUp();
    });
    </script>

GitHub

You can visit this project on its GitHub page. You can also complain here about problems :)