一 ,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