fix example links from ima_ml to ml5 tm example

docs/reference/iframes/image-classifier-tm/index.html

@@ -16,7 +16,7 @@
   <script>
     // Navbar will be added on the top of the page.
     // You can provide a link to the script file on the p5 web editor.
-    navbar("https://editor.p5js.org/ima_ml/sketches/vOSSEZwGf");
+    navbar("https://editor.p5js.org/ml5/sketches/VvGXajA36");
   </script>
 
   <iframe src="ready.html" name="script-iframe"></iframe>>

docs/reference/iframes/image-classifier-tm/ready.html

@@ -18,7 +18,8 @@ <h1>Image + Teachable Machine Demo</h1>
       Press the <b>▶︎</b> button to try it out!
       Make sure to allow access to the webcam.
       </br></br>
-      <span class="text-highlight">Hold up a thermos or an eraser to the camera and see if the model can recognize it!</span>
+      <span class="text-highlight">See if the model can determine whether your environment is daytime or
+        nighttime</span>
       </br></br>
       Click <b>Open in p5.js Web Editor</b> to view the complete code.
     </p>

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;
 }

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.
 
 </br>
 
@@ -31,15 +31,15 @@ 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
 
 - [Image Classification with ml5.js](https://thecodingtrain.com/tracks/ml5js-beginners-guide/ml5/1-classification/image-classification) by The Coding Train
 
 ## 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 <img class="inline-img" src="assets/facemesh-arrow-forward.png" alt="run button icon" aria-hidden="true"> `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 <img class="inline-img" src="assets/facemesh-arrow-forward.png" alt="run button icon" aria-hidden="true"> `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.