feat: 实验结果导出到模型库

react-ui/src/pages/Experiment/components/AddExperimentModal/index.less

@@ -1,4 +1,4 @@
-.modal {
+.add-experiment-modal {
   .global_param_item {
     max-height: 230px;
     padding: 24px 12px 0;

react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx

@@ -115,7 +115,7 @@ function AddExperimentModal({
   };
   return (
     <KFModal
-      className={styles.modal}
+      className={styles['add-experiment-modal']}
       title={modalTitle}
       image={modalIcon}
       open={open}

react-ui/src/pages/Experiment/components/ExperimentResult/index.less

@@ -17,7 +17,6 @@
     &__name {
       display: flex;
       align-items: center;
-      justify-content: space-between;
       padding: 10px 0;
       border-bottom: 1px solid rgba(234, 234, 234, 0.8);
     }

react-ui/src/pages/Experiment/components/ExperimentResult/index.tsx

@@ -1,6 +1,9 @@
 import { downLoadZip } from '@/utils/downloadfile';
-import { Button } from 'antd';
+import { openAntdModal } from '@/utils/modal';
+import { App, Button } from 'antd';
+import ExportModelModal from '../ExportModelModal';
 import styles from './index.less';
+
 type ExperimentResultProps = {
   results?: ExperimentResultData[] | null;
 };
@@ -16,8 +19,22 @@ type ExperimentResultData = {
 };
 
 function ExperimentResult({ results }: ExperimentResultProps) {
-  const exportResult = (val: string) => {
-    downLoadZip(`/api/mmp/minioStorage/download`, { path: val });
+  const { message } = App.useApp();
+
+  // 下载
+  const download = (path: string) => {
+    downLoadZip(`/api/mmp/minioStorage/download`, { path });
+  };
+
+  // 导出到模型库
+  const exportToModel = (path: string) => {
+    const { close } = openAntdModal(ExportModelModal, {
+      path,
+      onOk: () => {
+        message.success('导出成功');
+        close();
+      },
+    });
   };
 
   return (
@@ -31,12 +48,22 @@ function ExperimentResult({ results }: ExperimentResultProps) {
                 <Button
                   size="small"
                   type="link"
+                  style={{ marginLeft: 'auto' }}
                   onClick={() => {
-                    exportResult(item.path);
+                    download(item.path);
                   }}
                 >
                   下载
                 </Button>
+                <Button
+                  size="small"
+                  type="link"
+                  onClick={() => {
+                    exportToModel(item.path);
+                  }}
+                >
+                  导出到模型库
+                </Button>
                 {/* <a style={{ marginRight: '10px' }}>导出到模型库</a>
                <a style={{ marginRight: '10px' }}>导出到数据集</a> */}
               </div>

react-ui/src/pages/Experiment/components/ExportModelModal/index.less

@@ -0,0 +1,7 @@
+.export-model-modal__tooltip {
+  :global {
+    .ant-tooltip-inner {
+      white-space: pre-line;
+    }
+  }
+}

react-ui/src/pages/Experiment/components/ExportModelModal/index.tsx

@@ -0,0 +1,207 @@
+import editExperimentIcon from '@/assets/img/edit-experiment.png';
+import KFModal from '@/components/KFModal';
+import { type ResourceData } from '@/pages/Dataset/config';
+import {
+  addModelsVersionDetail,
+  exportModelReq,
+  getModelList,
+  getModelVersionsById,
+} from '@/services/dataset';
+import { to } from '@/utils/promise';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Form, Input, ModalProps, Select } from 'antd';
+import { useEffect, useState } from 'react';
+import styles from './index.less';
+
+type FormData = {
+  models_id: string;
+  version: string;
+  description: string;
+};
+
+type ExportModelResponce = {
+  fileName: string;
+  fileSize: string;
+  url: string;
+};
+
+type CreateModelVersionParams = FormData & {
+  file_name: string;
+  file_size: string;
+  url: string;
+  // name: string;
+};
+
+interface ExportModelModalProps extends Omit<ModalProps, 'onOk'> {
+  path: string;
+  onOk: () => void;
+}
+
+function ExportModelModal({ path, onOk, ...rest }: ExportModelModalProps) {
+  const [form] = Form.useForm();
+  const [models, setModels] = useState<ResourceData[]>([]);
+  const [versions, setVersions] = useState<string[]>([]);
+  const [uuid] = useState(Date.now());
+
+  const layout = {
+    labelCol: { span: 24 },
+    wrapperCol: { span: 24 },
+  };
+
+  useEffect(() => {
+    requestModelList();
+  }, []);
+
+  // 模型版本tooltip
+  const getTooltip = () => {
+    const id = form.getFieldValue('models_id');
+    const name = models.find((item) => item.id === id)?.name ?? '';
+    const tooltip =
+      versions.length > 0 ? `${name}有以下版本：\n${versions.join('、')}\n注意不能重复` : undefined;
+    return tooltip;
+  };
+
+  // 处理模型名称变化
+  const handleModelChange = (id: number | undefined) => {
+    if (id) {
+      getModelVersions(id);
+    } else {
+      setVersions([]);
+    }
+  };
+
+  // 获取模型列表
+  const requestModelList = async () => {
+    const params = {
+      page: 0,
+      size: 1000,
+      available_range: 0, // 个人
+    };
+    const [res] = await to(getModelList(params));
+    if (res && res.data) {
+      setModels(res.data.content || []);
+    }
+  };
+
+  // 获取模型版本列表
+  const getModelVersions = async (id: number) => {
+    const [res] = await to(getModelVersionsById(id));
+    if (res && res.data) {
+      setVersions(res.data);
+    }
+  };
+
+  // 提交
+  const hanldeFinish = (formData: FormData) => {
+    exportToModel(formData);
+  };
+
+  // 导出到模型
+  const exportToModel = async (formData: FormData) => {
+    const params = {
+      uuid: String(uuid),
+      path,
+    };
+    const [res] = await to(exportModelReq(params));
+    if (res && res.data) {
+      const files = res.data as ExportModelResponce[];
+      const params: CreateModelVersionParams[] = files.map((item) => ({
+        ...formData,
+        file_name: item.fileName,
+        file_size: item.fileSize,
+        url: item.url,
+      }));
+
+      createModelVersion(params);
+    }
+  };
+
+  // 创建模型版本
+  const createModelVersion = async (params: CreateModelVersionParams[]) => {
+    const [res] = await to(addModelsVersionDetail(params));
+    if (res) {
+      onOk();
+    }
+  };
+
+  return (
+    <KFModal
+      {...rest}
+      title="导出到模型库"
+      image={editExperimentIcon}
+      okButtonProps={{
+        htmlType: 'submit',
+        form: 'form',
+      }}
+      width={825}
+      className={styles['export-model-modal']}
+    >
+      <Form
+        name="form"
+        layout="horizontal"
+        onFinish={hanldeFinish}
+        autoComplete="off"
+        form={form}
+        {...layout}
+        labelAlign="left"
+        labelWrap
+      >
+        <Form.Item
+          label="模型名称"
+          name="models_id"
+          rules={[{ required: true, message: '请选择模型' }]}
+        >
+          <Select
+            placeholder="请选择模型"
+            onChange={handleModelChange}
+            options={models}
+            fieldNames={{ label: 'name', value: 'id' }}
+            allowClear
+          ></Select>
+        </Form.Item>
+        <Form.Item
+          label="模型版本"
+          name="version"
+          tooltip={
+            getTooltip()
+              ? {
+                  overlayClassName: styles['export-model-modal__tooltip'],
+                  title: getTooltip(),
+                  icon: <InfoCircleOutlined />,
+                }
+              : undefined
+          }
+          rules={[
+            { required: true, message: '请输入模型版本' },
+            {
+              validator: (_, value) => {
+                if (value && versions.includes(value)) {
+                  return Promise.reject('模型版本已存在');
+                } else {
+                  return Promise.resolve();
+                }
+              },
+            },
+          ]}
+        >
+          <Input placeholder="请输入模型版本" maxLength={64} showCount allowClear />
+        </Form.Item>
+        <Form.Item
+          label="版本描述"
+          name="description"
+          rules={[{ required: true, message: '请输入版本描述' }]}
+        >
+          <Input.TextArea
+            placeholder="请输入版本描述"
+            maxLength={128}
+            autoSize={{ minRows: 2, maxRows: 5 }}
+            showCount
+            allowClear
+          />
+        </Form.Item>
+      </Form>
+    </KFModal>
+  );
+}
+
+export default ExportModelModal;

react-ui/src/services/dataset/index.js

@@ -130,7 +130,6 @@ export function deleteDataset(id) {
     method: 'DELETE',
   });
 }
-
 // 获取模型依赖
 export function getModelAtlasReq(data) {
   return request(`/api/mmp/modelDependency/queryModelAtlas`, {
@@ -138,3 +137,11 @@ export function getModelAtlasReq(data) {
     data
   });
 }
+
+// 实验结果导出到模型
+export function exportModelReq(data) {
+  return request(`/api/mmp/models/exportModel`, {
+    method: 'POST',
+    data
+  });
+}