p5.js web editor examples

[shiffman]

Moving #23 to here. Would be great to have the p5 examples all running in the web editor. These can be linked from README's associated with each example as well as from the website.

[shiffman]

Ack, this might not be as easy as I thought! I got a weird error when trying to run "image classification" in the p5.js web editor. Something to do with the way the web editor deals with images (sending everything to AWS) and the way deeplearn.js makes everything a WEBGL texture?

https://alpha.editor.p5js.org/ml5/sketches/H1lFmvrYf

[cvalenzuela]

An update on this:

Here's an image classification example:

https://alpha.editor.p5js.org/cvalenzuela/sketches/S19HhmQe7

The error @shiffman was getting was because the editor uploads it's own versions of the image to a aws bucket = CORS error. So you need to create images with crossorigin="anonymous"

Where should we start putting this?

[shiffman]

Related to ml5js/ml5-examples#7, we should probably use loadImage() for the web editor versions as beginners don't necessarily know to look in index.html. While the number is small I think we could link to all of them in README and we should also link to them on the website on each example page. . . as well as possibly a README in the individual directories here. But I don't know if all of that is overkill. A single list is probably most useful.

[shiffman]

Oh, let's also create an ml5 web editor account, this way people can also go to:

https://alpha.editor.p5js.org/ml5/sketches/

I'll do that right now and e-mail the password.

[oveddan]

I'm having the same CORS issue when trying to make a chrome extension which can scrape images from any website and load its pixels using tf.fromPixels

[cvalenzuela]

@oveddan, have you tried adding img.crossOrigin = "Anonymous" before setting the the src?

@shiffman, I tried loadImage() in the editor but it does not seem to work. Not sure what the problem is, although loadImage() supports CORS: https://github.com/processing/p5.js/blob/master/src/image/loading_displaying.js#L99

[yining1023]

I just added Image Classification Transfer Learning: https://alpha.editor.p5js.org/ml5/sketches/rJUUMENxX

[yining1023]

Examples like LSTM and Style Transfer need a model folder, but p5 web editor doesn't allow me to upload files in special format. (Files like this: https://github.com/ml5js/ml5-examples/tree/master/p5js/StyleTransfer_Image/models/wave)

And for word2vec example, two of the json files are too large to be uploaded.

I think we need to host all those files remotely if we want to port these examples in p5 web editor.

[shiffman]

I'll check in with the p5 web editor team re: model files. For word2vec what if we link to the raw github file? At this point I think it's ok to skip any examples that don't immediately translate well to the web editor.

[lisajamhoury]

I'm running into the same issue as @yining1023 with the Crepe examples. The model files cannot be uploaded to the editor. File type not supported.

[lisajamhoury]

Just sent a pull request to add the YOLO and PoseNet examples to the examples readme. I had some trouble getting the YOLO example to work because of a CORS issue. Once I deleted and started from scratch with HTTPS, everything ran smoothly.

[AidanNelson]

@shiffman pulling the Word2Vec raw data files directly from Github seems to work.

Would these examples ideally not use any HTML at all? Specifically wondering if I should recreate the Word2Vec html using P5 DOM library?

http://alpha.editor.p5js.org/ml5/sketches/BJeRL9TeQ

[shiffman]

For anyone tracking this, you can see all the ml5 web editor examples here:

https://editor.p5js.org/ml5/sketches

Where should links to these go? In README.md here? On the website?

[dfenjves]

Hi all - I'm also struggling with the same CORS error, both using the p5 Web Editor and on Glitch. I've tried using the crossOrigin="anonymous" attribute and it works once every few attempts.

It also looks like the example for image classification on the p5 editor account for ml5 is also facing the same error (see below). Anyone else found a workaround for this?

[joeyklee]

@shiffman - just FYI, I will be working on automating the ml5 examples upload to the p5 web editor here - https://github.com/joeyklee/p5.js-web-editor/tree/fetch-ml5-examples - and will coordinate with @catarak regarding the script :) I'll keep you posted about developments.

[catarak]

@joeyklee great, keep me updated! let me know if there's anything i can do to get the ml5 examples working with the web editor.

[joeyklee]

Thanks @catarak! I'll hopefully have something in working order in the next couple hours and I'll check in :) Thank you!

[tezzutezzu]

Rather than adding an image to index.html, we could also set the crossorigin attribute to the created image in this way.

img.attribute("crossorigin", "anonymous")

Hence the code of the example will become:

function setup() {
    createCanvas(640, 360);

    // create an image using the p5 dom library
    // and call modelReady() when it is loaded
    img = createImg('data/runner.jpg', imageReady);
    
    // allow the sharing of the image from the server the editor saves the image in
    img.attribute("crossorigin", "anonymous")
  
    // set the image size to the size of the canvas
    img.size(width, height);
    // hide the image in the browser
    img.hide(); 
    
}
  

[catarak]

let me know anytime y'all want me to re-run the script to import the ml5 examples into the web editor!

[zoyron]

@shiffman , I'd like to work on this issue. It'd be really appreciable if you can guide me how do I proceed to work on this since it's my first issue.
Thank you.

[joeyklee]

Hi @zoyron - I believe this issue is more or less resolved already with ml5js/ml5-examples#227. I've left this issue open so that when the p5 web editor public API is launched we remember to change the .env path variables, etc.

If you're still interested in addressing other issues in this repo, we'd appreciate your contribution!

[joeyklee]

Hi All. This should be resolved now. With the upcoming P5 web editor API this will be much simpler to handle. For now, we work with @catarak who helps to deploy our examples updates. Thank you!