# 安装依赖
# 快速启动
支持两种引入方式：npm依赖包方式或script脚本引入方式。
## npm依赖引用
### 配置.npmrc
项目根目录添加.npmrc，与package.json同级，文档中添加以下内容，可点击复制
```bash
@aiot:registry=https://packages.glodon.com/artifactory/api/npm/npm-GGM-releases/
```
### 安装依赖
#### npm
`npm install @glodon-aiot/dataset-annotation`
#### yarn
`yarn add @glodon-aiot/dataset-annotation`
### 项目中引用
#### 物体检测数据集标注工具
这个工具提供了[行业AI平台](https://copilot.glodon.com/)的物体检测类型数据集管理功能，只需通过数据集ID和行业AI平台token即可集成到自己的业务平台中。
```javascript
import {createDetectionDatasetAnnotation} from '@glodon-aiot/dataset-annotation';
createDetectionDatasetAnnotation({
getContainer: () => ref.current || document.body,
token: 'your token goes here',
datasetId: 'dataset ID',
versionId: 'version ID', //不设置versionId默认查看最新版本
errorHandlers: {
aiotToken: (error) => console.error(error),
},
//其他配置参数
});
```
在线预览：
[物体检测数据集标注工具Demo](https://code.juejin.cn/pen/7473020574709579785)
#### 物体检测图片标注工具
该工具提供了单张物体检测类型图片的标注数据展示。
```javascript
import {createDetectionImageAnnotation} from '@glodon-aiot/dataset-annotation';
createDetectionImageAnnotation({
getContainer: () => ref.current || document.body,
data: {
fileUrl: 'image-url', // 图片地址
labels: [], // 标注框信息
},
});
```
在线预览：
[码上掘金](https://code.juejin.cn/pen/7475246522045890610)
## script脚本引入
### 添加脚本标签
在HTML文档的`****`标签下添加script引用。
```html
```
### 使用工具
```javascript
document.addEventListener("DOMContentLoaded", () => {
const createDetectionDatasetAnnotation = DatasetAnnotation.createDetectionDatasetAnnotation;
createDetectionDatasetAnnotation({
getContainer: () => document.getElementById('root'),
// 请替换新的token
token: 'your token goes here',
datasetId: '64dccb29-37f5-49f3-a294-21d041676ccd',
versionId: 'version ID', //不设置versionId默认查看最新版本
errorHandlers: {
aiotToken: (error) => console.error(error),
},
//其他配置参数
});
})
```
# 配置
## 物体检测数据集工具配置项
| 名称 | 数据类型 | 描述 | 必填 | 默认值 |
| --- | --- | --- | --- | --- |
| getContainer | `() => HTMLElement` | 获取容器元素 | | |
| token | `string` | AIoT平台用户租户token | 是 | - |
| datasetId | `string` | 数据集ID | 是 | - |
| version | `string` | 版本ID | 否 | 最新版本ID |
| labelManager | `false`｜`[LabelManager](https://glodon-cv-help.yuque.com/yfmkyg/sgbna6/evrhc5fhz8no2nlx#yni3d)` | 数据集标签管理是否开启 | 否 | `false` |
| datasetManager | `false`｜`[DatasetManager](https://glodon-cv-help.yuque.com/yfmkyg/sgbna6/evrhc5fhz8no2nlx#j68ow)` | 数据集管理是否开启 | 否 | `false` |
| filterSwitch | `[FilterSwitch](https://glodon-cv-help.yuque.com/yfmkyg/sgbna6/evrhc5fhz8no2nlx#lJ1Jk)` | 列表过滤器开关，分别表述以下过滤器是否可见：有无标注tabs、标签选择器 | 否 | {
tabs: true，
labels: true
} |
| mode | `'manage' | 'label' | 'view'` | `manage`模式下可以删除数据、管理标签列表、导入数据；
`label`模式下可标注数据；
`view`模式下只能查看数据；
更多说明请看[各种模式的默认配置](#G3fjR) | 否 | 'label' |
| header | `false` | `[HeaderConfig](https://glodon-cv-help.yuque.com/yfmkyg/sgbna6/evrhc5fhz8no2nlx#BsNya)` | | | |
```typescript
interface FilterSwitch {
tabs: boolean;
labels: boolean;
search: boolean;
}
```
```typescript
interface HeaderConfig {
versionSelect?: boolean; // 是否可选择版本
onBackClick?: VoidFunction; //返回按钮回调。没有传递该回调时，不显示返回按钮
onVersionChange?: (version: string) => void;
}
```
```typescript
interface DatasetManager{
add?: boolean;
delete?: boolean;
label?: boolean;
preLabel?: boolean;
}
```
```typescript
interface LabelManager{
add?: boolean;
delete?: boolean;
edit?: boolean;
}
```
### 各种模式的默认配置
#### manage模式
适用于拥有完全的数据集管理权限的角色
```json
{
labelManager: {
visible: true,
add: true,
delete: true,
edit: true,
},
datasetManager: {
add: true,
delete: true,
label: true,
preLabel: true
},
annotation: {
zoomable: true,
draggable: true,
readonly: false,
},
filterSwitch: {
tabs: true,
labels: true,
search: true,
}
}
```
#### label模式
适用于标注用户
```json
{
labelManager: {
visible: false,
add: true,
delete: false,
edit: false,
},
datasetManager: {
add: false,
delete: false,
label: true,
preLabel: false
},
annotation: {
zoomable: true,
draggable: true,
readonly: false,
},
filterSwitch: {
tabs: true,
labels: true,
search: true,
}
}
```
#### view模式
适用于没有任何数据操作权限的用户
```json
{
labelManager: {
visible: false,
add: false,
delete: false,
edit: false,
},
datasetManager: {
add: false,
delete: false,
label: false,
preLabel: false
},
annotation: {
zoomable: true,
draggable: true,
readonly: true,
},
filterSwitch: {
tabs: true,
labels: true,
search: true,
}
}
```
## 物体检测单张图片标注工具配置项
| 名称 | 数据类型 | 描述 | 必填 | 默认值 |
| --- | --- | --- | --- | --- |
| data | `[Sample](https://glodon-cv-help.yuque.com/yfmkyg/sgbna6/evrhc5fhz8no2nlx#Bsu16)` | 查看器需要提供图片文件地址和标注框信息 | 是 | |
| readonly | `boolean` | 是否支持编辑 | 否 | `true` |
| showLabelList | `boolean` | 是否展示标签列表 | 否 | `false` |
| onDataChange | `(v:[Sample](https://glodon-cv-help.yuque.com/yfmkyg/sgbna6/evrhc5fhz8no2nlx#Bsu16)) => void` | 标注框变动时该方法会被调用 | 否 | - |
| onNextClick | VoidFunction | 下一张按钮被点击时调用，不传递该回调时隐藏下一张按钮 | 否 | - |
| onPrevClick | VoidFunction | 上一张按钮被点击时调用，不传递该回调时隐藏上一张按钮 | 否 | - |
```typescript
interface Sample {
fileUrl: string;
labels: DetectionInfer[];
}
interface DetectionInfer {
id: string;
label: string;
box: [number, number][];
}
```