2 Star 3 Fork 1

mathfan / javascript-ai-visualization

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

一个属于前端的AI架构 👋

Version License: MIT

能完全脱离服务器在web上执行学习 + 识别, 一个属于前端的AI架构

环境

  • npm >=6.4.1
  • node >=8.12.0

下载

npm install

启动

npm run start

作者

👤 weiyi

支持

给一个star就行


npm 工具包 API

1)K-Means YOLO2

介绍

K均值聚类算法: 该算法用来给多个散列点分类, 在yolo中用来归类多个label类型,使得训练收敛更加快。

下载

npm install k-means-yolo2 --save

例子

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尺寸 Object<{ w: number, h: number }>
labels 标注数据 Array<{ w: number, h: number, x: number, y: number }>
configs 配置参数 Object

API方法说明

方法 效果
compute_centroids 获取K-Means计算结果

2)CNN

介绍

CNN卷积神经网络:用于手写识别,物体识别等。分为2块功能训练和识别。

手写识别

下载

npm install genesis --save

例子

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 ***********************************/

/****************************** 识别 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识别配置 Object
  1. TinyCNN.load(weight) (加载CNN权重)
方法 效果 属性
weight CNN识别权重 Object 或 string
  1. TinyCNN.detect(src) (识别)
方法 效果 属性
src 识别目标 string 或 HTMLCanvasElement
  1. TinyCNN.saveWeights(name) (保存权重文件)
方法 效果 属性
name 保存地址 string
  1. TinyCNN.saveConfig(name) (保存配置文件)
方法 效果 属性
name 保存地址 string
  1. CNNTrainable(config, optimizer) extends TinyCNN (CNN训练类方法)
方法 效果 属性
config CNN配置参数 Object
optimizer 优化函数 TF.Optimizer
  1. CNNTrainable.train(imgArray, oneHotArray, config) (训练)
方法 效果 属性
imgArray 训练图片 Array[string]
oneHotArray 训练one-hot Array[Array[number]]
config 训练配置 Object

3)YOLO2

介绍

YOLO2图像搜索神经网络: 用于图像搜索,在图片中什么位置,例如自动化驾驶,人脸定位,设计稿组件识别,视频物体识别等。

  1. 设计稿识别
  1. 人脸定位
  1. 自动化驾驶

下载

npm install genesis --save

例子

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 ***********************************/
/****************************** 识别 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 神经网络隐层权重 Array
  1. InitWeights.init(filterNet).getData() (获取权重数据)

  2. TinyYolov2(config)(识别类方法)

方法 效果 属性
config yolo配置参数 Object
  1. TinyYolov2.load(weightsOrUrl, useTrainWeight)(识别类加载权重)
方法 效果 属性
weightsOrUrl 权重数据 或者 权重文件地址 Float32Array 或者 string
useTrainWeight 是否用自己训练的权重 boolean 或者 不填写
  1. TinyYolov2.detect(image, config)(识别类识别用API)
方法 效果 属性
image 图片 太多了看详情
config 识别配置 Object
  1. TinyYolov2.saveWeights(url) (保存当前权重)
方法 效果 属性
url 保存地址 string
  1. TinyYolov2.saveConfig(url) (保存当前配置)
方法 效果 属性
url 保存地址 string
  1. TinyYolov2Trainable(config, optimizer) extends TinyYolov2 (训练类方法)
方法 效果 属性
config yolo配置参数 Object
optimizer 优化函数 TF.Optimizer
  1. TinyYolov2Trainable.train(img, label, config) (训练单张图片标注)
方法 效果 属性
img 训练图片 Object
label 训练标注 Array[label]
config 训练配置 Object

Repository Comments ( 0 )

Sign in to post a comment

About

一个属于前端的javascript AI架构 expand collapse
JavaScript
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://git.oschina.net/mathfan/AI-visualization.git
git@git.oschina.net:mathfan/AI-visualization.git
mathfan
AI-visualization
javascript-ai-visualization
master

Search

挂件 关闭按钮