add code to build objectDetector, change example code callback to return result not error

yiyujin · yiyujin · commit 4db442fab7da · 2025-07-01T22:28:11.000-04:00
diff --git a/examples/objectDetection/index.html b/examples/objectDetection/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
   <head>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.11.7/lib/p5.js"></script>
-<!-- <script src="https://unpkg.com/ml5@0.5.0/dist/ml5.min.js"></script> -->
-<script src="../../dist/ml5.js"></script>
+    <!-- <script src="https://unpkg.com/ml5@0.5.0/dist/ml5.min.js"></script> -->
+    <script src="../../dist/ml5.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta charset="utf-8" />
 
diff --git a/examples/objectDetection/sketch.js b/examples/objectDetection/sketch.js
@@ -21,14 +21,10 @@ function setup() {
 }
 
 function videoReady() {
-  // Models available are 'cocossd', 'yolo'
   detector = ml5.objectDetector('cocossd', modelReady);
 }
 
-function gotDetections(error, results) {
-  if (error) {
-    console.error(error);
-  }
+function gotDetections(results) {
   detections = results;
   detector.detect(video, gotDetections);
 }
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@mediapipe/pose": "^0.5.1675469404",
     "@mediapipe/selfie_segmentation": "~0.1.0",
     "@tensorflow-models/body-segmentation": "^1.0.1",
+    "@tensorflow-models/coco-ssd": "^2.2.3",
     "@tensorflow-models/face-landmarks-detection": "1.0.5",
     "@tensorflow-models/hand-pose-detection": "^2.0.0",
     "@tensorflow-models/mobilenet": "^2.1.0",
diff --git a/src/ObjectDetector/cocossd.js b/src/ObjectDetector/cocossd.js
@@ -40,6 +40,8 @@ export class CocoSsdBase {
    * load model
    */
   async loadModel() {
+    await tf.ready();
+
     this.model = await cocoSsd.load(this.config);
 
     this.modelReady = true;
@@ -115,4 +117,4 @@ export const CocoSsd = (...inputs) => {
   return new CocoSsdBase(video, options, callback);
 };
 
-// export default CocoSsd;
+export default CocoSsd;
diff --git a/src/ObjectDetector/index.js b/src/ObjectDetector/index.js
@@ -7,6 +7,8 @@
   ObjectDetection
 */
 
+console.log("running ObjectDetection/index.js");
+
 import handleArguments from "../utils/handleArguments";
 import {CocoSsd} from "./cocossd.js";
 
@@ -32,11 +34,11 @@ class ObjectDetector {
 
     switch (modelNameOrUrl) {
       case "cocossd":
-        this.model = new CocoSsd(this.video, this.options, callback);
+        this.model = CocoSsd(this.video, this.options, callback);
         return this;
       default:
         // use cocossd as default
-        this.model = new CocoSsd(this.video, this.options, callback);
+        this.model = CocoSsd(this.video, this.options, callback);
         return this;
     }
   }
@@ -54,6 +56,8 @@ const objectDetector = (...inputs) => {
 
   const instance = new ObjectDetector(model, video, options, callback);
 
+  console.log("model", instance.model, instance.model.ready);
+
   return instance.model.callback ? instance.model : instance.model.ready;
 };
 
diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import faceMesh from "./FaceMesh";
 import bodyPose from "./BodyPose";
 import imageClassifier from "./ImageClassifier";
 import soundClassifier from "./SoundClassifier";
+import objectDetector from "./ObjectDetector";
 import setBackend from "./utils/setBackend";
 import bodySegmentation from "./BodySegmentation";
 import communityStatement from "./utils/communityStatement";
@@ -22,6 +23,7 @@ const withPreload = {
   neuralNetwork,
   sentiment,
   soundClassifier,
+  objectDetector
 };
 
 const ml5 = Object.assign({ p5Utils }, withPreload, {
@@ -36,4 +38,4 @@ p5Utils.shouldPreload(ml5, Object.keys(withPreload));
 
 communityStatement();
 
-export default ml5;
+export default ml5;
diff --git a/yarn.lock b/yarn.lock
@@ -1731,6 +1731,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tensorflow-models/coco-ssd@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "@tensorflow-models/coco-ssd@npm:2.2.3"
+  peerDependencies:
+    "@tensorflow/tfjs-converter": ^4.10.0
+    "@tensorflow/tfjs-core": ^4.10.0
+  checksum: 10c0/3d0e54d433e388439a461f9e7b4995bcfab7825d49eaf587818800549c54adc8192dab1b5a82e0ef48d87065ce155261a3ce934000477ac0da65de6939568e2e
+  languageName: node
+  linkType: hard
+
 "@tensorflow-models/face-landmarks-detection@npm:1.0.5":
   version: 1.0.5
   resolution: "@tensorflow-models/face-landmarks-detection@npm:1.0.5"
@@ -6537,6 +6547,7 @@ __metadata:
     "@mediapipe/pose": "npm:^0.5.1675469404"
     "@mediapipe/selfie_segmentation": "npm:~0.1.0"
     "@tensorflow-models/body-segmentation": "npm:^1.0.1"
+    "@tensorflow-models/coco-ssd": "npm:^2.2.3"
     "@tensorflow-models/face-landmarks-detection": "npm:1.0.5"
     "@tensorflow-models/hand-pose-detection": "npm:^2.0.0"
     "@tensorflow-models/mobilenet": "npm:^2.1.0"

Original file line number	Diff line number	Diff line change
`@@ -21,14 +21,10 @@ function setup() {`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`function videoReady() {`
`24`		`- // Models available are 'cocossd', 'yolo'`
`25`	`24`	`detector = ml5.objectDetector('cocossd', modelReady);`
`26`	`25`	`}`
`27`	`26`
`28`		`-function gotDetections(error, results) {`
`29`		`- if (error) {`
`30`		`- console.error(error);`
`31`		`- }`
	`27`	`+function gotDetections(results) {`
`32`	`28`	`detections = results;`
`33`	`29`	`detector.detect(video, gotDetections);`
`34`	`30`	`}`