ml5.js入门四（介绍）+kmeansk均值聚类算法

最新推荐文章于 2023-08-27 13:00:23 发布

red润

最新推荐文章于 2023-08-27 13:00:23 发布

阅读量788

点赞数 3

分类专栏： ml5 文章标签：聚类算法深度学习机器学习 tensorflow

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

版权

ml5 专栏收录该内容

10 篇文章 7 订阅

订阅专栏

一，ml5.js是什么

ml5.js 它是基于Tensorflow.js的一个非常简便易用的接口，目的是让更广泛的受众更容易使用机器学习。（结合官网食用）

其他知识点索引点这里
描述

KMeans 聚类算法。

所谓聚类算法是指将一堆没有标签的数据自动划分成几类的方法，属于无监督学习方法，这个方法要保证同一类的数据有相似的特征，如下图所示：
在这里插入图片描述

官方实例

const data = [{ x: 0, y: 0 }, { x: 0, y: 1 }, { x: 1, y: 0 }, { x: 1, y: 1 }];
const options = {
  k: 3,// 初始聚类中心
  maxIter: 4, // 强制收敛前要尝试的最大迭代次数
  threshold: 0.5, // 声明收敛之前更新的质心距离的阈值
};
// 初始化
const kmeans = ml5.kmeans(data, options, clustersCalculated);

// 训练完成
function clustersCalculated() {
  console.log('分类完成，输出结果集');
  console.log(kmeans.dataset);
}

下面是识别地图中物体然后按颜色分类demo

<html>

<head>
  <meta charset="UTF-8">
  <title>kmeans</title>
  
  <script src="../p5.min.js"></script>
  <script src="../ml5.js"></script>
</head>
<body>
    <h1>Kmeans image segmentation</h1>
    <canvas id="baseImage" width="200" height="200"></canvas>
  <script src="./sketch.js"></script>
 <!-- <script src="./index.js"></script> -->
</body>

</html>

let kmeans;
let baseImage;
const data = [];

const imgSize = 30;
// 颜色字典
const colorDict = {
  0: [88, 214, 141], // green
  1: [202, 207, 210], // grey
  2: [97, 106, 107], // dark grey
  3: [44, 62, 80], // navy
  4: [249, 231, 159], // yellow
};

const options = {
  k: 3,
  maxIter: 4,
  threshold: 0.5,
};

function preload() {
  // 加载图片
  img = loadImage('data/brooklyn-aerial.jpg')
  // img = loadImage("data/world.jpg");
}

function setup() {
  createCanvas(200, 200);

  // 得到加载图片的像素
  img.resize(imgSize, imgSize);
  img.loadPixels();

  //遍历像素并将它们拉出来作为
  //要发送到kmeans的数据
  for (let x = 0; x < imgSize; x += 1) {
    for (let y = 0; y < imgSize; y += 1) {
      const off = (y * imgSize + x) * 4;
      const r = img.pixels[off];
      const g = img.pixels[off + 1];
      const b = img.pixels[off + 2];
      const a = img.pixels[off + 3];
      // 将其推送到 data[] 数组
      data.push({
        r,
        g,
        b,
      });
    }
  }

  // 在另一个画布上显示图像
  baseImage = select("#baseImage");
  baseImageCtx = baseImage.elt.getContext("2d");
  baseImageCtx.drawImage(img.canvas, 0, 0, width, height);

  // 调用kmeans函数
  kmeans = ml5.kmeans(data, options, modelReady);
}

function modelReady() {
  console.log("ready!");
  const dataset = kmeans.dataset;

  const segmented = createImage(imgSize, imgSize);
  segmented.loadPixels();

  // 使用上面的颜色字典重绘图像

// 使用 .centroid 值来应用颜色
  for (let x = 0; x < segmented.width; x += 1) {
    for (let y = 0; y < segmented.height; y += 1) {
      const off = x * imgSize + y;
      const c = colorDict[dataset[off].centroid];
      segmented.set(x, y, color(c));
    }
  }
  segmented.updatePixels();
  image(segmented, 0, 0, width, height);
}

将左边图片相同块，用不同颜色标识出来
效果
在这里插入图片描述

下一篇 [图像分类器]

需要素材找我就行了haha

red润

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ml5.js入门四（介绍）+kmeansk均值聚类算法

一，ml5.js是什么ml5.js 它是基于Tensorflow.js的一个非常简便易用的接口，目的是让更广泛的受众更容易使用机器学习。（结合官网食用）其他知识点索引点这里描述KMeans 聚类算法。所谓聚类算法是指将一堆没有标签的数据自动划分成几类的方法，属于无监督学习方法，这个方法要保证同一类的数据有相似的特征，如下图所示：官方实例const data = [{ x: 0, y: 0 }, { x: 0, y: 1 }, { x: 1, y: 0 }, { x: 1, y: 1 }];
复制链接

扫一扫