diff --git a/src/components/image-editor/index.tsx b/src/components/image-editor/index.tsx index 22a51dd8..9e69a4ba 100644 --- a/src/components/image-editor/index.tsx +++ b/src/components/image-editor/index.tsx @@ -908,7 +908,7 @@ const CanvasImageEditor: React.FC = forwardRef( onClick={handleFitView} size="middle" type="text" - disabled={disabled} + disabled={isDisabled} > diff --git a/src/components/progress-bar/index.tsx b/src/components/progress-bar/index.tsx index 32034af3..3e7f556b 100644 --- a/src/components/progress-bar/index.tsx +++ b/src/components/progress-bar/index.tsx @@ -3,6 +3,7 @@ import { memo, useMemo } from 'react'; const RenderProgress = memo( (props: { + open?: boolean; percent: number; steps?: number; download?: boolean; @@ -11,6 +12,7 @@ const RenderProgress = memo( successColor?: string; }) => { const { + open, percent, steps = 5, download, @@ -62,7 +64,9 @@ const RenderProgress = memo( return ( <> {label ? ( - {renderProgress} + + {renderProgress} + ) : ( renderProgress )} diff --git a/src/components/simple-table/info-column.tsx b/src/components/simple-table/info-column.tsx new file mode 100644 index 00000000..3ca782d6 --- /dev/null +++ b/src/components/simple-table/info-column.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +import { convertFileSize } from '@/utils'; +import { useIntl } from '@umijs/max'; +import { Divider } from 'antd'; + +interface InfoColumnProps { + fieldList: { label: string; key: string }[]; + data: Record; +} +const InfoColumn: React.FC = (props) => { + const { data, fieldList } = props; + + const intl = useIntl(); + + return ( + + {fieldList.map((item, index) => { + return ( + <> + + {intl.formatMessage({ id: item.label })} + {convertFileSize(data[item.key], 0)} + + {index < fieldList.length - 1 ? ( + + ) : null} + + ); + })} + + ); +}; + +export default InfoColumn; diff --git a/src/global.less b/src/global.less index b64772e5..2594e7ca 100644 --- a/src/global.less +++ b/src/global.less @@ -49,6 +49,10 @@ html { --color-white-secondary: rgba(255, 255, 255, 90%); --color-white-tertiary: rgba(255, 255, 255, 70%); --color-white-quaternary: rgba(255, 255, 255, 50%); + --color-white-light-1: rgba(255, 255, 255, 15%); + --color-white-light-2: rgba(255, 255, 255, 25%); + --color-white-light-3: rgba(255, 255, 255, 35%); + --color-white-light-4: rgba(255, 255, 255, 45%); --color-text-1: var(--ant-color-text); --color-text-3: rgba(0, 0, 0, 45%); --color-text-2: rgba(0, 0, 0, 65%); diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx index 656c739a..c699ef4a 100644 --- a/src/pages/llmodels/components/advance-config.tsx +++ b/src/pages/llmodels/components/advance-config.tsx @@ -295,7 +295,6 @@ const AdvanceConfig: React.FC = (props) => { required showSearch expandTrigger="hover" - onChange={handleGPUSelectorChange} multiple={backend !== backendOptionsMap.voxBox} popupClassName="cascader-popup-wrapper gpu-selector" maxTagCount={1} diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx index 066db501..f8b228b0 100644 --- a/src/pages/playground/components/dynamic-params.tsx +++ b/src/pages/playground/components/dynamic-params.tsx @@ -125,7 +125,7 @@ const ParamsSettings: React.FC = forwardRef( ); }); - }, [formFields, intl, watchFields]); + }, [formFields, paramsConfig, intl, watchFields]); return (
= forwardRef((props, ref) => { initialValues, parameters, isOpenaiCompatible - } = useInitImageMeta(props); + } = useInitImageMeta(props, { + type: 'create' + }); const { loading, tokenResult, diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index b588e2bb..3ee9a0fd 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -75,13 +75,16 @@ const GroundImages: React.FC = forwardRef((props, ref) => { updateParamsConfig, setParamsConfig, form, + modelMeta, watchFields, formFields, paramsConfig, initialValues, parameters, isOpenaiCompatible - } = useInitImageMeta(props); + } = useInitImageMeta(props, { + type: 'edit' + }); const { loading, tokenResult, @@ -225,10 +228,21 @@ const GroundImages: React.FC = forwardRef((props, ref) => { const handleOnScaleImageSize = useCallback( (data: { rawWidth: number; rawHeight: number }) => { - const { width, height } = scaleImageSize({ + let { width, height } = scaleImageSize({ width: data.rawWidth, height: data.rawHeight }); + const { max_width: maxWidth, max_height: maxHeight } = modelMeta; + + // update width, height + if (maxWidth) { + width = Math.max(Math.min(width, maxWidth), 512); + } + + if (maxHeight) { + height = Math.max(Math.min(height, maxHeight), 512); + } + const newParamsConfig = updateParamsConfig({ size: 'custom', isOpenaiCompatible @@ -248,7 +262,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => { }); setInitialValues(newParameters); }, - [parameters, isOpenaiCompatible] + [parameters, modelMeta, isOpenaiCompatible] ); const handleUpdateImageList = useCallback( diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts index b2ff0e7f..1afa342f 100644 --- a/src/pages/playground/hooks/use-init-meta.ts +++ b/src/pages/playground/hooks/use-init-meta.ts @@ -1,11 +1,11 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller'; import { - ImageAdvancedParamsConfig, ImageCountConfig, ImageCustomSizeConfig, ImageSizeConfig, ImageSizeItem, ImageconstExtraConfig, + ImageAdvancedParamsConfig as ImgAdvancedParamsConfig, imageSizeOptions as imageSizeList } from '@/pages/playground/config/params-config'; import { useSearchParams } from '@umijs/max'; @@ -117,7 +117,7 @@ export const useInitLLmMeta = ( if (!val) return; const model = modelList.find((item) => item.value === val); const { form: initialData, meta } = extractLLMMeta(model?.meta); - setModelMeta(meta || {}); + setModelMeta(meta); setInitialValues({ ...initialData, model: val @@ -185,8 +185,16 @@ export const useInitLLmMeta = ( }; }; -export const useInitImageMeta = (props: MessageProps) => { +export const useInitImageMeta = ( + props: MessageProps, + options: { type: string } +) => { const { modelList } = props; + const ImageAdvancedParamsConfig = + options.type === 'edit' + ? ImgAdvancedParamsConfig + : ImgAdvancedParamsConfig.filter((item) => item.name !== 'strength'); + const form = useRef(null); const [searchParams] = useSearchParams(); const [modelMeta, setModelMeta] = useState({}); @@ -473,6 +481,7 @@ export const useInitImageMeta = (props: MessageProps) => { updateParamsConfig, setParamsConfig, form, + modelMeta, formFields, watchFields, paramsConfig, diff --git a/src/pages/resources/components/container-install.tsx b/src/pages/resources/components/container-install.tsx index 79f780a0..21eed440 100644 --- a/src/pages/resources/components/container-install.tsx +++ b/src/pages/resources/components/container-install.tsx @@ -118,12 +118,7 @@ const AddWorker: React.FC = (props) => { }} > )} - +

3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}

diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index e1be0f6c..e05417fb 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -3,11 +3,12 @@ import DeleteModal from '@/components/delete-modal'; import DropdownButtons from '@/components/drop-down-buttons'; import PageTools from '@/components/page-tools'; import ProgressBar from '@/components/progress-bar'; +import InfoColumn from '@/components/simple-table/info-column'; import StatusTag from '@/components/status-tag'; import Hotkeys from '@/config/hotkeys'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; -import { convertFileSize, handleBatchRequest } from '@/utils'; +import { handleBatchRequest } from '@/utils'; import { DeleteOutlined, EditOutlined, @@ -37,6 +38,21 @@ import UpdateLabels from './update-labels'; const { Column } = Table; +const fieldList = [ + { + label: 'resources.table.total', + key: 'total' + }, + { + label: 'resources.table.used', + key: 'used' + }, + { + label: 'resources.table.allocated', + key: 'allocated' + } +]; + const ActionList = [ { label: 'common.button.edit', @@ -186,27 +202,6 @@ const Workers: React.FC = () => { }); }; - const renderStorageTooltip = (files: Filesystem[]) => { - const mountRoot = _.find( - files, - (item: Filesystem) => item.mount_point === '/' - ); - return mountRoot ? ( - - - {intl.formatMessage({ id: 'resources.table.total' })}:{' '} - {convertFileSize(mountRoot?.total, 0)} - - - {intl.formatMessage({ id: 'resources.table.used' })}:{' '} - {convertFileSize(mountRoot?.used, 0)} - - - ) : ( - 0 - ); - }; - const handleUpdateLabelsOk = useCallback( async (values: Record) => { try { @@ -264,27 +259,18 @@ 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)} - - + const renderStorageTooltip = (files: Filesystem[]) => { + const mountRoot = _.find( + files, + (item: Filesystem) => item.mount_point === '/' + ); + return mountRoot ? ( + item.key !== 'allocated')} + data={mountRoot} + > + ) : ( + 0 ); }; @@ -449,7 +435,12 @@ const Workers: React.FC = () => { record?.status?.memory?.used, record?.status?.memory?.total )} - label={renderProgressLabels(record?.status?.memory)} + label={ + + } > ); }} @@ -520,7 +511,12 @@ const Workers: React.FC = () => { 0 ) } - label={renderProgressLabels(item.memory)} + label={ + + } > {item.memory.is_unified_memory && ( { id: 'resources.table.unified' })} > - + )} diff --git a/src/pages/resources/config/index.ts b/src/pages/resources/config/index.ts index 401780e2..dc72a203 100644 --- a/src/pages/resources/config/index.ts +++ b/src/pages/resources/config/index.ts @@ -44,7 +44,6 @@ export const addWorkerGuide: Record = { return `docker run -d --name gpustack-worker --restart=unless-stopped --gpus all -p 10150:10150 -p 40000-41024:40000-41024 -p 50000-51024:50000-51024 --ipc=host -v gpustack-worker-data:/var/lib/gpustack gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token} --worker-ip ${params.workerip}`; } }, - npu: { getToken: 'Get-Content -Path (Join-Path -Path $env:APPDATA -ChildPath "gpustack\\token") -Raw', @@ -54,31 +53,7 @@ export const addWorkerGuide: Record = { token: string; workerip: string; }) { - return `docker run -d --name gpustack-worker \\ - --restart=unless-stopped \\ - --device /dev/davinci0 \\ - --device /dev/davinci1 \\ - --device /dev/davinci2 \\ - --device /dev/davinci3 \\ - --device /dev/davinci4 \\ - --device /dev/davinci5 \\ - --device /dev/davinci6 \\ - --device /dev/davinci7 \\ - --device /dev/davinci_manager \\ - --device /dev/devmm_svm \\ - --device /dev/hisi_hdc \\ - -v /usr/local/dcmi:/usr/local/dcmi \\ - -v /usr/local/bin/npu-smi:/usr/local/bin/npu-smi \\ - -v /usr/local/Ascend/driver/lib64/:/usr/local/Ascend/driver/lib64/ \\ - -v /usr/local/Ascend/driver/version.info:/usr/local/Ascend/driver/version.info \\ - -v /etc/ascend_install.info:/etc/ascend_install.info \\ - -p 10150:10150 \\ - -p 40000-41024:40000-41024 \\ - -p 50000-51024:50000-51024 \\ - --ipc=host \\ - -v gpustack-worker-data:/var/lib/gpustack \\ - gpustack/gpustack:${params.tag} \\ - --server-url ${params.server} --token ${params.token} --worker-ip ${params.workerip}`; + return `docker run -d --name gpustack-worker --restart=unless-stopped -e ASCEND_VISIBLE_DEVICES=0 -p 10150:10150 -p 40000-41024:40000-41024 -p 50000-51024:50000-51024 --ipc=host -v gpustack-worker-data:/var/lib/gpustack gpustack/gpustack:${params.tag} --server-url ${params.server} --token ${params.token} --worker-ip ${params.workerip}`; } }, musa: { diff --git a/src/utils/index.ts b/src/utils/index.ts index ff63eca0..716a450e 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -19,7 +19,10 @@ export const handleBatchRequest = async ( return Promise.all(list.map((item) => fn(item))); }; -export const convertFileSize = (sizeInBytes: number, prec?: number) => { +export const convertFileSize = ( + sizeInBytes: number | undefined, + prec?: number +) => { const precision = prec ?? 1; if (!sizeInBytes) { return '0';