diff --git a/react-ui/src/app.tsx b/react-ui/src/app.tsx index d08ca129..275e5e17 100644 --- a/react-ui/src/app.tsx +++ b/react-ui/src/app.tsx @@ -228,6 +228,7 @@ export const antd: RuntimeAntdConfig = (memo) => { }; memo.theme.components.Select = { singleItemHeightLG: 46, + optionSelectedColor: themes['primaryColor'], }; memo.theme.components.Table = { headerBg: 'rgba(242, 244, 247, 0.36)', diff --git a/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx b/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx index eb2dab24..eca6c80c 100644 --- a/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx +++ b/react-ui/src/components/BasicInfo/BasicInfoItemValue.tsx @@ -41,10 +41,7 @@ function BasicInfoItemValue({ value, link, url, ellipsis, classPrefix }: BasicIn return (
- + {component}
diff --git a/react-ui/src/components/DisabledInput/index.less b/react-ui/src/components/DisabledInput/index.less index 2eb28917..06808c5a 100644 --- a/react-ui/src/components/DisabledInput/index.less +++ b/react-ui/src/components/DisabledInput/index.less @@ -1,6 +1,6 @@ .disabled-input { padding: 4px 11px; - color: rgba(0, 0, 0, 0.25); + color: @text-disabled-color; font-size: @font-size-input; background-color: rgba(0, 0, 0, 0.04); border: 1px solid #d9d9d9; diff --git a/react-ui/src/components/DisabledInput/index.tsx b/react-ui/src/components/DisabledInput/index.tsx index a3c67b7d..c951324e 100644 --- a/react-ui/src/components/DisabledInput/index.tsx +++ b/react-ui/src/components/DisabledInput/index.tsx @@ -10,9 +10,7 @@ function DisabledInput({ value, valuePropName }: DisabledInputProps) { const data = valuePropName ? value[valuePropName] : value; return (
- - {data} - + {data}
); } diff --git a/react-ui/src/components/ParameterInput/index.less b/react-ui/src/components/ParameterInput/index.less index 4b22d208..cf249e0f 100644 --- a/react-ui/src/components/ParameterInput/index.less +++ b/react-ui/src/components/ParameterInput/index.less @@ -39,7 +39,7 @@ &__placeholder { min-height: 22px; - color: rgba(0, 0, 0, 0.25); + color: @text-placeholder-color; font-size: @font-size-input; line-height: 1.5714285714285714; } diff --git a/react-ui/src/components/ResourceSelect/index.tsx b/react-ui/src/components/ResourceSelect/index.tsx index e818df85..6e0179d4 100644 --- a/react-ui/src/components/ResourceSelect/index.tsx +++ b/react-ui/src/components/ResourceSelect/index.tsx @@ -9,7 +9,7 @@ import ResourceSelectorModal, { ResourceSelectorResponse, ResourceSelectorType, selectorTypeConfig, -} from '@/pages/Pipeline/components/ResourceSelectorModal'; +} from '@/components/ResourceSelectorModal'; import { openAntdModal } from '@/utils/modal'; import { Button } from 'antd'; import { pick } from 'lodash'; @@ -43,8 +43,7 @@ function ResourceSelect({ type, value, onChange, disabled, ...rest }: ResourceSe value.name && value.version && value.path && - (type === ResourceSelectorType.Mirror || value.identifier) && - (type === ResourceSelectorType.Mirror || value.owner) + (type === ResourceSelectorType.Mirror || (value.identifier && value.owner)) ) { const originResource = pick(value, [ 'activeTab', diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/config.tsx b/react-ui/src/components/ResourceSelectorModal/config.tsx similarity index 100% rename from react-ui/src/pages/Pipeline/components/ResourceSelectorModal/config.tsx rename to react-ui/src/components/ResourceSelectorModal/config.tsx diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less b/react-ui/src/components/ResourceSelectorModal/index.less similarity index 100% rename from react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less rename to react-ui/src/components/ResourceSelectorModal/index.less diff --git a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx b/react-ui/src/components/ResourceSelectorModal/index.tsx similarity index 98% rename from react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx rename to react-ui/src/components/ResourceSelectorModal/index.tsx index 06fdc242..28beedd0 100644 --- a/react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx +++ b/react-ui/src/components/ResourceSelectorModal/index.tsx @@ -23,8 +23,8 @@ export type ResourceSelectorResponse = { name: string; // 数据集\模型\镜像 name version: string; // 数据集\模型\镜像版本 path: string; // 数据集\模型\镜像版本路径 - identifier: string; // 数据集\模型 identifier，镜像没有这个字段 - owner: string; // 数据集\模型 owner，镜像没有这个字段 + identifier: string; // 数据集\模型 identifier，镜像这个字段为空 + owner: string; // 数据集\模型 owner，镜像这个字段为空 }; export interface ResourceSelectorModalProps extends Omit { diff --git a/react-ui/src/overrides.less b/react-ui/src/overrides.less index e129b4a7..4709a97c 100644 --- a/react-ui/src/overrides.less +++ b/react-ui/src/overrides.less @@ -261,3 +261,8 @@ } } } + +.ant-typography { + color: inherit; + font-size: inherit; +} diff --git a/react-ui/src/pages/AutoML/Create/index.less b/react-ui/src/pages/AutoML/Create/index.less index f8d15d2e..46c1f603 100644 --- a/react-ui/src/pages/AutoML/Create/index.less +++ b/react-ui/src/pages/AutoML/Create/index.less @@ -33,7 +33,7 @@ } .ant-btn-variant-text:disabled { - color: rgba(0, 0, 0, 0.25); + color: @text-disabled-color; } .ant-btn-variant-text { diff --git a/react-ui/src/pages/AutoML/components/CopyingText/index.tsx b/react-ui/src/pages/AutoML/components/CopyingText/index.tsx index b4c56f4e..586de40b 100644 --- a/react-ui/src/pages/AutoML/components/CopyingText/index.tsx +++ b/react-ui/src/pages/AutoML/components/CopyingText/index.tsx @@ -9,11 +9,7 @@ export type CopyingTextProps = { function CopyingText({ text }: CopyingTextProps) { return (
- + {text} - + {item.name}
diff --git a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx index 7bafdf95..b3b6b2f1 100644 --- a/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx +++ b/react-ui/src/pages/Dataset/components/VersionCompareModal/index.tsx @@ -203,7 +203,7 @@ function VersionCompareModal({ [styles['version-compare__left__text--different']]: isDifferent(key), })} > - + {isEmpty(text) ? '--' : text} @@ -221,7 +221,7 @@ function VersionCompareModal({ [styles['version-compare__right__text--different']]: isDifferent(key), })} > - + {isEmpty(text) ? '--' : text} diff --git a/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx b/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx index c58bf87e..b63d02fc 100644 --- a/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx +++ b/react-ui/src/pages/Dataset/components/VersionSelectorModal/index.tsx @@ -49,9 +49,7 @@ function VersionSelectorModal({ versions, onOk, ...rest }: VersionSelectorModalP onClick={() => handleClick(item.name)} > - - {item.name} - + {item.name} ); })} diff --git a/react-ui/src/pages/HyperParameter/Create/index.less b/react-ui/src/pages/HyperParameter/Create/index.less index 0325570e..145be0d1 100644 --- a/react-ui/src/pages/HyperParameter/Create/index.less +++ b/react-ui/src/pages/HyperParameter/Create/index.less @@ -33,7 +33,7 @@ } .ant-btn-variant-text:disabled { - color: rgba(0, 0, 0, 0.25); + color: @text-disabled-color; } .ant-btn-variant-text { diff --git a/react-ui/src/pages/HyperParameter/Create/index.tsx b/react-ui/src/pages/HyperParameter/Create/index.tsx index fa94809b..bd83783a 100644 --- a/react-ui/src/pages/HyperParameter/Create/index.tsx +++ b/react-ui/src/pages/HyperParameter/Create/index.tsx @@ -73,16 +73,6 @@ function CreateHyperparameter() { }; }); - // const runParameters = formData['points_to_evaluate']; - // for (const item of parameters) { - // const name = item.name; - // const arr = runParameters.filter((item) => isEmpty(item[name])); - // if (arr.length > 0 && arr.length < runParameters.length) { - // message.error(`手动运行参数 ${name} 必须全部填写或者都不填写`); - // return; - // } - // } - // 根据后台要求，修改表单数据 const object = { ...formData, diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx index 056ae7e4..1609328c 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/ExecuteConfig.tsx @@ -10,7 +10,19 @@ import { useComputingResource } from '@/hooks/resource'; import { isEmpty } from '@/utils'; import { modalConfirm } from '@/utils/ui'; import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'; -import { Button, Col, Flex, Form, Input, InputNumber, Radio, Row, Select, Tooltip } from 'antd'; +import { + Button, + Col, + Flex, + Form, + Input, + InputNumber, + Radio, + Row, + Select, + Tooltip, + Typography, +} from 'antd'; import { isEqual } from 'lodash'; import PopParameterRange from './PopParameterRange'; import styles from './index.less'; @@ -22,47 +34,58 @@ import { type FormParameter, } from './utils'; -const parameterTooltip = `uniform(-5, -1) - 在 -5.0 和 -1.0 之间均匀采样浮点数 - - quniform(3.2, 5.4, 0.2) - 在 3.2 和 5.4 之间均匀采样浮点数，四舍五入到 0.2 的倍数 +const parameterTooltip = `uniform(low, high) + 在 low 和 high 之间均匀采样浮点数 + + quniform(low, high, q) + 在 low 和 high 之间均匀采样浮点数，四舍五入到 q 的倍数 - loguniform(1e-4, 1e-2) - 在 0.0001 和 0.01 之间均匀采样浮点数，对数空间采样 + loguniform(low, high) + 在 low 和 high 之间均匀采样浮点数，对数空间采样 - qloguniform(1e-4, 1e-1, 5e-5) - 在 0.0001 和 0.01 之间均匀采样浮点数，对数空间采样并四舍五入到 0.00005 的倍数 + qloguniform(low, high, q) + 在 low 和 high 之间均匀采样浮点数，对数空间采样并四舍五入到 q 的倍数 - randn(10, 2) - 在均值为 10，方差为 2 的正态分布中进行随机浮点数抽样 + randn(m, s) + 在均值为 m，方差为 s 的正态分布中进行随机浮点数抽样 - qrandn(10, 2, 0.2) - 在均值为 10，方差为 2 的正态分布中进行随机浮点数抽样，四舍五入到 0.2 的倍数 + qrandn(m, s, q) + 在均值为 m，方差为 s 的正态分布中进行随机浮点数抽样，四舍五入到 q 的倍数 - randint(-9, 15) - 在 -9（包括）到 15（不包括）之间均匀采样整数 + randint(low, high) + 在 low（包括）到 high（不包括）之间均匀采样整数 - qrandint(-21, 12, 3) - 在 -21（包括）到 12（不包括）之间均匀采样整数，四舍五入到 3 的倍数 + qrandint(low, high, q) + 在 low（包括）到 high（不包括）之间均匀采样整数，四舍五入到 q 的倍数（包括 high） - lograndint(1, 10) - 在 1（包括）到 10（不包括）之间均匀采样整数，对数空间采样 + lograndint(low, high) + 在 low（包括）到 high（不包括）之间对数空间上均匀采样整数 - qlograndint(1, 10, 2) - 在 1（包括）到 10（不包括）之间均匀采样整数，对数空间采样并四舍五入到 2 的倍数 + qlograndint(low, high, q) + 在 low（包括）到 high（不包括）之间对数空间上均匀采样整数,并四舍五入到 q 的倍数 - choice(["a", "b", "c"]) + choice 从指定的选项中采样一个选项 - grid([32, 64, 128]) - 对这些值进行网格搜索，每个值都将被采样 + grid + 对选项进行网格搜索，每个值都将被采样 `; +const axParameterTooltip = `fixed + 固定取值 + + range(low, high) + 在 low 和 high 范围内采样取值 + + choice + 从指定的选项中采样一个选项 + `; + function ExecuteConfig() { const form = Form.useFormInstance(); const searchAlgorithm = Form.useWatch('search_alg', form); const paramsTypeOptions = searchAlgorithm === 'Ax' ? axParameterOptions : parameterOptions; + const paramsTypeTooltip = searchAlgorithm === 'Ax' ? axParameterTooltip : parameterTooltip; const [resourceStandardList, filterResourceStandard] = useComputingResource(); const handleSearchAlgorithmChange = (value: string) => { @@ -117,6 +140,29 @@ function ExecuteConfig() { + + + + + + + + 参数类型 { - const parameters = form.getFieldValue('parameters'); + const parameters = form + .getFieldValue('parameters') + .filter( + (item: FormParameter | undefined) => item !== undefined && item !== null, + ); for (const item of parameters) { - const name = item.name; + const name = item?.name; const arr = runParameters.filter((item?: Record) => isEmpty(item?.[name]), ); @@ -437,7 +487,11 @@ function ExecuteConfig() { {parameters.map((item: FormParameter) => ( + {item.name} + + } {...restField} labelCol={{ flex: '140px' }} name={[name, item.name]} diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.less b/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.less index 8f0a0f97..1d8609d3 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.less +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.less @@ -18,6 +18,7 @@ width: 100%; min-height: 46px; padding: 10px 11px; + color: @text-color; font-size: @font-size-input-lg; line-height: 1.5; background-color: white; @@ -48,6 +49,10 @@ cursor: not-allowed; } + &&--empty { + color: @text-placeholder-color; + } + &&--disabled &__icon { color: #aaaaaa !important; } diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.tsx b/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.tsx index ca97b252..eb647f3a 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/PopParameterRange/index.tsx @@ -1,4 +1,5 @@ import KFIcon from '@/components/KFIcon'; +import { isEmpty } from '@/utils'; import { Popconfirm, Typography } from 'antd'; import classNames from 'classnames'; import { useEffect, useRef, useState } from 'react'; @@ -77,15 +78,15 @@ function PopParameterRange({ type, value, onChange }: ParameterRangeProps) {
- {jsonText} + {jsonText ?? '请选择'}
diff --git a/react-ui/src/pages/HyperParameter/components/CreateForm/index.less b/react-ui/src/pages/HyperParameter/components/CreateForm/index.less index 7c218f63..5c91d2fc 100644 --- a/react-ui/src/pages/HyperParameter/components/CreateForm/index.less +++ b/react-ui/src/pages/HyperParameter/components/CreateForm/index.less @@ -121,6 +121,14 @@ padding: 20px 20px 0; border: 1px dashed #e0e0e0; border-radius: 8px; + + :global { + .ant-form-item-label { + label { + width: calc(100% - 10px); + } + } + } } &__operation { diff --git a/react-ui/src/pages/HyperParameter/types.ts b/react-ui/src/pages/HyperParameter/types.ts index 568dbd4a..8c6a35d0 100644 --- a/react-ui/src/pages/HyperParameter/types.ts +++ b/react-ui/src/pages/HyperParameter/types.ts @@ -15,6 +15,7 @@ export type FormData = { code: ParameterInputObject; // 代码 dataset: ParameterInputObject; // 数据集 model: ParameterInputObject; // 模型 + image: ParameterInputObject; // 镜像 main_py: string; // 主函数代码文件 metric: string; // 指标 mode: string; // 优化方向 diff --git a/react-ui/src/pages/ModelDeployment/CreateVersion/index.less b/react-ui/src/pages/ModelDeployment/CreateVersion/index.less index 0460788f..bf7f7f9d 100644 --- a/react-ui/src/pages/ModelDeployment/CreateVersion/index.less +++ b/react-ui/src/pages/ModelDeployment/CreateVersion/index.less @@ -30,7 +30,7 @@ } .ant-btn-variant-text:disabled { - color: rgba(0, 0, 0, 0.25); + color: @text-disabled-color; } .ant-btn-variant-text { diff --git a/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx b/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx index da88b2de..b6562237 100644 --- a/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx +++ b/react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx @@ -165,7 +165,7 @@ function VersionCompareModal({ version1, version2, ...rest }: VersionCompareModa [styles['version-compare__left__text--different']]: isDifferent(key), })} > - + {isEmpty(text) ? '--' : text} @@ -183,7 +183,7 @@ function VersionCompareModal({ version1, version2, ...rest }: VersionCompareModa [styles['version-compare__right__text--different']]: isDifferent(key), })} > - + {isEmpty(text) ? '--' : text} diff --git a/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx b/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx index a7740e7b..f2624a58 100644 --- a/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx +++ b/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx @@ -1,6 +1,10 @@ import KFIcon from '@/components/KFIcon'; import ParameterInput, { requiredValidator } from '@/components/ParameterInput'; import ParameterSelect from '@/components/ParameterSelect'; +import ResourceSelectorModal, { + ResourceSelectorType, + selectorTypeConfig, +} from '@/components/ResourceSelectorModal'; import SubAreaTitle from '@/components/SubAreaTitle'; import { CommonTabKeys } from '@/enums'; import { useComputingResource } from '@/hooks/resource'; @@ -19,10 +23,6 @@ import { NamePath } from 'antd/es/form/interface'; import { forwardRef, useImperativeHandle, useState } from 'react'; import CodeSelectorModal from '../CodeSelectorModal'; import PropsLabel from '../PropsLabel'; -import ResourceSelectorModal, { - ResourceSelectorType, - selectorTypeConfig, -} from '../ResourceSelectorModal'; import styles from './index.less'; const { TextArea } = Input; diff --git a/react-ui/src/styles/theme.less b/react-ui/src/styles/theme.less index 758eec31..cf1daced 100644 --- a/react-ui/src/styles/theme.less +++ b/react-ui/src/styles/theme.less @@ -12,6 +12,8 @@ @text-color: #1d1d20; @text-color-secondary: #575757; @text-color-tertiary: #8a8a8a; +@text-placeholder-color: rgba(0, 0, 0, 0.25); +@text-disabled-color: rgba(0, 0, 0, 0.25); @success-color: #6ac21d; @error-color: #c73131; @warning-color: #f98e1b;