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

fix: do not init meta data when switch tab

Browse Source
This commit is contained in:
jialin
2025-03-05 20:30:53 +08:00
parent caadc02fb4
commit 4de1a38c00
11 changed files with 133 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icon-font/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_pr3u3llgke.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_y6wf3nguxjl.js'
});
export default IconFont;
src/components/image-editor/index.tsx
+8 -5
View File
@@ -78,8 +78,8 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const mouseDownState = useRef<boolean>(false);
const disabled = useMemo(() => {
return isDisabled || invertMask;
}, [isDisabled, invertMask]);
return isDisabled || invertMask || !!maskUpload?.length;
}, [isDisabled, invertMask, maskUpload]);
const getTransformedPoint = useCallback(
(offsetX: number, offsetY: number) => {
@@ -465,6 +465,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
clearOverlayCanvas();
setStrokes([]);
currentStroke.current = [];
saveImage();
console.log('Resetting strokes', currentStroke.current);
}, []);
@@ -577,8 +578,9 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
1
);
canvas!.width = img.width * baseScale.current;
canvas!.height = img.height * baseScale.current;
// if need to fit the image to the container, show * baseScale.current
canvas!.width = img.width;
canvas!.height = img.height;
// fit the image to the container
autoScale.current = autoScale.current || 1;
@@ -721,6 +723,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
};
const handleOnWheel = (event: any) => {
// stop
handleZoom(event);
updateCursorSize();
updateCursorPosOnZoom(event);
@@ -874,7 +877,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
<Checkbox
onChange={handleOnChangeMask}
className="flex-center"
value={negativeMaskRef.current}
value={invertMask}
>
<span className="font-size-12">
{intl.formatMessage({
src/components/progress-bar/index.tsx
+38 -38
View File
@@ -7,8 +7,17 @@ const RenderProgress = memo(
steps?: number;
download?: boolean;
label?: React.ReactNode;
successPercent?: number;
successColor?: string;
}) => {
const { percent, steps = 5, download, label } = props;
const {
percent,
steps = 5,
download,
label,
successPercent,
successColor
} = props;
const strokeColor = useMemo(() => {
if (download) {
@@ -24,47 +33,38 @@ const RenderProgress = memo(
return 'var(--ant-color-error)';
}, [percent]);
const renderProgress = useMemo(() => {
return (
<Progress
percentPosition={{ align: 'center', type: 'inner' }}
size={[undefined, 16]}
format={() => {
return (
<span
style={{
color: '#fff'
}}
>
{percent}%
</span>
);
}}
percent={percent}
success={{
percent: successPercent,
strokeColor: 'var(--ant-geekblue-3)'
}}
strokeColor={strokeColor}
></Progress>
);
}, [percent, successPercent, strokeColor]);
return (
<>
{label ? (
<Tooltip title={label}>
<Progress
percentPosition={{ align: 'center', type: 'inner' }}
size={[undefined, 16]}
format={() => {
return (
<span
style={{
color: '#fff'
}}
>
{percent}%
</span>
);
}}
percent={percent}
strokeColor={strokeColor}
></Progress>
</Tooltip>
<Tooltip title={label}>{renderProgress}</Tooltip>
) : (
<Progress
type="line"
percentPosition={{ align: 'center', type: 'inner' }}
size={[undefined, 16]}
format={() => {
return (
<span
style={{
color: '#fff'
}}
>
{percent}%
</span>
);
}}
percent={percent}
strokeColor={strokeColor}
></Progress>
renderProgress
)}
</>
);
src/components/seal-table/components/header-prefix.tsx
+13 -2
View File
@@ -1,4 +1,5 @@
import { DownOutlined, RightOutlined } from '@ant-design/icons';
import IconFont from '@/components/icon-font';
import { RightOutlined } from '@ant-design/icons';
import { Button, Checkbox } from 'antd';
import _ from 'lodash';
import React from 'react';
@@ -39,7 +40,17 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
<span style={{ marginRight: 5 }}>
{_.isBoolean(expandable) ? (
<Button type="text" size="small" onClick={handleToggleExpand}>
{expandAll ? <DownOutlined /> : <RightOutlined />}
{expandAll ? (
<IconFont
type="icon-collapse_all"
className="font-size-16"
></IconFont>
) : (
<IconFont
type="icon-uncollapse_all"
className="font-size-16"
></IconFont>
)}
</Button>
) : (
expandable
src/components/seal-table/index.tsx
+3
View File
@@ -53,6 +53,9 @@ const SealTable: React.FC<SealTableProps & { pagination: PaginationProps }> = (
}, [columns, children]);
const expandAll = useMemo(() => {
if (expandedRowKeys?.length === 0) {
return false;
}
const allKeys = new Set(expandedRowKeys);
const currentDataKeys = props.dataSource.map((record) => record[rowKey]);
return currentDataKeys.every((key) => allKeys.has(key));
src/pages/llmodels/config/llama-config.ts
+1 -1
View File
@@ -348,7 +348,7 @@ const options = [
{
label: '--rope-scaling',
value: '--rope-scaling',
options: ['none', 'linear', 'yarn']
options: ['linear', 'yarn']
},
{
label: '--rope-scale',
src/pages/playground/components/image-edit.tsx
+3 -3
View File
@@ -289,8 +289,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
isResetNeeded: false
};
});
setMask(data.mask || null);
setImage(data.img || maskUpload[0]?.dataUrl || null);
setMask(data.mask || maskUpload[0]?.dataUrl || null);
setImage(data.img);
},
[]
);
@@ -332,7 +332,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
return (
<>
<UploadImg
accept="image/png"
accept="image/*"
drag={true}
multiple={false}
handleUpdateImgList={handleUpdateImageList}
src/pages/playground/config/params-config.ts
+2 -1
View File
@@ -689,11 +689,12 @@ export const ChatParamsConfig: ParamsSchema[] = [
html: false,
isLocalized: true
},
attrs: {
formItemAttrs: {
normalize(value: string) {
return value || null;
}
},
attrs: {},
rules: [
{
required: false
src/pages/playground/hooks/config.ts
+7
View File
@@ -10,6 +10,13 @@ export const LLM_METAKEYS: Record<string, any> = {
presence_penalty: 'presence_penalty'
};
export const precisionTwoKeys = [
'temperature',
'top_p',
'frequency_penalty',
'presence_penalty'
];
export const IMG_METAKEYS = [
'sample_method',
'sampling_steps',
src/pages/playground/hooks/use-init-meta.ts
+27 -20
View File
@@ -23,7 +23,8 @@ import {
IMG_METAKEYS,
advancedFieldsDefaultValus,
imgInitialValues,
openaiCompatibleFieldsDefaultValus
openaiCompatibleFieldsDefaultValus,
precisionTwoKeys
} from './config';
interface MessageProps {
@@ -53,16 +54,13 @@ export const useInitLLmMeta = (
} = options;
const formRef = useRef<any>(null);
const [searchParams] = useSearchParams();
const defaultModel =
searchParams.get('model') ||
(isChat ? model ?? modelList?.[0]?.value : model);
const [modelMeta, setModelMeta] = useState<any>({});
const [initialValues, setInitialValues] = useState<any>({
...defaultValues,
model: defaultModel
model: ''
});
const [parameters, setParams] = useState<any>({
model: defaultModel
model: ''
});
const [paramsConfig, setParamsConfig] =
useState<ParamsSchema[]>(defaultParamsConfig);
@@ -70,13 +68,20 @@ export const useInitLLmMeta = (
const { initialize: innitializeParams } = useOverlayScroller();
const defaultModel = useMemo(() => {
return (
searchParams.get('model') ||
(isChat ? model ?? modelList?.[0]?.value : model)
);
}, [model, modelList, isChat]);
const extractLLMMeta = (meta: any) => {
const towKeys = new Set(precisionTwoKeys);
const modelMeta = meta || {};
const modelMetaValue = _.pick(modelMeta, _.keys(metaKeys));
const obj = Object.entries(metaKeys).reduce((acc: any, [key, value]) => {
const val = modelMetaValue[key];
if (val && _.hasIn(modelMetaValue, key)) {
acc[value] = val;
if (_.hasIn(modelMetaValue, key)) {
acc[value] = towKeys.has(key) ? _.round(val, 2) : val;
}
return acc;
}, {});
@@ -109,10 +114,9 @@ export const useInitLLmMeta = (
const handleOnModelChange = useCallback(
(val: string) => {
if (!val || val === parameters.model) return;
if (!val) return;
const model = modelList.find((item) => item.value === val);
const { form: initialData, meta } = extractLLMMeta(model?.meta);
setModelMeta(meta || {});
setInitialValues({
...initialData,
@@ -135,7 +139,7 @@ export const useInitLLmMeta = (
});
setParamsConfig(config);
},
[modelList, parameters, defaultParamsConfig]
[modelList, defaultParamsConfig]
);
const handleOnValuesChange = useCallback(
@@ -152,10 +156,10 @@ export const useInitLLmMeta = (
);
useEffect(() => {
if (defaultModel) {
if (defaultModel && modelList.length) {
handleOnModelChange(defaultModel);
}
}, [defaultModel, handleOnModelChange]);
}, [defaultModel, modelList.length]);
useEffect(() => {
if (paramsRef.current) {
@@ -185,7 +189,6 @@ export const useInitImageMeta = (props: MessageProps) => {
const { modelList } = props;
const form = useRef<any>(null);
const [searchParams] = useSearchParams();
const defaultModel = searchParams.get('model') || modelList?.[0]?.value || '';
const [modelMeta, setModelMeta] = useState<any>({});
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
const [imageSizeOptions, setImageSizeOptions] = React.useState<
@@ -198,7 +201,7 @@ export const useInitImageMeta = (props: MessageProps) => {
const [initialValues, setInitialValues] = useState<any>({
...imgInitialValues,
...advancedFieldsDefaultValus,
model: defaultModel
model: ''
});
const [paramsConfig, setParamsConfig] = useState<ParamsSchema[]>([
...ImageCountConfig,
@@ -209,9 +212,13 @@ export const useInitImageMeta = (props: MessageProps) => {
const [parameters, setParams] = useState<any>({
...imgInitialValues,
...advancedFieldsDefaultValus,
model: defaultModel
model: ''
});
const defaultModel = useMemo(() => {
return searchParams.get('model') || modelList?.[0]?.value || '';
}, [modelList]);
const cacheFormData = React.useRef<Record<string, any>>({
...imgInitialValues,
...openaiCompatibleFieldsDefaultValus,
@@ -373,7 +380,7 @@ export const useInitImageMeta = (props: MessageProps) => {
const handleOnModelChange = useCallback(
(val: string) => {
if (!val || val === parameters.model) return;
if (!val) return;
const model = modelList.find((item) => item.value === val);
const { form: initialData, sizeOptions } = extractIMGMeta(model?.meta);
const newParamsConfig = generateImageParamsConfig(model, sizeOptions);
@@ -396,7 +403,7 @@ export const useInitImageMeta = (props: MessageProps) => {
});
updateCacheFormData(initialData);
},
[modelList, isOpenaiCompatible, parameters.model]
[modelList, isOpenaiCompatible]
);
const handleOnValuesChange = useCallback(
@@ -448,10 +455,10 @@ export const useInitImageMeta = (props: MessageProps) => {
);
useEffect(() => {
if (defaultModel) {
if (defaultModel && modelList.length) {
handleOnModelChange(defaultModel);
}
}, [defaultModel, handleOnModelChange]);
}, [defaultModel, modelList.length]);
return {
extractIMGMeta,
src/pages/resources/components/workers.tsx
+30 -37
View File
@@ -264,6 +264,30 @@ const Workers: React.FC = () => {
return <div></div>;
};
const renderProgressLabels = (data: {
total: number;
used: number;
allocated: number;
}) => {
const { total, used, allocated } = data;
return (
<span className="flex-column">
<span>
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
{convertFileSize(total, 0)}
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(used, 0)}
</span>
<span>
{intl.formatMessage({ id: 'resources.table.allocated' })}:{' '}
{convertFileSize(allocated, 0)}
</span>
</span>
);
};
useEffect(() => {
fetchData();
}, [queryParams]);
@@ -425,22 +449,11 @@ const Workers: React.FC = () => {
record?.status?.memory?.used,
record?.status?.memory?.total
)}
label={
<span className="flex-column">
<span>
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
{convertFileSize(record?.status?.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(
record?.status?.memory?.used ||
record?.status.memory?.allocated,
0
)}
</span>
</span>
}
successPercent={formateUtilazation(
record?.status?.memory?.allocated,
record?.status?.memory?.total
)}
label={renderProgressLabels(record?.status?.memory)}
></ProgressBar>
);
}}
@@ -511,27 +524,7 @@ const Workers: React.FC = () => {
0
)
}
label={
<span className="flex-column">
<span>
{intl.formatMessage({
id: 'resources.table.total'
})}
: {convertFileSize(item.memory?.total, 0)}
</span>
<span>
{intl.formatMessage({
id: 'resources.table.used'
})}
:{' '}
{convertFileSize(
item.memory?.used ||
item.memory?.allocated,
0
)}
</span>
</span>
}
label={renderProgressLabels(item.memory)}
></ProgressBar>
{item.memory.is_unified_memory && (
<Tooltip