Merge pull request #571 from lihqi/lhq-dev-mutiLLM

fix(lb-components): Add LLM MultiWheel textControl
open-mmlab · Sep 27, 2024 · f82cfca · f82cfca
2 parents 2bff7f3 + 4828abc
commit f82cfca
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 31 deletions.
diff --git a/packages/lb-components/src/components/LLMMultiWheelView/dialogView/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/dialogView/index.tsx
@@ -4,10 +4,8 @@ import ImgView from '@/components/LLMToolView/questionView/components/imgView';
 import { ILLMMultiWheelToolConfig } from '@/components/LLMToolView/types';
 import useLLMMultiWheelStore from '@/store/LLMMultiWheel';
 import { classnames } from '@/utils';
-import { LLMMultiWheelViewCls } from '@/views/MainView/LLMMultiWheelLayout';
 import { Button } from 'antd';
-import React, { useContext, useEffect, useState } from 'react';
-// import { LLMMultiWheelViewCls } from '..';
+import React from 'react';
 
 interface IDialogViewProps {
   id: number | string;
@@ -64,15 +62,17 @@ const DialogView = (props: IDialogViewProps) => {
       </div>
       <div className={`dialog-answer`}>
         {answerList.map((item: any, index: number) => {
-          const isTextControl = getTextControlByConfig(item, LLMConfig);
+          const order = index + 1;
+          const answer = { ...item, order };
+          const isTextControl = getTextControlByConfig(answer, LLMConfig);
           return (
             <div key={index}>
-              <Button type='primary'>答案{index + 1}</Button>
+              <Button type='primary'>答案{order}</Button>
               {answerIsImg ? (
                 <ImgView answerList={answerList} />
               ) : (
                 <RenderAnswer
-                  i={item}
+                  i={answer}
                   isTextControl={isTextControl}
                   dataFormatType={dataFormatType}
                 />

diff --git a/packages/lb-components/src/components/LLMMultiWheelView/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/index.tsx
@@ -68,8 +68,8 @@ const LLMMultiWheelView: React.FC<IProps> = (props) => {
   const { annotation, tips, showTips, drawLayerSlot } = props;
   const { imgIndex, imgList, stepList, step, toolInstance } = annotation;
   const [LLMConfig, setLLMConfig] = useState<ILLMMultiWheelToolConfig>();
-  const { setSelectedID } = useLLMMultiWheelStore();
-  const [dialogList, setDialogList] = useState([]);
+  const { setSelectedID, newAnswerListMap } = useLLMMultiWheelStore();
+  const [dialogList, setDialogList] = useState<any[]>([]);
   const questionIsImg = LLMConfig?.dataType?.prompt === ELLMDataType.Picture;
   const answerIsImg = LLMConfig?.dataType?.response === ELLMDataType.Picture;
   const { t } = useTranslation();
@@ -88,6 +88,22 @@ const LLMMultiWheelView: React.FC<IProps> = (props) => {
     }
   }, [imgIndex]);
 
+  useEffect(() => {
+    const newDialogList = dialogList.map((item: any) => {
+      return {
+        ...item,
+        answerList: item?.answerList?.map((answer: any) => {
+          const mapId = `${item?.id ?? ''}-${answer?.id ?? ''}`;
+          return {
+            ...answer,
+            newAnswer: newAnswerListMap[mapId] ?? answer.answer,
+          };
+        }),
+      };
+    });
+    setDialogList(newDialogList);
+  }, [newAnswerListMap]);
+
   useEffect(() => {
     if (stepList && step) {
       const LLMStepConfig = getStepConfig(stepList, step)?.config;

diff --git a/packages/lb-components/src/components/LLMMultiWheelView/sidebar/index.tsx b/packages/lb-components/src/components/LLMMultiWheelView/sidebar/index.tsx
@@ -54,7 +54,7 @@ interface IProps {
 interface ILLMAnnotationResultMap {
   [id: string | number]: IAnnotationResult & {
     id: string | number;
-    order: string;
+    order: string | number;
   };
 }
 
@@ -80,14 +80,14 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
   const { toolInstanceRef } = useCustomToolInstance({ basicInfo });
   const [valid, setValid] = useState(true);
   const [annotationResultMap, setAnnotationResultMap] = useState<ILLMAnnotationResultMap>({});
-  const { selectedID } = useLLMMultiWheelStore();
   const [globalResult, setGlobalResult] = useState<IGlobalResult>(initGlobalResult);
   const answerSortRef = useRef<any>();
   const sortRef = useRef<any>();
   const [sortData, setSortData] = useState<{
     newSort?: IAnswerSort[][];
     waitSorts?: IWaitAnswerSort[];
   }>({});
+  const { selectedID, setNewAnswerListMap, newAnswerListMap } = useLLMMultiWheelStore();
 
   const currentLLMAnnotationResult = useMemo(() => {
     return annotationResultMap[selectedID];
@@ -139,7 +139,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
     return getCurrentResultFromResultList(currentData?.result, currentStepInfo.step);
   };
 
-  const initResult = (initData?: any) => {
+  const initResult = useMemoizedFn((initData?: any) => {
     const result: any = getCurrentResult();
 
     let sourceData = currentData?.questionList?.textList;
@@ -159,15 +159,19 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
       const data = getRenderDataByResult(LLMConfig, {
         ...item,
         answerList: item?.answerList?.map((answer: any, index: number) => {
+          setNewAnswerListMap({
+            ...newAnswerListMap,
+            [`${item.id}-${answer.id}`]: answer.answer,
+          });
           return {
             ...answer,
-            order: `${index + 1}`,
+            order: index + 1,
           };
         }),
       });
       tmpMap[item.id] = {
         ...data,
-        order: `${modelIndex + 1}`,
+        order: modelIndex + 1,
         id: item.id,
       };
     });
@@ -183,7 +187,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
       answerSort: result?.answerSort ?? [],
     });
     setAnnotationResultMap(tmpMap);
-  };
+  });
 
   useEffect(() => {
     setExportData();
@@ -232,6 +236,10 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
       if (i?.order === order) {
         // text edit
         if (key === 'textEdit' && isString(value)) {
+          setNewAnswerListMap({
+            ...newAnswerListMap,
+            [`${selectedID}-${i?.id ?? ''}`]: value,
+          });
           return { ...i, newAnswer: value };
         }
         if (isNumber(value)) {
@@ -284,7 +292,7 @@ const LLMMultiWheelToolSidebar = (props: IProps) => {
       currentData?.questionList?.textList?.map((item: any, index: number) => {
         return {
           ...item,
-          title: `${index + 1}`,
+          title: index + 1,
         };
       }) ?? []
     );

diff --git a/packages/lb-components/src/components/LLMToolView/types.ts b/packages/lb-components/src/components/LLMToolView/types.ts
@@ -22,6 +22,7 @@ export interface IAnswerList {
   newAnswer?: string;
   url?: string; // used to display picture
   tagList?: ISelectedTags;
+  id?: string | number;
 }
 
 export interface IModelAPIAnswer {

diff --git a/packages/lb-components/src/store/LLMMultiWheel/index.ts b/packages/lb-components/src/store/LLMMultiWheel/index.ts
@@ -1,34 +1,27 @@
 import { EDataFormatType } from '@/constant';
 import { create } from 'zustand';
 import React from 'react';
+
+interface INewAnswerListMap {
+  [key: string]: string;
+}
+
 interface Store {
   dataFormatType: EDataFormatType;
   setDataFormatType: (dataFormatType: EDataFormatType) => void;
   selectedID: React.Key;
   setSelectedID: (selectedID: React.Key) => void;
-  highlightIDs: number[];
-  setHighlightIDs: (highlightIDs: number[]) => void;
-  selectedIDs: string[];
-  setSelectedIDs: (selectedIDs: string[]) => void;
-  rectRotateSensitivity: number;
-  setRectRotateSensitivity: (sensitivity: number) => void;
+  newAnswerListMap: INewAnswerListMap;
+  setNewAnswerListMap: (newAnswerListMap: INewAnswerListMap) => void;
 }
 
 const useLLMMultiWheelStore = create<Store>((set) => ({
   dataFormatType: EDataFormatType.Default,
   setDataFormatType: (dataFormatType) => set((state) => ({ dataFormatType })),
   selectedID: '',
   setSelectedID: (selectedID) => set((state) => ({ selectedID })),
-  highlightIDs: [],
-  setHighlightIDs: (highlightIDs) => set((state) => ({ highlightIDs })),
-  selectedIDs: [],
-  setSelectedIDs: (selectedIDs) =>
-    set((state) => {
-      return { selectedIDs };
-    }),
-  rectRotateSensitivity: 2,
-  setRectRotateSensitivity: (sensitivity) =>
-    set((state) => ({ rectRotateSensitivity: sensitivity })),
+  newAnswerListMap: {},
+  setNewAnswerListMap: (newAnswerListMap) => set((state) => ({ newAnswerListMap })),
 }));
 
 export default useLLMMultiWheelStore;