ci4sManagement-cloud/react-ui/src/pages/Dataset/components/ResourceIntro/index.tsx

import BasicTableInfo, { BasicInfoData } from '@/components/BasicTableInfo';
import KFMdEditor from '@/components/KFMdEditor';
import SubAreaTitle from '@/components/SubAreaTitle';
import {
  bigDataMarkStatusOptions,
  bigDataPatternOptions_learning,
  bigDataPatternOptions_pretraining,
  bigDataPatternOptions_rewardmodel,
  bigDataPatternOptions_sft,
  bigDataPremarkOptions,
  bigDataTypeOptions,
  bigMarkToolOptions,
  bigQuestionTypeOptions,
} from '@/enums';
import {
  BigDatasetVersionInfo,
  DatasetData,
  ModelData,
  ResourceType,
  resourceConfig,
} from '@/pages/Dataset/config';
import { getBigDatasetMarkListReq } from '@/services/bigModel';
import {
  EnumOptions,
  formatCodeConfig,
  formatDatasets,
  formatEnum,
  formatSource,
  formatTrainTask,
} from '@/utils/format';
import { to } from '@/utils/promise';
import classNames from 'classnames';
import { useEffect, useMemo, useState } from 'react';
import styles from './index.less';

type ResourceIntroProps = {
  resourceType: ResourceType;
  info: DatasetData | ModelData;
  gitId: number;
  identifier: string;
  name: string;
  description?: string;
  isBigModel: boolean;
  isMine: boolean;
  version?: string;
  onEditIntro?: (id: number, identifier: string, description: string) => void;
};

const getDatasetDatas = (
  isBigModel: boolean,
  data: DatasetData,
  markSevices: EnumOptions[],
): BasicInfoData[] => {
  const arr: BasicInfoData[] = [
    // {
    //   label: '数据集名称',
    //   value: name,
    // },
    {
      label: '数据集版本',
      value: data.version,
    },
    {
      label: '创建人',
      value: data.create_by,
    },
    {
      label: '更新时间',
      value: data.update_time,
    },
    {
      label: '数据来源',
      value: data.dataset_source,
      format: formatSource,
    },
  ];
  if (isBigModel) {
    const bigData = data as any as BigDatasetVersionInfo;
    arr.push(
      {
        label: '数据用途',
        value: bigData.dataType,
        format: formatEnum(bigDataTypeOptions),
      },
      {
        label: '数据样式',
        value: bigData.pattern,
        format: formatEnum([
          ...bigDataPatternOptions_sft,
          ...bigDataPatternOptions_rewardmodel,
          ...bigDataPatternOptions_learning,
          ...bigDataPatternOptions_pretraining,
        ]),
      },
      {
        label: '题型',
        value: bigData.questionType,
        format: formatEnum(bigQuestionTypeOptions),
      },
      {
        label: '标注工具',
        value: bigData.markToolId,
        format: formatEnum(bigMarkToolOptions),
      },
      {
        label: '是否启用预标',
        value: bigData.premarkStatus,
        format: formatEnum(bigDataPremarkOptions),
      },
      {
        label: '预标服务',
        value: bigData.serviceId,
        format: formatEnum(markSevices),
      },
      {
        label: '标注状态',
        value: bigData.markStatus,
        format: formatEnum(bigDataMarkStatusOptions),
      },
      {
        label: '提示',
        value: bigData.prompt,
      },
    );
  } else {
    arr.push(
      {
        label: '训练任务',
        value: data.train_task,
        format: formatTrainTask,
      },
      {
        label: '处理代码',
        value: data.processing_code,
        format: formatCodeConfig,
      },
    );
  }
  arr.push({
    label: '版本描述',
    value: data.version_desc,
  });
  return arr;
};

const getModelDatas = (isBigModel: boolean, data: ModelData): BasicInfoData[] => {
  const arr: BasicInfoData[] = [
    // {
    //   label: '模型名称',
    //   value: name,
    //   ellipsis: true,
    // },
    {
      label: '模型版本',
      value: data.version,
      ellipsis: true,
    },
    {
      label: '创建人',
      value: data.create_by,
      ellipsis: true,
    },
    {
      label: '更新时间',
      value: data.update_time,
      ellipsis: true,
    },
    {
      label: '模型来源',
      value: data.model_source,
      format: formatSource,
      ellipsis: true,
    },
  ];

  if (!isBigModel) {
    arr.push(
      {
        label: '训练镜像',
        value: data.image,
        ellipsis: true,
      },
      {
        label: '训练代码',
        value: data.project_depency,
        format: formatCodeConfig,
        ellipsis: true,
      },
      {
        label: '训练数据集',
        value: data.train_datasets,
        format: formatDatasets,
        ellipsis: true,
      },
      {
        label: '测试数据集',
        value: data.test_datasets,
        format: formatDatasets,
        ellipsis: true,
      },
      {
        label: '训练任务',
        value: data.train_task,
        format: formatTrainTask,
        ellipsis: true,
      },
    );
  }

  // if (isBigModel) {
  //   const bigData = data as any as BigModelVersionInfo;
  //   arr.push(
  //     {
  //       label: '虚拟任务名称',
  //       value: bigData.taskType,
  //     },
  //     {
  //       label: '训练类型',
  //       value: bigData.modelType,
  //     },
  //     {
  //       label: '基础模型',
  //       value: bigData.baseModel,
  //     },
  //     {
  //       label: 'cpu架构',
  //       value: bigData.systemStructure,
  //     },
  //     {
  //       label: '加速卡',
  //       value: bigData.acceleratorCard,
  //     },
  //   );
  // }
  arr.push({
    label: '版本描述',
    value: data.version_desc,
  });
  return arr;
};

function ResourceIntro({
  resourceType,
  info,
  gitId,
  identifier,
  // name,
  description,
  isBigModel,
  isMine,
  version,
  onEditIntro,
}: ResourceIntroProps) {
  const [markSevices, setMarkServices] = useState([]);
  const config = resourceConfig[resourceType];
  const basicDatas: BasicInfoData[] = useMemo(() => {
    return resourceType === ResourceType.Dataset
      ? getDatasetDatas(isBigModel, info as DatasetData, markSevices)
      : getModelDatas(isBigModel, info as ModelData);
  }, [resourceType, isBigModel, info, markSevices]);

  useEffect(() => {
    const getBigDatasetMarkList = async () => {
      const [res] = await to(getBigDatasetMarkListReq());
      if (res && res.data && Array.isArray(res.data)) {
        setMarkServices(
          res.data.map((v: any) => ({
            label: v.name,
            value: v.id,
          })),
        );
      }
    };
    if (isBigModel && resourceType === ResourceType.Dataset) {
      getBigDatasetMarkList();
    }
  }, [isBigModel, resourceType]);

  return (
    <div
      className={classNames(styles['resource-intro'], {
        [styles['resource-intro--no-version']]: !version,
      })}
    >
      {version && (
        <div style={{ flex: 'none' }}>
          <SubAreaTitle
            title="版本信息"
            image={require('@/assets/img/dataset-basic.png')}
            style={{ marginBottom: '20px' }}
          ></SubAreaTitle>
          <div>
            <BasicTableInfo datas={basicDatas} labelWidth={135}></BasicTableInfo>
          </div>
          {/* <div className={styles['resource-intro__title']}>{`${config.name}描述`}</div>
        <div className={styles['resource-intro__desc']}>{description ?? '暂无描述'}</div>
        <div className={styles['resource-intro__title']}>版本描述</div>
        <div className={styles['resource-intro__desc']}>{info.version_desc ?? '暂无描述'}</div>
        <SubAreaTitle
          title="实例用法"
          image={require('@/assets/img/usage-icon.png')}
          style={{ margin: '25px 0 15px' }}
        ></SubAreaTitle>
        <div
          dangerouslySetInnerHTML={{ __html: info.usage ?? '暂无实例用法' }}
        ></div> */}
          <SubAreaTitle
            title={`${config.name}介绍`}
            image={require('@/assets/img/dataset-intro.png')}
            style={{ marginBottom: '20px', marginTop: '30px' }}
          ></SubAreaTitle>
        </div>
      )}
      {isBigModel ? (
        <div className={styles['resource-intro__desc']}>{description ?? '暂无介绍'}</div>
      ) : (
        <KFMdEditor
          className={styles['resource-intro__editor']}
          canEdit={isMine}
          defaultValue={description}
          noDataTitle={isMine ? `请编辑${config.name}介绍` : `暂无${config.name}介绍`}
          placeholder="请输入"
          editBtnTitle="编辑简介"
          onChange={(value) => onEditIntro?.(gitId, identifier, value)}
        ></KFMdEditor>
      )}
    </div>
  );
}

export default ResourceIntro;