Во фронтенде тоже может играть искусственный интеллект — где кот?

Соси кошек вместе с кодом! Эта статья участвует【Эссе "Мяу Звезды"】

И ml5.js, и p5.js предназначены для предоставления готовых библиотек для творческого программирования, но ml5 ориентирован на машинное обучение, поэтому некоторые фронтенд-инженеры могут работать с ИИ, не обладая глубокими знаниями в области машинного обучения.

Эта библиотека инкапсулирует часто используемые алгоритмы машинного обучения и предварительно обученные модели.Она основана на TensorFlow.js и может использоваться отдельно или с p5.js.

Что такое обнаружение объектов

Я надеюсь донести до вас ИИ, чтобы вы почувствовали, что он не непостижим и недостижим. Итак, давайте не будем говорить здесь слишком глубоко, сначала представим, что такое обнаружение цели, мы можем знать, что такое проблема классификации, то есть дайте модели изображение, на изображении есть только одна категория, которая нас интересует, это собака или a Для кошки модель предсказывает и выводит категорию изображения, сообщая, является ли изображение изображением собаки или изображением кошки.Это классификатор.

Сегодня, когда мы говорим об обнаружении целей, обнаружение нескольких целей отличается.Он заключается в вводе изображения, которое может иметь несколько категорий.Изображение больше не просто собака или кошка, но может быть несколько собак или кошек и собак. Модель обнаружения цели не только Учитывая категорию, содержащуюся в изображении, рамка также отметит свое местоположение, что является обнаружением цели.Далее мы будем использовать ml5.js для реализации обнаружения цели для обнаружения кошек.

Как выбрать предварительно обученную модель

Модель хороша или плоха, а данные являются ее потолком.В последние годы появление превосходных моделей, таких как ResNet Inception GoogleNet, неотделимо от ImageNet, набора данных из 2 миллионов и 1000 категорий. ml5.js обычно использует предварительно обученную модель, поэтому когда мы выбираем модель, нам нужно обратить внимание на две вещи, на какой сети основана первая модель, будь то MobileNet или ResNet или VGG, это то, что нас волнует о том, потому что в сценариях могут использоваться разные сетевые модели.В отличие от способности решать проблемы, есть различия, а затем взгляните на то, на чем основано обучение набору данных.COCO – это относительно классические данные, предоставляющие богатый набор данных. для разных типов задач, таких как семантическая сегментация, ключевые точки, поза и т. д.

В ml5.js для обнаружения целей предусмотрены две предтренировочные модели YOLO и COCOSsd Здесь мы выбираем COCOSsd, здесь категорию COCO 80, которая должна включать в себя сегодняшнего главного героя кота.

среда сборки

Здесь мы просто создаем среду с помощью p5.js.

function setup() {
  createCanvas(640, 480);
}

function draw(){
  background(0);
}

читать изображение

let img;


function preload(){
  img = loadImage('dog_and_cat_03.jpeg');
}

function setup() {
  createCanvas(640, 480);
  image(img,0,0);
}

Если вы не знакомы с p5.js, вы можете взглянуть на официальную документацию, которая относительно проста. На самом деле вам не нужно смотреть в документацию, приведенный выше код также понятен с первого взгляда, он разработан p5.js, и читабельность кода относительно хорошая.

Создать детектор

let img;
let detector;

function preload(){
  img = loadImage('dog_and_cat_03.jpeg');
  detector = ml5.objectDetector('cocossd');
}

function setup() {
  createCanvas(640, 480);
  console.log(detector);
  image(img,0,0);
}

Создайте целевой детектор и передайте предварительно обученную модель, которую мы хотим использовать, которая выбрана здесь.cocossd. Затем он должен использовать детектор для обнаружения вышеуказанного изображения.

начать обнаружение

let img;
let detector;

function preload(){
  img = loadImage('dog_and_cat_03.jpeg');
  detector = ml5.objectDetector('cocossd');
}

function hanldeDetectResult(error,results){
  if(error){
    console.log(error);
  }
  console.log(results);
  
}

function setup() {
  createCanvas(640, 480);
  // console.log(detector);
  image(img,0,0);
  detector.detect(img,hanldeDetectResult);
}

Получите детектор цели, этот объект, позвонитеdetectметод, этот метод принимает 2 параметра: изображение, которое нужно обнаружить, и функцию обратного вызова, которая принимает результат обнаружения. Поскольку обнаружение — это трудоемкий процесс, это может занять некоторое время,

Информация о результатах теста

1.  0:
1.  1.  confidence: 0.9443305134773254
    1.  height: 297.570499420166
    1.  label: "dog"
    1.  normalized: {x: 0.3297404646873474, y: 0.13195198774337769, width: 0.3925212621688843, height: 0.6888206005096436}
    1.  width: 301.4563293457031
    1.  x: 253.2406768798828
    1.  y: 57.00325870513916
    1.  [[Prototype]]: Object
1.  1:
1.  1.  confidence: 0.9138157963752747
    1.  height: 334.8041739463806
    1.  label: "cat"
    1.  normalized: {x: 0.08691723644733429, y: 0.09776231646537781, width: 0.31792615354061127, height: 0.7750096619129181}
    1.  width: 244.16728591918945
    1.  x: 66.75243759155273
    1.  y: 42.23332071304321
    

Кратко объясните тип

• cnfidence указывает уровень достоверности модели в результатах, которые она дает, чем выше, тем лучше, иногда мы можем установить порог для удаления результатов с низкой достоверностью модели
• высота/ширина Ширина и высота целевой границы
• x, y Верхний левый угол цели, результат зависит от реальной ситуации, разные рамки или модели могут иметь разные аналитические результаты или могут быть центральной точкой
• label должен вернуть результат категории

Следующей задачей является предоставление данных и сопоставление этой информации о классификации и информации о местоположении с изображением.

  for (let i = 0; i < results.length; i++) {
    let object = results[i];
    stroke(0, 255, 0);
    strokeWeight(4);
    noFill();
    rect(object.x, object.y, object.width, object.height);
    noStroke();
    fill(255);
    textSize(24);
    text(object.label, object.x + 10, object.y + 24);
  }