Interactive multi-layer perceptron

\[ h = f_h^{(1)}(w_{hx}^{(1)} x + w_{hy}^{(1)} y + b_h^{(1)}) \] \[ v = f_v^{(1)}(w_{vx}^{(1)} x + w_{vy}^{(1)} y + b_v^{(1)}) \] \[ z = f_z^{(2)}(w_{zh}^{(2)} h + w_{zv}^{(2)} v + b_z^{(2)}) \]

This page visualizes a multi-layer perceptron with two inputs $x$ and $y$, two hidden units $h$ and $v$, and one output $z$.

Here:

• $w_{hx}^{(1)}$, $w_{hy}^{(1)}$, $b_h^{(1)}$, $f_h^{(1)}$ denote two weights, a bias, and an activation function for computing $h$ from the inputs $x$ and $y$;
• $w_{vx}^{(1)}$, $w_{vy}^{(1)}$, $b_v^{(1)}$, $f_v^{(1)}$ denote two weights, a bias, and an activation function for computing $v$ from the inputs $x$ and $y$;
• $w_{zh}^{(2)}$, $w_{zv}^{(2)}$, $b_z^{(2)}$, $f_z^{(2)}$ denote two weights, a bias, and an activation function for computing $z$ from the hidden units $h$ and $v$;

In this visualization, one can see outputs from the two-layer perceptron as a heat map as they interactively change the parameters in the perceptron. The heatmap represents two inputs $x$ and $y$ as $x$-axis and $y$-axis, respectively, and an output as color thickness of the plotting area.

Let’s confirm that changing the parameters of the perceptron can realize XOR.

$x$	$y$	AND	OR	NAND	XOR
0	0	0	0	1	0
0	1	0	1	1	1
1	0	0	1	1	1
1	1	1	1	0	0