Last active
October 14, 2018 18:56
-
-
Save joeyklee/b405dba2bac1328b1b65d09113cd8962 to your computer and use it in GitHub Desktop.
Assuming you have a file called 'images/turtle.png'
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>template</title> | |
| <script src="libraries/p5.js"></script> | |
| <script src="libraries/p5.dom.js"></script> | |
| <script src="libraries/p5.sound.js"></script> | |
| <script src="libraries/ml5.min.js"></script> | |
| <script src="sketch.js"></script> | |
| <style> | |
| body { | |
| margin:0; | |
| padding:0; | |
| overflow: hidden; | |
| } | |
| canvas { | |
| margin:auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p id="status">Loading Model...</p> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Initialize the Image Classifier method with MobileNet. A callback needs to be passed. | |
| // Create a YOLO method | |
| const yolo = ml5.YOLO(modelReady); | |
| let img; | |
| let objects = []; | |
| let status; | |
| function setup() { | |
| // createCanvas(windowWidth, windowHeight); | |
| // noCanvas(); | |
| createCanvas(400, 266); | |
| img = createImg('images/turtle.png', imageReady); | |
| img.hide(); | |
| img.size(400, 266); | |
| // noLoop(); | |
| } | |
| // Change the status when the model loads. | |
| function modelReady(){ | |
| console.log("model Ready!") | |
| status = true; | |
| document.getElementById('status').html('Model Loaded') | |
| } | |
| // When the image has been loaded, | |
| // get a prediction for that image | |
| function imageReady() { | |
| yolo.detect(img, gotResult); | |
| // You can also specify the amount of classes you want | |
| // classifier.predict(img, 10, gotResult); | |
| } | |
| // A function to run when we get any errors and the results | |
| function gotResult(err, results) { | |
| if (err) { | |
| console.error(err); | |
| } | |
| objects = results.slice(0); | |
| console.log(objects) | |
| // The results are in an array ordered by probability. | |
| // select('#result').html(results[0].className); | |
| // select('#probability').html(nf(results[0].probability, 0, 2)); | |
| console.log(results) | |
| } | |
| function draw() { | |
| // image(video, 0, 0, width, height); | |
| if(status!=undefined){ | |
| console.log("drawing") | |
| image(img, 0, 0) | |
| for (let i = 0; i < objects.length; i++) { | |
| noStroke(); | |
| fill(0, 255, 0); | |
| text(objects[i].className, objects[i].x * width, objects[i].y * height - 5); | |
| noFill(); | |
| strokeWeight(4); | |
| stroke(0, 255, 0); | |
| rect(objects[i].x * width, objects[i].y * height, objects[i].w * width, objects[i].h * height); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment