浏览器端的机器学习 ml5js (1)
2019-07-17 本文已影响23人
zidea
009.jpg
ml 表示 machine learning 也就是机器学习，其实对机器学习理解有关多，内在就是对数据进行分析，从中找到其 pattern （也就是规律），通过规律进行预测。
if(mouseX > 200){
RIGHT SIDE
}else{
LEFT SIDE
}
这是一个简单例子，机器学习通过数据来找到也就输出 mouseX > 200 规律。
<body>
<script src="node_modules/p5/lib/p5.js"></script>
<script src="node_modules/p5/lib/addons/p5.dom.js"></script>
<script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
<script src="app.js"></script>
</body>
首先需要安装 p5js 依赖，然后 p5 绘制一个 canvas 作为我们演示的画布
function setup(){
createCanvas(640,480);
background(0)
}
定义一个变量来图片分类
let mobilenet;
定义图片分类器模型，并且给他一个名称
mobilenet = ml5.imageClassifier('MobileNet')
let mobilenet
console.log('hello')
function modelReady() {
console.log('Model Ready');
}
function setup(){
createCanvas(640,480);
background(0)
mobilenet = ml5.imageClassifier('MobileNet', modelReady);
}
let bear;
function modelReady() {
console.log('Model Ready');
}
function imageReady(){
image(bear,0,0,width,height);
}
function setup(){
createCanvas(640,480);
background(0)
bear = createImg('images/bear.jpg',imageReady)
bear.hide()
mobilenet = ml5.imageClassifier('MobileNet', modelReady);
}
上面代码是开始下载图片，初始化模型图片是从 google 进行搜索的来训练模型，需要一定时间才能完成需要耐性等待一下。
首先我们利用 p5 的 api 将图片绘制到 canvas 中显示出了，有关 p5 如何将图片绘制到 canvas 不是今天重点，大家如果感兴趣可以自己看一下。
function modelReady() {
console.log('Model Ready');
mobilenet.predict(bear,getResults)
}
function getResults(err,results){
console.log(results)
}
function imageReady(){
image(bear,0,0,width,height);
}
008.JPG
现在准备 Bear 图片让图片识别器进行识别一张图片让他识别，识别结果会进行输出，然后我们将第一个结果也就是概率最高的结果利用 canvas 输出在图片上。
mobilenet.predict(bear,getResults)
通过模型读取图片信息进行预判然后返回其预测的结果，这里是一个回调形式返回结果，返回参数格式类似 nodejs 的格式 第一个参数为 error 第二个参数为数据。
006.JPG
function modelReady() {
console.log('Model Ready');
mobilenet.predict(bear,getResults)
}
function getResults(err,results){
console.log(results)
let label = results[0].className;
fill(0)
textSize(64)
text(label,10,height - 100)
}
这里我们用 p5js 对图片进行打标签，输出测试结果，准确率还不错，可以做过一个应用放在手机帮助小朋友自己识别他想看到的，并且学一下英文。
007.JPG
