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。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
性能测试介绍

性能测试介绍

性能测试是一种测试方法，旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试，可以确定系统是否能够满足预期的性能要求，找出性能瓶颈和潜在的问题，并进行优化和调整。 发现性能瓶颈：性能测试可以帮助发现系统的性能瓶颈，即系统在高负载或高并发情况下可能出现的问题
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...
【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站，手机流量可以访问IPV6网络的服务，为什么不在电脑搭建Home Assistant（hass），来控制你的设备呢？@智能家居 @万物互联
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2