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/components/audio-player/simple-audio.tsx
+16 -8
View File
@@ -1,7 +1,7 @@
import { formatTime } from '@/utils/index';
import { DeleteOutlined, DownloadOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Dropdown, Slider, type MenuProps } from 'antd';
import { Button, Dropdown, Slider, Tooltip, type MenuProps } from 'antd';
import { createStyles } from 'antd-style';
import { round } from 'lodash';
import React, {
@@ -20,7 +20,7 @@ interface AudioPlayerProps {
url: string;
speed?: number;
ref?: any;
name?: string;
name: string;
height?: number;
width?: number;
duration?: number;
@@ -107,6 +107,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
autoplay = false,
speed: defaultSpeed = 1,
actions = ['delete'],
name,
onDelete
} = props;
const audioRef = React.useRef<HTMLAudioElement>(null);
@@ -117,6 +118,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
currentTime: 0,
duration: 0
});
console.log('audioState', name);
const [playOn, setPlayOn] = React.useState<boolean>(false);
const [speakerOn, setSpeakerOn] = React.useState<boolean>(false);
const [volume, setVolume] = React.useState<number>(1);
@@ -246,7 +248,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
const link = document.createElement('a');
link.href = url;
link.download = 'audio.mp3'; // Default filename
link.download = filename || 'audio.mp3'; // Default filename
document.body.appendChild(link);
link.click();
link.remove();
@@ -304,7 +306,11 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
return (
<div
className={styles.wrapper}
style={{ width: props.width || '100%', height: props.height || '54px' }}
style={{
width: props.width || '100%',
height: props.height || '60px',
position: 'relative'
}}
>
<div className="inner">
<Button
@@ -327,10 +333,12 @@ const AudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
)
}
></Button>
<span className="time current">
{formatTime(audioState.currentTime)} /{' '}
{formatTime(audioState.duration)}
</span>
<Tooltip title={name}>
<span className="time current">
{formatTime(audioState.currentTime)} /{' '}
{formatTime(audioState.duration)}
</span>
</Tooltip>
<div className="slider">
<Slider
tooltip={{ open: false }}
src/pages/dashboard/components/usage-inner/request-token-inner.tsx
+37 -24
View File
@@ -9,11 +9,22 @@ import React from 'react';
import styled from 'styled-components';
import { baseColorMap } from '../../config';
const DownloadButton = styled(Button)`
const DownloadButton = styled(Button).attrs({
className: 'download-button'
})`
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
display: none;
`;
const CardWrapperBox = styled.div`
&:hover {
.download-button {
display: flex;
}
}
`;
interface RequestTokenInnerProps {
@@ -66,29 +77,31 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
const intl = useIntl();
return (
<CardWrapper style={{ width: '100%', position: 'relative' }}>
<DownloadButton
type="link"
icon={<ExportOutlined />}
size="small"
onClick={onExport}
>
{intl.formatMessage({ id: 'common.button.export' })}
</DownloadButton>
<SimpleCard dataList={dataList} height={80}></SimpleCard>
<MixLineBar
chartData={{
line: requestData,
bar: tokenData
}}
seriesData={[]}
xAxisData={xAxisData}
height={360}
smooth={true}
legendData={legendData}
labelFormatter={labelFormatter}
></MixLineBar>
</CardWrapper>
<CardWrapperBox>
<CardWrapper style={{ width: '100%', position: 'relative' }}>
<DownloadButton
type="link"
icon={<ExportOutlined />}
size="small"
onClick={onExport}
>
{intl.formatMessage({ id: 'common.button.export' })}
</DownloadButton>
<SimpleCard dataList={dataList} height={80}></SimpleCard>
<MixLineBar
chartData={{
line: requestData,
bar: tokenData
}}
seriesData={[]}
xAxisData={xAxisData}
height={360}
smooth={true}
legendData={legendData}
labelFormatter={labelFormatter}
></MixLineBar>
</CardWrapper>
</CardWrapperBox>
);
};
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) {
src/pages/llmodels/hooks/index.ts
+6
View File
@@ -530,6 +530,10 @@ export const useCheckCompatibility = () => {
return noLocalValue || noOllamaValue;
};
const clearCahceFormValues = () => {
cacheFormValuesRef.current = {};
};
const handleOnValuesChange = async (params: {
changedValues: any;
allValues: any;
@@ -537,6 +541,7 @@ export const useCheckCompatibility = () => {
}) => {
const { allValues, source } = params;
if (_.isEqual(cacheFormValuesRef.current, allValues)) {
console.log('No changes detected, skipping evaluation.');
return;
}
@@ -604,6 +609,7 @@ export const useCheckCompatibility = () => {
handleBackendChangeBefore,
handleOnValuesChange: debounceHandleValuesChange,
handleEvaluateOnChange: handleOnValuesChange,
clearCahceFormValues,
warningStatus,
checkTokenRef,
submitAnyway
src/pages/playground/components/message-input.tsx
+2
View File
@@ -305,6 +305,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
uid: updateUidCount(),
format: audioTypeMap[data.file.type] as AudioFormat,
base64: base64Audio.split(',')[1],
name: audioData.name,
data: _.pick(audioData, ['url', 'name', 'duration'])
}
]
@@ -518,6 +519,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
<AudioWrapper>
<SimpleAudio
url={message.audio?.[0].data?.url}
name={message.audio?.[0].name}
height={44}
onDelete={handleDeleteAudio}
></SimpleAudio>
src/pages/playground/components/multiple-chat/message-body.tsx
+2
View File
@@ -217,6 +217,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
<AudioWrapper>
<SimpleAudio
url={data.audio?.[0]?.data.url}
name={data.audio?.[0]?.data.name}
actions={[]}
height={44}
></SimpleAudio>
@@ -247,6 +248,7 @@ const MessageBody: React.FC<MessageBodyProps> = forwardRef(
<AudioWrapper>
<SimpleAudio
url={data.audio?.[0]?.data.url}
name={data.audio?.[0]?.data.name}
onDelete={handleDeleteAudio}
height={44}
></SimpleAudio>
src/pages/playground/config/types.ts
+1
View File
@@ -19,6 +19,7 @@ export interface AudioData {
uid: string | number;
base64: string;
format: AudioFormat;
name?: string;
data: {
url: string;
name: string;