commit

jc2954 · Feb 9, 2024 · c74f697 · c74f697
1 parent ec049a1
commit c74f697
Show file tree

Hide file tree

Showing 6 changed files with 621 additions and 0 deletions.
diff --git a/ObjectDetector_YOLO_single_image/images/cat.JPG b/ObjectDetector_YOLO_single_image/images/cat.JPG
diff --git a/ObjectDetector_YOLO_single_image/images/cat2.JPG b/ObjectDetector_YOLO_single_image/images/cat2.JPG
diff --git a/ObjectDetector_YOLO_single_image/images/turtle.png b/ObjectDetector_YOLO_single_image/images/turtle.png
diff --git a/ObjectDetector_YOLO_single_image/index.html b/ObjectDetector_YOLO_single_image/index.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<title>YOLO with image</title>
+
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
+
+	<script src="./ml5.min.js" type="text/javascript"></script>
+	<script src="sketch.js"></script>
+</head>
+
+<body>
+	<h1>YOLO image detection on single image</h1>
+</body>
+
+</html>
diff --git a/ObjectDetector_YOLO_single_image/ml5.min.js b/ObjectDetector_YOLO_single_image/ml5.min.js
diff --git a/ObjectDetector_YOLO_single_image/sketch.js b/ObjectDetector_YOLO_single_image/sketch.js
@@ -0,0 +1,50 @@
+let objectDetector;
+let img;
+let objects = [];
+let status;
+
+function preload() {
+  img = loadImage("images/cat2.JPG");
+}
+
+function setup() {
+  createCanvas(640, 420);
+  image(img, 0, 0);
+  objectDetector = ml5.objectDetector("yolo", modelReady);
+}
+
+// Change the status when the model loads.
+function modelReady() {
+  console.log("model Ready!");
+  status = true;
+  console.log("Detecting");
+  objectDetector.detect(img, gotResult);
+}
+
+// A function to run when we get any errors and the results
+function gotResult(err, results) {
+  if (err) {
+    console.log(err);
+  }
+  console.log(results);
+  objects = results;
+
+  // Draw results on canvas
+  for (let i = 0; i < objects.length; i += 1) {
+    noStroke();
+    fill(0, 255, 0);
+    const x = objects[i].normalized.x * width;
+    const y = objects[i].normalized.y * width;
+    const objectWidth = objects[i].normalized.width * width;
+    const objectHeight = objects[i].normalized.height * height;
+    text(
+      `${objects[i].label} ${nfc(objects[i].confidence * 100.0, 2)}%`,
+      x + 5,
+      y + 15,
+    );
+    noFill();
+    strokeWeight(4);
+    stroke(0, 255, 0);
+    rect(x, y, objectWidth, objectHeight);
+  }
+}