Detector/sketch.js at main · SylwesterBogusiak/Detector · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

// Initialize the Object Detector module
let objectDetector;

// Holds the image we want to run object detection on
let img;
var canvas;
let canvasDiv;
let width;
let height;
let imgElement = document.getElementById('imageOriginal');
let inputElement = document.getElementById('imageInput');


document.getElementById('button').onclick = function() {
    this.href = document.getElementById("myCanvas").toDataURL();
    this.download = "image.png";
};


inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);


    img = loadImage(imgElement.src);
    imgoryginal = loadImage(imgElement.src);

}, false);

document.getElementById('detectButton').onclick = function() {


    canvasDiv = document.getElementById('imageOryginalDiv');
    width = canvasDiv.offsetWidth;
    height = canvasDiv.offsetHeight;
	this.disabled = true;
    objectDetector.detect(img, gotResult);
    resizeCanvas(width, height);
    img.resize(width, height);
    image(img, 0, 0);


	this.disabled = false;
	}

function preload() {
    objectDetector = ml5.objectDetector('cocossd');

}


function setup() {


        canvasDiv = document.getElementById('imageOryginalDiv');
        width = canvasDiv.offsetWidth;
        height = canvasDiv.offsetHeight;
        canvas = createCanvas(width, height);
        canvas.parent('imageCanvasDiv');
        canvas.id('myCanvas');

}


function draw() {
  //background(0, 100, 200);

}

function windowResized() {

    canvasDiv = document.getElementById('imageOryginalDiv');
    width = canvasDiv.offsetWidth;
    height = canvasDiv.offsetHeight;
    resizeCanvas(width, height);

    img.resize(width, height);
    image(img, 0, 0);
}

function gotResult(error, results) {

    if (error) {
        console.error(error);
    } else {
        console.log(results);

        drawResults(results);

    }
}


function drawResults(results) {
    results.forEach((result) => {

        // Generates a random color for each object
        const r = Math.random()*256|0;
        const g = Math.random()*256|0;
        const b = Math.random()*256|0;

        // Draw the text
        stroke(0, 0, 0);
        strokeWeight(2);
        textSize(16);
        fill(r, g, b);
        text(`${result.label} (${result.confidence.toFixed(2)}%)`, result.x, result.y - 10);

        // Draw the rectangle stroke
        noFill();
        strokeWeight(3);
        stroke(r, g, b);
        rect(result.x, result.y, result.width, result.height);
    });
};