如何使用ml5.js和HTML创建图像分类工具_0
时间：2023-03-15 23:25:44
科技观察
译者|布加迪评论家|SunShujuan计算机可以学习识别图像、创作艺术品，甚至编写自己的代码，所有这些都几乎不需要人工干预。但是机器学习是如何工作的呢？你自己怎么用？一、机器学习简介机器学习是一个比较简单的概念。计算机系统可以通过分析信息池中的现有数据模式来学习和适应。这通常是在没有人类明确指示的情况下完成的。虚拟助手工具就是一个很好的例子。Siri、Cortana和GoogleAssistant都广泛使用机器学习来理解人类语言。这从现有的录音库开始，但这些工具也可以从与用户的互动中学习。这使他们能够提高自己。2.ml5.js简介大多数机器学习算法和工具都是用R或Python编写的，但ml5.js不一样。作为Google的Tensorflow.js库的接口，ml5.js是一个将机器学习交到JavaScript开发人员手中的开源项目。只需在您的HTML中包含一段外部脚本，您就可以开始将ml5.js用于您自己的Web应用程序。3.机器学习入门：学习过程训练机器学习算法需要时间。计算机的学习速度比人类快得多，但它们的学习方式也不同。幸运的是，ml5.js自带一组预训练模型，所以你可以跳过这一步。了解机器学习算法的训练方式是更好地了解这些类型工具的好方法。4.使用JavaScript构建图像分类工具ml5.js使用户可以轻松创建在网站上运行的图像分类工具。本例中的HTML页面包含一个用于选择图像的文件输入字段。上传的图像显示在准备好的HTML元素中，使ml5.js能够扫描和识别它们。1.包含ml5.js库这个项目需要两个库来运行：ml5.js和p5.js。ml5.js是一个机器学习库，而p5.js使用户能够正确处理图像。您需要两行HTML代码来添加这些库：2.创建一些HTML元素接下来，是时候创建一些HTML元素了。最重要的是一个带有ID的div和一个标记为imageResult的类，它将存储最终结果：
PCPC.meImageClassifier
Click"ChooseFile"toAddanImage
之后，添加一个文件输入元素来收集图像以供程序分类。
input负责监控oninput事件，并执行两个以分号分隔的语句作为响应。第一个语句创建图像的对象URL，它允许您在不将数据上传到服务器的情况下操作数据。第二条语句调用您将在下一步中创建的startImageScan()函数。最后，添加img元素以显示用户上传的图像：
3.用于创建扫描图像的JavaScript函数现在您已经有了一些HTML，是时候添加一些了JavaScript。首先添加一个const变量来存储您在上一步中创建的imageResult元素。constelement=document.getElementById("imageResult");接下来，添加一个名为startImageScan()的函数，并使用其中的MobileNet初始化ml5.js图像分类器。然后使用classifier.classify命令。将对您之前添加的uploadedImage元素的引用传递给它，并传递一个回调函数来处理结果。functionstartImageScan(){//创建一个变量来初始化ml5.js图像分类器withMobileNetconstclassifier=ml5.imageClassifier('MobileNet');classifier.classify(document.getElementById("uploadedImage"),imageScanResult);element.innerHTML="...";}4.创建结果显示函数还需要一个函数来显示执行的图像分类的结果。此函数包含一个简单的if语句，用于检查任何错误。functionimageScanResult(error,results){if(error){element.innerHTML=error;}else{letnum=results[0].confidence*100;element.innerHTML=results[0].label+"
置信度:"+num.toFixed(0)+"%";}}5.将它们放在一起最后，是时候将所有这些代码放在一起了。请务必注意标签、
PCPC.me图像分类器
单击“选择文件”以添加图像
