ci4sManagement-cloud/react-ui/src/pages/AutoML/components/ExperimentResult/index.tsx

import InfoGroup from '@/components/InfoGroup';
import { getFileReq } from '@/services/file';
import { to } from '@/utils/promise';
import { Button, Image } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import styles from './index.less';

type ExperimentResultProps = {
  fileUrl?: string;
  imageUrl?: string;
  modelPath?: string;
};

function ExperimentResult({ fileUrl, imageUrl, modelPath }: ExperimentResultProps) {
  const [result, setResult] = useState<string | undefined>('');

  const images = useMemo(() => {
    if (imageUrl) {
      return imageUrl.split(',').map((item) => item.trim());
    }
    return [];
  }, [imageUrl]);

  useEffect(() => {
    // 获取实验运行历史记录
    const getResultFile = async () => {
      const [res] = await to(getFileReq(fileUrl));
      if (res) {
        setResult(res as any as string);
      }
    };

    if (fileUrl) {
      getResultFile();
    }
  }, [fileUrl]);

  return (
    <div className={styles['experiment-result']}>
      <InfoGroup title="实验结果" height={420} width="100%">
        <div className={styles['experiment-result__text']}>{result}</div>
      </InfoGroup>
      <InfoGroup title="可视化结果" style={{ margin: '16px 0' }}>
        <div className={styles['experiment-result__images']}>
          <Image.PreviewGroup
            preview={{
              onChange: (current, prev) =>
                console.log(`current index: ${current}, prev index: ${prev}`),
            }}
          >
            {images.map((item) => (
              <Image
                key={item}
                className={styles['experiment-result__images__item']}
                src={item}
                height={248}
                draggable={false}
                alt=""
              />
            ))}
          </Image.PreviewGroup>
        </div>
      </InfoGroup>
      {modelPath && (
        <div className={styles['experiment-result__download']}>
          <span style={{ marginRight: '12px', color: '#606b7a' }}>文件名</span>
          <span>save_model.joblib</span>
          <Button
            type="primary"
            className={styles['experiment-result__download__btn']}
            onClick={() => {
              window.location.href = modelPath;
            }}
          >
            模型下载
          </Button>
        </div>
      )}
    </div>
  );
}

export default ExperimentResult;