LLM tool

packages/lb-annotation/src/constant/tool.ts

@@ -62,6 +62,8 @@ export enum EToolName {
   Cuboid = 'cuboidTool',
   /** 点云多边形工具 */
   PointCloudPolygon = 'pointCloudPolygon',
+  /** LLM标注工具 */
+  LLM = 'LLMTool',
 }
 
 export enum ECheckModel {
@@ -99,6 +101,7 @@ export const TOOL_NAME: { [a: string]: string } = {
   [EVideoToolName.VideoClipTool]: '视频截取',
   [EPointCloudName.PointCloud]: '点云',
   [EToolName.Cuboid]: '立体框',
+  [EToolName.LLM]: 'LLM标注',
 };
 
 export const TOOL_NAME_EN: { [a: string]: string } = {
@@ -123,6 +126,7 @@ export const TOOL_NAME_EN: { [a: string]: string } = {
   [EVideoToolName.VideoClipTool]: 'VideoClipTool',
   [EPointCloudName.PointCloud]: 'PointCloud',
   [EToolName.Cuboid]: 'Cuboid',
+  [EToolName.LLM]: 'LLM',
 };
 
 export enum EDependPattern {

packages/lb-components/src/components/LLMToolView/index.tsx

@@ -0,0 +1,82 @@
+/*
+ * @file LLM tool view
+ * @Author: lixinghua [email protected]
+ * @Date: 2023-04-10
+ */
+
+import React, { useContext, useEffect, useState } from 'react';
+import { AppState } from '@/store';
+import { connect } from 'react-redux';
+import { LabelBeeContext } from '@/store/ctx';
+import { message } from 'antd';
+import { prefix } from '@/constant';
+import { LLMContext } from '@/views/MainView';
+import { Layout } from 'antd/es';
+import LLMSidebar from '@/components/LLMToolView/sidebar';
+import { getStepConfig } from '@/store/annotation/reducer';
+import QuestionView from './questionView';
+import { useTranslation } from 'react-i18next';
+import { IAnswerList } from './types';
+
+interface IProps {
+  checkMode?: boolean;
+  annotation?: any;
+  setHoverKey: (value: number) => void;
+}
+const { Sider } = Layout;
+const LLMViewCls = `${prefix}-LLMView`;
+const layoutCls = `${prefix}-layout`;
+const LLMToolView: React.FC<IProps> = (props) => {
+  const { annotation, setHoverKey, checkMode } = props;
+  const { imgIndex, imgList, stepList, step } = annotation;
+  const { hoverKey } = useContext(LLMContext);
+  const [answerList, setAnswerList] = useState<IAnswerList[]>([]);
+  const [question, setQuestion] = useState<string>('');
+  const LLMStepConfig = getStepConfig(stepList, step)?.config;
+  const { t } = useTranslation();
+  useEffect(() => {
+    let interval: undefined | ReturnType<typeof setInterval>;
+
+    if (!checkMode) {
+      interval = setInterval(() => {
+        message.info(t('EfficientListening'));
+      }, 1000 * 60);
+
+      return () => {
+        if (interval) {
+          clearInterval(interval);
+        }
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!imgList[imgIndex]) {
+      return;
+    }
+
+    const qaData = imgList[imgIndex]?.questionList;
+
+    setQuestion(qaData?.question);
+    setAnswerList(qaData?.answerList || []);
+  }, [imgIndex]);
+
+  return (
+    <Layout className={LLMViewCls}>
+      <QuestionView hoverKey={hoverKey} question={question} answerList={answerList} />
+      {LLMStepConfig && LLMStepConfig !== '{}' && (
+        <Sider className={`${layoutCls}__side`} width={600}>
+          <LLMSidebar setHoverKey={setHoverKey} checkMode={checkMode} />
+        </Sider>
+      )}
+    </Layout>
+  );
+};
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    annotation: state.annotation,
+  };
+};
+
+export default connect(mapStateToProps, null, null, { context: LabelBeeContext })(LLMToolView);

packages/lb-components/src/components/LLMToolView/questionView/index.tsx

@@ -0,0 +1,78 @@
+/*
+ * @file Question view
+ * @Author: lixinghua [email protected]
+ * @Date: 2023-04-10
+ */
+
+import React, { useEffect } from 'react';
+import { Tag } from 'antd';
+import LongText from '@/components/longText';
+import { prefix } from '@/constant';
+import classNames from 'classnames';
+import { useTranslation, I18nextProvider } from 'react-i18next';
+import { IAnswerList } from '@/components/LLMToolView/types';
+import { i18n } from '@labelbee/lb-utils';
+
+interface IProps {
+  hoverKey?: number;
+  question: any;
+  answerList: IAnswerList[];
+  lang?: string;
+}
+const LLMViewCls = `${prefix}-LLMView`;
+const QuestionView: React.FC<IProps> = (props) => {
+  const { hoverKey, question, answerList, lang } = props;
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (lang) {
+      i18n?.changeLanguage(lang);
+    }
+  }, []);
+
+  return (
+    <div className={LLMViewCls}>
+      <div className={`${LLMViewCls}__textBox`} style={{ borderBottom: '1px solid #EBEBEB' }}>
+        <div className={`${LLMViewCls}__title`}>{t('Title')}</div>
+        <div className={`${LLMViewCls}__content`}>
+          <LongText wordCount={200} text={question} />
+        </div>
+      </div>
+      <div className={`${LLMViewCls}__textBox`}>
+        <div className={`${LLMViewCls}__title`}>{t('Answer')}</div>
+        {answerList.map((i: IAnswerList, index: number) => (
+          <div
+            className={classNames({
+              [`${LLMViewCls}__content`]: true,
+              [`${LLMViewCls}__contentActive`]: hoverKey === i?.order,
+            })}
+            key={index}
+          >
+            <Tag
+              style={{
+                color: '#666FFF',
+                background: '#eeefff',
+                height: '20px',
+                padding: '0px 8px',
+                border: 'none',
+              }}
+            >
+              {i?.order}
+            </Tag>
+            <LongText wordCount={1000} text={i?.answer} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const WrapQuestionView = (props: IProps) => {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <QuestionView {...props} />
+    </I18nextProvider>
+  );
+};
+
+export default WrapQuestionView;