add image classifier (#45)

ml5js · Mar 28, 2024 · c1c23c9 · c1c23c9
1 parent 9a822a2
commit c1c23c9
Show file tree

Hide file tree

Showing 9 changed files with 220 additions and 267 deletions.
diff --git a/docs/reference/body-segmentation.md b/docs/reference/body-segmentation.md
@@ -76,8 +76,8 @@ function gotResults(result) {
 Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodySegmentation-maskbodyparts) and try it yourself on p5.js web editor!
 
 ### Additional Examples
-* [BodySegmentation-maskbackground](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodySegmentation-maskbackground)
-* [BodySegmentation-maskperson](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodySegmentation-maskperson)
+* [BodySegmentation-maskbackground](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodySegmentation-maskbackground): Mask the background of an image.
+* [BodySegmentation-maskperson](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodySegmentation-maskperson): Mask the person in an image.
 
 <!-- ### Tutorials
 

diff --git a/docs/reference/bodypose.md b/docs/reference/bodypose.md
@@ -209,7 +209,7 @@ function gotPoses(results) {
 Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodyPose-keypoints) and try it yourself on p5.js web editor!
 
 ### Additional Examples
-* [BodyPose-blazepose-keypoints](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodyPose-blazepose-keypoints)
+* [BodyPose-blazepose-keypoints](https://github.com/ml5js/ml5-next-gen/tree/main/examples/BodyPose-blazepose-keypoints): Draw the body keypoints of the detected body using Blazepose model.
 
 <!-- ### Tutorials
 

diff --git a/docs/reference/facemesh.md b/docs/reference/facemesh.md
@@ -118,8 +118,8 @@ function gotFaces(results) {
 Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-keypoints) and try it yourself on p5.js web editor!
 
 ### Additional Examples
-* [FaceMesh-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-parts)
-* [FaceMesh-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-single-image)
+* [FaceMesh-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-parts): Draw the face parts of the detected face.
+* [FaceMesh-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/FaceMesh-single-image): Detect faces in a single image.
 
 TODO (link p5 web editor examples once uploaded)
 

diff --git a/docs/reference/handpose.md b/docs/reference/handpose.md
@@ -106,12 +106,12 @@ function gotHands(results) {
 }
 ```
 
-Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-keypoints) and try it yourself on p5.js web editor!
+Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/HandPose-keypoints) and try it yourself on p5.js web editor!
 
 ### Additional Examples
-* [Handpose-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-parts)
-* [Handpose-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-single-image)
-* [Handpose-start-stop](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-start-stop)
+* [HandPose-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/HandPose-parts): Draw a circle whose size is determined by the pinch distance between the thumb and index finger.
+* [HandPose-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/HandPose-single-image): Detect hands in a single image.
+* [HandPose-start-stop](https://github.com/ml5js/ml5-next-gen/tree/main/examples/HandPose-start-stop): Start and stop hand detection with a button click.
 
 TODO (link p5 web editor examples once uploaded)
 

diff --git a/docs/reference/iframes/image-classifier/images/bird.jpg b/docs/reference/iframes/image-classifier/images/bird.jpg
diff --git a/docs/reference/iframes/image-classifier/index.html b/docs/reference/iframes/image-classifier/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>p5.js iframe</title>
+  <link rel="stylesheet" href="../style.css">
+</head>
+
+<body>
+  <div class="content-container">
+    <h1>Image Classification Model</h1>
+    <p>(Add description.)</p>
+    <button>
+      <a href="main.html">Start!</a>
+    </button>
+  </div>
+</body>
+
+</html>
diff --git a/docs/reference/iframes/image-classifier/main.html b/docs/reference/iframes/image-classifier/main.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <script src="https://unpkg.com/ml5@alpha/dist/ml5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script> -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="../style.css">
+  <meta charset="utf-8" />
+</head>
+
+<body>
+  <main>
+  </main>
+  <div class="content-container">
+    <button>
+      <a href="index.html">Stop</a>
+    </button>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/docs/reference/iframes/image-classifier/script.js b/docs/reference/iframes/image-classifier/script.js
@@ -0,0 +1,46 @@
+// Copyright (c) 2019 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+/* ===
+ml5 Example
+Image classification using MobileNet and p5.js
+This example uses a callback pattern to create the classifier
+=== */
+
+// Initialize the Image Classifier method with MobileNet. A callback needs to be passed.
+let classifier;
+
+// A variable to hold the image we want to classify
+let img;
+
+// Variables for displaying the results on the canvas
+let label = "";
+let confidence = "";
+
+function preload() {
+  classifier = ml5.imageClassifier("MobileNet");
+  img = loadImage("images/bird.jpg");
+}
+
+function setup() {
+  createCanvas(400, 400);
+  classifier.classify(img, gotResult);
+  image(img, 0, 0, width, height);
+}
+
+// A function to run when we get any errors and the results
+function gotResult(results) {
+  // The results are in an array ordered by confidence, print in console
+  console.log(results);
+
+  // Display the results on the canvas
+  fill(255);
+  stroke(0);
+  textSize(18);
+  label = "Label: " + results[0].label;
+  confidence = "Confidence: " + nf(results[0].confidence, 0, 2);
+  text(label, 10, 360);
+  text(confidence, 10, 380);
+}