小白玩机器学习（1）--- P5.js + PL5.js 基于深度学习的简单在线图象识别

介绍

p5.js是一个为艺术家、设计师而开发的Javascript库，可以看作是Processing的Web版本。 P5官网：http://p5js.org/

ml5.js旨在为创意编程提供开箱即用的机器学习算法。该库封装了常用的机器学习算法和预训练模型，基于TensorFlow.js，可单独使用，也可搭配p5.js使用。ML5 官网：https://ml5js.org/ 

开始

首先需要在P5官网上下载source file：

点击目录栏左端Download，之后下载p5.js completed下载后解压

通过编写empty-example里的index.html和sketch.js即可

具体使用可以参考官网

1.在index文件中添加ML5的引用

<script src="https://unpkg.com/ml5@0.1.3/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  通过点击上传或拖拽图片，实现图象识别