本文主要是介绍ml5.js人工智能编程入门教程(1): ml5.js介绍 实现图像分类,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
ml5.js 是基于tensorflow.js的深度学习框架,它安装简便,API简单易懂,直接在浏览器里面运行,适合作为深度学习的入门以及非人工智能专业的深度学习的工具。
本系列课程将以一个个实际的例子,带领大家编写ml5.js的深度学习代码,亲自动手进入人工智能的世界。
在学习本系列教程过程中,请大家一定要:写代码,自己写代码,自己写有趣的代码!!!
观看本教程的视频:https://www.bilibili.com/video/BV1az4y1Z742/
一、ml5.js介绍
ml5.js是一个javascript实现的,能在浏览器里面运行的机器学习框架,它封装了tensorflow.js的API,给开发者提供一个更简单的使用环境,降低了机器学习编码的成本。
tensorflow是google开发出的一套开源机器学习平台,tensorflow.js是tensorflow在javascript中的实现,而ml5.js的底层调用的正式tensorflow.js的API。
虽然ml5和tensorflow.js在浏览器里面运行受到了内存,存储空间等诸多限制,但是他们又都可以使用机器的GPU,大大提高了运算的效率,所以对于一些不需要大量训练的机器学习任务,ml5是一个的选项。
ml5最大的特点是简单易用,对于初学者和想体验机器学习的开发人员更是不错的选择;本系列教程面向程序开发人员,并不需要特别的高等数学知识,我将以程序员更习惯的方式,教大家跟着一个个的例子编写代码,希望以此能带领大家进入机器学习的世界。熟悉ml5的使用一些常用神经网络的用法。
要学习本教程,你需要有一些javascript和html5的基础知识。
二、实现图像分类器
首先,我们来实现一个像分类功能的功能,我为大家准备的在线编程的网页(https://chn.ai/ml5.html),这个页面集成了ml5.js的库以及需要的模型数据数据,这样大家不需要自己搭建环境就可以开始学习了。我们打开网址就直接开始编程。
这个页面分为两个部分,左边是一个代码编辑器,可以编写html和javascript代码,点击上方的“运行”,在页面右边就可以看到结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 /><script src='js/ml5.min.js'></script>
</head>
<body><input type='file' id='file' style='width: 200px; height: 100px; border: dashed'/> <br/>
<img id='image' style='min-width: 200px; min-height: 200px; border: solid 1px grey' /> <br/>
<input type='button' value='分类' onclick='classify()' /> <br/><br/>
<div id='result'></div><script>
document.getElementById('file').addEventListener('change', fileChanged, false);function fileChanged(evt) {var file = evt.target.files[0];if(!file) return;var reader = new FileReader();reader.onload = function(e) {document.getElementById('image').setAttribute('src', e.target.result);}reader.readAsDataURL(file);
}var modelLoaded = false;
var classifier = ml5.imageClassifier('MobileNet', function() {// console.log('model loaded');document.getElementById('result').innerHTML = 'model loaded';modelLoaded = true;
});function classify() {if(!modelLoaded) return;classifier.classify(document.getElementById('image'), function(err, result) {document.getElementById('result').innerHTML = JSON.stringify(result);})
}
</script></body>
</html>
上面大部分都是在处理UI相关的代码,主要功能是有一个文件选择器元素,一个用来显示图片的img元素,当用户选择文件(或者将文件拖动到文件选择器)的时候,文件并不像往常那样上传到服务器,而是采用FileReader将文件内容在浏览器端直接读出来并直接显示img里面。
var reader = new FileReader();
reader.onload = function(e) {document.getElementById('image').setAttribute('src', e.target.result);
}
reader.readAsDataURL(file);
由于ml5.js是完全在浏览器里面运行的,所以我们不需要将图片上传到服务器,只需要将图片的内容放到img里面让ml5.js能访问到。这里图片内容读出来是以dataUrl的方式例如:
<img src="data:image/png,%89PNG%0D%0A..." />
真正起作用分类图像的是ml5的imageClassifier对象:
var classifier = ml5.imageClassifier('MobileNet', callback);
在初始化imageClassifier对象的时候有2个参数,第一个是字符串‘mobileNet’,第二个则是回调函数。第一个参数是让ml5初始化一个叫‘mobileNet’的模型,这是一个卷积神经网络模型,卷积神经网络注重像素位置之间的关系,所以它更擅长处理图像。
除了神经网络的模型的结构,还需要加载模型里面各个神经节点的权重,一个单纯的神经网络结构好像新生儿的大脑,没有学习和训练什么都不会做;而神经节点权重则是网络训练后的结果,当这些节点赋予了不同的权重,才使得模型能输出正确的结果。
我们在初始化ml5模型的时候,系统会自动从网络上下载对应的网络模型的结构和权重数据,这就是为什么我们短短几行代码就可以实现一个图像分类的功能。真正起作用的是这个mobilenet网络结构与训练结果,这些都有人做好并放在服务器上。我们初始化ml5分类器的时候,就从相应位置下载这些数据并在浏览器的内存里面重建这个网络。
除了mobilenet,ml5还支持其他模型甚至包括用户自己训练的模型。mobileNet相对其他分类网络模型,运行开销比较低,适合在mobile device(移动设备)上运行。关于图像分类器classifier更详细的用法,我们还可以参阅ml5的文档。
下面一章,我们将自己训练一个神经网络并用来分类物体。
好了,如果大家有任何意见,建议,idea,或者在编码过程中遇到任何问题,欢迎在下边留言,我看到会一一回复各位。谢谢大家!
这篇关于ml5.js人工智能编程入门教程(1): ml5.js介绍 实现图像分类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!