root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: gpu selector

Browse Source
This commit is contained in:
jialin
2025-02-17 13:49:55 +08:00
parent 9671f57b65
commit bbb133d0f2
7 changed files with 372 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/advance-config.tsx
+106 -40
View File
@@ -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
+67 -12
View File
@@ -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
+55 -10
View File
@@ -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
+2 -2
View File
@@ -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);
}