feat: add gpus_per_replicas

src/pages/llmodels/forms/index.tsx

@@ -5,7 +5,7 @@ import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
 import React, { forwardRef, useImperativeHandle } from 'react';
-import { excludeFields, ScheduleValueMap } from '../config';
+import { excludeFields, gpusCountTypeMap, ScheduleValueMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
 import { FormContext } from '../config/form-context';
 import {
@@ -120,7 +120,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     data.categories = data.categories ? [data.categories] : [];
     const gpuSelector = generateGPUIds(data);
     const allValues = {
-      ..._.omit(data, ['scheduleType']),
+      ..._.omit(data, ['scheduleType', 'gpusCountType']),
       ...gpuSelector
     };
 
@@ -250,6 +250,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           placement_strategy: 'spread',
           cpu_offloading: true,
           scheduleType: ScheduleValueMap.Auto,
+          gpusCountType: gpusCountTypeMap.Auto,
           categories: null,
           restart_on_error: true,
           distributed_inference_across_workers: true,

src/pages/llmodels/forms/schedule-type.tsx

@@ -1,3 +1,4 @@
+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';
@@ -6,9 +7,9 @@ import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';
 import GPUCard from '../components/gpu-card';
-import { scheduleList, ScheduleValueMap } from '../config';
+import { gpusCountTypeMap, scheduleList, ScheduleValueMap } from '../config';
 import { backendOptionsMap } from '../config/backend-parameters';
-import { useCatalogFormContext, useFormContext } from '../config/form-context';
+import { useFormContext } from '../config/form-context';
 
 const scheduleTypeTips = [
   {
@@ -27,13 +28,31 @@ const scheduleTypeTips = [
   }
 ];
 
+const gpuAllocateTypeTips = [
+  {
+    title: {
+      text: 'models.form.gpusAllocationType.auto',
+      locale: true
+    },
+    tips: 'models.form.gpusAllocationType.auto.tips'
+  },
+  {
+    title: {
+      text: 'models.form.gpusAllocationType.custom',
+      locale: true
+    },
+    tips: 'models.form.gpusAllocationType.custom.tips'
+  }
+];
+
 const ScheduleTypeForm: React.FC = () => {
   const intl = useIntl();
   const { onValuesChange, gpuOptions } = useFormContext();
-  const { onQuantizationChange } = useCatalogFormContext();
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const scheduleType = Form.useWatch('scheduleType', form);
+  const gpusCountType = Form.useWatch('gpusCountType', form);
+  const gpuSelectorIds = Form.useWatch(['gpu_selector', 'gpu_ids'], form);
 
   const handleScheduleTypeChange = (value: string) => {
     if (value === ScheduleValueMap.Auto) {
@@ -41,8 +60,11 @@ const ScheduleTypeForm: React.FC = () => {
     }
   };
 
-  const handleOnQuantizationChange = (val: any) => {
-    onQuantizationChange?.(val);
+  const handleGpusCountTypeChange = (val: string) => {
+    if (val === 'custom') {
+      form.setFieldValue(['gpu_selector', 'gpus_per_replica'], 2);
+    }
+    onValuesChange?.({}, form.getFieldsValue());
   };
 
   const handleBeforeGpuSelectorChange = (gpuIds: any[]) => {};
@@ -52,6 +74,23 @@ const ScheduleTypeForm: React.FC = () => {
     onValuesChange?.({}, form.getFieldsValue());
   };
 
+  const handleOnStepReplicaStep = (
+    value: number,
+    info: { offset: number; type: 'up' | 'down' }
+  ) => {
+    let newValue = value;
+    const isPowerOfTwo = (n: number) => (n & (n - 1)) === 0 && n !== 0; // check power of two
+    if (!isPowerOfTwo(value)) {
+      if (info.type === 'up') {
+        newValue = Math.pow(2, Math.ceil(Math.log2(value)));
+      } else {
+        newValue = Math.pow(2, Math.floor(Math.log2(value)));
+      }
+    }
+    form.setFieldValue(['gpu_selector', 'gpus_per_replica'], newValue);
+    onValuesChange?.({}, form.getFieldsValue());
+  };
+
   return (
     <>
       <Form.Item name="scheduleType">
@@ -115,6 +154,43 @@ const ScheduleTypeForm: React.FC = () => {
                 onChange={handleGpuSelectorChange}
               ></SealCascader>
             </Form.Item>
+            <Form.Item name="gpusCountType">
+              <SealSelect
+                onChange={handleGpusCountTypeChange}
+                label={intl.formatMessage({
+                  id: 'models.form.gpusAllocationType'
+                })}
+                description={
+                  <TooltipList list={gpuAllocateTypeTips}></TooltipList>
+                }
+                options={[
+                  {
+                    label: intl.formatMessage({
+                      id: 'models.form.gpusAllocationType.auto'
+                    }),
+                    value: gpusCountTypeMap.Auto
+                  },
+                  {
+                    label: intl.formatMessage({
+                      id: 'models.form.gpusAllocationType.custom'
+                    }),
+                    value: gpusCountTypeMap.Custom
+                  }
+                ]}
+              ></SealSelect>
+            </Form.Item>
+            {gpusCountType === gpusCountTypeMap.Custom && (
+              <Form.Item name={['gpu_selector', 'gpus_per_replica']}>
+                <SealInputNumber
+                  label={intl.formatMessage({
+                    id: 'models.form.gpusperreplica'
+                  })}
+                  min={1}
+                  step={1}
+                  onStep={handleOnStepReplicaStep}
+                />
+              </Form.Item>
+            )}
           </>
         )}
     </>