Merge pull request #126 from IDEA-Research/feature/model_api2

feat(annotator): change model api & improve editor interface detail

packages/components/src/Annotator/components/EditorStatus/index.less

@@ -10,6 +10,8 @@
   font-size: 14px;
   font-weight: 500;
   border-radius: 5px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 
   svg {
     width: 20px;

packages/components/src/Annotator/components/ModelSelectModal/index.tsx

@@ -5,6 +5,7 @@ import { useLocale } from 'dds-utils';
 import { memo, useMemo } from 'react';
 
 import { EnumModelType, MODEL_INTRO_MAP } from '../../constants';
+import { FloatWrapper } from '../FloatWrapper';
 
 import './index.less';
 
@@ -42,54 +43,56 @@ const ModelSelectModal: React.FC<IProps> = memo(
     }, [AIAnnotation, modelOptions, selectedModel]);
 
     return (
-      <Modal
-        open={autoOpen}
-        title={localeText('DDSAnnotator.smart.modelSelectModal.title')}
-        width={modalWidth}
-        onCancel={onCloseModal}
-        footer={null}
-        centered
-        destroyOnClose
-      >
-        <div className="dds-annotator-model-selector-modal">
-          {modelOptions.map((model, index) => {
-            const intro = MODEL_INTRO_MAP[model];
-            if (!intro) return <></>;
-            return (
-              <div
-                className={classNames(
-                  'dds-annotator-model-selector-modal-option',
-                  {
-                    'dds-annotator-model-selector-modal-option-hightlight':
-                      intro.hightlight,
-                  },
-                )}
-                onClick={() => onSelectModel(model)}
-                key={index}
-              >
-                <Icon
-                  className="dds-annotator-model-selector-modal-option-icon"
-                  component={intro.icon}
-                />
-                <div className="dds-annotator-model-selector-modal-option-name">
-                  {localeText(intro.name)}
+      <FloatWrapper>
+        <Modal
+          open={autoOpen}
+          title={localeText('DDSAnnotator.smart.modelSelectModal.title')}
+          width={modalWidth}
+          onCancel={onCloseModal}
+          footer={null}
+          centered
+          destroyOnClose
+        >
+          <div className="dds-annotator-model-selector-modal">
+            {modelOptions.map((model, index) => {
+              const intro = MODEL_INTRO_MAP[model];
+              if (!intro) return <></>;
+              return (
+                <div
+                  className={classNames(
+                    'dds-annotator-model-selector-modal-option',
+                    {
+                      'dds-annotator-model-selector-modal-option-hightlight':
+                        intro.hightlight,
+                    },
+                  )}
+                  onClick={() => onSelectModel(model)}
+                  key={index}
+                >
+                  <Icon
+                    className="dds-annotator-model-selector-modal-option-icon"
+                    component={intro.icon}
+                  />
+                  <div className="dds-annotator-model-selector-modal-option-name">
+                    {localeText(intro.name)}
+                  </div>
+                  <div className="dds-annotator-model-selector-modal-option-description">
+                    {localeText(intro.description)}
+                  </div>
+                  {intro.hightlight && (
+                    <Tag
+                      color="geekblue"
+                      className="dds-annotator-model-selector-modal-option-tag"
+                    >
+                      {'New'}
+                    </Tag>
+                  )}
                 </div>
-                <div className="dds-annotator-model-selector-modal-option-description">
-                  {localeText(intro.description)}
-                </div>
-                {intro.hightlight && (
-                  <Tag
-                    color="geekblue"
-                    className="dds-annotator-model-selector-modal-option-tag"
-                  >
-                    {'New'}
-                  </Tag>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </Modal>
+              );
+            })}
+          </div>
+        </Modal>
+      </FloatWrapper>
     );
   },
 );

packages/components/src/Annotator/components/SmartAnnotationControl/index.tsx

@@ -1,9 +1,9 @@
 import { CloseOutlined } from '@ant-design/icons';
 import Icon from '@ant-design/icons/lib/components/Icon';
-import { Button, Card, Select, Slider, Space } from 'antd';
+import { Button, Card, Input, Slider, Space } from 'antd';
 import classNames from 'classnames';
 import { useLocale } from 'dds-utils/locale';
-import { useMemo, memo, useState } from 'react';
+import { useMemo, memo } from 'react';
 import { useImmer } from 'use-immer';
 
 import { ReactComponent as DragToolIcon } from '../../assets/drag.svg';
@@ -19,8 +19,7 @@ import {
   EToolType,
   EnumModelType,
 } from '../../constants';
-import { OnAiAnnotationFunc } from '../../hooks/useActions';
-import { Category } from '../../type';
+import { OnAiAnnotationFunc } from '../../hooks/useAiModels';
 import { FloatWrapper } from '../FloatWrapper';
 
 import './index.less';
@@ -36,7 +35,6 @@ interface IProps {
   naturalSize: ISize;
   aiLabels?: string;
   limitConf: number;
-  categories: Category[];
   setAiLabels: (labels?: string) => void;
   forceChangeTool: (tool: EBasicToolItem, subtool: ESubToolItem) => void;
   onExitAIAnnotation: () => void;
@@ -56,7 +54,6 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
     isBatchEditing,
     isCtrlPressed,
     aiLabels,
-    categories,
     naturalSize,
     limitConf,
     setAiLabels,
@@ -69,7 +66,6 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
     forceChangeTool,
   }) => {
     const { localeText } = useLocale();
-    const [inputText, setInputText] = useState('');
 
     /** Parameters for requesting segmemt everything API */
     const [samParams, setSamParams] = useImmer({
@@ -109,29 +105,6 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
       },
     };
 
-    const labelOptions = useMemo(() => {
-      if (selectedTool === EBasicToolItem.Rectangle) {
-        let options = categories?.map((c) => c.name);
-        options =
-          inputText && !options.includes(inputText)
-            ? [inputText, ...options]
-            : options;
-        return options.map((text) => (
-          <Select.Option key={text} value={text}>
-            {text}
-          </Select.Option>
-        ));
-      } else if (selectedTool === EBasicToolItem.Polygon) {
-        return [];
-      } else if (selectedTool === EBasicToolItem.Skeleton) {
-        return ['person'].map((label) => (
-          <Select.Option key={label} value={label}>
-            {label}
-          </Select.Option>
-        ));
-      }
-    }, [selectedTool, categories, inputText]);
-
     const mouseEventHandler = (event: React.MouseEvent) => {
       if (
         event.type === 'mouseup' &&
@@ -183,11 +156,6 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
       isCtrlPressed,
     ]);
 
-    const onApplyCurrMaskObjs = () => {
-      onAcceptValidObjects();
-      forceChangeTool(EBasicToolItem.Drag, ESubToolItem.PenAdd);
-    };
-
     const aiDetectionTip = useMemo(() => {
       if (
         selectedTool === EBasicToolItem.Rectangle &&
@@ -296,27 +264,16 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
                 </div>
               ) : (
                 <div className="dds-annotator-smart-container-content-item">
-                  <Select
+                  <Input
                     style={{ width: 250 }}
                     placeholder={localeText(
                       'DDSAnnotator.smart.detection.input',
                     )}
-                    showSearch
                     value={aiLabels}
-                    onChange={(value) => setAiLabels(value)}
-                    onSearch={(value) => setInputText(value)}
-                    onInputKeyDown={(e) => {
-                      if (e.code !== 'Enter') {
-                        e.stopPropagation();
-                      }
-                    }}
-                    // @ts-ignore
-                    getPopupContainer={() =>
-                      document.getElementById('smart-annotation-editor')
-                    }
-                  >
-                    {labelOptions}
-                  </Select>
+                    onChange={(e) => setAiLabels(e.target.value)}
+                    onKeyUp={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => event.stopPropagation()}
+                  />
                   <Button
                     type="primary"
                     onClick={() => onAiAnnotation({ aiLabels })}
@@ -386,7 +343,7 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
                 </>
               ) : (
                 <>
-                  <div className="dds-annotator-smart-container-content-param-controls">
+                  {/* <div className="dds-annotator-smart-container-content-param-controls">
                     <div className="dds-annotator-smart-container-content-param-item">
                       <div className="dds-annotator-smart-container-content-param-item-title">
                         {localeText('DDSAnnotator.smart.modelTyle')}
@@ -413,7 +370,7 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
                         {labelOptions}
                       </Select>
                     </div>
-                  </div>
+                  </div> */}
                   <Button
                     style={{ alignSelf: 'flex-end' }}
                     type="primary"
@@ -494,7 +451,16 @@ const SmartAnnotationControl: React.FC<IProps> = memo(
                       >
                         {localeText('DDSAnnotator.smart.retry')}
                       </Button>
-                      <Button type="primary" onClick={onApplyCurrMaskObjs}>
+                      <Button
+                        type="primary"
+                        onClick={() => {
+                          onAcceptValidObjects();
+                          forceChangeTool(
+                            EBasicToolItem.Mask,
+                            ESubToolItem.AutoEdgeStitching,
+                          );
+                        }}
+                      >
                         {localeText('DDSAnnotator.annotsEditor.finish')}
                       </Button>
                     </Space>

packages/components/src/Annotator/editor.tsx

@@ -16,6 +16,7 @@ import SmartAnnotationControl from './components/SmartAnnotationControl';
 import { TopPagination } from './components/TopPagination';
 import { DisplayOption, EBasicToolItem, TOOL_MODELS_MAP } from './constants';
 import useActions from './hooks/useActions';
+import useAiModels from './hooks/useAiModels';
 import useAttributes from './hooks/useAttributes';
 import useCanvasContainer from './hooks/useCanvasContainer';
 import useCanvasRender from './hooks/useCanvasRender';
@@ -268,8 +269,19 @@ const Edit: React.FC<EditProps> = (props) => {
     updateAllObjectWithoutHistory,
   });
 
+  const { onAiAnnotation } = useAiModels({
+    currImageItem,
+    drawData,
+    setDrawData,
+    setDrawDataWithHistory,
+    editState,
+    setEditState,
+    naturalSize,
+    clientSize,
+    getAnnotColor,
+  });
+
   const {
-    onAiAnnotation,
     onSaveAnnotations,
     onCommitAnnotations,
     onCancelAnnotations,
@@ -281,16 +293,9 @@ const Edit: React.FC<EditProps> = (props) => {
     currImageItem,
     modal,
     drawData,
-    setDrawData,
-    setDrawDataWithHistory,
     editState,
     setEditState,
-    naturalSize,
-    clientSize,
-    imagePos,
-    containerMouse,
     hadChangeRecord,
-    getAnnotColor,
     categories,
     translateObject,
     flagSaved,
@@ -623,7 +628,6 @@ const Edit: React.FC<EditProps> = (props) => {
             limitConf={drawData.limitConf}
             aiLabels={aiLabels}
             naturalSize={naturalSize}
-            categories={categories}
             setAiLabels={setAiLabels}
             forceChangeTool={forceChangeTool}
             onAiAnnotation={onAiAnnotation}