From c013f815183c0295873465c7bb1d62a7a4a48bac Mon Sep 17 00:00:00 2001 From: yu <43624848+leey611@users.noreply.github.com> Date: Fri, 6 Dec 2024 14:34:28 -0500 Subject: [PATCH 1/2] fix example links from ima_ml to ml5 tm example --- docs/reference/iframes/image-classifier-tm/index.html | 2 +- docs/reference/image-classifier-tm.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/reference/iframes/image-classifier-tm/index.html b/docs/reference/iframes/image-classifier-tm/index.html index 398e7bc..419321f 100644 --- a/docs/reference/iframes/image-classifier-tm/index.html +++ b/docs/reference/iframes/image-classifier-tm/index.html @@ -16,7 +16,7 @@ > diff --git a/docs/reference/image-classifier-tm.md b/docs/reference/image-classifier-tm.md index 2080aad..19573ea 100644 --- a/docs/reference/image-classifier-tm.md +++ b/docs/reference/image-classifier-tm.md @@ -21,7 +21,7 @@ It provides the following functionalities: ## Quick Start -Run and explore a pre-built example! [This Image + Teachable Machine example](https://editor.p5js.org/ima_ml/sketches/vOSSEZwGf) classifies the content of an image from the webcam feed using a Teachable Machine model. +Run and explore a pre-built example! [This Image + Teachable Machine example](https://editor.p5js.org/ml5/sketches/VvGXajA36) classifies the content of an image from the webcam feed using a Teachable Machine model.
@@ -31,7 +31,7 @@ Run and explore a pre-built example! [This Image + Teachable Machine example](ht ### p5 sketches -- [Image + Teachable Machine Video](https://editor.p5js.org/ima_ml/sketches/vOSSEZwGf): Classify the content of an image from the webcam feed using a Teachable Machine model. +- [Image + Teachable Machine Video](https://editor.p5js.org/ml5/sketches/VvGXajA36): Classify the content of an image from the webcam feed using a Teachable Machine model. ### Video Tutorials @@ -39,7 +39,7 @@ Run and explore a pre-built example! [This Image + Teachable Machine example](ht ## Step-by-Step Guide -Now, let's together build the [Image + Teachable Machine Video example](https://editor.p5js.org/ima_ml/sketches/vOSSEZwGf) from scratch, and in the process, learn how to use the Image + Teachable Machine model. +Now, let's together build the [Image + Teachable Machine Video example](https://editor.p5js.org/ml5/sketches/VvGXajA36) from scratch, and in the process, learn how to use the Image + Teachable Machine model. ### Create a new project @@ -168,7 +168,7 @@ Now, we can display the classification result on the canvas. ### Run your sketch -Congratulations! You have successfully built the Image + Teachable Machine Video example. Press the `run` button to see the code in action. You can also find the [complete code](https://editor.p5js.org/ima_ml/sketches/vOSSEZwGf) in the p5.js web editor. +Congratulations! You have successfully built the Image + Teachable Machine Video example. Press the `run` button to see the code in action. You can also find the [complete code](https://editor.p5js.org/ml5/sketches/VvGXajA36) in the p5.js web editor. ?> If you have any questions or spot something unclear in this step-by-step code guide, we'd love to hear from you! Join us on [Discord](https://discord.com/invite/3CVauZMSt7) and let us know how we can make it better. From ec823ebffc49d4e2b35ed8600a66b804436187cc Mon Sep 17 00:00:00 2001 From: Alan Ren <10086000+alanvww@users.noreply.github.com> Date: Fri, 6 Dec 2024 18:04:32 -0500 Subject: [PATCH 2/2] Matching the example iframe with the web editor example --- .../iframes/image-classifier-tm/ready.html | 3 +- .../iframes/image-classifier-tm/script.js | 58 ++++++++++--------- 2 files changed, 32 insertions(+), 29 deletions(-) diff --git a/docs/reference/iframes/image-classifier-tm/ready.html b/docs/reference/iframes/image-classifier-tm/ready.html index cb7434f..21e1c86 100644 --- a/docs/reference/iframes/image-classifier-tm/ready.html +++ b/docs/reference/iframes/image-classifier-tm/ready.html @@ -18,7 +18,8 @@

Image + Teachable Machine Demo

Press the ▶︎ button to try it out! Make sure to allow access to the webcam.

- Hold up a thermos or an eraser to the camera and see if the model can recognize it! + See if the model can determine whether your environment is daytime or + nighttime

Click Open in p5.js Web Editor to view the complete code.

diff --git a/docs/reference/iframes/image-classifier-tm/script.js b/docs/reference/iframes/image-classifier-tm/script.js index 0d4f55c..f6e5c70 100644 --- a/docs/reference/iframes/image-classifier-tm/script.js +++ b/docs/reference/iframes/image-classifier-tm/script.js @@ -1,49 +1,51 @@ -// Classifier Variable +/* + * 👋 Hello! This is an ml5.js example made and shared with ❤️. + * Learn more about the ml5.js project: https://ml5js.org/ + * ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md + * + * This example demonstrates detecting objects in a live video through ml5.imageClassifier + Teachable Machine. + */ + +// A variable to initialize the Image Classifier let classifier; -// Model URL -let imageModelURL = "https://teachablemachine.withgoogle.com/models/4-WUyljZZ/"; -// Video +// A variable to hold the video we want to classify let video; -// To store the classification -let label = ""; -// Load the model first +// Variable for displaying the results on the canvas +let label = "Model loading..."; + +let imageModelURL = "https://teachablemachine.withgoogle.com/models/bXy2kDNi/"; + function preload() { - classifier = ml5.imageClassifier(imageModelURL + "model.json", { - flipped: true, - }); + ml5.setBackend('webgl'); + classifier = ml5.imageClassifier(imageModelURL + "model.json"); } function setup() { - createCanvas(320, 260); - // Create the video + createCanvas(640, 480); + + // Create the webcam video and hide it video = createCapture(VIDEO, { flipped: true }); - video.size(320, 240); + video.size(640, 480); video.hide(); + + // Start detecting objects in the video classifier.classifyStart(video, gotResult); } function draw() { - background(0); - // Draw the video + // Each video frame is painted on the canvas image(video, 0, 0); - // Draw the label - fill(255); - textSize(16); - textAlign(CENTER); - text(label, width / 2, height - 4); -} - -// Get a prediction for the current video frame -function classifyVideo() { - classifier.classify(flippedVideo, gotResult); + // Printing class with the highest probability on the canvas + fill(0, 255, 0); + textSize(32); + text(label, 20, 50); } -// When we get a result +// A function to run when we get the results function gotResult(results) { - // The results are in an array ordered by confidence. - // console.log(results[0]); + // Update label variable which is displayed on the canvas label = results[0].label; }