chore: select multiple gpus by manual

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

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
@@ -5,13 +6,11 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
 import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-
 import {
   Checkbox,
   Collapse,
   Form,
   FormInstance,
-  Select,
   Tooltip,
   Typography
 } from 'antd';
@@ -252,7 +251,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                     id: 'common.form.rule.select'
                   },
                   {
-                    name: 'gpu_selector'
+                    name: intl.formatMessage({ id: 'models.form.gpuselector' })
                   }
                 )
               }
@@ -262,14 +261,24 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
               label={intl.formatMessage({ id: 'models.form.gpuselector' })}
               required
               mode="multiple"
-              maxLength={1}
-            >
-              {gpuOptions.map((item) => (
-                <Select.Option key={item.value} value={item.value}>
-                  <GPUCard data={item}></GPUCard>
-                </Select.Option>
-              ))}
-            </SealSelect>
+              maxTagCount={1}
+              tagRender={(props) => {
+                return (
+                  <AutoTooltip
+                    className="m-r-0"
+                    closable={true}
+                    onClose={props.onClose}
+                    maxWidth={240}
+                  >
+                    {props.label}
+                  </AutoTooltip>
+                );
+              }}
+              options={gpuOptions}
+              optionRender={(props) => {
+                return <GPUCard data={props.data}></GPUCard>;
+              }}
+            ></SealSelect>
           </Form.Item>
         )}
         <Form.Item name="backend_version">

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

@@ -85,11 +85,12 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     const list = _.map(data.items, (item: GPUListItem) => {
       return {
         ...item,
-        label: item.name,
+        title: '',
+        label: ` ${item.name}(${item.worker_name})[
+            ${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}]`,
         value: item.id
       };
     });
-    console.log('queryGPUList========', list);
     setGpuOptions(list);
   };
 

src/pages/llmodels/components/gpu-card.tsx

@@ -14,12 +14,7 @@ const GPUCard: React.FC<{
   return (
     <div className="gpu-card">
       <div className="header" style={{ width: '100%' }}>
-        {header ?? (
-          <AutoTooltip ghost>
-            {data.label}({data.worker_name})[
-            {intl.formatMessage({ id: 'resources.table.index' })}:{data.index}]
-          </AutoTooltip>
-        )}
+        {header ?? <AutoTooltip ghost>{data.label}</AutoTooltip>}
       </div>
       <div className="info">
         {info ?? (

src/pages/llmodels/components/table-list.tsx

@@ -406,7 +406,7 @@ const Models: React.FC<ModelsProps> = ({
   const handleLogModalCancel = useCallback(() => {
     setOpenLogModal(false);
     onCancelViewLogs();
-  }, []);
+  }, [onCancelViewLogs]);
 
   const handleDelete = async (row: any) => {
     modalRef.current.show({
@@ -437,23 +437,23 @@ const Models: React.FC<ModelsProps> = ({
   };
 
   const handleOpenPlayGround = (row: any) => {
-    if (row.image_only) {
+    if (row.categories?.includes(modelCategoriesMap.image)) {
       navigate(`/playground/text-to-image?model=${row.name}`);
       return;
     }
-    if (row.text_to_speech) {
+    if (row.categories?.includes(modelCategoriesMap.text_to_speech)) {
       navigate(`/playground/speech?model=${row.name}&type=tts`);
       return;
     }
-    if (row.speech_to_text) {
+    if (row.categories?.includes(modelCategoriesMap.speech_to_text)) {
       navigate(`/playground/speech?model=${row.name}&type=stt`);
       return;
     }
-    if (row.reranker) {
+    if (row.categories?.includes(modelCategoriesMap.reranker)) {
       navigate(`/playground/rerank?model=${row.name}`);
       return;
     }
-    if (row.embedding_only) {
+    if (row.categories?.includes(modelCategoriesMap.embedding)) {
       navigate(`/playground/embedding?model=${row.name}`);
       return;
     }

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

@@ -48,8 +48,10 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     const list = _.map(data.items, (item: GPUListItem) => {
       return {
         ...item,
-        label: item.name,
-        value: `${item.worker_name}-${item.name}-${item.index}`
+        title: '',
+        label: ` ${item.name}(${item.worker_name})[
+            ${intl.formatMessage({ id: 'resources.table.index' })}:${item.index}]`,
+        value: item.id
       };
     });
     setGpuOptions(list);
@@ -92,9 +94,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
           ? props.data.categories[0]
           : null,
         scheduleType: props.data?.gpu_selector ? 'manual' : 'auto',
-        gpu_selector: props.data?.gpu_selector
-          ? `${props.data?.gpu_selector.worker_name}-${props.data?.gpu_selector.gpu_name}-${props.data?.gpu_selector.gpu_index}`
-          : null
+        gpu_selector: props.data?.gpu_selector || {
+          gpu_ids: []
+        }
       };
       form.setFieldsValue(formData);
     }
@@ -300,19 +302,13 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
       };
     }
     if (formdata.scheduleType === 'manual') {
-      const gpu = _.find(gpuOptions, (item: any) => {
-        return item.value === formdata.gpu_selector;
-      });
-
       onOk({
         ..._.omit(formdata, ['scheduleType']),
         categories: formdata.categories ? [formdata.categories] : [],
         worker_selector: null,
-        gpu_selector: gpu
+        gpu_selector: formdata.gpu_selector?.gpu_ids?.length
           ? {
-              gpu_name: gpu.name,
-              gpu_index: gpu.index,
-              worker_name: gpu.worker_name
+              gpu_ids: formdata.gpu_selector.gpu_ids
             }
           : null,
         ...obj