# javascript-ai-visualization **Repository Path**: mathfan/AI-visualization ## Basic Information - **Project Name**: javascript-ai-visualization - **Description**: 一个属于前端的javascript AI架构 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 3 - **Forks**: 1 - **Created**: 2019-11-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README
***
npm 工具包 API
------
## 1)K-Means YOLO2
### 介绍
> K均值聚类算法: 该算法用来给多个散列点分类, 在yolo中用来归类多个label类型,使得训练收敛更加快。
### 下载
```sh
npm install k-means-yolo2 --save
```
### 例子
```javascript
import KMeans from "k-mean-yolo2";
// 实例化Kmeans
const k = new KMeans({
w: 416,
h: 416
}, labels, {
n_anchors: 5,
loss_convergence: 0.000001,
iterations_num: 100,
plus: true,
debug: false
});
// =>
// centroids: (5) [{…}, {…}, {…}, {…}, {…}]
// iterations: 4
// loss: 3.774831882178467
// map: (4) [Array(5), Array(5), Array(5), Array(5)]
// startCentroids: (5) [{…}, {…}, {…}, {…}, {…}]
console.log(k.compute_centroids());
```
### 实例参数说明
|方法|效果|属性|
|----|-----|-----|
|`size`|[k-means尺寸](./README/k-means/size.md)|Object<{ w: number, h: number }>|
|`labels`|[标注数据](./README/k-means/labels.md)|Array<{ w: number, h: number, x: number, y: number }>|
|`configs`|[配置参数](./README/k-means/configs.md)|Object|
### API方法说明
|方法|效果|
|----|-----|
|`compute_centroids`|[获取K-Means计算结果](./README/k-means/compute_centroids.md)|
## 2)CNN
### 介绍
> CNN卷积神经网络:用于手写识别,物体识别等。分为2块功能训练和识别。
手写识别
### 下载
```sh
npm install genesis --save
```
### 例子
```javascript
import * as cnn from "genesis";
/****************************** 训练 start ***********************************/
import config from "./config.json";
// config => 配置参数(之后介绍)
const config = {
classes: ["猫", "熊"], // 需要识别的名称
totalSize: 5000, // 训练批尺寸
testSize: 1000, // 训练测试尺寸
filterNet: [....], // 神经网络结构
color: ["r", "g", "b"], // 主要色
size: 32, // 训练尺寸
useOne: true // 是否用0,1色
};
// 声明优化函数
const optimizer = tf.train.adam();
// 实例化CNN训练
const net = new cnn.CNNTrainable(config, optimizer);
// 图片
const imageArr = [{
src: "base64:************" // classes中的猫 one-hot = [1, 0]
}, {
src: "base64:************" // classes中的熊 one-hot = [0, 1]
}, {
src: "base64:************" // classes中的猫 one-hot = [1, 0]
}];
// one
const oneHot = [
[1, 0], // => 猫
[0, 1], // => 熊
[1, 0] // => 猫
];
// 训练
await net.train(
imageArr,
oneHot,
{
// 每次渐变更新的采样数默认 32 => 大数据可以调整大点节约性能,小数据调整小一点增加精准度
batchSize: 10,
// 最大训练次数
epochs: 100,
reportLosses: {
onEpochEnd: (epoch, logs) => {
// 训练完成回调
console.log(logs.loss);
}
}
}
);
/****************************** 训练 end ***********************************/
```
```javascript
/****************************** 识别 start ***********************************/
import * as cnn from "genesis";
// 配置
const config = {
classes: ["猫", "熊"], // 需要识别的名称
totalSize: 5000, // 训练批尺寸
testSize: 1000, // 训练测试尺寸
filterNet: [....], // 神经网络结构
color: ["r", "g", "b"], // 主要色
size: 32, // 训练尺寸
useOne: true // 是否用0,1色
};
// 实例化方法
const net = new cnn.TinyCNN(config);
// 分配TF权重
await net.load(weight);
// 识别
const point = await net.detect(document.getElementById("canvas-id"));
// 打印概率
console.log(point); // => [猫的概率, 熊的概率]
/****************************** 识别 end ***********************************/
```
### 类实例参数说明
1. TinyCNN(config) (CNN类方法)
|方法|效果|属性|
|----|-----|-----|
|`config`|[CNN识别配置](./README/cnn/TinyCNN.config.md)| Object |
2. TinyCNN.load(weight) (加载CNN权重)
|方法|效果|属性|
|----|-----|-----|
|`weight`|[CNN识别权重](./README/cnn/TinyCNN.weight.md)| Object 或 string |
3. TinyCNN.detect(src) (识别)
|方法|效果|属性|
|----|-----|-----|
|`src`|[识别目标](./README/cnn/TinyCNN.detect.md)| string 或 HTMLCanvasElement |
4. TinyCNN.saveWeights(name) (保存权重文件)
|方法|效果|属性|
|----|-----|-----|
|`name`|保存地址| string |
5. TinyCNN.saveConfig(name) (保存配置文件)
|方法|效果|属性|
|----|-----|-----|
|`name`|保存地址| string |
6. CNNTrainable(config, optimizer) extends TinyCNN (CNN训练类方法)
|方法|效果|属性|
|----|-----|-----|
|`config`|[CNN配置参数](./README/cnn/TinyCNN.config.md)| Object |
|`optimizer`|[优化函数](https://js.tensorflow.org/api/latest/#Training-Optimizers)| TF.Optimizer |
7. CNNTrainable.train(imgArray, oneHotArray, config) (训练)
|方法|效果|属性|
|----|-----|-----|
|`imgArray`|[训练图片](./README/cnn/CNNTrainable.train.imgArray.md)| Array[string] |
|`oneHotArray`|[训练one-hot](./README/cnn/CNNTrainable.train.label.md)| Array[Array[number]] |
|`config`|[训练配置](./README/cnn/CNNTrainable.train.config.md)| Object |
## 3)YOLO2
### 介绍
> YOLO2图像搜索神经网络: 用于图像搜索,在图片中什么位置,例如自动化驾驶,人脸定位,设计稿组件识别,视频物体识别等。
1. 设计稿识别
2. 人脸定位
3. 自动化驾驶
### 下载
```sh
npm install genesis --save
```
### 例子
```javascript
import * as yolo from "genesis";
/****************************** 训练 start ***********************************/
// config => 配置参数(之后介绍)
const config = {
classes: ["猫", "熊"], // 需要识别的名称
iouThreshold: 0.4, // 最大iou配置
anchors: [ // K 聚类算法生成的盒子,yolo2一般是5个,yolo3是10个
{ "x": 0.57, "y": 0.68 },
{ "x": 1.87, "y": 2.06 },
{ "x": 3.34, "y": 5.47 },
{ "x": 7.88, "y": 3.53 },
{ "x": 9.77, "y": 9.17 }
],
filterNet: [....], // 神经网络结构
// 训练倾向
objectScale: 5, // 是不是存在物体的loss,占全部loss的权重
noObjectScale: 1, // 是不是没有物体的loss,占全部loss的权重
coordScale: 1, // 标注物体的loss,占全部loss的权重
classScale: 1 // 物体分类的loss,占全部loss的权重
};
// 声明优化函数
const optimizer = tf.train.adam();
// 初始化训练需要用的YOLO
const net = new yolo.TinyYolov2Trainable(config, optimizer);
// 声明权重工具类
const initWeights = new yolo.InitWeights();
// 获取YOLO初始化权重
const weights = initWeights.init(config.filterNet).getData();
// 神经网络载入权重
await net.load(weights);
// 训练用的数据
const trainData = [{
img: document.getElementById("image-canvas1"), // 可以是canvas或者htmlimage对象
label: [{
label: 7, // 标注在class内的one hot位置
height: 0.8, // 标注高度百分比
width: 0.2, // 标注宽度百分比
x: 0.5, // 标注x坐标百分比
y: 0.06 // 标注y坐标百分比
}]
}, .....];
// 训练方法
for(let i = 0; i < trainData.length; i ++) {
const img = trainData[i].img; // canvas
const label = trainData[i].label; // 标注
// 训练神经网络
net.train(img, d.label, {
// 训练栅格化尺寸
cellSize: 32,
// 训练图片栅格化倍数
cellMultiple: 5,
// 最小标注尺寸
minBoxSize: 12,
// 回调loss
reportLosses: function({ losses, inputSize }, time) {
console.log({ losses, inputSize }, time);
}
});
}
/****************************** 训练 end ***********************************/
```
```javascript
/****************************** 识别 start ***********************************/
import * as yolo from "genesis";
const image = document.getElementById("image-canvas1"); // 图片canvas
const config = {
classes: ["猫", "熊"], // 需要识别的名称
iouThreshold: 0.4, // 最大iou配置
anchors: [ // K 聚类算法生成的盒子,yolo2一般是5个,yolo3是10个
{ "x": 0.57, "y": 0.68 },
{ "x": 1.87, "y": 2.06 },
{ "x": 3.34, "y": 5.47 },
{ "x": 7.88, "y": 3.53 },
{ "x": 9.77, "y": 9.17 }
],
filterNet: [....], // 神经网络结构
};
// 生成神经网络
const net = new yolo.TinyYolov2(config);
// 加载权重
await net.load('/weight/game5/coco_model-weights_manifest.json');
const detections = await net.detect(image, {
inputSize: 416, // 训练尺寸
scoreThreshold: 0.5 // 训练阀值
});
console.log(detections); // [Box1, Box2, .....]
/****************************** 识别 end ***********************************/
```
### 类实例参数说明
1. InitWeights (初始化权重API)
2. InitWeights.init(filterNet) (初始化权重API)
|方法|效果|属性|
|----|-----|-----|
|`filterNet`|[神经网络隐层权重](./README/filterNet.md)| Array