Xiaobai演奏機械学習（1）--- P5.js + PL5.js深層学習に基づく簡単なオンライン画像認識

はじめに

p5.j​​sは、アーティストやデザイナーのために開発されたJavascriptライブラリで、Web版のProcessingと見なすことができます。P5公式ウェブサイト：http : //p5js.org/

ml5.jsは、創造的なプログラミングのための機械学習アルゴリズムをそのまま提供することを目的としています。このライブラリは、一般的に使用される機械学習アルゴリズムと事前トレーニング済みモデルをカプセル化したもので、TensorFlow.jsに基づいて、単独で、またはp5.jsとともに使用できます。ML5公式ウェブサイト：https ://ml5js.org/ 

スタート

まず、P5公式ウェブサイトでソースファイルをダウンロードする必要があります。

ディレクトリバーの左端にある[ダウンロード]をクリックして、p5.jsをダウンロードします。

empty-exampleにindex.htmlとsketch.jsを書き込むことにより

特定の使用は公式のウェブサイトを参照できます

1. ML5参照をインデックスファイルに追加する

<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script

2. sketch.jsを記述します

let img;
let classifier;
let flag1 = 0;
let flag2 = 0;
let firsttime = 0;

function ImageReady() {
    image(img, 0, 0, width, height);
    flag1 = 1;
    if (firsttime == 1){
        classifier.predict(img, GetResult);
    }
}

function ModelReady() {
    // 效果，加载图片之后缓慢输出model is ready
    console.log('model is ready');
    flag2 = 1;
    //if (flag1 == 1){
    //    classifier.predict(img, GetResult);
    //}
    // 模型加载完成之后，再进行预测
    // classifier.predict(img, GetResult);
}

 function handleFile(file) {
    print(file);
    if (file.type === 'image') {
      img = createImg(file.data, ImageReady);
      img.hide();
    } else {
      img = null;
    }
  }
  

function GetResult(error, results){
    if(error){
        console.error(error);
    }else{
        console.log(results);
        // 第一个预测值
        let name = results[0].className;
        let prob = results[0].probability;
        // 设置颜色
        fill(0);
        textSize(25);
        // 将预测结果输出
        text(name, 10, height-20);
        // 输出在下方区域
        createP(name);
        createP(prob); 
    }   
}

function gotFile(file){
    img = createImg(file.data, ImageReady).hide();
}

function setup() {
    let c = createCanvas(480, 400);
    background(200);
    textAlign(CENTER);
    textSize(50);
    text('Drop Image Here', width / 2, height /  2);
    c.drop(gotFile);
    input = createFileInput(handleFile);
    // img = createImg('banana.jpg', ImageReady);
    // 隐藏画布下方的图片
    // img.hide();  
    // 调用网络模型MobilNet,并且只有加载模型之后才可以识别
    classifier = ml5.imageClassifier('MobileNet', ModelReady); 
}

function draw(){
    if(flag2 == 1 & flag1 == 1){
        classifier.predict(img, GetResult);
        firsttime = 1;
        noLoop();
    }
}

3.効果

index.htmlを実行して、アップロードをクリックまたは画像をドラッグして画像認識を実現します