diff --git a/react-ui/src/assets/img/editor-parameter.png b/react-ui/src/assets/img/editor-parameter.png new file mode 100644 index 00000000..b5fd9f41 Binary files /dev/null and b/react-ui/src/assets/img/editor-parameter.png differ diff --git a/react-ui/src/components/ParameterInput/index.tsx b/react-ui/src/components/ParameterInput/index.tsx index 4b838b2d..0fc08551 100644 --- a/react-ui/src/components/ParameterInput/index.tsx +++ b/react-ui/src/components/ParameterInput/index.tsx @@ -43,7 +43,7 @@ function ParameterInput({ } const isSelect = valueObj?.fromSelect; const InputComponent = textArea ? Input.TextArea : Input; - const placeholder = valueObj?.placeholder; + const placeholder = valueObj?.placeholder || rest?.placeholder; return ( <> diff --git a/react-ui/src/pages/DevelopmentEnvironment/Create/index.less b/react-ui/src/pages/DevelopmentEnvironment/Create/index.less new file mode 100644 index 00000000..cd1dcb27 --- /dev/null +++ b/react-ui/src/pages/DevelopmentEnvironment/Create/index.less @@ -0,0 +1,17 @@ +.editor-create { + height: 100%; + + &__content { + height: calc(100% - 60px); + margin-top: 10px; + padding: 30px 30px 10px; + overflow: auto; + background-color: white; + border-radius: 10px; + + &__type { + color: @text-color; + font-size: @font-size-input-lg; + } + } +} diff --git a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx new file mode 100644 index 00000000..036fc12c --- /dev/null +++ b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx @@ -0,0 +1,344 @@ +/* + * @Author: 赵伟 + * @Date: 2024-04-16 13:58:08 + * @Description: 创建镜像 + */ +import KFIcon from '@/components/KFIcon'; +import KFRadio, { type KFRadioItem } from '@/components/KFRadio'; +import PageTitle from '@/components/PageTitle'; +import ParameterInput from '@/components/ParameterInput'; +import SubAreaTitle from '@/components/SubAreaTitle'; +import { useComputingResource } from '@/hooks/resource'; +import ResourceSelectorModal, { + ResourceSelectorResponse, + ResourceSelectorType, + selectorTypeConfig, +} from '@/pages/Pipeline/components/ResourceSelectorModal'; +import { createEditorReq } from '@/services/developmentEnvironment'; +import { openAntdModal } from '@/utils/modal'; +import { to } from '@/utils/promise'; +import { useNavigate } from '@umijs/max'; +import { App, Button, Col, Form, Input, Row, Select } from 'antd'; +import { pick } from 'lodash'; +import { useState } from 'react'; +import styles from './index.less'; + +type FormData = { + name: string; + computing_resource: string; + standard: string; + image: string; + model: ResourceSelectorResponse; + dataset: ResourceSelectorResponse; +}; + +enum ComputingResourceType { + GPU = 'GPU', + NPU = 'NPU', +} + +const EditorRadioItems: KFRadioItem[] = [ + { + key: ComputingResourceType.GPU, + title: '英伟达GPU', + icon: , + }, + { + key: ComputingResourceType.NPU, + title: '昇腾NPU', + icon: , + }, +]; + +function EditorCreate() { + const navgite = useNavigate(); + const [form] = Form.useForm(); + const { message } = App.useApp(); + const [resourceStandardList, filterResourceStandard] = useComputingResource(); + const [selectedModel, setSelectedModel] = useState( + undefined, + ); // 选择的模型，为了再次打开时恢复原来的选择 + const [selectedDataset, setSelectedDataset] = useState( + undefined, + ); // 选择的数据集，为了再次打开时恢复原来的选择 + const [selectedMirror, setSelectedMirror] = useState( + undefined, + ); // 选择的镜像，为了再次打开时恢复原来的选择 + + // 创建编辑器 + const createEditor = async (formData: FormData) => { + // const { model, dataset } = formData; + // const params = { + // ...formData, + // model: JSON.stringify(omit(model, ['showValue'])), + // dataset: JSON.stringify(dataset, ['showValue']), + // }; + const [res] = await to(createEditorReq(formData)); + if (res) { + message.success('创建成功'); + navgite(-1); + } + }; + + // 提交 + const handleSubmit = (values: FormData) => { + createEditor(values); + }; + + // 取消 + const cancel = () => { + navgite(-1); + }; + // 获取选择数据集、模型后面按钮 icon + const getSelectBtnIcon = (type: ResourceSelectorType) => { + return ; + }; + + // 选择模型、镜像、数据集 + const selectResource = (name: string, type: ResourceSelectorType) => { + let resource: ResourceSelectorResponse | undefined; + switch (type) { + case ResourceSelectorType.Model: + resource = selectedModel; + break; + case ResourceSelectorType.Dataset: + resource = selectedDataset; + break; + default: + resource = selectedMirror; + break; + } + const { close } = openAntdModal(ResourceSelectorModal, { + type, + defaultExpandedKeys: resource ? [resource.id] : [], + defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [], + defaultActiveTab: resource?.activeTab, + onOk: (res) => { + if (res) { + if (type === ResourceSelectorType.Mirror) { + form.setFieldValue(name, res.path); + setSelectedMirror(res); + } else { + const showValue = `${res.name}:${res.version}`; + form.setFieldValue(name, { + ...pick(res, ['id', 'version', 'path']), + showValue, + }); + if (type === ResourceSelectorType.Model) { + setSelectedModel(res); + } else if (type === ResourceSelectorType.Dataset) { + setSelectedDataset(res); + } + } + } else { + if (type === ResourceSelectorType.Model) { + setSelectedModel(undefined); + } else if (type === ResourceSelectorType.Dataset) { + setSelectedDataset(undefined); + } else if (type === ResourceSelectorType.Mirror) { + setSelectedMirror(undefined); + } + form.setFieldValue(name, ''); + } + close(); + }, + }); + }; + + return ( +
+ +
+
+
+ + + + + + + + + + + + + + + + + + +