Redid yolo object detection (2.0)

[hiddentn]

→ Description 📝

• adding an update 🛠
  • I re-implemented the YOLO object detection algorithm to be more understandable
    and i gave it a performance boost
  • i thing now it's more modular than before
  • added support for yolov3 detectors (Multi scale detection) see : 2.3. Predictions Across Scales
  • added a draw function that draws the detections on a output canvas :

     yolo.draw(results,outputCanvas)

  • added some documentation the each function

a normal usage example should look like this

 yoloConfig = {...}
 yolo = ml5.YOLO(videoSource, yoloConfig, () => {
     yolo.detect((err, results) => {
         yolo.draw(results,outputCanvas)
        });
    });
///////////////////// OR //////////////////
yolo = ml5.YOLO(() => {
    yolo.detect(image,(err, results) => {
        yolo.draw(results,outputCanvas)
    });
});

→ Screenshots 🖼

i will add some soon

→ Relevant Example or Paired Pull Request to ml5-examples 🦄

ml5js/ml5-examples#107

→ Relevant documentation 🌴

• now yolo takes this configuration object :

 {
  // Model URL
  modelURL: 'https://raw.githubusercontent.com/ml5js/ml5-data-and-models/master/models/YOLO/model.json',
  // Model version : this is important as there is some post processing changes 'v2' ||'v3'
  version: 'v2',
  // this is the size of the model input image : we can lower this to gain more performance
  //  the ones that i found to be a good compromise between perf/accracy are 224, 256, 320
  modelSize: 416, // 128 , 160 , 192 , 224 , 256 , 288 , 320 , 352 , 384 , 416,

  // Intersection Over Union threshhold and Class probability threshold : we use this to filter the output of the cnn
  iouThreshold: 0.5,
  classProbThreshold: 0.5,

  // class labels
  labels: COCO_CLASSES,

  // more info see  Dimension priors : https://arxiv.org/pdf/1612.08242.pdf
  anchors: [
    [0.57273, 0.677385],
    [1.87446, 2.06253],
    [3.33843, 5.47434],
    [7.88282, 3.52778],
    [9.77052, 9.16828],
  ],
  // in yolo v3  the cnn gives 2 or more outputs(set of boxes) so this mask splits the anchors to groups
  // each corresponding to a spesific layer/output.
  // for example  the tiny yolo v2 outputs 1 output that has 13x13x5 boxes (if you use 416 as a model size)
  masks: [[0, 1, 2, 3, 4]],

  // this is just more customization options concerning the preprocessing  pahse
  preProcessingOptions: {
    // 'NearestNeighbor'  - this output a more accurate image but but take a bit longer
    // 'Bilinear' - this faster but scrifices image quality
    ResizeOption: 'Bilinear',
    AlignCorners: true,
  },
};

Note : the user is not obliged to always fill all the parameters :

// example yolov3-tiny config : 
const tinyyolov3config = {
    modelURL: 'models/yolov3-tiny/model.json',
    version: 'v3',
    modelSize: 224,
    anchors: [[10, 14],[23, 27],[37, 58],[81, 82],[135, 169],[344, 319]],
    masks: [[3, 4, 5],[0, 1, 2]],
}

i have put some example configurations with their models&weights in ml5js/ml5-examples#107

[henrmota]

you can replace all of this if-else with a ternary.
Also it's better to have < than >= or > than <=.

    const yLessThanZero = item.y - 25 < 0;

    ctx.fillRect(item.x - 1.5, item.y - 1.5, 90, yLessThanZero? 20 : -15);
    ctx.fillStyle = '#000000';
    ctx.fillText(txt, item.x, yLessThanZero ? item.y + 12 : item.y - 5 );

[hiddentn]

wow i forgot this even existed xD ? @henrmota give me few days and i ll will work on it , i am just about to finish my semester finals this week 😂

[joeyklee]

Hello + Greetings!
Just starting to do a bit of house cleaning.

First of all, I want to thank you for your hard work and ingenuity here on this PR. This was no small task and you did wonderful work here.

Next, I'd just like to apologize that we were not able to pull your work in while we could. I know it can be a bummer when you work so hard on something and it seems like it isn't receiving the attention it deserves.

Last, since YOLO is no longer part of ml5 (technically it still is living, but we have a deprecation notice for this since the coco-ssd model is the preferred method now in ml5), I think it would be best to close up this PR.

For what it is worth: we have added you to our contributors list -- https://github.com/ml5js/ml5-library#contributors 🎊

I hope you're well!