diff --git a/src/components/seal-form/seal-cascader.tsx b/src/components/seal-form/seal-cascader.tsx index 90c7cde3..5c1897f4 100644 --- a/src/components/seal-form/seal-cascader.tsx +++ b/src/components/seal-form/seal-cascader.tsx @@ -60,8 +60,7 @@ const OptionNodes = (props: { ); } let width: any = { - maxWidth: 140, - minWidth: 140 + maxWidth: 140 }; if (!data.parent) { width = undefined; diff --git a/src/pages/llmodels/components/gpu-card.tsx b/src/pages/llmodels/components/gpu-card.tsx index 8dc0ca9d..7e7f1d5b 100644 --- a/src/pages/llmodels/components/gpu-card.tsx +++ b/src/pages/llmodels/components/gpu-card.tsx @@ -21,6 +21,12 @@ const Header = styled.div` width: 100%; `; +const ItemInfo = styled.div` + display: flex; + flex-wrap: wrap; + white-space: break-spaces; +`; + const Description = styled.div` display: flex; flex-direction: column; @@ -60,7 +66,7 @@ const GPUCard: React.FC<{ description={ info || ( <> - + {intl.formatMessage({ id: 'resources.table.vram' })}( {intl.formatMessage({ id: 'resources.table.used' })}/ {intl.formatMessage({ id: 'resources.table.total' })}):{' '} @@ -70,8 +76,8 @@ const GPUCard: React.FC<{ )}{' '} / {convertFileSize(data?.memory?.total || 0)} - - + + {intl.formatMessage({ id: 'resources.table.gpuutilization' })} :{' '} @@ -80,7 +86,7 @@ const GPUCard: React.FC<{ ? _.round(data?.memory?.utilization_rate || 0, 2) : _.round(data.memory?.allocated / data.memory?.total, 2) * 100} % - + ) } diff --git a/src/pages/llmodels/config/form-context.ts b/src/pages/llmodels/config/form-context.ts index eec5b058..b7cecb58 100644 --- a/src/pages/llmodels/config/form-context.ts +++ b/src/pages/llmodels/config/form-context.ts @@ -1,6 +1,6 @@ import { PageActionType } from '@/config/types'; import React from 'react'; -import { BackendOption, DeployFormKey } from './types'; +import { BackendOption, DeployFormKey, FormData } from './types'; type EmptyObject = Record; @@ -17,10 +17,11 @@ interface FormContextProps { isGGUF?: boolean; formKey: DeployFormKey; source: string; - pageAction: PageActionType; + action: PageActionType; gpuOptions: CascaderOption[]; workerLabelOptions: CascaderOption[]; backendOptions: BackendOption[]; + initialValues?: FormData; // for editing model onValuesChange?: (changedValues: any, allValues: any) => void; onBackendChange: (backend: string, option: any) => void; } diff --git a/src/pages/llmodels/forms/backend.tsx b/src/pages/llmodels/forms/backend.tsx index 4a75ccdc..a34f765f 100644 --- a/src/pages/llmodels/forms/backend.tsx +++ b/src/pages/llmodels/forms/backend.tsx @@ -23,7 +23,7 @@ const BackendFields: React.FC = () => { const { isGGUF, formKey, - pageAction: action, + action, source, gpuOptions, onValuesChange, diff --git a/src/pages/llmodels/forms/index.tsx b/src/pages/llmodels/forms/index.tsx index 2b9acc60..0e155dbe 100644 --- a/src/pages/llmodels/forms/index.tsx +++ b/src/pages/llmodels/forms/index.tsx @@ -55,7 +55,7 @@ const SegmentedHeader = styled.div<{ $top?: number }>` `; interface DataFormProps { - initialValues?: any; + initialValues?: FormData; ref?: any; source: SourceType; action: PageActionType; @@ -323,10 +323,11 @@ const DataForm: React.FC = forwardRef((props, ref) => { isGGUF: isGGUF, formKey: formKey, source: props.source, - pageAction: action, + action: action, gpuOptions: gpuOptions, backendOptions: backendOptions, workerLabelOptions: workerLabelOptions, + initialValues: initialValues, onValuesChange: onValuesChange, onBackendChange: handleBackendChange }} diff --git a/src/pages/llmodels/forms/online-source.tsx b/src/pages/llmodels/forms/online-source.tsx index 1f99f857..62560ddc 100644 --- a/src/pages/llmodels/forms/online-source.tsx +++ b/src/pages/llmodels/forms/online-source.tsx @@ -13,7 +13,7 @@ const HuggingFaceForm: React.FC = () => { const formInstance = Form.useFormInstance(); const formCtx = useFormContext(); const { getRuleMessage } = useAppUtils(); - const { formKey, pageAction, isGGUF, onValuesChange } = formCtx; + const { formKey, action, isGGUF, onValuesChange } = formCtx; const source = Form.useWatch('source'); if ( @@ -47,7 +47,7 @@ const HuggingFaceForm: React.FC = () => { @@ -58,7 +58,7 @@ const HuggingFaceForm: React.FC = () => { > )} @@ -78,7 +78,7 @@ const HuggingFaceForm: React.FC = () => { @@ -89,7 +89,7 @@ const HuggingFaceForm: React.FC = () => { > )} diff --git a/src/pages/llmodels/forms/schedule-type.tsx b/src/pages/llmodels/forms/schedule-type.tsx index 8c7841dd..2a30413e 100644 --- a/src/pages/llmodels/forms/schedule-type.tsx +++ b/src/pages/llmodels/forms/schedule-type.tsx @@ -4,6 +4,7 @@ import SealInputNumber from '@/components/seal-form/input-number'; import SealCascader from '@/components/seal-form/seal-cascader'; import SealSelect from '@/components/seal-form/seal-select'; import TooltipList from '@/components/tooltip-list'; +import { PageAction } from '@/config'; import useAppUtils from '@/hooks/use-app-utils'; import { useIntl } from '@umijs/max'; import { Form } from 'antd'; @@ -67,7 +68,13 @@ const gpuAllocateTypeTips = [ const ScheduleTypeForm: React.FC = () => { const intl = useIntl(); - const { onValuesChange, gpuOptions, workerLabelOptions } = useFormContext(); + const { + onValuesChange, + action, + gpuOptions, + workerLabelOptions, + initialValues + } = useFormContext(); const { getRuleMessage } = useAppUtils(); const form = Form.useFormInstance(); const scheduleType = Form.useWatch('scheduleType', form); @@ -88,39 +95,41 @@ const ScheduleTypeForm: React.FC = () => { onValuesChange?.({}, form.getFieldsValue()); }; - const handleBeforeGpuSelectorChange = (gpuIds: any[]) => {}; - const handleGpuSelectorChange = (value: any[]) => { - handleBeforeGpuSelectorChange(value); - onValuesChange?.({}, form.getFieldsValue()); + if (value.length > 0) { + onValuesChange?.({}, form.getFieldsValue()); + } }; const handleOnStepReplicaStep = ( - value: number, - info: { offset: number; type: 'up' | 'down' } + value: number | string | null, + info: { offset: number | string | null; type: 'up' | 'down' } ) => { let newValue = value; const isPowerOfTwo = (n: number) => (n & (n - 1)) === 0 && n !== 0; // check power of two - if (!isPowerOfTwo(value)) { + if (!isPowerOfTwo(value as number)) { if (info.type === 'up') { - newValue = Math.pow(2, Math.ceil(Math.log2(value))); + newValue = Math.pow(2, Math.ceil(Math.log2(value as number))); } else { - newValue = Math.pow(2, Math.floor(Math.log2(value))); + newValue = Math.pow(2, Math.floor(Math.log2(value as number))); } } form.setFieldValue(['gpu_selector', 'gpus_per_replica'], newValue); onValuesChange?.({}, form.getFieldsValue()); }; - const handleOnStepReplica = (value: number | null) => { + const handleOnStepReplica = async (value: number | string | null) => { if (value === null) { + await new Promise((resolve) => { + setTimeout(resolve, 200); + }); form.setFieldValue(['gpu_selector', 'gpus_per_replica'], 1); return; } const isPowerOfTwo = (n: number) => (n & (n - 1)) === 0 && n !== 0; // check power of two - if (!isPowerOfTwo(value)) { - const newValue = Math.pow(2, Math.round(Math.log2(value))); + if (!isPowerOfTwo(value as number)) { + const newValue = Math.pow(2, Math.round(Math.log2(value as number))); form.setFieldValue(['gpu_selector', 'gpus_per_replica'], newValue); onValuesChange?.({}, form.getFieldsValue()); } @@ -212,7 +221,13 @@ const ScheduleTypeForm: React.FC = () => { onChange={handleGpuSelectorChange} > - +