From 69ec89959c27e5ef2abe25ef7e66a3ae9c6869a3 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Tue, 18 Jun 2024 08:44:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E9=AA=8C=E7=BB=93=E6=9E=9C?= =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=88=B0=E6=A8=A1=E5=9E=8B=E5=BA=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/AddExperimentModal/index.less | 2 +- .../components/AddExperimentModal/index.tsx | 2 +- .../components/ExperimentResult/index.less | 1 - .../components/ExperimentResult/index.tsx | 35 ++- .../components/ExportModelModal/index.less | 7 + .../components/ExportModelModal/index.tsx | 207 ++++++++++++++++++ react-ui/src/services/dataset/index.js | 9 +- 7 files changed, 255 insertions(+), 8 deletions(-) create mode 100644 react-ui/src/pages/Experiment/components/ExportModelModal/index.less create mode 100644 react-ui/src/pages/Experiment/components/ExportModelModal/index.tsx diff --git a/react-ui/src/pages/Experiment/components/AddExperimentModal/index.less b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.less index eec152a7..2470e868 100644 --- a/react-ui/src/pages/Experiment/components/AddExperimentModal/index.less +++ b/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; diff --git a/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx index 71ec2f06..becfc0a7 100644 --- a/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx +++ b/react-ui/src/pages/Experiment/components/AddExperimentModal/index.tsx @@ -115,7 +115,7 @@ function AddExperimentModal({ }; return ( { - 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) { + {/* 导出到模型库 导出到数据集 */} diff --git a/react-ui/src/pages/Experiment/components/ExportModelModal/index.less b/react-ui/src/pages/Experiment/components/ExportModelModal/index.less new file mode 100644 index 00000000..250f56a3 --- /dev/null +++ b/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; + } + } +} diff --git a/react-ui/src/pages/Experiment/components/ExportModelModal/index.tsx b/react-ui/src/pages/Experiment/components/ExportModelModal/index.tsx new file mode 100644 index 00000000..b1d09da0 --- /dev/null +++ b/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 { + path: string; + onOk: () => void; +} + +function ExportModelModal({ path, onOk, ...rest }: ExportModelModalProps) { + const [form] = Form.useForm(); + const [models, setModels] = useState([]); + const [versions, setVersions] = useState([]); + 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 ( + +
+ + + + , + } + : undefined + } + rules={[ + { required: true, message: '请输入模型版本' }, + { + validator: (_, value) => { + if (value && versions.includes(value)) { + return Promise.reject('模型版本已存在'); + } else { + return Promise.resolve(); + } + }, + }, + ]} + > + + + + + +
+ + ); +} + +export default ExportModelModal; diff --git a/react-ui/src/services/dataset/index.js b/react-ui/src/services/dataset/index.js index e59d7a21..1764c8d0 100644 --- a/react-ui/src/services/dataset/index.js +++ b/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 + }); +} \ No newline at end of file