npm - @glodon-aiot/dataset-annotation - Versions diffs - 3.0.5-beta.0 - Mend

@glodon-aiot/dataset-annotation 3.0.5-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/README.git.md ADDED Viewed

@@ -0,0 +1,73 @@
+git 使用文档 | [组件库使用文档](./README.lib.md)
+## 模板工程使用：
+### 模板代码拉取与安装
+`git clone https://geek.glodon.com/scm/gos/aiot-standard-frontend.git`，克隆代码。
+`yarn install`,安装项目所有依赖。
+yarn 安装可参考：https://blog.csdn.net/qq_45112637/article/details/125543953
+`yarn start`，运行模板项目。
+### 贡献代码
+`git switch master`，切换分支 master。
+`git pull`，获取 master 最新代码。
+`git switch –c feature/xxx`，在 master 分支下创建并切换到新分支 feature/xxx。
+在新分支编写代码。
+`git add .`，把所有文件修改添加到暂存区。
+`git commit -m "备注信息"`，将暂存区内容添加到本地仓库。
+`git push`，把本地仓库的更新推到远程仓库。
+分支代码完成后提 PR，将分支`feature/xxx`merge 到 develop 分支。
+- 若有冲突，`git switch feature/xxx`切换到该分支，然后`git pull origin develop`，手动解决冲突之后再次提交代码。
+- 没有冲突且测试没有问题，再提 PR，将 develop 分支 merge 到 master 分支。
+### 更换远程仓库
+**可向自己的代码仓库提交代码，不要在模板项目上提交代码哦~**
+关联远程库例子：`git remote add origin git@server-name:path/repo-name.git`，可参考https://www.liaoxuefeng.com/wiki/896043488029600/898732864121440。
+`git add .`，把所有文件修改添加到暂存区。
+`git commit -m "备注信息"`，将暂存区内容添加到本地仓库。
+`git push`，把本地仓库的更新推到远程仓库。
+## 代码提交规范:
+[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional)
+```
+{
+  'build': 打包
+  'chore': 性能,
+  'ci': 脚手架/工程化,
+  'docs': 文档,
+  'feat' : 新功能,
+  'fix': 修改bug,
+  'perf': 性能优化,
+  'refactor': 重构,
+  'revert'： 回退,
+  'style': 样式,
+  'test': 单元测试
+}
+```
+举个例子
+```
+git commit -m "fix: some bug"
+git commit -m "feat: some feautre"
+```

package/README.lib.md ADDED Viewed

@@ -0,0 +1,262 @@
+#  安装依赖
+# 快速启动
+支持两种引入方式：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文档的`**<body>**`标签下添加script引用。
+```html
+<!DOCTYPE html>
+<html>
+    <!-- 省略其他内容 -->
+    <body>
+      <!-- 省略其他内容 -->
+      <script src="https://cv-cdn.obs.cn-north-4.myhuaweicloud.com/glodon/libs/dataset-annotation/latest/dataset-annotation.umd.cjs"></script>
+      <div id="root" style="height: 100%;"></div>
+  </body>
+</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、标签选择器 | 否 | {<br/>tabs: true，<br/>labels: true<br/>} |
+| mode | `'manage' | 'label' | 'view'` | `manage`模式下可以删除数据、管理标签列表、导入数据；<br/>`label`模式下可标注数据；<br/>`view`模式下只能查看数据；<br/>更多说明请看[各种模式的默认配置](#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][];
+}
+```