ci4sManagement-cloud/react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx

import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
import { AutoMLTaskType, autoMLTaskTypeOptions } from '@/enums';
import { useComputingResource } from '@/hooks/useComputingResource';
import {
  classifierAlgorithms,
  FrameworkType,
  frameworkTypeOptions,
  queryStrategies,
  regressorAlgorithms,
} from '@/pages/ActiveLearn/components/CreateForm/utils';
import { ActiveLearnData } from '@/pages/ActiveLearn/types';
import { experimentStatusInfo } from '@/pages/Experiment/status';
import { type NodeStatus } from '@/types';
import { elapsedTime } from '@/utils/date';
import {
  formatBoolean,
  formatCodeConfig,
  formatDataset,
  formatDate,
  formatEnum,
  formatMirror,
  formatModel,
} from '@/utils/format';
import { Flex } from 'antd';
import classNames from 'classnames';
import { useMemo } from 'react';
import styles from './index.less';

type BasicInfoProps = {
  info?: ActiveLearnData;
  className?: string;
  isInstance?: boolean;
  runStatus?: NodeStatus;
};

function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfoProps) {
  const getResourceDescription = useComputingResource()[1];
  const basicDatas: BasicInfoData[] = useMemo(() => {
    if (!info) {
      return [];
    }

    return [
      {
        label: '实验名称',
        value: info.name,
      },
      {
        label: '实验描述',
        value: info.description,
      },
      {
        label: '创建人',
        value: info.create_by,
      },
      {
        label: '创建时间',
        value: info.create_time,
        format: formatDate,
      },
      {
        label: '更新时间',
        value: info.update_time,
        format: formatDate,
      },
    ];
  }, [info]);

  const configDatas: BasicInfoData[] = useMemo(() => {
    if (!info) {
      return [];
    }

    const modelInfo = [
      {
        label: '预训练模型',
        value: info.model,
        format: formatModel,
      },
      {
        label: '模型文件路径',
        value: info.model_py,
      },
      {
        label: '模型类名称',
        value: info.model_class_name,
      },
      {
        label: 'epochs',
        value: info.epochs,
      },
      {
        label: 'batch_size',
        value: info.batch_size,
      },
    ];

    const lossInfo = [
      {
        label: '学习率',
        value: info.lr,
      },
      {
        label: 'loss文件路径',
        value: info.loss_py,
      },
      {
        label: 'loss类名',
        value: info.loss_class_name,
      },
    ];

    const algorithmInfo = [
      {
        label: info.task_type === AutoMLTaskType.Regression ? '回归算法' : '分类算法',
        value:
          info.task_type === AutoMLTaskType.Regression ? info.regressor_alg : info.classifier_alg,
        format: formatEnum(
          info.task_type === AutoMLTaskType.Regression ? regressorAlgorithms : classifierAlgorithms,
        ),
      },
    ];

    const diffInfo =
      info.framework_type === FrameworkType.Pytorch
        ? [...modelInfo, ...lossInfo]
        : info.framework_type === FrameworkType.Keras
        ? modelInfo
        : algorithmInfo;

    return [
      {
        label: '任务类型',
        value: info.task_type,
        format: formatEnum(autoMLTaskTypeOptions),
      },
      {
        label: '代码配置',
        value: info.code_config,
        format: formatCodeConfig,
      },
      {
        label: '数据集',
        value: info.dataset,
        format: formatDataset,
      },
      {
        label: '数据集处理文件路径',
        value: info.dataset_py,
      },
      {
        label: '数据集类名',
        value: info.dataset_class_name,
      },
      {
        label: '镜像',
        value: info.image,
        format: formatMirror,
      },
      {
        label: '资源规格',
        value: info.computing_resource_id,
        format: getResourceDescription,
      },
      {
        label: '框架类型',
        value: info.framework_type,
        format: formatEnum(frameworkTypeOptions),
      },
      ...diffInfo,
      {
        label: '是否打乱',
        value: info.shuffle,
        format: formatBoolean,
      },
      {
        label: '数据量',
        value: info.data_size,
      },
      {
        label: '训练集数据量',
        value: info.train_size,
      },
      {
        label: '初始训练数据量',
        value: info.initial_num,
      },
      {
        label: '查询次数',
        value: info.queries_num,
      },
      {
        label: '每次查询数据量',
        value: info.instances_num,
      },
      {
        label: '查询策略',
        value: info.query_strategy,
        format: formatEnum(queryStrategies),
      },
      {
        label: '检查点轮数',
        value: info.checkpoint_num,
      },
    ];
  }, [info, getResourceDescription]);

  const instanceDatas = useMemo(() => {
    if (!info || !runStatus) {
      return [];
    }

    return [
      {
        label: '启动时间',
        value: formatDate(info.create_time),
        ellipsis: true,
      },
      {
        label: '执行时长',
        value: elapsedTime(info.create_time, runStatus.finishedAt),
        ellipsis: true,
      },
      {
        label: '状态',
        value: (
          <Flex align="center">
            <img
              style={{ width: '17px', marginRight: '7px' }}
              src={experimentStatusInfo[runStatus.phase]?.icon}
              draggable={false}
              alt=""
            />
            <div
              style={{
                color: experimentStatusInfo[runStatus?.phase]?.color,
                fontSize: '15px',
                lineHeight: 1.6,
              }}
            >
              {experimentStatusInfo[runStatus?.phase]?.label}
            </div>
          </Flex>
        ),
        ellipsis: true,
      },
    ];
  }, [runStatus, info]);

  return (
    <div className={classNames(styles['active-learn-basic'], className)}>
      {isInstance && runStatus && (
        <ConfigInfo
          title="运行信息"
          datas={instanceDatas}
          labelWidth={70}
          style={{ marginBottom: '20px' }}
        />
      )}
      {!isInstance && (
        <ConfigInfo
          title="基本信息"
          datas={basicDatas}
          labelWidth={70}
          style={{ marginBottom: '20px' }}
        />
      )}
      <ConfigInfo
        title="配置信息"
        datas={configDatas}
        labelWidth={120}
        style={{ marginBottom: '20px' }}
      ></ConfigInfo>
    </div>
  );
}

export default BasicInfo;