ml5js · pearmini · Jun 7, 2025 · Jun 7, 2025 · Jun 15, 2025 · Jun 15, 2025
diff --git a/examples/bodyPose-blazePose-keypoints/index.html b/examples/bodyPose-blazePose-keypoints/index.html
@@ -11,7 +11,7 @@
     <meta charset="UTF-8" />
     <title>ml5.js bodyPose BlazePose Detection Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-pose.js"></script>
   </head>
 
   <body>

diff --git a/examples/bodyPose-blazePose-skeleton/index.html b/examples/bodyPose-blazePose-skeleton/index.html
@@ -11,7 +11,7 @@
     <meta charset="UTF-8" />
     <title>ml5.js bodyPose BlazePose Skeleton Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-pose.js"></script>
   </head>
 
   <body>

diff --git a/examples/bodyPose-keypoints/index.html b/examples/bodyPose-keypoints/index.html
@@ -11,7 +11,7 @@
     <meta charset="UTF-8" />
     <title>ml5.js bodyPose Detection Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-pose.js"></script>
   </head>
 
   <body>

diff --git a/examples/bodyPose-skeletal-connections/index.html b/examples/bodyPose-skeletal-connections/index.html
@@ -11,7 +11,7 @@
     <meta charset="UTF-8" />
     <title>ml5.js bodyPose Skeleton Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-pose.js"></script>
   </head>
 
   <body>

diff --git a/examples/bodySegmentation-mask-background/index.html b/examples/bodySegmentation-mask-background/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js bodySegmentation Mask Background Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-segmentation.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/bodySegmentation-mask-body-parts/index.html b/examples/bodySegmentation-mask-body-parts/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js bodySegmentation Parts Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-segmentation.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/bodySegmentation-mask-person/index.html b/examples/bodySegmentation-mask-person/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js bodySegmentation Mask Person Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-segmentation.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/bodySegmentation-select-body-parts/index.html b/examples/bodySegmentation-select-body-parts/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js bodySegmentation Parts Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-body-segmentation.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-bounding-box/index.html b/examples/faceMesh-bounding-box/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Bounding Box Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-keypoints-from-parts/index.html b/examples/faceMesh-keypoints-from-parts/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Keypoints from Parts Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-keypoints/index.html b/examples/faceMesh-keypoints/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Webcam Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-parts-bounding-box/index.html b/examples/faceMesh-parts-bounding-box/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Parts Bounding Box Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-parts/index.html b/examples/faceMesh-parts/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh p5 Webcam Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-shapes-from-parts/index.html b/examples/faceMesh-shapes-from-parts/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Shapes from Parts Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-single-image/index.html b/examples/faceMesh-single-image/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Image Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-triangle-mesh/index.html b/examples/faceMesh-triangle-mesh/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Triangle Mesh Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/faceMesh-uv-map/index.html b/examples/faceMesh-uv-map/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js faceMesh Webcam Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-face-mesh.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/handPose-detect-start-stop/index.html b/examples/handPose-detect-start-stop/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js handPose Start and Stop Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-hand-pose.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/handPose-keypoints/index.html b/examples/handPose-keypoints/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js handPose Webcam Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-hand-pose.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/handPose-parts/index.html b/examples/handPose-parts/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js handPose p5 Webcam Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-hand-pose.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/handPose-single-image/index.html b/examples/handPose-single-image/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js handPose Image Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-hand-pose.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/handPose-skeletal-connections/index.html b/examples/handPose-skeletal-connections/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js handPose Skeletal Connection Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-hand-pose.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/imageClassifier-single-image/index.html b/examples/imageClassifier-single-image/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js imageClassifier Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-image-classifier.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/imageClassifier-teachable-machine/index.html b/examples/imageClassifier-teachable-machine/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js imageClassifier + Teachable Machine Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-image-classifier.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/imageClassifier-webcam/index.html b/examples/imageClassifier-webcam/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js imageClassifier Webcam Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-image-classifier.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/ml5-bodyPose/index.html b/examples/ml5-bodyPose/index.html
@@ -0,0 +1,20 @@
+<!--
+  👋 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 pose tracking on live video through ml5.bodyPose with BlazePose model.
+-->
+
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>ml5.js bodyPose BlazePose Detection Example</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
+    <script src="../../dist/ml5-body-pose.js"></script>
+  </head>
+
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>
diff --git a/examples/ml5-bodyPose/sketch.js b/examples/ml5-bodyPose/sketch.js
@@ -0,0 +1,50 @@
+/*
+ * 👋 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 pose tracking on live video through ml5.bodyPose with BlazePose model
+ */
+
+let video;
+let bodyPose;
+let poses = [];
+
+function preload() {
+  // Load the bodyPose model
+  bodyPose = ml5.bodyPose("BlazePose");
+}
+
+function setup() {
+  createCanvas(640, 480);
+
+  // Create the video and hide it
+  video = createCapture(VIDEO);
+  video.size(640, 480);
+  video.hide();
+
+  // Start detecting poses in the webcam video
+  bodyPose.detectStart(video, gotPoses);
+}
+
+function draw() {
+  // Draw the webcam video
+  image(video, 0, 0, width, height);
+
+  // Draw all the tracked landmark points
+  for (let i = 0; i < poses.length; i++) {
+    let pose = poses[i];
+    for (let j = 0; j < pose.keypoints.length; j++) {
+      let keypoint = pose.keypoints[j];
+      fill(0, 255, 0);
+      noStroke();
+      circle(keypoint.x, keypoint.y, 10);
+    }
+  }
+}
+
+// Callback function for when bodyPose outputs data
+function gotPoses(results) {
+  // Save the output to the poses variable
+  poses = results;
+}
diff --git a/examples/neuralNetwork-color-classifier/index.html b/examples/neuralNetwork-color-classifier/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js neuralNetwork Color Classifier Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-neural-network.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/neuralNetwork-load-model/index.html b/examples/neuralNetwork-load-model/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js neuralNetwork Loading Pre-trained Model Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-neural-network.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/neuralNetwork-mouse-gesture/index.html b/examples/neuralNetwork-mouse-gesture/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js neuralNetwork Gesture Classifier Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-neural-network.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/neuralNetwork-train-and-save/index.html b/examples/neuralNetwork-train-and-save/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js neuralNetwork Training and Saving Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-neural-network.js"></script>
   </head>
   <body>
     <script src="sketch.js"></script>

diff --git a/examples/neuroEvolution-flappy-bird/index.html b/examples/neuroEvolution-flappy-bird/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js neuralNetwork Neuroevolution Flappy Bird</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-neural-network.js"></script>
   </head>
   <body>
     <script src="bird.js"></script>

diff --git a/examples/neuroEvolution-sensors/index.html b/examples/neuroEvolution-sensors/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js neuralNetwork Neuroevolution Sensors</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-neural-network.js"></script>
   </head>
   <body>
     <script src="food.js"></script>

diff --git a/examples/neuroEvolution-steering/index.html b/examples/neuroEvolution-steering/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ml5.js neuralNetwork Neuroevolution Steering</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-neural-network.js"></script>
   </head>
   <body>
     <script src="glow.js"></script>

diff --git a/examples/sentiment/index.html b/examples/sentiment/index.html
@@ -10,7 +10,7 @@
   <head>
     <title>ml5.js Sentiment Analysis Example</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-sentiment.js"></script>
   </head>
 
   <body>

diff --git a/examples/soundClassifier-speech-command/index.html b/examples/soundClassifier-speech-command/index.html
@@ -13,7 +13,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sound classification using SpeechCommands18w and p5.js</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-sound-classifier.js"></script>
   </head>
 
   <body>

diff --git a/examples/soundClassifier-teachable-machine/index.html b/examples/soundClassifier-teachable-machine/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sound classification using pre-trained custom model</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
-    <script src="../../dist/ml5.js"></script>
+    <script src="../../dist/ml5-sound-classifier.js"></script>
   </head>
 
   <body>