Skip to content
This repository has been archived by the owner on Apr 6, 2020. It is now read-only.

[object detector] Adds object detector examples #243

Merged
merged 5 commits into from
Nov 19, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions p5js/ObjectDetector/ObjectDetector_COCOSSD_Video/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Real time Object Detection using COCO-SSD and p5.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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="http://localhost:8080/ml5.js" type="text/javascript"></script>

</head>
<body>
<h1>Real time Object Detection using COCO-SSD and p5.js</h1>
<script src="sketch.js"></script>
</body>
</html>
56 changes: 56 additions & 0 deletions p5js/ObjectDetector/ObjectDetector_COCOSSD_Video/sketch.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
let video;
let detector;
let detections;

function setup() {
createCanvas(480, 360);

video = createCapture(VIDEO);
video.size(width, height);
video.hide();

detector = ml5.objectDetector('CocoSsd', modelReady)
}


function modelReady(){
console.log('model loaded')
detect();
}

function detect(){
detector.detect(video, gotResults);
}

function gotResults(err, results){
if(err){
console.log(err);
return
}

detections = results;

detect();
}

function draw() {
image(video, 0, 0, width, height);

if (detections) {
detections.forEach(detection => {
noStroke();
fill(255);
strokeWeight(2);
text(detection.label, detection.x + 4, detection.y + 10)

noFill();
strokeWeight(3);
if(detection.label === 'person'){
stroke(0, 255, 0);
} else {
stroke(0,0, 255);
}
rect(detection.x, detection.y, detection.w, detection.h);
})
}
}
18 changes: 18 additions & 0 deletions p5js/ObjectDetector/ObjectDetector_YOLO_Video/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Real time Object Detection using YOLO and p5.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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="http://localhost:8080/ml5.js" type="text/javascript"></script>

</head>
<body>
<h1>Real time Object Detection using YOLO and p5.js</h1>
<p id="status">Loading Model...</p>
<script src="sketch.js"></script>
</body>
</html>
59 changes: 59 additions & 0 deletions p5js/ObjectDetector/ObjectDetector_YOLO_Video/sketch.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// Copyright (c) 2019 ml5
//
// This software is released under the MIT License.
// https://opensource.org/licenses/MIT

/* ===
ml5 Example
Real time Object Detection using YOLO and p5.js
=== */

let video;
let yolo;
let status;
let objects = [];

function setup() {
createCanvas(320, 240);
video = createCapture(VIDEO);
video.size(320, 240);

// Create a YOLO method
yolo = ml5.objectDetector('yolo', modelLoaded);

// Hide the original video
video.hide();
status = select('#status');
}

function draw() {
image(video, 0, 0, width, height);
for (let i = 0; i < objects.length; i++) {
noStroke();
fill(0, 255, 0);
text(objects[i].label, objects[i].x * width, objects[i].y * height - 5);
noFill();
strokeWeight(4);
stroke(0, 255, 0);
rect(objects[i].x * width, objects[i].y * height, objects[i].w * width, objects[i].h * height);
}
}

function modelLoaded() {
status.html('Model loaded!');
detect();
}

function detect() {
yolo.detect(video, gotResults);
}

function gotResults(err, results) {
if (err) {
console.log(err);
return
}

objects = results;
detect();
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions p5js/ObjectDetector/ObjectDetector_YOLO_single_image/index.html
Original file line number Diff line number Diff line change
@@ -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="http://localhost:8080/ml5.js" type="text/javascript"></script>
<script src="sketch.js"></script>
</head>

<body>
<h1>YOLO image detection on single image</h1>
</body>

</html>
54 changes: 54 additions & 0 deletions p5js/ObjectDetector/ObjectDetector_YOLO_single_image/sketch.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// Initialize the Image Classifier method with MobileNet. A callback needs to be passed.
// Create a YOLO method

let yolo;
let img;
let objects = [];
let status;

function preload(){
img = loadImage('images/cat2.JPG');
}


function setup() {
createCanvas(640, 420);

yolo = ml5.objectDetector('yolo', modelReady);

}

// Change the status when the model loads.
function modelReady() {
console.log("model Ready!")
status = true;
console.log('Detecting')
yolo.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;
}


function draw() {
// unless the model is loaded, do not draw anything to canvas
if (status != undefined) {
image(img, 0, 0)

for (let i = 0; i < objects.length; i++) {
noStroke();
fill(0, 255, 0);
text(objects[i].label + " " + nfc(objects[i].confidence * 100.0, 2) + "%", objects[i].x * width + 5, objects[i].y * height + 15);
noFill();
strokeWeight(4);
stroke(0, 255, 0);
rect(objects[i].x * width, objects[i].y * height, objects[i].w * width, objects[i].h * height);
}
}
}