色々試して動いたのでメモ。
まずライブラリインストールして、
yarn add p5yarn add ml5main.jsを以下のように書く。
main.jsimport p5 from 'p5';import ml5 from 'ml5';let classifier;let image;new p5(p => { p.preload = () => {image = p.loadImage('bird.png'); } p.setup = async () => {p.createCanvas(400,400);classifier = await ml5.imageClassifier('MobileNet');classifier.classify(image, (err, results) => { if (err) {console.error(err); } else {p.createDiv(`Label1: ${results[0].label}`);p.createDiv(`Confidence: ${p.nf(results[0].confidence, 0, 2)}`);p.createDiv(`Label2: ${results[1].label}`);p.createDiv(`Confidence: ${p.nf(results[1].confidence, 0, 2)}`);p.createDiv(`Label3: ${results[2].label}`);p.createDiv(`Confidence: ${p.nf(results[2].confidence, 0, 2)}`); }});image.resize(400, 400);p.image(image, 0, 0); };});サンプルだと ml5.imageClassifier が preload 内に書かれているけどうまくawaitされなかった。。。P5のpreloadに書くと非同期処理を待ってからsetupを実行してくれるらしい。けどうまくいかない。仕方なく setupにasync/awaitつけて待ってみたらいけた。実行結果↓。すごいなぁ。