Search code examples
javascriptangularmachine-learningp5.js

ML5.JS objectDetector.detect is not a function

I'm quite new to ml5 and p5 libraries and during implementation to my Angular project I'm receiving this error:

TypeError: this.objectDetector.detect is not a function

After logging objectDetector object console shows this:

ZoneAwarePromise {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

p5 drawing working good but combined with ml5 is not working.

Here's my component code:

import { Component, OnInit } from '@angular/core';

import * as p5 from 'p5';

declare let ml5: any;

@Component({
  selector: 'app-new-found',
  templateUrl: './new-found.component.html',
  styleUrls: ['./new-found.component.scss']
})
export class NewFoundComponent implements OnInit {

  objectDetector;
  img;

  constructor(
  ) { }

  ngOnInit(): void {
    const sketch = (s) => {

      s.preload = () => {
        this.objectDetector = ml5.objectDetector('cocossd');
        console.log('detector object is loaded', this.objectDetector);
        this.img = s.loadImage('https://i.imgur.com/Mzh4cHR.jpg');
      }

      s.setup = () => {
        s.createCanvas(700, 700).parent('test-canvas');
        this.objectDetector.detect(this.img, this.gotResult);
        s.image(this.img, 0, 0);
      };

      s.draw = () => {

      };
    }

    let canvas = new p5(sketch);  
  }

  gotResult(error, results) {

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

        //drawResults(results);

    }
}

}

ml5 library is imported in <HEAD> of my index.html file.

Does someone know how to get rid of this error?

Thank you.

Solution

  • Finally I figured it out. The ml5.objectDetector('cocossd'); function must be marked as await because it takes quite long time to execute. Below is working code:

    import { Component, OnInit } from '@angular/core';

import * as p5 from 'p5';

declare let ml5: any;

@Component({
  selector: 'app-new-found',
  templateUrl: './new-found.component.html',
  styleUrls: ['./new-found.component.scss']
})
export class NewFoundComponent implements OnInit {

  objectDetector;
  img;

  constructor(
  ) { }

  async ngOnInit(): Promise<void> {
    this.objectDetector = await ml5.objectDetector('cocossd');

    const sketch = (s) => {

      s.preload = () => {
        console.log(ml5);   
        console.log('detector object is loaded', this.objectDetector);
        this.img = s.loadImage('https://i.imgur.com/Mzh4cHR.jpg');
      }

      s.setup = () => {
        s.createCanvas(700, 700).parent('test-canvas');
        this.objectDetector.detect(this.img, this.gotResult);
        s.image(this.img, 0, 0);
      };

      s.draw = () => {

      };
    }

    let canvas = new p5(sketch);  
  }

  gotResult(error, results) {

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

        //drawResults(results);

    }
}

}