Ml5-library: Investigate Observable for tutorials / examples

[shiffman]

https://beta.observablehq.com/

[vndrewlee]

hello!

I am new to javascript and open source, but this seemed like a good place to start.

https://beta.observablehq.com/@vndrewlee/bare-minimum-ml5-demo

I've gotten the bare minimum working here, but there is a bug. The final cell must be re-run manually.

I'm not sure how to wait until the model is fully loaded before running the last cell. The instance's ready attribute never seems to change. Is it safe to use modelSize flipping from 0 to 1?

[cvalenzuela]

Hi Andrew!

It seems there's a bug, the this.ready property never changes. It should change right here
You are welcome to submit a PR to fix it!

Using this.modelSize should be safe for now.

[vndrewlee]

I found using a Promise seems to work well and have updated my demo.

https://beta.observablehq.com/@vndrewlee/bare-minimum-ml5-demo

[cvalenzuela]

great!
are you planning to make more notebooks like this?

[vndrewlee]

Yup, I could start with recreating some of the existing documentation.

My main concern is that I don't think P5 works in an Observable notebook.

Would you still want to continue down the Observable notebook route if P5 can't be used?

[cvalenzuela]

That would be great!

You can run p5 in instance mode, here's an example using p5+dl in an observable notebook:

https://beta.observablehq.com/@cvalenzuela/nn

But if using p5 is a constraint then 'plain' javascript examples would be amazing to have too!

[shiffman]

Hi @vndrewlee! Thanks for your contribution!

I think right now we're in the highly experimental, try everything stage so I would go with whatever makes things easier for you to demonstrate.

If at some point we are embedding the observable notebooks into the ml5 website we probably need to be more careful / thoughtful about how we use p5, but if we are just linking to them as additional resources / versions of the examples I would just go with any and all of the above in the spirit of learning how this all works!

[vndrewlee]

thanks for the feedback!

I'm working through a k-means clustering example as a first effort.

I'm mostly using deeplearn directly with a bit of d3 and vegalite

[cvalenzuela]

@tmcw made this really cool tutorial on using p5+Observable

https://beta.observablehq.com/@tmcw/p5

[duncangeere]

Hey folks. I published a short notebook oriented around the getting started example a few days ago. Looks like you made some changes, though, and it's currently not working, but I'm working on a fix!
https://beta.observablehq.com/@duncangeere/image-classification-with-ml5-js

[shiffman]

Thank you @duncangeere. For context, things are settling a bit here but the code is still quite a bit in flux as we prepare for a "beta" 0.1.0 release slated for this Friday, June 15th! Let us know how we can help or if you have any questions!

[duncangeere]

@shiffman Totally understand. I've got it fixed for now, I had to add a new promise. Good luck on the launch! This weekend I'll see if I can build some more examples off the finalised code :)

[cvalenzuela]

@duncangeere thanks for making that notebook! really well explained!

[joeyklee]

Hi All - As this issue is over 2 years old and we have not really gone in the direction of using observable for our ml5 examples, I will close this issue up for now. Thanks for the participation here in those early days!