浏览器端的机器学习 ml5js (3)

009.jpg

如果大家想体验一下机器学习的图像识别，可以在该网站进行尝试
https://teachablemachine.withgoogle.com/#

图

训练机器学习的模型，通过按住【TRAIN GREEN】或其他两个按钮，然后将要你要训练的物体放置摄像头，然后就会采集图片数据，然后在随后松开按钮，再次将物体放置摄像头前，机器学习就会自动识别出物体。

之前我们用到了 MobileNet 会返回 label 和图片集合，对图片进行特征抽取（FeatureExtractor），因为将图片每一个像素作为其特征会产生很多参数，和过拟合现象。可以通过卷积神经网络来减少图片的特征，我们神经网络有许多神经层。最终提取我们想要特征，这些特征用于判断图片中有什么。

创建自己图片识别器

具体 Api 可以参考 featureExtroctor Api 页面的说明

mobilenet = ml5.featureExtractor('MobileNet', modelReady);

这里我们使用 featureExtractor 来代替 imageClassifier 并基于 MobileNet 进行训练，还需要注释掉 mobilenet.predict(getResults)。

function modelReady() {
    console.log('Model Ready');
    // mobilenet.predict(getResults)
}

定义变量 classifier 分类器。接下来工作都是围绕这个对象来完成。

let classifier

我们classifier是根据video 来进行

 mobilenet = ml5.featureExtractor('MobileNet', modelReady);
classifier = mobilenet.classification(video,videoReady)

function videoReady(){
    console.log('video is ready')
}

添加按钮

创建两个按钮用于采集我的手机和咖啡杯，按下按钮就可以采集对应标签的图片数据。

mPhoneBtn = createButton('mPhone')
mPhoneBtn.mousePressed(function(){
    classifier.addImage('mPhone');
})

mCupBtn = createButton('mCup')
mCupBtn.mousePressed(function(){
    classifier.addImage('mCup');
})

classifier.addImage 添加图片作为数据到 classifier 标签为给出结果用于计算 loss 来评估模型。

训练模型

创建一个按钮用于控制开始进行训练，通过采集图片数据来训练我们的模型

 trainBtn = createButton('train');
trainBtn.mousePressed(function(){
    classifier.train(whileTraning);
});

loss 值表示损失值，值越小表示训练结果越接近真实值。

function whileTraning(loss){
    console.log(loss);
}

图

在回调函数中判断 loss 是否为 null，表示训练完成。然后我们就可以开始进行识别杯来检验训练结果。

function whileTraning(loss){
    if(loss == null){
        console.log('Trainning complete')
        classifier.classify(getResults);
    }else{
        console.log(loss);
    }
    
}

在 getResults 返回一个 result 作为标签，而不是像之前返回一系列类别。而是就返回一个标签

function getResults(err,result){
    if(err){
        console.log(err)
    }else{
        label = result;
        classifier.classify(getResults);
    }
}

完成训练后当我把咖啡杯放置在摄像头前，下面就会出现 mCup 标签，说明我们训练已经成功让模型辨识出这是一个咖啡杯。

结果