ml5.js入门一（介绍）+NeuralNetwork神经网络

2023-11-09 21:20
文章标签 入门 介绍 js 神经网络 ml5 neuralnetwork

本文主要是介绍ml5.js入门一（介绍）+NeuralNetwork神经网络，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

ml5.js

一 ，ml5.js是什么

ml5.js 它是基于Tensorflow.js的一个非常简便易用的接口，目的是让更广泛的受众更容易使用机器学习。(演示都是根据官网实例demo)

二，功能介绍（建议大家结合官方文档食用）

交流群：811710917
ml5.js主要分为三个方面

  1. 图像：
    图像分类器，姿势网，身体像素，积卷神经，手势，面网，人脸接口，风格转移，像素对像素，CVAE，DCGAN，草图RNN，物体检测器
  2. 声音：
    声音分类，音高检测
  3. 文本：
    字符RNN
    情绪
    Word2Vec

在学习他们之前首先需要了解

  • NeuralNetwork神经网络
  • FeatureExtractor特征提取
  • KNNClassifier最邻近结点算法
  • kmeansk均值聚类算法

NeuralNetwork神经网络

创建您自己的神经网络并在浏览器中使用ml5.neuralNetwork. 收集数据以训练您的神经网络或使用现有数据实时训练您的神经网络。一旦经过训练，您的神经网络就可以执行classification或regression执行任务。

——分类classification:这里是一个输入rgb判断是什么颜色的demo
<html><head><meta charset="UTF-8"><title>Image classification using MobileNet and p5.js</title><script src="../p5.min.js"></script><script src="../ml5.js"></script>
</head><body><!-- 分类 --><script src="./script.js"></script><!-- 回归 --><!-- <script src="./script2.js"></script> --><!-- XOR --><!-- <script src="./XOR.js"></script> --><!-- pose --><!-- <script src="./pose.js"></script> -->
</body></html>


{"data": [{"r":255, "g":0, "b":0 ,"color": "red-ish"},{"r":256, "g":0, "b":0 ,"color": "red-ish"},{"r":254, "g":0, "b":0 ,"color": "red-ish"},{"r":0, "g":254, "b":0 ,"color": "green-ish"},{"r":0, "g":255, "b":0 ,"color": "green-ish"},{"r":0, "g":256, "b":0 ,"color": "green-ish"},{"r":0, "g":0, "b":254 ,"color": "blue-ish"},{"r":0, "g":0, "b":255 ,"color": "blue-ish"},{"r":0, "g":0, "b":256 ,"color": "blue-ish"}
] }

// ./script.js
/**加载外面的数据 */
// 1 加载外部json设置
const options = {dataUrl: 'data.json',inputs: ['r', 'g', 'b'],outputs: ['color'],task: 'classification', // classification分类：yes/no : regression回归：估计值是否接近一个范围debug:true
}
// 2 初始化你的神经网络
const nn = ml5.neuralNetwork(options, dataLoaded)
// 3 序列化数据，然后训练他
function dataLoaded (){nn.normalizeData()trainModel()
}
// 4 训练 模型
function trainModel() {const trainingOptions = {epochs:32,batchSize: 12}nn.train(trainingOptions, finishedTraining)
}
// 5 使用训练好的模型
function finishedTraining (){classify()
}
// 6 定义一个分类器
function classify(){
// 这里是所需要判断的值const input = {r:255,g:0,b:0}nn.classify(input, handleResults)
}
// 7 给分类器 一个回调函数
function handleResults (error, result) {if(error){console.error(error);return}console.log(result);
}/**加载现有的数据 */
// // Step 1: 加载数据
// const data = [
//   {r:255, g:0, b:0, color:'red-ish'},
//   {r:254, g:0, b:0, color:'red-ish'},
//   {r:253, g:0, b:0, color:'red-ish'},
//   {r:0, g:255, b:0, color:'green-ish'},
//   {r:0, g:254, b:0, color:'green-ish'},
//   {r:0, g:253, b:0, color:'green-ish'},
//   {r:0, g:0, b:255, color:'blue-ish'},
//   {r:0, g:0, b:254, color:'blue-ish'},
//   {r:0, g:0, b:253, color:'blue-ish'}
// ];// // Step 2: 神经网络设置
// const options = {
//   task: 'classification',
//   debug: true
// }// // Step 3: 初始化神经网络
// const nn = ml5.neuralNetwork(options);// // Step 4: 给神经网络加载数据
// data.forEach(item => {
//   const inputs = {
//     r: item.r, 
//     g: item.g, 
//     b: item.b
//   };
//   const output = {
//     color: item.color
//   };//   nn.addData(inputs, output);
// });// // Step 5: 序列化数据
// nn.normalizeData();// // Step 6: 训练神经网络
// const trainingOptions = {
//   epochs: 32,
//   batchSize: 12
// }
// nn.train(trainingOptions, finishedTraining);// // Step 7: 使用训练模型
// function finishedTraining(){
//   classify();
// }// // Step 8: 创建一个分类器
// function classify(){
//   const input = {
//     r: 255, 
//     g: 255, 
//     b: 0
//   }
//   nn.classify(input, handleResults);
// }// // Step 9: 给分类器定义后调函数
// function handleResults(error, result) {
//     if(error){
//       console.error(error);
//       return;
//     }
//     console.log(result); // {label: 'red', confidence: 0.8};
// }
观察运行结果，推断出输入的颜色为红色的概率为0.91（91%）

在这里插入图片描述

——regression 创建一堆小球，然后预测小球们的组合轨迹的demo

<html><head><meta charset="UTF-8"><title>Image classification using MobileNet and p5.js</title><script src="../p5.min.js"></script><script src="../ml5.js"></script>
</head><body><!-- 分类 --><!-- <script src="./script.js"></script> --><!-- 回归 --><script src="./script2.js"></script><!-- XOR --><!-- <script src="./XOR.js"></script> --><!-- pose --><!-- <script src="./pose.js"></script> -->
</body></html>

// ./script2.js
let nn;
let counter = 0;const options = {task: "regression",// 回归debug: true,
};// 创建预测数据
function createTrainingData() {for (let i = 0; i < width; i += 10) {const iters = floor(random(5, 20));const spread = 50;for (let j = 0; j < iters; j += 1) {const data = [i, height - i + floor(random(-spread, spread))];fill(0, 0, 255);ellipse(data[0], data[1], 10, 10);// 给神经添加训练数据nn.addData([data[0]], [data[1]]);}}
}
// p5.js 特有的函数，加载完毕后会自动调用一次
function setup() {// 创建一个画布createCanvas(400, 400);// 初始化神经网络nn = ml5.neuralNetwork(options);console.log(nn);// 创建训练数据createTrainingData();// 数据序列化 ——》200-》2nn.normalizeData();// 训练参数const trainingOptions = {batchSize: 24,// 单次训练批次数量epochs: 10,// 训练批次};// 训练神经网络nn.train(trainingOptions, finishedTraining); // 小提示ml5支持promise
}
// 完成训练后调用的回调函数
function finishedTraining() {if (counter < 400) {// classification调用的是classify()// regression调用的是predict()// 预测nn.predict([counter], (err, results) => {if (err) {console.log(err);return;}console.log(results[0]);const prediction = results[0];const x = counter;const y = prediction.value;fill(255, 0, 0);rectMode(CENTER);rect(x, y, 10, 10);counter += 1;finishedTraining();});}
}

效果
在这里插入图片描述

第一篇就先写到这里吧 下一篇 FeatureExtractor特征提取

需要素材找我就行了haha

这篇关于ml5.js入门一（介绍）+NeuralNetwork神经网络的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/378482。

相关文章

用js控制视频播放进度基本示例代码

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意：总结前言在javascript中控制视频播放
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
MySQL中慢SQL优化的不同方式介绍

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化，主要从两个方面考虑，SQL 语
阅读更多...
C++中函数模板与类模板的简单使用及区别介绍

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中，模板是实现泛型编程
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Java使用多线程处理未知任务数的方案介绍

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数，你可以定义好线程数规则，生成线程数去跑代码说明：1.虚拟线程池：使用 Executors.newVir
阅读更多...
Python FastAPI入门安装使用

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节：FastAPI入门一、FastAPI框架介绍什么是ASGI服务（WSGI）二、FastAP
阅读更多...
JAVA SE包装类和泛型详细介绍及说明方法

JAVA SE包装类和泛型详细介绍及说明方法

《JAVASE包装类和泛型详细介绍及说明方法》：本文主要介绍JAVASE包装类和泛型的相关资料,包括基本数据类型与包装类的对应关系,以及装箱和拆箱的概念,并重点讲解了自动装箱和自动拆箱的机制,文... 目录1. 包装类1.1 基本数据类型和对应的包装类1.2 装箱和拆箱1.3 自动装箱和自动拆箱2. 泛型2
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2