IDEA-Research · cefeng06 · Apr 9, 2024 · Apr 9, 2024 · Apr 9, 2024 · Apr 9, 2024
diff --git a/deepdataspace/server/static/index.html b/deepdataspace/server/static/index.html
@@ -5,10 +5,10 @@
 <meta name="description" content="cvr">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <link rel="shortcut icon" href="/static/favicon.png">
-<link rel="stylesheet" href="/static/umi.99ffc894.css">
+<link rel="stylesheet" href="/static/umi.e762716e.css">
 </head>
 <body>
 <div id="root"></div>
-<script src="/static/umi.d5355c89.js"></script>
+<script src="/static/umi.d97b8209.js"></script>
 
 </body></html>
diff --git a/deepdataspace/server/static/p__Annotator__index.1fc40bde.async.js b/deepdataspace/server/static/p__Annotator__index.1fc40bde.async.js
diff --git a/deepdataspace/server/static/p__Annotator__index.8750e2fd.async.js b/deepdataspace/server/static/p__Annotator__index.8750e2fd.async.js
diff --git a/...tatic/p__Dataset__index.a1265ad5.async.js → ...tatic/p__Dataset__index.419888be.async.js b/...tatic/p__Dataset__index.a1265ad5.async.js → ...tatic/p__Dataset__index.419888be.async.js
diff --git a/...p__Lab__FlagTool__index.91ecbc6f.async.js → ...p__Lab__FlagTool__index.c0cac9b9.async.js b/...p__Lab__FlagTool__index.91ecbc6f.async.js → ...p__Lab__FlagTool__index.c0cac9b9.async.js
diff --git a/...oject__Workspace__index.afc69f7b.async.js → ...oject__Workspace__index.2c2baf46.async.js b/...oject__Workspace__index.afc69f7b.async.js → ...oject__Workspace__index.2c2baf46.async.js
diff --git a/deepdataspace/server/static/umi.d5355c89.js → deepdataspace/server/static/umi.d97b8209.js b/deepdataspace/server/static/umi.d5355c89.js → deepdataspace/server/static/umi.d97b8209.js
diff --git a/deepdataspace/server/static/umi.99ffc894.css → deepdataspace/server/static/umi.e762716e.css b/deepdataspace/server/static/umi.99ffc894.css → deepdataspace/server/static/umi.e762716e.css
diff --git a/deepdataspace/server/templates/index.html b/deepdataspace/server/templates/index.html
@@ -5,10 +5,10 @@
 <meta name="description" content="cvr">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 <link rel="shortcut icon" href="/static/favicon.png">
-<link rel="stylesheet" href="/static/umi.99ffc894.css">
+<link rel="stylesheet" href="/static/umi.e762716e.css">
 </head>
 <body>
 <div id="root"></div>
-<script src="/static/umi.d5355c89.js"></script>
+<script src="/static/umi.d97b8209.js"></script>
 
 </body></html>
diff --git a/packages/app/src/locales/en-US.ts b/packages/app/src/locales/en-US.ts
@@ -102,6 +102,8 @@ const localeTexts = {
   'dataset.detail.pagination': 'Pagination',
   'dataset.detail.random': 'Random',
   'dataset.detail.randomQuery': 'Random',
+  'dataset.detail.showGrounding': 'Show Grounding',
+  'dataset.detail.hideGrounding': 'Hide Grounding',
 
   'dataset.toAnalysis.unSupportWarn':
     'You should have a prediction label set with detection annotaion first',

diff --git a/packages/app/src/locales/zh-CN.ts b/packages/app/src/locales/zh-CN.ts
@@ -100,6 +100,8 @@ const localeTexts = {
   'dataset.toAnalysis.unSelectWarn': '请选择一个预标注集',
   'dataset.onClickCopyLink.success': '复制链接成功!',
   'dataset.detail.overlay': '覆盖',
+  'dataset.detail.showGrounding': '展示 Grounding',
+  'dataset.detail.hideGrounding': '隐藏 Grounding',
 
   'dataset.filter.newDataset': '新建数据集',
   'dataset.filter.public': '公共',

diff --git a/packages/components/src/Annotator/components/HighlightText/index.less b/packages/components/src/Annotator/components/HighlightText/index.less
@@ -0,0 +1,5 @@
+.dds-annotator-highlight-text .ant-tag {
+	margin-inline-end: 0px !important;
+  font-size: 14px;
+  cursor: pointer;
+}
diff --git a/packages/components/src/Annotator/components/HighlightText/index.tsx b/packages/components/src/Annotator/components/HighlightText/index.tsx
@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { escapeRegExp } from 'lodash';
+import { Tag } from 'antd';
+
+import './index.less';
+
+interface IHighlight {
+  text: string;
+  color: string;
+}
+
+interface IProps {
+  text: string;
+  highlights: IHighlight[];
+  onHoverHighlightWord: (text: string) => void;
+  onLeaveHighlightWord: () => void;
+}
+
+const HighlightText: React.FC<IProps> = ({
+  text,
+  highlights,
+  onHoverHighlightWord,
+  onLeaveHighlightWord,
+}) => {
+
+  const segments = useMemo(() => {
+    const computedSegments: React.ReactNode[] = [];
+    const pattern = new RegExp(
+      highlights.map(h => `\\b(${escapeRegExp(h.text)})\\b`).join('|'),
+      'g'
+    );
+
+    const matches = Array.from(text.matchAll(pattern));
+    let lastIndex = 0;
+
+    matches.forEach(match => {
+      const matchText = match[0];
+      const index = match.index ?? 0;
+
+      if (index > lastIndex) {
+        computedSegments.push(text.substring(lastIndex, index));
+      }
+
+      const highlightConfig = highlights.find(h => h.text === matchText);
+
+      if (highlightConfig) {
+        computedSegments.push(
+          <Tag
+            key={`${index}-${matchText}`}
+            color={highlightConfig.color}
+            bordered={false}
+            onMouseEnter={() => onHoverHighlightWord(matchText)}
+            onMouseLeave={onLeaveHighlightWord}
+          >
+            {matchText}
+          </Tag>
+        );
+      }
+
+      lastIndex = index + matchText.length;
+    });
+
+    if (lastIndex < text.length) {
+      computedSegments.push(text.substring(lastIndex));
+    }
+
+    return computedSegments;
+  }, [text, highlights, onHoverHighlightWord, onLeaveHighlightWord]);
+
+  return <div className={'dds-annotator-highlight-text'}>{segments}</div>;
+};
+
+export default HighlightText;
diff --git a/packages/components/src/Annotator/hooks/useCanvasRender.tsx b/packages/components/src/Annotator/hooks/useCanvasRender.tsx
@@ -167,7 +167,7 @@ const useCanvasRender = ({
       } else if (
         theDrawData.selectedTool === EBasicToolItem.Rectangle &&
         theDrawData.selectedModel[theDrawData.selectedTool] ===
-          EnumModelType.IVP
+        EnumModelType.IVP
       ) {
         objectHooksMap[EObjectType.Rectangle].renderPrompt({
           prompt,
@@ -213,8 +213,8 @@ const useCanvasRender = ({
     const status = isFocus
       ? 'focus'
       : isJustCreated
-      ? 'justCreated'
-      : undefined;
+        ? 'justCreated'
+        : undefined;
     const styles = getObjectStyles(object, object.color, status);
 
     // Change globalAlpha when creating / editing object
@@ -315,6 +315,20 @@ const useCanvasRender = ({
         false,
       );
     }
+
+    // render highlight object when hover caption
+    if (!!drawData.highlightCategory) {
+      const highlights = theDrawData.objectList
+          .filter(obj => obj.labelId === drawData.highlightCategory!.id);
+
+      highlights.forEach((obj) => {
+        renderObject(
+          obj,
+          true,
+          false
+        );
+      });
+    }
   };
 
   const renderPopoverMenu = () => {
@@ -327,7 +341,7 @@ const useCanvasRender = ({
     ) {
       const target =
         drawData.objectList[editState.focusObjectIndex].keypoints?.points?.[
-          editState.focusEleIndex
+        editState.focusEleIndex
         ];
       if (target) {
         return (

diff --git a/packages/components/src/Annotator/index.less b/packages/components/src/Annotator/index.less
@@ -204,7 +204,7 @@
 
   .switch {
     position: absolute;
-    bottom: 40px;
+    top: 25px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -331,6 +331,18 @@
       transform: rotate(180deg);
     }
   }
+
+  .dds-annotator-grounding-preview {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    background: rgba(0, 0, 0, 0.45);
+    color: #fff;
+    width: 70%;
+    padding: 10px;
+    border-radius: 10px;
+  }
 }
 
 .dds-annotator-view {