Neuropaint - Marcos Ruiz Muñoz 📄

Index ✒️

Description 🚀
User Interface 🎨
Functions 📌
Keyboard shortcuts ⌨️

If you want to support my repository =)

1. Description 🚀

Neuropaint is a website for creating representations of neural networks of all kinds. It has a user interface with which you can edit and configure everything. Practice, create and edit the representation of your neural network!

Test the application clicking in this link.

2. User Interface 🎨

In Neuropaint you can edit any configuration on the image and the neural network. Next, the different buttons and menus that you can use on the web will be described.

Preview Buttons

Save Image: You can save your image in an SVG file with the name you want.
Open Code: You can load a previously saved code (only .txt file) to continue editing your neural network representation.
Expand Preview: You can expand the preview and hide the code editor.

Zoom Buttons

Zoom In: Zoom in on the image.
Zoom Out: Zoom out on the image.
Reset: Reset the zoom settings.

Editor Buttons

Save Code: You can save your code to continue editing it at another time.
Select an example: Select one of the neural network representation examples. It will help you as a guide to create your own.

1. Declarations

Create the nodes you want with the following function.

var n1 = new Node();

2. Input

Create the input layer with the dimensions you want and add it to a node.

n1.add(Input(48,32,10));

3. Conv2D

Add a convolution layer to the node with the Conv2D function that has these arguments:

Filters: the next Z dimension
Kernel Size: x and y dimension of the kernel
Strides: An integer or tuple / list of 2 integers, specifying the steps of the convolution along the height and width.
Padding: one of "valid" or "same" (case-insensitive). "valid" means no padding. "same" results in padding with zeros evenly to the left/right or up/down of the input such that output has the same height/width dimension as the input.

n1.add(Input(48,32,10));
n1.add(Conv2D(32,[10,10],[1,1],"same"));

You can also create the input layer in this function.

n1.add(Conv2D(32,[10,10],[1,1],"same",Input(48,32,10)));

4. Deconv2D

Add a deconvolution layer to the node with the Deconv2D function that has these arguments:

Filters: the next Z dimension
Kernel Size: x and y dimension of the kernel
Strides: An integer or tuple / list of 2 integers, specifying the steps of the convolution along the height and width.
Padding: one of "valid" or "same" (case-insensitive). "valid" means no padding. "same" results in padding with zeros evenly to the left/right or up/down of the input such that output has the same height/width dimension as the input.

n1.add(Input(32,32,20));
n1.add(Deconv2D(48,[10,10],[2,2],"same"));

You can also create the input layer in this function.

n1.add(Deconv2D(48,[10,10],[2,2],"same",Input(32,32,20)));

5. MaxPooling2D

Operation to decrease the 2D size of the neural network node.

n1.add(Input(48,32,10));
n1.add(Conv2D(32,[10,10], [1,1], "same"));
n1.add(MaxPooling2D([2,2]));
n1.add(Conv2D(64,[5,5],[1,1],"same"));

6. Dense

Create a dense layer with the following function.

n1.add(Dense(100));
n1.add(Dense(200));

7. Concatenate

Concatenate Neural Network Nodes.

x1a.add(Input(32,32,20));
x1a.add(Conv2D(32,[10,10],[1,1],"same"));
x1b.add(Input(32,32,20));
x1b.add(Conv2D(32,[10,10],[1,1],"same"));
x1.add(Concatenate([x1a, x1b]));
xp3.add(Dense(100));

Remember that you must also define it in the model.

model.add(xp3);
model.add(x1a,x1);
model.add(x1b,x1);
model.add(x1,xp3);

8. Add Shortcut

You can join any layer of any node to each other.

n1.add(Input(48,32,10));
n4=n1.add(Conv2D(32,[10,10],[1,1],"same"));
n6=n1.add(Conv2D(64,[5,5],[1,1],"same"));
n7=n1.add(Conv2D(72,[10,10],[1,1],"same"));
n2.add(Input(48,32,10));
n5=n2.add(Conv2D(32,[10,10],[1,1],"same"));
n8=n2.add(Conv2D(64,[5,5],[1,1],"same"));
n9=n2.add(Conv2D(72,[10,10],[1,1],"same"));
n3.add(Dense(150));
n3.add(Dense(150));

In the model:

model.add(n3);
model.add(n1,n3);
model.add(n2,n3);
model.addShortcut(n4,n5);
model.addShortcut(n6,n7);
model.addShortcut(n8,n9);

4. Keyboard shortcuts ⌨️

FUNCTION	KEYBOARD SHORTCUT
Export SVG	CTRL+SHIFT+S
Open project	CTRL+SHIFT+F
Change example	CTRL+SHIFT+H
Set the preview window to full screen	CTRL+SHIFT+E
Zoom In	CTRL+SHIFT+ '+'
Zoom Out	CTRL+SHIFT+ '-'
Reset Image	CTRL+SHIFT+BACKSPACE
Open menu	CTRL+SHIFT+Q

Markete17 / Neuropaint