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

2023-11-09 21:20

本文主要是介绍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.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,或者在编码过程中遇到任何问题,欢迎在下边留言,我看到会一一回复各位。谢谢大家!




这篇关于ml5.js人工智能编程入门教程(1): ml5.js介绍 实现图像分类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/378480

相关文章

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》:本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口(可以修改)aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口(可以

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被