
Show HN: Deep Learning GUI to Create, Train and Visualize Models in a Browser - 0mbre
https://beta.aifiddle.io/
======
WhiteNoiz3
Cool, project - I really believe that we need more visual tools for building
and debugging neural nets.

I had a hard time figuring out how to delete a layer (the icons on the left
are REALLY tiny and not obvious). Maybe adding a trash can in the graph once
you've selected it would be more intuitive (heck maybe add all those icons
there too).

Also, it would be great if it automatically created 'reshape' layers for you
depending on what you're trying to connect or at least suggest them when you
try to make a connection that doesn't fit. If I'm going to use a WYSIWG, it
should make things easier for you than if you coded it by hand. When I'm doing
AI stuff I find a really big portion of my time is just trying to figure out
the right sizes / strides / padding etc at a given point in the graph. I feel
like this would be way easier if it's automatically visualized for me or if
intelligent suggestions are offered.

------
hacker_9
Wow this is great! Makes the process so much more interactive, being able to
draw your own digits and it gets recognised is great. Some small issues I ran
into for your todo list:

1\. Load a Model -> Select model -> Dialog had some spelling mistakes.

2\. Using react tools for chrome, I can see the UI is updating constantly when
nothing changes. This is also making the popup flicker when mouse hovering
over the graphs. The fix is to have ShouldComponentUpdate return false more!

~~~
0mbre
Good catch. Thanks. Indeed due for a perf update.

------
vinayan3
Really awesome and will be super helpful as a teaching aide for ML/Deep
learning classes!

------
Nashooo
Hi, the message on mobile has two errors:

"Appologies AiFiddle currently does not support mobile device.

Do you want to get notified on futur updates ?"

'Apologies' and 'future'.

Looks promising though, will check back when on desktop.

------
k4renio
Very nice concept. This has the potential to be a great teach / prototyping
tool

------
ztratar
I'm not a machine learning engineer, so I'll ask the dumb question: why is
visualizing this flow important? What's the benefit?

~~~
ovi256
If by flow you mean the tensor sizes in different layers, that's a huge help
for debugging, or when rewriting the net in a another framework. For
debugging, you're otherwise stuck with opaque (for beginners) messages about
tensor dimensions not matching. Visualizing makes the mismatches obvious, so
it's common to draw the tensor sizes on paper, exactly what that visualization
does.

------
mattlondon
Really nice - really like it for just fiddling around with models.

One missing feature would be an "undo" function - I accidentally deleted a
layer and couldn't find a way to undelete it?

Edit: just found an error when trying to actually train a network:

TypeError: Argument 1 of WebGL2RenderingContext.clientWaitSync is not an
object.

This was doing a very simple MNIST->dense(200)->dense(1)->output model using
Firefox 65

~~~
0mbre
Thanks for reporting. I haven't done a lot of testing outside of Chrome, will
check this out.

------
amitport
This is really well done.

I've got to mention two missing features that I find important:

1 - help popups: it will be nice if terms had a small help icon that can
display a little context on hover/press (that's a quick win, makes unknown
things usable, much easier to implement than a full manual/interactive
tutorial)

2 - social login / email-only login: you are missing sign-ups (I hate having
more passwords).

~~~
0mbre
1- Indeed. Part of the vision for AiFiddle is to make a educational tool.

2- Yep fairly easy win too as I am using Cognito for auth.

Thanks for the feedback

~~~
kaybe
Yes please! I have no idea what I'm doing (ok only a little), and finally got
the dimensions to match and have trainable layers, and now I am informed that
't.slice is not a function'. Hm. Maybe still a dimension problem somewhere.

~~~
0mbre
might actually be a bug, if you can save the model and send me the URL I will
check it out

~~~
kaybe
As I said, I don't really know what I'm doing.. The editor crashed while I was
playing with it, so I remade the model here: (still the same error)

[https://editor.aifiddle.io/models/cloud/9f33d272-5aab-40eb-8...](https://editor.aifiddle.io/models/cloud/9f33d272-5aab-40eb-82c5-d9cff59f67e8)

Maybe the last reshape is not actually legal since it reduces the number of
values?

edit: Yes, I think that's it. Using Dense instead works.

~~~
0mbre
Yes looks like it. I make a note to handle that more gracefully

------
hnuser123456
If you want your model to train 20x faster, continuously move your mouse up
and down the far left menu, or open the outline and madly expand/collapse the
options for a layer :D

edit: turbo mode: keep v8 at full speed:

function sleep(ms) {return new Promise(resolve => setTimeout(resolve, ms));};
while (true) {console.log(document.getElementsByClassName("content").length);
await sleep(20)};

~~~
0mbre
That would be really awesome. Do you have a source as to why this would work ?

~~~
hnuser123456
I'm using chrome, I think the javascript engine is slowing down because it
doesn't detect enough user interaction/"load"? Obviously, I'm not a fulltime
web/browser developer. Hit F12, open the console, and paste in that
javascript, and it will continuously run at the elevated speed, as long as
it's the active tab in the current window. Break the tab out into its own
window, and it will run in the background at full speed. The snippet is making
a trivial call on one of the elements 50x per second, like a very gentle busy
loop.

On a really basic MNIST model, 784->32dense->10dense, batch size 100, I'm
getting about 2 batches per second idle, and 20 batches per second after
running the above snippet.

To anyone who actually knows anything about web dev, please correct me with a
proper explanation.

~~~
0mbre
I will investigate further but still very cool, thanks!

------
edshiro
Super awesome! I had a similar idea about a year ago but never got to
implement it. We need more visual and straightforward ways to create neural
network architectures.

Can you currently create the architecture and run a given dataset against it?
That would be very cool...

~~~
0mbre
Thanks! Custom dataset indeed on the todo list. The feature is half done
already, I should be able to release it soon.

~~~
edshiro
Awesome. Looking forward to it.

------
abrichr
The demo video is very compelling! Do you support proprietary datasets?

A small suggestion: the audio on the demo video was poor quality and difficult
to understand. Perhaps a better microphone or higher bitrate would help.

------
syntaxing
This is super awesome! Being able to export this to colab would be amazing.
I'm really looking forward to this feature! Are you willing to share which web
framework you used to build your site?

~~~
0mbre
Thanks! The frontend is made with React and Typescript, backend is AWS
serverless

~~~
syntaxing
Thank you for the information! I've been wanting to deploy a proof of concept
webapp (mainly for my portfolio) using Amazon's Sagemaker but my website
building skills is pretty limited besides using something like Jekyll. Do you
have any recommendations on an upper level web framework?

~~~
0mbre
That was my first serverless app and really enjoyed it. It has some quirks but
gets you up and running in no time. FYI I used serverless.com

~~~
syntaxing
Interesting, thank you for the advice!

------
Rainymood
What is the tech stack used for the website/app? Looks great btw.

~~~
pplonski86
I'm also interested in tech stack used. What are you using in the backend?

~~~
m4nu
AWS lambda

------
bicubic
Awesome work. Now make it emit keras/tf/torch code!

~~~
ivan_ah
Had the same idea; opened a "feature request" here:
[https://github.com/m4nuC/aifiddle-
issues/issues/6](https://github.com/m4nuC/aifiddle-issues/issues/6)

Not sure how easy it will be to support all the types of layers on all
platforms, but I think if target is Keras/PyTorch already going to be kick
ass...

~~~
0mbre
Thanks for taking the time. Keras functional API export coming soon. The rest
will follow.

------
dadel
That's really great ! I had a look to the available models and played a bit
with evaluating canvas and that's very nice !

------
glastra
Editing a layer and changing the number of filters, stride or kernel size
effectively changes the shape of that layer, but it should cascade a re-
calculation down the path, which currently doesn't happen at least on my
screen.

~~~
0mbre
Yes, this a known "bug". It was pretty heavy to make it work so felt back to
just breaking the next node connection and adding a note to the backlog

------
samzer
This is so slick!

