feat: relation tool

apps/frontend/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@labelu/frontend",
-  "version": "5.8.12",
+  "version": "5.9.0-alpha.9",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-    "@labelu/i18n": "1.0.6",
-    "@labelu/audio-annotator-react": "1.8.6",
-    "@labelu/components-react": "1.7.11",
-    "@labelu/image": "1.4.0",
+    "@labelu/i18n": "1.1.0-alpha.9",
+    "@labelu/audio-annotator-react": "1.8.7-alpha.3",
+    "@labelu/components-react": "1.8.0-alpha.12",
+    "@labelu/image": "1.5.0-alpha.6",
     "@labelu/formatter": "1.0.2",
-    "@labelu/image-annotator-react": "2.4.6",
+    "@labelu/image-annotator-react": "2.5.0-alpha.7",
     "@labelu/interface": "1.3.1",
-    "@labelu/video-annotator-react": "1.4.12",
-    "@labelu/video-react": "1.5.3",
+    "@labelu/video-annotator-react": "1.5.0-alpha.14",
+    "@labelu/video-react": "1.5.4-alpha.3",
     "@tanstack/react-query": "^5.0.0",
     "antd": "5.10.1",
     "axios": "^1.3.4",
@@ -112,4 +112,4 @@
     "vite-plugin-svgr": "^2.4.0",
     "vite-plugin-ts-mono-alias": "^1.1.8"
   }
-}
+}

apps/frontend/src/constants/toolName.ts

@@ -1,4 +1,4 @@
-import { i18n } from '@labelu/i18n'
+import { i18n } from '@labelu/i18n';
 
 import { EAudioToolName, EGlobalToolName, EVideoToolName, ImageToolName } from '@/enums';
 
@@ -10,8 +10,9 @@ export const TOOL_NAME: Record<string, string> = {
   [ImageToolName.Polygon]: i18n.t('polygon'),
   [ImageToolName.Cuboid]: i18n.t('cuboid'),
   [ImageToolName.Line]: i18n.t('line'),
-  [EVideoToolName.VideoSegmentTool]: i18n.t("segment"),
-  [EVideoToolName.VideoFrameTool]: i18n.t("timestamp"),
-  [EAudioToolName.AudioSegmentTool]: i18n.t("segment"),
-  [EAudioToolName.AudioFrameTool]: i18n.t("timestamp"),
+  [ImageToolName.Relation]: i18n.t('relation'),
+  [EVideoToolName.VideoSegmentTool]: i18n.t('segment'),
+  [EVideoToolName.VideoFrameTool]: i18n.t('timestamp'),
+  [EAudioToolName.AudioSegmentTool]: i18n.t('segment'),
+  [EAudioToolName.AudioFrameTool]: i18n.t('timestamp'),
 };

apps/frontend/src/enums/index.ts

@@ -8,6 +8,8 @@ export enum ImageToolName {
   Line = 'lineTool',
   /** 立体框 */
   Cuboid = 'cuboidTool',
+  /** 关联关系 */
+  Relation = 'relationTool',
 }
 
 export enum EVideoToolName {

apps/frontend/src/pages/tasks.[id].edit/partials/AnnotationConfig/formConfig/index.tsx

@@ -1,9 +1,9 @@
 // import { ImageToolName, TOOL_NAME, EVideoToolName, EAudioToolName } from '@labelu/annotation';
 import type { FormProps, SelectProps, TabsProps } from 'antd';
-import { Popconfirm, Button, Form, Tabs, Select } from 'antd';
+import { Popconfirm, Button, Form, Tabs, Select, Tooltip } from 'antd';
 import React, { useContext, useEffect, useCallback, useMemo, useState } from 'react';
 import _, { cloneDeep, find } from 'lodash-es';
-import { PlusOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { FlexLayout } from '@labelu/components-react';
 import { createGlobalStyle } from 'styled-components';
 import { useTranslation } from '@labelu/i18n';
@@ -18,6 +18,7 @@ import { TaskCreationContext } from '../../../taskCreation.context';
 import { FancyAttributeList } from './customFancy/ListAttribute.fancy';
 import { FancyCategoryAttribute } from './customFancy/CategoryAttribute.fancy';
 import lineTemplate from './templates/line.template';
+import relationTemplate from './templates/relation.template';
 import rectTemplate from './templates/rect.template';
 import polygonTemplate from './templates/polygon.template';
 import cuboidTemplate from './templates/cuboid.template';
@@ -47,6 +48,7 @@ const graphicTools = [
   ImageToolName.Polygon,
   ImageToolName.Line,
   ImageToolName.Cuboid,
+  ImageToolName.Relation,
 ];
 const videoAnnotationTools = [EVideoToolName.VideoSegmentTool, EVideoToolName.VideoFrameTool];
 const audioAnnotationTools = [EAudioToolName.AudioSegmentTool, EAudioToolName.AudioFrameTool];
@@ -91,6 +93,7 @@ const templateMapping: Record<string, any> = {
   [ImageToolName.Polygon]: polygonTemplate,
   [ImageToolName.Point]: pointTemplate,
   [ImageToolName.Cuboid]: cuboidTemplate,
+  [ImageToolName.Relation]: relationTemplate,
   [EGlobalToolName.Tag]: tagTemplate,
   [EGlobalToolName.Text]: textTemplate,
   [EVideoToolName.VideoSegmentTool]: videoSegmentTemplate,
@@ -228,11 +231,32 @@ const FormConfig = () => {
       },
       {
         label: t('tools'),
-        options: _.map(toolOptions, ({ value, label }) => ({
-          disabled: selectedTools.includes(value),
-          value: value,
-          label: <span>{label}</span>,
-        })),
+        options: _.map(toolOptions, ({ value, label }) => {
+          let disabled = selectedTools.includes(value);
+
+          if (
+            !selectedTools.includes('rectTool') &&
+            !selectedTools.includes('polygonTool') &&
+            value === 'relationTool'
+          ) {
+            disabled = true;
+          }
+
+          return {
+            disabled,
+            value: value,
+            label: (
+              <FlexLayout gap="0.2rem">
+                {label}
+                {value === 'relationTool' && (
+                  <Tooltip title={t('relationToolTooltip')}>
+                    <InfoCircleOutlined className="ml-2" />
+                  </Tooltip>
+                )}
+              </FlexLayout>
+            ),
+          };
+        }),
       },
     ];
   }, [selectedTools, task?.media_type, t]);

apps/frontend/src/pages/tasks.[id].edit/partials/AnnotationConfig/formConfig/templates/line.template.tsx

@@ -18,13 +18,6 @@ export default [
     field: 'config',
     type: 'group',
     children: [
-      {
-        field: 'attributeConfigurable',
-        key: 'attributeConfigurable',
-        type: 'boolean',
-        hidden: true,
-        initialValue: true,
-      },
       {
         field: 'lineType',
         key: 'lineType',
@@ -38,6 +31,29 @@ export default [
           ],
         },
       },
+      {
+        field: 'arrowType',
+        key: 'arrowType',
+        type: 'enum',
+        label: i18n.t('arrowType'),
+        initialValue: 'none',
+        antProps: {
+          options: [
+            { label: i18n.t('single'), value: 'single' },
+            { label: i18n.t('double'), value: 'double' },
+            { label: i18n.t('none'), value: 'none' },
+          ],
+        },
+        renderFormItem({ antProps, ...props }, form, fullField) {
+          const lineType = form.getFieldValue([...(fullField as any[]).slice(0, -1), 'lineType']);
+
+          if (lineType === 1) {
+            return null;
+          }
+
+          return <FancyInput {...props} {...antProps} />;
+        },
+      },
       {
         type: 'group',
         key: 'pointNum',

apps/frontend/src/pages/tasks.[id].edit/partials/AnnotationConfig/formConfig/templates/relation.template.tsx

@@ -0,0 +1,81 @@
+import { i18n } from '@labelu/i18n';
+
+import type { FancyItemIdentifier } from '@/components/FancyInput/types';
+import FancyInput from '@/components/FancyInput';
+
+export default [
+  {
+    field: 'tool',
+    key: 'tool',
+    type: 'string',
+    hidden: true,
+    initialValue: 'relationTool',
+  },
+  {
+    key: 'config',
+    field: 'config',
+    type: 'group',
+    children: [
+      {
+        field: 'lineStyle',
+        key: 'lineStyle',
+        type: 'enum',
+        label: i18n.t('lineStyle'),
+        initialValue: 'dashed',
+        antProps: {
+          options: [
+            { label: i18n.t('solid'), value: 'solid' },
+            { label: i18n.t('dashed'), value: 'dashed' },
+            { label: i18n.t('dotted'), value: 'dotted' },
+          ],
+        },
+        renderFormItem({ antProps, ...props }, form, fullField) {
+          const lineType = form.getFieldValue([...(fullField as any[]).slice(0, -1), 'lineType']);
+
+          if (lineType === 1) {
+            return null;
+          }
+
+          return <FancyInput {...props} {...antProps} />;
+        },
+      },
+
+      {
+        field: 'arrowType',
+        key: 'arrowType',
+        type: 'enum',
+        label: i18n.t('arrowType'),
+        initialValue: 'single',
+        antProps: {
+          options: [
+            { label: i18n.t('single'), value: 'single' },
+            { label: i18n.t('double'), value: 'double' },
+            { label: i18n.t('none'), value: 'none' },
+          ],
+        },
+        renderFormItem({ antProps, ...props }, form, fullField) {
+          const lineType = form.getFieldValue([...(fullField as any[]).slice(0, -1), 'lineType']);
+
+          if (lineType === 1) {
+            return null;
+          }
+
+          return <FancyInput {...props} {...antProps} />;
+        },
+      },
+      {
+        field: 'attributes',
+        key: 'attributes',
+        type: 'list-attribute',
+        label: i18n.t('labelConfig'),
+        initialValue: [
+          {
+            color: '#ff6600',
+            key: i18n.t('label1'),
+            value: 'label-1',
+          },
+        ],
+      },
+    ],
+  },
+] as FancyItemIdentifier[];

apps/frontend/src/pages/tasks.[id].edit/partials/InputData/imagePreAnnotationJson.schema.json

@@ -47,6 +47,9 @@
               {
                 "$ref": "#/definitions/PolygonTool"
               },
+              {
+                "$ref": "#/definitions/RelationTool"
+              },
               {
                 "$ref": "#/definitions/CuboidTool"
               },
@@ -323,6 +326,55 @@
       },
       "required": ["toolName", "result"]
     },
+    "RelationTool": {
+      "type": "object",
+      "properties": {
+        "toolName": {
+          "type": "string",
+          "const": "relationTool"
+        },
+        "result": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "唯一标识"
+              },
+              "sourceId": {
+                "type": "string",
+                "description": "起始标注id"
+              },
+              "targetId": {
+                "type": "string",
+                "description": "目标标注id"
+              },
+              "visible": {
+                "type": "boolean",
+                "description": "是否可见",
+                "default": true
+              },
+              "attributes": {
+                "$ref": "#/definitions/Attribute"
+              },
+              "order": {
+                "type": "integer",
+                "description": "标注顺序",
+                "minimum": 0
+              },
+              "label": {
+                "type": "string",
+                "description": "标注标签",
+                "default": "none"
+              }
+            },
+            "required": ["sourceId", "targetId", "id", "order", "label"]
+          }
+        }
+      },
+      "required": ["toolName", "result"]
+    },
     "RectTool": {
       "type": "object",
       "properties": {