ml5.js人工智能编程入门教程(1): ml5.js介绍 & 实现图像分类

最新推荐文章于 2024-08-15 10:11:44 发布

fribbler

最新推荐文章于 2024-08-15 10:11:44 发布

阅读量8.2k

点赞数 10

分类专栏： ml5.js 人工智能编程入门教程 AI 文章标签：人工智能神经网络机器学习深度学习 javascript

本文链接：https://blog.csdn.net/fribbler/article/details/108728011

版权

AI 同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

ml5.js 人工智能编程入门教程

6 篇文章 10 订阅

订阅专栏

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.js over tensorflow.js

虽然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，或者在编码过程中遇到任何问题，欢迎在下边留言，我看到会一一回复各位。谢谢大家！