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

最新推荐文章于 2024-05-19 09:41:37 发布

red润

最新推荐文章于 2024-05-19 09:41:37 发布

阅读量2.7k

点赞数 2

分类专栏： ml5 文章标签：神经网络深度学习机器学习 tensorflow

本文链接：https://blog.csdn.net/qq_47658204/article/details/118158554

版权

ml5 专栏收录该内容

10 篇文章 7 订阅

订阅专栏

ml5.js

一，ml5.js是什么

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

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

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

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

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

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-》2
  nn.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

red润

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
5
评论
ml5.js入门一（介绍）+NeuralNetwork神经网络

ml5.js一，ml5.js是什么ml5.js 它是基于Tensorflow.js的一个非常简便易用的接口，目的是让更广泛的受众更容易使用机器学习。二，功能介绍（建议大家结合官方文档食用）ml5.js主要分为三个方面图像：图像分类器，姿势网，身体像素，联通网，摆姿势，面网，人脸接口，风格转移，像素对像素，CVAE，DCGAN，草图RNN，物体检测器声音：声音分类，音高检测文本：字符RNN情绪Word2Vec在学习他们之前首先需要了解NeuralNetwork神经网络F
复制链接

扫一扫