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

fix: sync and update the evaluation result

Browse Source
This commit is contained in:
jialin
2025-06-18 11:48:09 +08:00
parent 9d1e6df8f0
commit 9295f9cef3
11 changed files with 196 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/deploy-modal.tsx
+67 -60
View File
@@ -112,6 +112,7 @@ const AddModal: FC<AddModalProps> = (props) => {
unlockWarningStatus,
handleOnValuesChange: handleOnValuesChangeBefore,
handleEvaluateOnChange,
clearCahceFormValues,
warningStatus,
submitAnyway
} = useCheckCompatibility();
@@ -123,13 +124,6 @@ const AddModal: FC<AddModalProps> = (props) => {
const [collapsed, setCollapsed] = useState<boolean>(false);
const [isGGUF, setIsGGUF] = useState<boolean>(false);
const modelFileRef = useRef<any>(null);
const isHolderRef = useRef<{
model: boolean;
file: boolean;
}>({
model: false,
file: false
});
const evaluateStateRef = useRef<{ state: EvaluateProccessType }>({
state: 'form'
});
@@ -141,6 +135,7 @@ const AddModal: FC<AddModalProps> = (props) => {
*/
const updateRequestModelId = () => {
requestModelIdRef.current += 1;
return requestModelIdRef.current;
};
/**
@@ -152,17 +147,6 @@ const AddModal: FC<AddModalProps> = (props) => {
evaluateStateRef.current.state = state;
};
/**
*
* @param flag set the evaluate status of the model or file
*/
const setIsHolderRef = (flag: Record<string, boolean>) => {
isHolderRef.current = {
...isHolderRef.current,
...flag
};
};
const handleOnValuesChange = (data: {
changedValues: any;
allValues: any;
@@ -188,29 +172,30 @@ const AddModal: FC<AddModalProps> = (props) => {
return categories || null;
};
const handleSelectModelFile = async (item: any, evaluate?: boolean) => {
const handleSelectModelFile = async (item: any) => {
form.current?.form?.resetFields(resetFieldsByFile);
const modelInfo = onSelectModel(selectedModel, props.source);
/** display the selected model file information, but not
* unitl the evaluate result is ready
*/
form.current?.setFieldsValue?.({
...modelInfo,
file_name: item.fakeName,
categories: getCategory(item)
});
console.log('handleSelectModelFile', item);
await new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, 0);
});
// evaluate the form data when select a model file
if (item.fakeName) {
unlockWarningStatus();
const currentModelId = requestModelIdRef.current;
const currentModelId = updateRequestModelId();
setEvaluteState(EvaluateProccess.file);
const evaluateRes = await handleEvaluateOnChange?.({
changedValues: {},
allValues: form.current?.form?.getFieldsValue?.(),
@@ -245,41 +230,68 @@ const AddModal: FC<AddModalProps> = (props) => {
}
};
const handleOnSelectModel = (item: any, evaluate?: boolean) => {
/**
* evaluate: false means select a new model
* evaluate: true means select a model file from the evaluate result
*/
updateRequestModelId();
const handleOnSelectModel = async (item: any) => {
// If the item is empty or the same as the selected model, do nothing
console.log('handleOnSelectModel', item, selectedModel);
if (
_.isEmpty(item) ||
(item.isGGUF === selectedModel.isGGUF && item.name === selectedModel.name)
) {
return;
}
setIsGGUF(item.isGGUF);
clearCahceFormValues();
unlockWarningStatus();
setEvaluteState(EvaluateProccess.model);
setSelectedModel(item);
// If the evaluate is false, it means that the user selects a new model or the first time to open the modal.
if (!evaluate) {
unlockWarningStatus();
setEvaluteState(EvaluateProccess.model);
setSelectedModel(item);
form.current?.form?.resetFields(resetFieldsByModel);
const modelInfo = onSelectModel(item, props.source);
form.current?.form?.resetFields(resetFieldsByModel);
const modelInfo = onSelectModel(item, props.source);
form.current?.setFieldsValue?.({
...modelInfo,
categories: getCategory(item)
});
setWarningStatus(
{
show: true,
title: '',
type: 'transition',
message: intl.formatMessage({ id: 'models.form.evaluating' })
},
{
override: true
}
);
await new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, 0);
});
if (item.isGGUF) {
modelFileRef.current?.fetchModelFiles?.();
}
};
const handleOnSelectModelAfterEvaluate = (item: any) => {
console.log('handleOnSelectModelAfterEvaluate', item);
if (item.isGGUF) {
return;
}
const modelInfo = onSelectModel(item, props.source);
if (
evaluateStateRef.current.state === EvaluateProccess.model &&
item.evaluateResult
) {
handleShowCompatibleAlert(item.evaluateResult);
form.current?.setFieldsValue?.({
...getDefaultSpec(item),
...modelInfo,
categories: getCategory(item)
});
}
if (!item.isGGUF) {
setIsGGUF(false);
const modelInfo = onSelectModel(item, props.source);
if (
evaluateStateRef.current.state === EvaluateProccess.model &&
item.evaluateResult
) {
handleShowCompatibleAlert(item.evaluateResult);
form.current?.setFieldsValue?.({
...getDefaultSpec(item),
...modelInfo,
categories: getCategory(item)
});
}
}
};
const handleOnOk = async (allValues: FormData) => {
@@ -298,14 +310,6 @@ const AddModal: FC<AddModalProps> = (props) => {
const handleSetIsGGUF = async (flag: boolean) => {
setIsGGUF(flag);
await new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, 0);
});
if (flag) {
modelFileRef.current?.fetchModelFiles?.();
}
};
const handleBackendChange = async (backend: string) => {
@@ -446,6 +450,9 @@ const AddModal: FC<AddModalProps> = (props) => {
hasLinuxWorker={hasLinuxWorker}
modelSource={props.source}
onSelectModel={handleOnSelectModel}
onSelectModelAfterEvaluate={
handleOnSelectModelAfterEvaluate
}
displayEvaluateStatus={displayEvaluateStatus}
unlockWarningStatus={unlockWarningStatus}
gpuOptions={props.gpuOptions}
src/pages/llmodels/components/file-skeleton.tsx
+23
View File
@@ -0,0 +1,23 @@
import { Flex, Skeleton, Space } from 'antd';
import styled from 'styled-components';
const Wrapper = styled(Flex)`
padding: 12px 14px;
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
background-color: var(--ant-color-bg-container);
`;
const FileSkeleton = () => {
return (
<Wrapper vertical justify={'space-between'}>
<Skeleton paragraph={{ rows: 1, width: '100%' }} title={false}></Skeleton>
<Space>
<Skeleton.Node style={{ width: 60, height: 22 }}></Skeleton.Node>
<Skeleton.Node style={{ width: 60, height: 22 }}></Skeleton.Node>
</Space>
</Wrapper>
);
};
export default FileSkeleton;
src/pages/llmodels/components/hf-model-file.tsx
+22 -16
View File
@@ -21,6 +21,7 @@ import {
} from '../apis';
import { backendOptionsMap, modelSourceMap } from '../config';
import '../style/hf-model-file.less';
import FileSkeleton from './file-skeleton';
import ModelFileItem from './model-file-item';
import TitleWrapper from './title-wrapper';
@@ -40,7 +41,8 @@ interface HFModelFileProps {
modelSource: string;
ref: any;
gpuOptions?: any[];
onSelectFile?: (file: any, evaluate?: boolean) => void;
onSelectFile?: (file: any) => void;
onSelectFileAfterEvaluate?: (file: any) => void;
}
const pattern = /^(.*)-(\d+)-of-(\d+)\.(.*)$/;
@@ -50,7 +52,8 @@ const includeReg = /\.(safetensors|gguf)$/i;
const filterRegGGUF = /\.(gguf)$/i;
const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
const { collapsed, modelSource, isDownload } = props;
const { collapsed, modelSource, isDownload, onSelectFileAfterEvaluate } =
props;
const intl = useIntl();
const [isEvaluating, setIsEvaluating] = useState(false);
const [dataSource, setDataSource] = useState<any>({
@@ -74,8 +77,8 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
const checkTokenRef = useRef<any>(null);
const timer = useRef<any>(null);
const handleSelectModelFile = (item: any, evaluate?: boolean) => {
props.onSelectFile?.(item, evaluate);
const handleSelectModelFile = (item: any) => {
props.onSelectFile?.(item);
setCurrent(item.path);
currentPathRef.current = item.path;
};
@@ -258,7 +261,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
);
if (currentItem) {
handleSelectModelFile(currentItem, true);
onSelectFileAfterEvaluate?.(currentItem);
}
setDataSource({ fileList: resultList, loading: false });
setIsEvaluating(false);
@@ -361,7 +364,13 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
)}
<SimpleOverlay height={collapsed ? 'max-content' : 'calc(100vh - 300px)'}>
<div style={{ padding: '16px 24px' }}>
{dataSource.fileList.length ? (
{dataSource.loading ? (
<ItemFileWrapper>
{_.times(5, (index: number) => {
return <FileSkeleton key={index}></FileSkeleton>;
})}
</ItemFileWrapper>
) : dataSource.fileList.length ? (
<ItemFileWrapper>
{_.map(dataSource.fileList, (item: any) => {
return (
@@ -376,16 +385,13 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
})}
</ItemFileWrapper>
) : (
!dataSource.loading &&
!dataSource.fileList.length && (
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={intl.formatMessage({
id: 'models.search.nofiles'
})}
/>
)
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={intl.formatMessage({
id: 'models.search.nofiles'
})}
/>
)}
</div>
</SimpleOverlay>
src/pages/llmodels/components/model-card.tsx
+9 -1
View File
@@ -292,8 +292,16 @@ const ModelCard: React.FC<{
);
useEffect(() => {
if (!props.selectedModel) return;
getModelCardData();
}, [props.selectedModel?.name]);
setIsGGUFModel(props.selectedModel.isGGUF);
setModelData({
id: props.selectedModel.name,
name: props.selectedModel.name,
isGGUF: props.selectedModel.isGGUF
});
}, [props.selectedModel?.name, props.selectedModel?.isGGUF]);
useEffect(() => {
return () => {
src/pages/llmodels/components/search-model.tsx
+11 -27
View File
@@ -46,7 +46,8 @@ interface SearchInputProps {
gpuOptions?: any[];
setLoadingModel?: (flag: boolean) => void;
onSourceChange?: (source: string) => void;
onSelectModel: (model: any, evaluate?: boolean) => void;
onSelectModel: (model: any) => void;
onSelectModelAfterEvaluate: (model: any) => void;
unlockWarningStatus?: () => void;
displayEvaluateStatus?: (
data: MessageStatus,
@@ -63,6 +64,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
gpuOptions,
setLoadingModel,
onSelectModel,
onSelectModelAfterEvaluate,
displayEvaluateStatus,
unlockWarningStatus
} = props;
@@ -138,9 +140,13 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
return isGGUF || isGGUFFromMs;
};
const handleOnSelectModel = (model: any, evaluate?: boolean) => {
const handleOnSelectModel = (model: any) => {
const item = model || {};
onSelectModel(item, evaluate);
if (item.evaluateResult && !item.isGGUF) {
onSelectModelAfterEvaluate(item);
} else {
onSelectModel(item);
}
setCurrent(item.id);
currentRef.current = item.id;
};
@@ -332,12 +338,13 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
repoOptions: resultList
};
});
// current selected item
const currentItem = resultList.find(
(item) => item.id === currentRef.current
);
if (currentItem) {
handleOnSelectModel(currentItem, true);
onSelectModelAfterEvaluate(currentItem);
}
} catch (error) {
if (requestIdRef.current === currentRequestId) {
@@ -406,17 +413,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
sortType: sort
});
// It's a new request, so we need to reset the state
unlockWarningStatus?.();
displayEvaluateStatus?.(
{
show: list?.length > 0,
message: ''
},
{
override: true
}
);
handleOnSelectModel(list[0]);
setLoadingModel?.(false);
@@ -498,18 +494,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
repoOptions: currentList
};
});
unlockWarningStatus?.();
// reset evaluate status
displayEvaluateStatus?.(
{
show: true,
message: ''
},
{
override: true
}
);
console.log('isEvaluating:', isEvaluating);
handleOnSelectModel(currentList[0]);
handleEvaluate(currentList);
} else if (modelSource === modelSourceMap.modelscope_value) {