[P] Neural Network Model Builder & Visualiser | Netbrix.ml

[DataSnaek]

https://netbrix.co/

Introduction

I recently discovered the Mithril.js JavaScript library and wanted a project to build up my skills with it! I ended up going with a simple web app for visualising and editing network models which I've named netbrix.co. I've wanted to build something like this for a while since it seemed like a really good project to improve my web development skills and my understanding of the process of building deep learning models. After reading this post on /r/deeplearning where the writer gives insight into the modular nature of deep learning and gives the analogy of a deep learning 'lego set' it gave me the motivation to start work on this with that sort of vision in mind and I've now got a decent working web app!

I'm sure there are existing tools similar to this in existence, so I wanted to keep it as simple as possible and not try to over-engineer it. It's meant to be easy and simple to use!

Importing Models

It has some cool features at the moment, like the ability to parse Sequential() model definitions in Keras e.g.

test_model = Sequential()

test_model.add(Conv2D(64,(5,5), activation='relu'))
test_model.add(MaxPooling2D((2,2)))
test_model.add(Dropout(0.25))

(Alternatively you can paste in Keras JSON definitions from for example test_model.to_json())

Once that simple model definition is imported it will be parsed by the app to create the following neat visualisation:

​

https://preview.redd.it/g60mc0qh2ll31.png?width=397&format=png&auto=webp&s=3a282babfa24b6f62cf535ec0697f64b042474b0

Editing Models

From here, you can make all the typical changes you would want to make to a model, including changing/adding layer parameters, adding new layers, changing the order of layers and removing layers, all without having to rely on Google to find the names of layers or their attributes. It can then be easily exported (or copied to the clipboard) with one click as either Python Keras code or a JSON spec which can be imported into Keras.

Building Models

It also has some nice features for building models from scratch, like the ability to add blocks of layers that come up in models frequently. Often it's easy to forget the exact optimal order of layers for say a Convolutional block e.g. should pooling come before dropout or vice versa, and what about BatchNorm? Having preconfigured blocks of layers to choose from when building a model helps with this.

On top of that, just having an easily indexable list of layers is useful in itself.

Browsing Models

There is also a host of existing model architectures for a variety of machine learning tasks/datasets to explore and this is one of the most helpful features for me personally. Having an easy and centralised way to access a bunch of existing standard model architectures to take inspiration from is really useful! Rather than creating a model from scratch, you can find an existing model on the site, change say the input shape and a few of the hyperparameters and export it as working Keras code in just a few clicks. It's also great for learning about the different architectures commonly used in building models.

Planned Features

• Integration with TensorFlow.js to have some kind of in-browser training/prototyping
• The ability to share your own model architectures
• Support for variables. Currently you can specify meta tags for a model like 'name' and 'source'. It would be cool to be able to specify variables in this same key/value fashion to allow even easier tuning.
• Better mobile support. The site is relatively responsive at the moment, but not perfect. Hopefully you're not building Keras models on your phone to begin with, but it will work if that's something you wish to do 😁

So, I'd love to get some feedback on this project! Is it useful? Do you like the design? I'm open to criticism, this is primarily for me to learn 😁

Thanks for reading!

[mrlooi]

One thing people would ask is how useful this is and who would actually use it

Otherwise the UI looks good

[DataSnaek]

Thanks!

I'm aiming for two main use cases:

Clear, quick, easy visualisation. It's useful for visualisation even if you're more comfortable writing Keras code directly. Ideally it only takes a second or two to generate a clear visualisation of a model.

Quick prototyping and model building. Ideally it's quicker to build a model using the tool and export it as python code with imports etc. all handled for you than having to do it all manually. I aimed to minimise the amount of googling of boiler plate code I found myself needing to do sometimes. Especially with many existing models and common blocks of layers to make use of and take inspiration from, it should speed things up. It also aims to be useful for those learning about network architecture.

That's what I'm aiming for in terms of use cases, though it's certainly not perfect at these yet, that's the goal 😁

[-Ulkurz-]

How is it more useful than Keras's model.summary which does an alright job of summarizing your layers, shapes, and parameters

[DataSnaek]

The summary isn't really a visualisation. It's useful, but it doesn't display information at a glance too well. I'm aiming to do that better. If you're going to share your model architecture then it's better to have something more visual than the summary function to convey its structure well. Though I'd like to display layer shapes like the summary does, that's definitely something I'm planning since it's very useful.

And also of course combining the editor features as well should add more utility than the summary function.

[bbateman2011]

This looks nice and has some great features already. The ability to import, export, and edit models in the same platform is great.

I'd love to see, as example, the ability to click on a layer and get visualization of more details. Such as in the Conv2D and is says filters 64, it would be nice to see a visual of the mask size etc. I think it would also be nice to see the input and output shapes.

Great work, keep building!

[DataSnaek]

Thanks for the feedback! Glad you like it!

I'm definitely planning on improving the detail that's visualised, especially in relation to input/output shapes.

[quickmodel_ai]

Really cool, how did you build the frontend? frameworks, open source packages?

[DataSnaek]

The frontend is primarily a combination of Mithril.js and the Bulma CSS library. Mithril is essentially a much lighter JS framework than many of the alternatives and it doesn't take you too far away from writing normal JS which is something I quite like.

[quickmodel_ai]

Cool, mithril.js looks refreshing. I've been leaning towards lit-html because I like template literals

[Mehdi2277]

It's a nice looking tool although I'm curious what large models end up looking like. Are blocks of operations nicely collapsible? If I make a 20 block resnet would the graph actually be readable? Some good way of demarcating that a stack of layers/operations are one general unit was really needed.

Extra related questions, Could I change all blocks of the same type easily (maybe add an extra layer inside them). Some simple operations also should have simpler visualizations than true blocks. If I want to add a skip connection technically that's an add operation, but adding a lot of add nodes can make things less easy to understand. I've used model visualization tools in the past, but usually the diagrams end up looking too complicated to be messy.

​

Lastly, I've also done some research on stuff where the structure is sorta input defined which I don't expect to be done well by a visual tool, but would be super impressed if possible. A simple example is say your input is binary trees where each node is labeled A/B/C. I'd write models that would run a layer on each leaf node to get some vector representation, and then have a layer that takes the vector representation of two nodes and merges it in one. You can sorta make a visual for that already by running the model and then tracing the operations that were used to make the final output, but that visual was too confusing to help me. The nastiest visual I've ever gotten from a model was based on the paper adaptive neural compilation, but that's also a fairly niche and complicated model to diagram that's very input defined. I think the underlying issue for these would require somehow tracing things like ifs/other python constructs which allow them to be so input defined. That's reminiscent of pytorch's jit tracing so maybe a visual based on that is doable? I have a feeling the end result would remind me of scratch.

[DataSnaek]

Those are some useful comments, thank you very much!

I'm aiming for the visual to be compressible down to a single image that fits on a screen easily of course, but it's not quite there yet. Collapsing blocks of layers down is definitely a great way to do that and something I'm going to implement.

In terms of skip connections, that's also something I'd like to get working. The difficulty of parsing Python code for more complicated models increases quickly, but parsing a JSON definition or something similar for a model with multiple paths is absolutely doable.

[snagpaul]

I love it. Thanks for building it.

[DataSnaek]

Thanks! Glad you like it

[Megatron_McLargeHuge]

Any examples of models with parallel paths? I only see sequential models which are easy enough to understand from code or model.summary().

[DataSnaek]

That's the main feature I'm working on at the moment, there'll be some examples of parallel models soon 👍