28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Convolution Visualizer",
3 | "name": "Convolution Visualizer",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | h1 { margin-bottom: 0 }
2 |
3 | .author { margin-left: 2em; }
4 |
5 | p {
6 | max-width: 80em;
7 | }
8 |
9 | body {
10 | font: 14px "Century Gothic", Futura, sans-serif;
11 | margin: 20px;
12 | margin-right:40px;
13 | }
14 |
15 | .form {
16 | margin-bottom: 1em;
17 | float: left;
18 | }
19 |
20 | .viewport {
21 | margin-left: 16em;
22 | }
23 |
24 | .grid-container {
25 | margin-bottom: 1em;
26 | }
27 |
28 | table {
29 | border-collapse: collapse;
30 | }
31 |
32 | td {
33 | background: #fff;
34 | border: 1px solid #999;
35 | height: 34px;
36 | width: 34px;
37 | }
38 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import * as d3 from 'd3v4';
4 | import './index.css';
5 |
6 | /**
7 | * An HTML5 range slider and associated raw text input.
8 | *
9 | * Properties:
10 | * - min: The minimum allowed value for the slider range
11 | * - max: The maximum allowed value for the slider range
12 | * - value: The current value of the slider
13 | * - disabled: Whether or not to disable the slider. A slider
14 | * is automatically disabled when min == max.
15 | * - onChange: Callback when the value of this slider changes.
16 | */
17 | function Slider(props) {
18 | const max = parseInt(props.max, 10);
19 | const min = parseInt(props.min, 10);
20 | const maxLength = max ? Math.ceil(Math.log10(max)) : 1;
21 | const disabled = props.disabled || min >= max;
22 | return (
23 |
24 |
28 |
34 |
35 | );
36 | }
37 |
38 | /**
39 | * Create a 1-dimensional array of size 'length', where the 'i'th entry
40 | * is initialized to 'f(i)', or 'undefined' if 'f' is not passed.
41 | */
42 | function array1d(length, f) {
43 | return Array.from({length: length}, f ? ((v, i) => f(i)) : undefined);
44 | }
45 |
46 | /**
47 | * Create a 2-dimensional array of size 'height' x 'width', where the 'i','j' entry
48 | * is initialized to 'f(i, j)', or 'undefined' if 'f' is not passed.
49 | */
50 | function array2d(height, width, f) {
51 | return Array.from({length: height}, (v, i) => Array.from({length: width}, f ? ((w, j) => f(i, j)) : undefined));
52 | }
53 |
54 | /**
55 | * The classic convolution output size formula for a single dimension.
56 | *
57 | * The derivation for many special cases is worked out in:
58 | * http://deeplearning.net/software/theano/tutorial/conv_arithmetic.html
59 | */
60 | function computeOutputSize(input_size, weight_size, padding, dilation, stride) {
61 | return Math.floor((input_size + 2 * padding - dilation * (weight_size - 1) - 1) / stride + 1);
62 | }
63 |
64 | /**
65 | * Test if a set of parameters is valid.
66 | */
67 | function paramsOK(input_h, input_w, weight_h, weight_w, padding, dilation, stride_h, stride_w) {
68 | const output_h = computeOutputSize(input_h, weight_h, padding, dilation, stride_h);
69 | const output_w = computeOutputSize(input_w, weight_w, padding, dilation, stride_w);
70 | return output_h > 0 && output_w > 0;
71 | }
72 |
73 |
74 | // We use the next two functions (maxWhile and minWhile) to
75 | // inefficiently compute the bounds for various parameters
76 | // given fixed values for other parameters.
77 |
78 | /**
79 | * Given a predicate 'pred' and a starting integer 'start',
80 | * find the largest integer i >= start such that 'pred(i)'
81 | * is true OR end, whichever is smaller.
82 | */
83 | function maxWhile(start, end, pred) {
84 | for (let i = start; i <= end; i++) {
85 | if (pred(i)) continue;
86 | return i - 1;
87 | }
88 | return end;
89 | }
90 |
91 | /**
92 | * Given a predicate 'pred' and a starting integer 'start',
93 | * find the smallest integer i <= start such that 'pred(i)'
94 | * is true OR end, whichever is larger.
95 | */
96 | function minWhile(start, end, pred) {
97 | for (let i = start; i >= end; i--) {
98 | if (pred(i)) continue;
99 | return i + 1;
100 | }
101 | return end;
102 | }
103 |
104 | /**
105 | * Return the color at 0 <= p <= 1 for the RGB linear interpolation
106 | * between color (0) and white (1).
107 | */
108 | function whiten(color, p) {
109 | return d3.interpolateRgb(color, "white")(p)
110 | }
111 |
112 | /**
113 | * Top-level component for the entire visualization. This component
114 | * controls top level parameters like input sizes, but not the mouse
115 | * interaction with the actual visualized grids.
116 | */
117 | class App extends React.Component {
118 | constructor(props) {
119 | super(props);
120 | this.state = {
121 | input_height: 5,
122 | input_width: 5,
123 | weight_height: 3,
124 | weight_width: 3,
125 | padding: 0,
126 | dilation: 1,
127 | stride_height: 1,
128 | stride_width: 1,
129 | // State to control the UI mode
130 | inputShape: 'square',
131 | kernelShape: 'square',
132 | strideShape: 'square',
133 | };
134 | }
135 |
136 | // React controlled components clobber saved browser state, so
137 | // instead we manually save/load our state from localStorage.
138 |
139 | componentDidMount() {
140 | const state = localStorage.getItem("state");
141 | if (state) {
142 | this.setState(JSON.parse(state));
143 | }
144 | }
145 |
146 | componentDidUpdate() {
147 | localStorage.setItem("state", JSON.stringify(this.state));
148 | }
149 |
150 | // A smarter handler for dimension changes that respects the current shape mode.
151 | handleDimensionChange = (type, dimension) => (e) => {
152 | const r = parseInt(e.target.value, 10);
153 | if (isNaN(r)) return;
154 |
155 | // TODO: transposed convolution
156 | // FIX: Correctly map the 'type' string to its corresponding state key
157 | let shapeKey;
158 | if (type === 'input') shapeKey = 'inputShape';
159 | else if (type === 'weight') shapeKey = 'kernelShape';
160 | else if (type === 'stride') shapeKey = 'strideShape';
161 |
162 | const shape = this.state[shapeKey];
163 |
164 | if (shape === 'square') {
165 | // In square mode, the slider controls both height and width
166 | this.setState({
167 | [`${type}_height`]: r,
168 | [`${type}_width`]: r,
169 | });
170 | } else {
171 | // In rectangular mode, sliders are independent
172 | this.setState({
173 | [`${type}_${dimension}`]: r
174 | });
175 | }
176 | };
177 |
178 | // Handles the user switching between "Square" and "Rectangular"
179 | handleShapeChange = (type) => (e) => {
180 | const newShape = e.target.value;
181 | const key = `${type}Shape`;
182 |
183 | if (newShape === 'square') {
184 | // When switching back to square, make width equal to height
185 | const height = this.state[`${type}_height`];
186 | this.setState({
187 | [key]: newShape,
188 | [`${type}_width`]: height,
189 | });
190 | } else {
191 | this.setState({ [key]: newShape });
192 | }
193 | };
194 |
195 | render() {
196 | const { input_height, input_width, weight_height, weight_width, padding, dilation, stride_height, stride_width, inputShape, kernelShape, strideShape } = this.state;
197 |
198 | const padded_input_height = input_height + padding * 2;
199 | const padded_input_width = input_width + padding * 2;
200 |
201 | const output_height = computeOutputSize(input_height, weight_height, padding, dilation, stride_height);
202 | const output_width = computeOutputSize(input_width, weight_width, padding, dilation, stride_width);
203 |
204 | const output = array2d(output_height, output_width, (i, j) => array2d(weight_height, weight_width));
205 |
206 | for (let h_out = 0; h_out < output_height; h_out++) {
207 | for (let w_out = 0; w_out < output_width; w_out++) {
208 | for (let h_kern = 0; h_kern < weight_height; h_kern++) {
209 | for (let w_kern = 0; w_kern < weight_width; w_kern++) {
210 | const h_im = h_out * stride_height + h_kern * dilation;
211 | const w_im = w_out * stride_width + w_kern * dilation;
212 | output[h_out][w_out][h_kern][w_kern] = h_im * padded_input_width + w_im;
213 | }
214 | }
215 | }
216 | }
217 |
218 | // Make an extended params dictionary with our new computed values
219 | // to pass to the inner component.
220 | const params = Object.assign({
221 | padded_input_height: padded_input_height,
222 | padded_input_width: padded_input_width,
223 | output_height: output_height,
224 | output_width: output_width,
225 | output: output,
226 | }, this.state);
227 |
228 | const onChange = (state_key) => (e) => {
229 | const r = parseInt(e.target.value, 10);
230 | // Text inputs can sometimes temporarily be in invalid states.
231 | // If it's not a valid number, refuse to set it.
232 | if (!isNaN(r)) {
233 | this.setState({[state_key]: r});
234 | }
235 | };
236 |
237 | // An arbitrary constant I found aesthetically pleasing.
238 | const max_input_size = 16;
239 |
240 | return (
241 | 245 | This interactive visualization demonstrates how various convolution parameters 246 | affect shapes and data dependencies between the input, weight and 247 | output matrices. Hovering over an input/output will highlight the 248 | corresponding output/input, while hovering over an weight 249 | will highlight which inputs were multiplied into that weight to 250 | compute an output. (Strictly speaking, the operation visualized 251 | here is a correlation, not a convolution, as a true 252 | convolution flips its weights before performing a correlation. 253 | However, most deep learning frameworks still call these convolutions, 254 | and in the end it's all the same to gradient descent.) 255 |
256 | 398 || (empty) |