# 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

一个属于前端的AI架构 👋

Version License: MIT

> 能完全脱离服务器在web上执行学习 + 识别, 一个属于前端的AI架构 ## 环境 - npm >=6.4.1 - node >=8.12.0 ## 下载 ```sh npm install ``` ## 启动 ```sh npm run start ``` ## 作者 👤 **weiyi** * Github: [1038719298@qq.com](https://gitee.com/mathfan/AI-visualization/tree/master/) ## 支持 给一个star就行 *** 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 | 3. InitWeights.init(filterNet).getData() (获取权重数据) 4. TinyYolov2(config)(识别类方法) |方法|效果|属性| |----|-----|-----| |`config`|[yolo配置参数](./README/yolo2/TinyYolov2.config.md)| Object | 5. TinyYolov2.load(weightsOrUrl, useTrainWeight)(识别类加载权重) |方法|效果|属性| |----|-----|-----| |`weightsOrUrl`|[权重数据 或者 权重文件地址](./README/yolo2/weightsOrUrl.md)| Float32Array 或者 string | |`useTrainWeight`|[是否用自己训练的权重](./README/yolo2/useTrainWeight.md)| boolean 或者 不填写 | 6. TinyYolov2.detect(image, config)(识别类识别用API) |方法|效果|属性| |----|-----|-----| |`image`|[图片](./README/yolo2/TinyYolov2.detect.image.md)| 太多了看详情 | |`config`|[识别配置](./README/yolo2/TinyYolov2.detect.config.md)| Object | 7. TinyYolov2.saveWeights(url) (保存当前权重) |方法|效果|属性| |----|-----|-----| |`url`| 保存地址 | string | 8. TinyYolov2.saveConfig(url) (保存当前配置) |方法|效果|属性| |----|-----|-----| |`url`| 保存地址 | string | 9. TinyYolov2Trainable(config, optimizer) extends TinyYolov2 (训练类方法) |方法|效果|属性| |----|-----|-----| |`config`|[yolo配置参数](./README/yolo2/TinyYolov2Trainable.config.md)| Object | |`optimizer`|[优化函数](https://js.tensorflow.org/api/latest/#Training-Optimizers)| TF.Optimizer | 10. TinyYolov2Trainable.train(img, label, config) (训练单张图片标注) |方法|效果|属性| |----|-----|-----| |`img`|[训练图片](./README/yolo2/TinyYolov2Trainable.train.img.md)| Object | |`label`|[训练标注](./README/yolo2/TinyYolov2Trainable.train.label.md)| Array[label] | |`config`|[训练配置](./README/yolo2/TinyYolov2Trainable.train.config.md)| Object | ***