Update to deeplearn.js 0.5.1 #4
Conversation
…0.5. It also introduces some changes to a couple of the examples to better handle images and text with p5. The Neural Network example has been removed until the method is ready on the library. The stucture of the folders also has changes, reflecting #1
fix titles bug
README.md
Outdated
|
|
||
| ## Description | ||
|
|
||
| This repository contains a collection of simple examples of [ML5.js](https://github.com/ml5js/ml5-library). These examples are meant to serve as an introduction to the capabilities of ML5.js. |
There was a problem hiding this comment.
Also maybe the link should go to the website not ml5-library repo?
p5js/01_ImageNet_Camera/index.html
Outdated
| @@ -2,19 +2,19 @@ | |||
|
|
|||
| <head> | |||
| <meta charset="UTF-8"> | |||
| <title>Imagenet Webcam example</title> | |||
| <title>Video Camera Classification using p5.js</title> | |||
|
|
|||
| <script src="../libraries/p5.min.js"></script> | |||
There was a problem hiding this comment.
I wonder if we should reference p5 via a CDN? I think it's confusing for beginners sometimes when libraries are not part of the sketch directory itself.
There was a problem hiding this comment.
What about a CDN for ml5.js also? We could write something in the README about CDN's and how to run these examples offline (if they can be run offline). That would be good to document in general in terms of examples that connect to the cloud. I'll add a github issue.
There was a problem hiding this comment.
Since we are using npm to publish the package, we can use this CDN:
https://unpkg.com/ml5
p5js/01_ImageNet_Camera/sketch.js
Outdated
| noCanvas(); | ||
| video = createCapture(VIDEO); | ||
| // Start the prediction loop! | ||
| guess(); |
There was a problem hiding this comment.
This probably fails the first time since the video isn't ready but I guess it's ok? It's simple and it works!
There was a problem hiding this comment.
Updated this so now guess() is called as a callback of createCapture()
p5js/02_KNNImage/sketch.js
Outdated
|
|
||
| function createButtons() { | ||
| // Train buttons | ||
| buttonA = select('#buttonA'); | ||
| buttonA.mousePressed(() => { |
There was a problem hiding this comment.
This is likely to change very soon but the p5 examples don't use ES6 => yet so to stay friendly let's use ES5 function. Anonymous is ok I think. For the "plain JS examples" I'm ok with =>. What do you think?
There was a problem hiding this comment.
Yep! Agree. Let's keep anonymous functions in this case.
|
|
||
| function setup() { | ||
| noCanvas(); | ||
| inputImg = select('#inputImg').elt; |
There was a problem hiding this comment.
I think I might opt for doing a p5 example with loadImage() and the plain JS example with an <img> element? This comment could apply to the ImageNet example and any others too. Doesn't need to be part of this pull request, we can track in a separate issue.
There was a problem hiding this comment.
I updated this so now everything is handled by p5.js
|
|
||
| // A function to be called when the models has been loaded | ||
| function modelLoaded1() { | ||
| const result = fs1.transfer(inputImg); |
There was a problem hiding this comment.
I'm torn about the use of const too for the p5 examples as it doesn't really appear for beginners yet. Somebody should probably just tell me to stop worrying and use const.
|
|
||
| function predict() { | ||
| if(cameraReady && modelReady && startPredict) { | ||
| const result = fastStyle.transfer(video.elt); |
There was a problem hiding this comment.
Just a reminder for us to maybe sit down and talk about ml5js/ml5-library#27 sometime. These examples might (emphasis on the might) be cleaner with loadImage() and returning back to the user a p5.Image.
| function predict() { | ||
| if(cameraReady && modelReady && startPredict) { | ||
| const result = fastStyle.transfer(video.elt); | ||
| resultImg.elt.src = result.src |
There was a problem hiding this comment.
Case it point here: my instinct is that resultImg.elt.src is super scary looking for beginners!
There was a problem hiding this comment.
Is it possible to update a p5 Image without a reference to elt? What's the best way to do this with p5?
The way I'm doing it now to update an image created with var img = createImg('') is by calling img.elt.src = 'image.jpg'
| <input type="text" value="king" id="isto1"></input> is to | ||
| <input type="text" value="queen" id="isto2"></input> as | ||
| <input type="text" value="man" id="isto3"></input> | ||
| <input type="text" value="pizza" id="isto1"></input> is to |
There was a problem hiding this comment.
Thank you for changing this! ❤️ 🎉 👏
Making some language edits directly to the pull request @cvalenzuela.
….js needs to be updated in npm after the #97 merge is done, only then we can replace that reference. This commit also changes some DOM manipulation in the StyleTrasnfer examples, besides updating the naming of that class to StyleTransfer
|
💯 |
Update to deeplearn.js 0.5.1
This PR is an update reflecting the changes to the new deeplearn 0.5.1 API. (See ml5-library #97)
The examples have been moved into specific folders and rename with folder numbers to be easier to find, following #1.
The p5.js examples are updated to match all new methods proposed in #97. Better comments and explanations have also been added and some unused functions have been removed.
The README has also been updated to describe better the content of this repository.
Another PR will come with plain javascript examples under the
/javascriptfolder.