fix: gpu selector issues

src/components/seal-form/seal-cascader.tsx

@@ -60,8 +60,7 @@ const OptionNodes = (props: {
     );
   }
   let width: any = {
-    maxWidth: 140,
+    maxWidth: 140
-    minWidth: 140
   };
   if (!data.parent) {
     width = undefined;

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 || (
           <>
-            <span>
+            <ItemInfo>
               {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)}
               </span>
-            </span>
+            </ItemInfo>
-            <span>
+            <ItemInfo>
               <span>
                 {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}
               %
-            </span>
+            </ItemInfo>
           </>
         )
       }

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<never, never>;
 
@@ -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;
 }

src/pages/llmodels/forms/backend.tsx

@@ -23,7 +23,7 @@ const BackendFields: React.FC = () => {
   const {
     isGGUF,
     formKey,
-    pageAction: action,
+    action,
     source,
     gpuOptions,
     onValuesChange,

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<DataFormProps> = 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
       }}

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 = () => {
             <SealInput.Input
               label={intl.formatMessage({ id: 'models.form.repoid' })}
               required
-              disabled={pageAction === PageAction.CREATE}
+              disabled={action === PageAction.CREATE}
               onBlur={handleOnBlur}
             ></SealInput.Input>
           </Form.Item>
@@ -58,7 +58,7 @@ const HuggingFaceForm: React.FC = () => {
             >
               <SealInput.Input
                 label={intl.formatMessage({ id: 'models.form.filename' })}
-                disabled={pageAction === PageAction.CREATE}
+                disabled={action === PageAction.CREATE}
               ></SealInput.Input>
             </Form.Item>
           )}
@@ -78,7 +78,7 @@ const HuggingFaceForm: React.FC = () => {
             <SealInput.Input
               required
               label={intl.formatMessage({ id: 'models.form.repoid' })}
-              disabled={pageAction === PageAction.CREATE}
+              disabled={action === PageAction.CREATE}
               onBlur={handleOnBlur}
             ></SealInput.Input>
           </Form.Item>
@@ -89,7 +89,7 @@ const HuggingFaceForm: React.FC = () => {
             >
               <SealInput.Input
                 label={intl.formatMessage({ id: 'models.form.filename' })}
-                disabled={pageAction === PageAction.CREATE}
+                disabled={action === PageAction.CREATE}
               ></SealInput.Input>
             </Form.Item>
           )}

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);
+    if (value.length > 0) {
-    onValuesChange?.({}, form.getFieldsValue());
+      onValuesChange?.({}, form.getFieldsValue());
+    }
   };
 
   const handleOnStepReplicaStep = (
-    value: number,
+    value: number | string | null,
-    info: { offset: number; type: 'up' | 'down' }
+    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)) {
+    if (!isPowerOfTwo(value as number)) {
-      const newValue = Math.pow(2, Math.round(Math.log2(value)));
+      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}
               ></SealCascader>
             </Form.Item>
-            <Form.Item name="gpusCountType">
+            <Form.Item
+              name="gpusCountType"
+              hidden={
+                action === PageAction.EDIT &&
+                !!initialValues?.gpu_selector?.gpus_per_replica
+              }
+            >
               <SealSelect
                 onChange={handleGpusCountTypeChange}
                 label={intl.formatMessage({