img_classifier / script

var modelHasLoaded = false;
var model; //= underfined;

cocoSsd.load().then(function(loadedModel){//загружаю обученную модель cocoSsd.load
model = loadedModel;
modelHasLoaded = true;
});

const holderOfImage = document.getElementsByClassName('container');

for(let i = 0; i < holderOfImage.length; i++){
holderOfImage[i].children[0].addEventListener('click', handleClick);
}

function handleClick(event){
if(!modelHasLoaded){
return;
}

$(".innerSquare").remove();
$("p").remove();

model.detect(event.target).then(function(predictions){//Для получения метаинформации о положении объектов на изображении
//результатом будет массив с метаинформацией о каждом объекте, который был определен моделью в следующем формате bbox, class и score
//score - достоверность
//class - это то, что собственно и обнаружилось
for(let x = 0; x<predictions.length; x++){
const p = document.createElement('p');
p.innerText =
predictions[x].class +
' -with-'+
Math.round(parseFloat(predictions[x].score)*100) +
' % confidence. ';
p.style =
'margin-left: ' +
predictions[x].bbox[0] +
'px; margin-top: ' +
(predictions[x].bbox[1] - 10) +
'px; width: ' +
(predictions[x].bbox[2] - 10) +
'px; top: 0; left: 0;';

const innerSquare = document.createElement('div');
innerSquare.setAttribute('class', 'innerSquare');
innerSquare.style =
'left: ' +
predictions[x].bbox[0] +
'px; top: ' +
(predictions[x].bbox[1]) +
'px; width: ' +
(predictions[x].bbox[2]) +
'px; height: '+
(predictions[x].bbox[3]) +
'px;';

event.target.parentNode.appendChild(innerSquare);
event.target.parentNode.appendChild(p);

}
})
}


function img1() {

document.getElementById("myImage").src="https://images.pexels.com/photos/6702722/pexels-photo-6702722.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
handleClick;
}
function img2() {
document.getElementById("myImage").src="https://images.pexels.com/photos/7775644/pexels-photo-7775644.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
handleClick;
}
function img3() {
document.getElementById("myImage").src="https://images.pexels.com/photos/3408125/pexels-photo-3408125.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
handleClick;
}
function img4() {
document.getElementById("myImage").src="https://images.pexels.com/photos/7558434/pexels-photo-7558434.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940";
handleClick;
}
function img5() {
document.getElementById("myImage").src="https://media.istockphoto.com/photos/animal-collection-asia-picture-id534449816";
handleClick;
}