From 4de1a38c00aba914dd7de39c51bb3e5d4110d722 Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 5 Mar 2025 20:30:01 +0800 Subject: [PATCH] fix: do not init meta data when switch tab --- src/components/icon-font/index.tsx | 2 +- src/components/image-editor/index.tsx | 13 ++-- src/components/progress-bar/index.tsx | 76 +++++++++---------- .../seal-table/components/header-prefix.tsx | 15 +++- src/components/seal-table/index.tsx | 3 + src/pages/llmodels/config/llama-config.ts | 2 +- .../playground/components/image-edit.tsx | 6 +- src/pages/playground/config/params-config.ts | 3 +- src/pages/playground/hooks/config.ts | 7 ++ src/pages/playground/hooks/use-init-meta.ts | 47 +++++++----- src/pages/resources/components/workers.tsx | 67 ++++++++-------- 11 files changed, 133 insertions(+), 108 deletions(-) diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index 54c73cd6..6bed53db 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -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; diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index 4a6b2ef8..f025cc18 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -78,8 +78,8 @@ const CanvasImageEditor: React.FC = ({ const mouseDownState = useRef(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 = ({ clearOverlayCanvas(); setStrokes([]); currentStroke.current = []; + saveImage(); console.log('Resetting strokes', currentStroke.current); }, []); @@ -577,8 +578,9 @@ const CanvasImageEditor: React.FC = ({ 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 = ({ }; const handleOnWheel = (event: any) => { + // stop handleZoom(event); updateCursorSize(); updateCursorPosOnZoom(event); @@ -874,7 +877,7 @@ const CanvasImageEditor: React.FC = ({ {intl.formatMessage({ diff --git a/src/components/progress-bar/index.tsx b/src/components/progress-bar/index.tsx index 8bea617e..32034af3 100644 --- a/src/components/progress-bar/index.tsx +++ b/src/components/progress-bar/index.tsx @@ -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 ( + { + return ( + + {percent}% + + ); + }} + percent={percent} + success={{ + percent: successPercent, + strokeColor: 'var(--ant-geekblue-3)' + }} + strokeColor={strokeColor} + > + ); + }, [percent, successPercent, strokeColor]); + return ( <> {label ? ( - - { - return ( - - {percent}% - - ); - }} - percent={percent} - strokeColor={strokeColor} - > - + {renderProgress} ) : ( - { - return ( - - {percent}% - - ); - }} - percent={percent} - strokeColor={strokeColor} - > + renderProgress )} ); diff --git a/src/components/seal-table/components/header-prefix.tsx b/src/components/seal-table/components/header-prefix.tsx index 5f71e77f..89efc494 100644 --- a/src/components/seal-table/components/header-prefix.tsx +++ b/src/components/seal-table/components/header-prefix.tsx @@ -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 = (props) => { {_.isBoolean(expandable) ? ( ) : ( expandable diff --git a/src/components/seal-table/index.tsx b/src/components/seal-table/index.tsx index 15b7c8e6..87914a9a 100644 --- a/src/components/seal-table/index.tsx +++ b/src/components/seal-table/index.tsx @@ -53,6 +53,9 @@ const SealTable: React.FC = ( }, [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)); diff --git a/src/pages/llmodels/config/llama-config.ts b/src/pages/llmodels/config/llama-config.ts index 2a2aa988..61819dfb 100644 --- a/src/pages/llmodels/config/llama-config.ts +++ b/src/pages/llmodels/config/llama-config.ts @@ -348,7 +348,7 @@ const options = [ { label: '--rope-scaling', value: '--rope-scaling', - options: ['none', 'linear', 'yarn'] + options: ['linear', 'yarn'] }, { label: '--rope-scale', diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index e0e4391b..cb1d8ac6 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -289,8 +289,8 @@ const GroundImages: React.FC = 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 = forwardRef((props, ref) => { return ( <> = { presence_penalty: 'presence_penalty' }; +export const precisionTwoKeys = [ + 'temperature', + 'top_p', + 'frequency_penalty', + 'presence_penalty' +]; + export const IMG_METAKEYS = [ 'sample_method', 'sampling_steps', diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts index 6a952512..b2ff0e7f 100644 --- a/src/pages/playground/hooks/use-init-meta.ts +++ b/src/pages/playground/hooks/use-init-meta.ts @@ -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(null); const [searchParams] = useSearchParams(); - const defaultModel = - searchParams.get('model') || - (isChat ? model ?? modelList?.[0]?.value : model); const [modelMeta, setModelMeta] = useState({}); const [initialValues, setInitialValues] = useState({ ...defaultValues, - model: defaultModel + model: '' }); const [parameters, setParams] = useState({ - model: defaultModel + model: '' }); const [paramsConfig, setParamsConfig] = useState(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(null); const [searchParams] = useSearchParams(); - const defaultModel = searchParams.get('model') || modelList?.[0]?.value || ''; const [modelMeta, setModelMeta] = useState({}); const [isOpenaiCompatible, setIsOpenaiCompatible] = useState(false); const [imageSizeOptions, setImageSizeOptions] = React.useState< @@ -198,7 +201,7 @@ export const useInitImageMeta = (props: MessageProps) => { const [initialValues, setInitialValues] = useState({ ...imgInitialValues, ...advancedFieldsDefaultValus, - model: defaultModel + model: '' }); const [paramsConfig, setParamsConfig] = useState([ ...ImageCountConfig, @@ -209,9 +212,13 @@ export const useInitImageMeta = (props: MessageProps) => { const [parameters, setParams] = useState({ ...imgInitialValues, ...advancedFieldsDefaultValus, - model: defaultModel + model: '' }); + const defaultModel = useMemo(() => { + return searchParams.get('model') || modelList?.[0]?.value || ''; + }, [modelList]); + const cacheFormData = React.useRef>({ ...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, diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index 05add471..372cbad4 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -264,6 +264,30 @@ const Workers: React.FC = () => { return
; }; + const renderProgressLabels = (data: { + total: number; + used: number; + allocated: number; + }) => { + const { total, used, allocated } = data; + return ( + + + {intl.formatMessage({ id: 'resources.table.total' })}:{' '} + {convertFileSize(total, 0)} + + + {intl.formatMessage({ id: 'resources.table.used' })}:{' '} + {convertFileSize(used, 0)} + + + {intl.formatMessage({ id: 'resources.table.allocated' })}:{' '} + {convertFileSize(allocated, 0)} + + + ); + }; + useEffect(() => { fetchData(); }, [queryParams]); @@ -425,22 +449,11 @@ const Workers: React.FC = () => { record?.status?.memory?.used, record?.status?.memory?.total )} - label={ - - - {intl.formatMessage({ id: 'resources.table.total' })}:{' '} - {convertFileSize(record?.status?.memory?.total, 0)} - - - {intl.formatMessage({ id: 'resources.table.used' })}:{' '} - {convertFileSize( - record?.status?.memory?.used || - record?.status.memory?.allocated, - 0 - )} - - - } + successPercent={formateUtilazation( + record?.status?.memory?.allocated, + record?.status?.memory?.total + )} + label={renderProgressLabels(record?.status?.memory)} > ); }} @@ -511,27 +524,7 @@ const Workers: React.FC = () => { 0 ) } - label={ - - - {intl.formatMessage({ - id: 'resources.table.total' - })} - : {convertFileSize(item.memory?.total, 0)} - - - {intl.formatMessage({ - id: 'resources.table.used' - })} - :{' '} - {convertFileSize( - item.memory?.used || - item.memory?.allocated, - 0 - )} - - - } + label={renderProgressLabels(item.memory)} > {item.memory.is_unified_memory && (