inference-plugin

描述：根据算法得到的推理结果展示物体检测、图像分类、图像分割、关键点内容

开发环境

安装依赖

npm install

启动开发服务

npm start

线上环境

编译

npm run build

运行build生成的dist文件

1、打开控制台进入dist文件夹
2、执行命令： python -m SimpleHTTPServer

使用方法

安装

npm install inference-plugin

HTML声明一个div作为承载容器，例：

<div id="myCanvas"></div>

js逻辑，例：

// 引入方法
import SenseInferenceRender from 'inference-plugin';
// 引入图片
import test from "../image/test.jpeg";

// 获取DOM
const DOM = document.getElementById("myCanvas");

// 准备数据
const data = [
  {
    // 检测
    type: "detection",
    father_index: 0,
    label: "老虎", // 表示其意义
    bbox: {
      // 框区域
      left: 540,
      top: 330,
      width: 166,
      height: 469,
    },
    confidence: 0.98, // 概率
  },
  {
    // 分割
    type: "segmentation",
    father_index: 0,
    name: "",
    channel: 1,
    bbox: {
      // feature区域
      left: 0,
      top: 0,
      width: 100,
      height: 100,
    },
    label_matrix:
      "AAAAQEBAAAAQEBAAAAAQEBAAAAQEBAAAAAQEBAAAAQEBAAQEBAAAAAAAQEBAQEBAQEBAQEBA",
  },
  {
    // 分类
    type: "classification",
    father_index: 0,
    bbox: {
      // 框区域
      left: 1240,
      top: 330,
      width: 166,
      height: 469,
    },
    attribute: "球类", // 分类属性，一张图片的分类属性可能会有多个，会被拆开作为一个独立的节点（比如“球类”，“大小”）；但是一个属性的所有分类作为一个独立的整体
    classes: {
      // 各个分类的意义和其概率
      篮球: 0.20996715128421783,
      足球: 0.48788318037986755,
      排球: 0.19172067940235138,
      高尔夫: 0.10272260755300522,
      乒乓球: 0.0072526871226727962,
      网球: 0.000453635846497491,
    },
  },
  {
    // 关键点 暂时不支持
    type: "keypoint",
    father_index: 0,
    bbox: {
      // 框区域
      left: 1240,
      top: 330,
      width: 166,
      height: 469,
    },
    points: [
      // 有关联的一组关键点（根据需求进行分割，比如吊弦上下关键点分类是分开产生作用的，将其分开；而吊弦关键点线检测是通过两个点一起发生作用的，不分开，TODO，确认panorama是否有此需求）
      {
        confidence: 0.63401412963867188,
        visibility: 0.97283381223678589,
        x: 156.99609375,
        y: 821.7265625,
      },
      {
        confidence: 0.76698744297027588,
        visibility: 0.96908289194107056,
        x: 144.10546875,
        y: 821.7265625,
      },
    ],
  },
]

const inference = new SenseInferenceRender({ dom: DOM, url: test, data: data });
console.log(inference);

// 如果需要获取无底图png图片，可以按下面的代码进行获取，不需要就不用写
const imgbase64 = inference.base64png;

插件如有bug请联系[email protected]