ml5.js入门一(介绍)+NeuralNetwork神经网络
ml5.js
一 ,ml5.js是什么
ml5.js 它是基于Tensorflow.js的一个非常简便易用的接口,目的是让更广泛的受众更容易使用机器学习。(演示都是根据官网实例demo)
二,功能介绍(建议大家结合官方文档食用)
交流群:811710917
ml5.js主要分为三个方面
- 图像:
图像分类器,姿势网,身体像素,积卷神经,手势,面网,人脸接口,风格转移,像素对像素,CVAE,DCGAN,草图RNN,物体检测器 - 声音:
声音分类,音高检测 - 文本:
字符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特征提取
ml5.js入门一(介绍)+NeuralNetwork神经网络相关推荐
- Day15(Js入门、jquery入门、ajax入门、前后端分离开发跨域问题、linux环境准备、jdk_tomcat环境搭建、docker介绍及应用(docker安装、基本命令、安装tomcat))
js入门 js代码辅助 window–>preferences–>javaScript–>Content Assist .abcdefghijklmnopqrstuvwxyz alt ...
- vis.js入门_使用TensorBoard数据Vis的TensorFlow手术分类器入门
vis.js入门 深度学习中最具挑战性的部分是标签,这将在由两部分组成的系列文章的第1部分中看到, 了解如何使用TensorFlow对图像进行分类 . 正确的培训对于将来进行有效分类至关重要,而要进行 ...
- js模板字符串自定义类名_【Vue.js 入门到实战教程】07Vue 组件注册 | 基本使用和组件嵌套...
来源 | https://xueyuanjun.com/post/21929除了前面介绍的基本语法之外,Vue.js 还支持通过组件构建复杂的功能模块,组件可以称得上是 Vue.js 的灵魂,是 Vu ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- node.js入门 - 9.api:http
node一个重要任务是用来创建web服务,接下来我们就学习与此相关的一个重要的api -- http.我们使用http.createServer()创建一个http服务的实例,用来处理来自客户的请求. ...
- Node.js 入门到干活,10 个优质项目就够了!
Node.js 在很多大公司都有不错的实践,比如:淘宝.天猫 Web 版,很多页面都是在 Node 服务器上渲染的.还有各种脚手架.前端打包发布工具.构建生态的小工具,也基本都是 Node.js 编写 ...
- vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
- Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
- d3.js 入门指南
说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...
- 鉴别一个人是否 js 入门的标准竟然是?!
不知不觉跳入前端「大坑」也已经有大半年了,学到了很多知识.为了让知识更好地沉淀,我打算写一系列的知识总结,希望能在回顾知识的同时也能帮到别的同学. 忘记在哪里看到过,有人说鉴别一个人是否 js 入门的 ...
最新文章
- 管理员信息管理之更新管理员数据
- php读取cookie文件,PHP读取CURL模拟登录时生成Cookie文件的方法,_PHP教程
- nvcc 已退出,返回代码为1
- 微信接口调用 ---ACCESS_TOKEN
- linux设置IP,网关,DNS和MAC地址
- jsp mysql代码提示错误,Web工程出现错误mysql错误
- Linux从入门到精通——Apache
- 【接口时序】2、Verilog实现流水灯及与C语言的对比
- iOS ipv6审核被拒绝的解决方案(已审核通过)
- mysql日志课程_【mysql课程七】 MySQL日志管理
- UG NX 12 鼠标及快捷键的用法
- Nginx安装配置详解
- Deep Learning(深度学习)学习笔记
- 推荐五个免费UML建模工具
- ISO/IEC 27000官方文档系列
- python第一次操作ES The client noticed that the server is not Elasticsearch and we do not support this unk
- linux环境下的jmeter测试
- 教资之教育知识与能力 第一章第四节
- 网卡MAC地址是什么?
- 我和我的中山公园”摄影作品大赛投票通道即将开启,让你的才艺C位出道~
热门文章
- 在idea中,sql语句正确但是查不出数据,问题解决
- PO JAVA MAPPING
- Node-RED中使用Notification元件显示警告讯息框(温度过高提示)
- Springaop与动态代理
- android studio无法发现设备
- GfxDeviceMetal::GetPipeline(GfxDeviceMetal::PipeKey const) + 8207248 (GfxDeviceMetal.mm:432)
- [工业互联-10]:PLC入门简介
- Android实战-找回密码
- oracle adjusting parallel,Oracle 启动实例所需最小化参数
- FileNotFoundException: class path resource [springmvc.xml] cannot be opened because it does not exis