refactor: gpu selector

src/components/auto-tooltip/index.tsx

@@ -124,7 +124,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
                 style={{
                   position: 'absolute',
                   right: 8,
-                  top: 8
+                  top: 7
                 }}
               />
             ) : (

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

@@ -0,0 +1,107 @@
+import { isNotEmptyValue } from '@/utils/index';
+import { useIntl } from '@umijs/max';
+import type { CascaderAutoProps } from 'antd';
+import { Cascader, Form } from 'antd';
+import { cloneDeep } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import Wrapper from './components/wrapper';
+import { SealFormItemProps } from './types';
+
+const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
+  props
+) => {
+  const {
+    label,
+    placeholder,
+    children,
+    required,
+    description,
+    options,
+    allowNull,
+    isInFormItems = true,
+    ...rest
+  } = props;
+  const intl = useIntl();
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<any>(null);
+  let status = '';
+
+  // the status can be controlled by Form.Item
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  const _options = useMemo(() => {
+    if (!options?.length) {
+      return [];
+    }
+    const list = cloneDeep(options);
+    return list.map((item: any) => {
+      if (item.locale) {
+        item.label = intl.formatMessage({ id: item.label as string });
+      }
+      return item;
+    });
+  }, [options, intl]);
+
+  useEffect(() => {
+    if (isNotEmptyValue(props.value) || (allowNull && props.value === null)) {
+      setIsFocus(true);
+    }
+  }, [props.value, allowNull]);
+
+  const handleClickWrapper = () => {
+    if (!props.disabled && !isFocus) {
+      inputRef.current?.focus?.();
+      setIsFocus(true);
+    }
+  };
+
+  const handleChange = (val: any, options: any) => {
+    if (isNotEmptyValue(val) || (allowNull && val === null)) {
+      setIsFocus(true);
+    } else {
+      setIsFocus(false);
+    }
+    props.onChange?.(val, options);
+  };
+
+  const handleOnFocus = (e: any) => {
+    setIsFocus(true);
+    props.onFocus?.(e);
+  };
+
+  const handleOnBlur = (e: any) => {
+    if (allowNull && props.value === null) {
+      setIsFocus(true);
+    } else if (!props.value) {
+      setIsFocus(false);
+    }
+    props.onBlur?.(e);
+  };
+
+  return (
+    <Wrapper
+      status={status}
+      label={label}
+      isFocus={isFocus}
+      required={required}
+      description={description}
+      disabled={props.disabled}
+      onClick={handleClickWrapper}
+    >
+      <Cascader
+        {...rest}
+        ref={inputRef}
+        options={children ? null : _options}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onChange={handleChange}
+        notFoundContent={null}
+      ></Cascader>
+    </Wrapper>
+  );
+};
+
+export default SealCascader;

src/global.less

@@ -777,6 +777,40 @@ body {
   font-weight: var(--font-weight-bold);
 }
 
+.ant-cascader-menu-item.ant-cascader-menu-item-active {
+  background-color: var(--ant-select-option-selected-bg) !important;
+}
+
+.cascader-popup-wrapper {
+  .ant-cascader-menu {
+    overflow-x: hidden;
+
+    &::-webkit-scrollbar {
+      width: var(--scrollbar-size);
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--color-scrollbar-thumb);
+        border-radius: 4px;
+      }
+    }
+
+    .ant-cascader-checkbox.ant-cascader-checkbox-disabled {
+      display: none;
+    }
+  }
+}
+
 .ant-tooltip-content {
   .ant-tooltip-inner {
     a {

src/pages/llmodels/components/advance-config.tsx

@@ -1,6 +1,7 @@
 import AutoTooltip from '@/components/auto-tooltip';
 import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
+import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
@@ -122,6 +123,24 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     form.setFieldValue('backend_parameters', list);
   }, []);
 
+  const gpuOptionRender = (data: any) => {
+    let width = {
+      maxWidth: 180,
+      minWidth: 180
+    };
+    if (!data.parent) {
+      width = { maxWidth: 180, minWidth: 180 };
+    }
+    if (data.parent) {
+      return (
+        <AutoTooltip ghost {...width}>
+          {data.label}
+        </AutoTooltip>
+      );
+    }
+    return <GPUCard data={data}></GPUCard>;
+  };
+
   const collapseItems = useMemo(() => {
     const children = (
       <>
@@ -214,47 +233,94 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
           </>
         )}
         {scheduleType === 'manual' && (
-          <Form.Item<FormData>
-            name={['gpu_selector', 'gpu_ids']}
-            rules={[
-              {
-                required: true,
-                message: intl.formatMessage(
-                  {
-                    id: 'common.form.rule.select'
-                  },
-                  {
-                    name: intl.formatMessage({ id: 'models.form.gpuselector' })
-                  }
-                )
-              }
-            ]}
-          >
-            <SealSelect
-              allowClear
-              label={intl.formatMessage({ id: 'models.form.gpuselector' })}
-              required
-              mode="multiple"
-              maxTagCount={1}
-              tagRender={(props) => {
-                return (
-                  <AutoTooltip
-                    className="m-r-4"
-                    closable={props.closable}
-                    onClose={props.onClose}
-                    maxWidth={240}
-                  >
-                    {props.label}
-                  </AutoTooltip>
-                );
-              }}
-              options={gpuOptions}
-              optionRender={(props) => {
-                return <GPUCard data={props.data}></GPUCard>;
-              }}
-            ></SealSelect>
-          </Form.Item>
+          <>
+            {/* <Form.Item<FormData>
+              name={['gpu_selector', 'gpu_ids']}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage(
+                    {
+                      id: 'common.form.rule.select'
+                    },
+                    {
+                      name: intl.formatMessage({
+                        id: 'models.form.gpuselector'
+                      })
+                    }
+                  )
+                }
+              ]}
+            >
+              <SealSelect
+                label={intl.formatMessage({ id: 'models.form.gpuselector' })}
+                required
+                mode="multiple"
+                maxTagCount={1}
+                tagRender={(props) => {
+                  return (
+                    <AutoTooltip
+                      className="m-r-4"
+                      closable={props.closable}
+                      onClose={props.onClose}
+                      maxWidth={240}
+                    >
+                      {props.label}
+                    </AutoTooltip>
+                  );
+                }}
+                options={gpuOptions}
+                optionRender={(props) => {
+                  return <GPUCard data={props.data}></GPUCard>;
+                }}
+              ></SealSelect>
+            </Form.Item> */}
+            <Form.Item
+              name={['gpu_selector', 'gpu_ids']}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage(
+                    {
+                      id: 'common.form.rule.select'
+                    },
+                    {
+                      name: intl.formatMessage({
+                        id: 'models.form.gpuselector'
+                      })
+                    }
+                  )
+                }
+              ]}
+            >
+              <SealCascader
+                required
+                multiple={backend !== backendOptionsMap.voxBox}
+                popupClassName="cascader-popup-wrapper"
+                maxTagCount="responsive"
+                label={intl.formatMessage({ id: 'models.form.gpuselector' })}
+                options={gpuOptions.map((item) => {
+                  item.disableCheckbox = backend !== backendOptionsMap.llamaBox;
+                  return item;
+                })}
+                tagRender={(props) => {
+                  return (
+                    <AutoTooltip
+                      className="m-r-4"
+                      closable={props.closable}
+                      onClose={props.onClose}
+                      maxWidth={240}
+                    >
+                      {props.label}
+                    </AutoTooltip>
+                  );
+                }}
+                optionRender={gpuOptionRender}
+              ></SealCascader>
+            </Form.Item>
+          </>
         )}
+
         <Form.Item name="backend_version">
           <SealInput.Input
             label={intl.formatMessage({ id: 'models.form.backendVersion' })}

src/pages/llmodels/components/data-form.tsx

@@ -51,6 +51,13 @@ interface DataFormProps {
   fields?: string[];
 }
 
+interface GPUOption {
+  label: string;
+  value: string;
+  disableCheckbox?: boolean;
+  children: GPUOption[];
+}
+
 const SEARCH_SOURCE = [
   modelSourceMap.huggingface_value,
   modelSourceMap.modelscope_value
@@ -72,9 +79,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   } = props;
   const [form] = Form.useForm();
   const intl = useIntl();
-  const [gpuOptions, setGpuOptions] = useState<
-    Array<GPUListItem & { label: string; value: string }>
-  >([]);
+  const [gpuOptions, setGpuOptions] = useState<Array<GPUOption>>([]);
   const [modelTask, setModelTask] = useState<Record<string, any>>({
     type: '',
     value: '',
@@ -114,17 +119,37 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     }
   ];
 
-  const getGPUList = async () => {
-    const data = await queryGPUList();
-    const list = _.map(data.items, (item: GPUListItem) => {
+  const generateCascaderOptions = (list: GPUListItem[]) => {
+    const workerFields = ['worker_name', 'worker_id', 'worker_ip'];
+
+    const workers = _.groupBy(list, 'worker_name');
+
+    const workerList = _.map(workers, (value: GPUListItem[]) => {
       return {
-        ...item,
-        title: '',
-        label: ` ${item.name}(${item.worker_name}) [${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}]`,
-        value: item.id
+        label: `${value[0].worker_name}`,
+        value: value[0].worker_name,
+        parent: true,
+        disableCheckbox: true,
+        ..._.pick(value[0], workerFields),
+        children: _.map(value, (item: GPUListItem) => {
+          return {
+            label: `[
+            ${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}] ${item.name}`,
+            value: item.id,
+            disableCheckbox: false,
+            ..._.omit(item, workerFields)
+          };
+        })
       };
     });
-    setGpuOptions(list);
+
+    return workerList;
+  };
+
+  const getGPUList = async () => {
+    const data = await queryGPUList();
+    const gpuList = generateCascaderOptions(data.items);
+    setGpuOptions(gpuList);
   };
 
   useEffect(() => {
@@ -470,6 +495,34 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     props.onBackendChange?.(val);
   }, []);
 
+  const generateGPUIds = (data: FormData) => {
+    const gpu_ids = _.get(data, 'gpu_selector.gpu_ids', []);
+    if (!gpu_ids.length) {
+      return {};
+    }
+    const result: string[] = [];
+
+    _.each(gpu_ids, (item: string[]) => {
+      if (item.length > 1) {
+        result.push(..._.tail(item));
+      }
+      if (item.length === 1) {
+        const worker = _.find(gpuOptions, { value: item[0] });
+        const gpus = _.map(worker?.children, 'value');
+        result.push(...gpus);
+      }
+    });
+
+    if (result.length) {
+      return {
+        gpu_selector: {
+          gpu_ids: result
+        }
+      };
+    }
+    return {};
+  };
+
   const handleOk = (formdata: FormData) => {
     let data = _.cloneDeep(formdata);
     if (data.categories) {
@@ -477,8 +530,10 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     } else {
       data.categories = [];
     }
+    const gpuSelector = generateGPUIds(data);
     onOk({
-      ..._.omit(data, ['scheduleType'])
+      ..._.omit(data, ['scheduleType']),
+      ...gpuSelector
     });
   };
 

src/pages/llmodels/components/update-modal.tsx

@@ -75,18 +75,59 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
   const [loading, setLoading] = useState(false);
   const localPathCache = useRef<string>('');
 
-  const getGPUList = async () => {
-    const data = await queryGPUList();
-    const list = _.map(data.items, (item: GPUListItem) => {
+  const generateCascaderOptions = (list: GPUListItem[]) => {
+    const workerFields = ['worker_name', 'worker_id', 'worker_ip'];
+
+    const workers = _.groupBy(list, 'worker_name');
+
+    const workerList = _.map(workers, (value: GPUListItem[]) => {
       return {
-        ...item,
-        title: '',
-        label: ` ${item.name}(${item.worker_name})[
-            ${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}]`,
-        value: item.id
+        label: `${value[0].worker_name}`,
+        value: value[0].worker_name,
+        parent: true,
+        ..._.pick(value[0], workerFields),
+        children: _.map(value, (item: GPUListItem) => {
+          return {
+            label: `[
+              ${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}] ${item.name}`,
+            value: item.id,
+            ..._.omit(item, workerFields)
+          };
+        })
       };
     });
-    setGpuOptions(list);
+
+    return workerList;
+  };
+
+  const getGPUList = async () => {
+    const data = await queryGPUList();
+    const gpuList = generateCascaderOptions(data.items);
+    setGpuOptions(gpuList);
+  };
+
+  const generateGPUSelector = (data: any) => {
+    const gpu_ids = _.get(data, 'gpu_selector.gpu_ids', []);
+    if (gpu_ids.length === 0) {
+      return [];
+    }
+    const dataList = _.reduce(
+      gpuOptions,
+      (list: string[], item: any) => {
+        const gpuIds = _.filter(
+          gpu_ids,
+          (id: string) => id.indexOf(item.worker_name) > -1
+        );
+        if (gpuIds.length && gpuIds.length === item.children.length) {
+          list.push(item.worker_name);
+        } else if (gpuIds.length) {
+          list.push(item.worker_name, ...gpuIds);
+        }
+        return list;
+      },
+      {}
+    );
+    return dataList;
   };
 
   useEffect(() => {
@@ -96,6 +137,10 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
         props.data
       );
 
+      const gpu_ids = generateGPUSelector(props.data);
+
+      console.log('gpu_ids+++++++++', gpu_ids);
+
       const formData = {
         ...result.values,
         ..._.omit(props.data, result.omits),
@@ -104,7 +149,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
           : null,
         scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
         gpu_selector: props.data?.gpu_selector || {
-          gpu_ids: []
+          gpu_ids: gpu_ids
         }
       };
       form.setFieldsValue(formData);

src/pages/llmodels/style/gpu-card.less

@@ -13,8 +13,8 @@
 
   .info {
     display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: flex-start;
     gap: 10px;
     color: var(--ant-color-text-tertiary);
   }