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

chore: ram vram usage in resource

Browse Source
This commit is contained in:
jialin
2025-03-06 19:44:35 +08:00
parent b0ac85d81d
commit 36d626c833
13 changed files with 137 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/image-editor/index.tsx
+1 -1
View File
@@ -908,7 +908,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
onClick={handleFitView}
size="middle"
type="text"
disabled={disabled}
disabled={isDisabled}
>
<ExpandOutlined className="font-size-14" />
</Button>
src/components/progress-bar/index.tsx
+5 -1
View File
@@ -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 ? (
<Tooltip title={label}>{renderProgress}</Tooltip>
<Tooltip title={label} open={open}>
{renderProgress}
</Tooltip>
) : (
renderProgress
)}
src/components/simple-table/info-column.tsx
+43
View File
@@ -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<string, any>;
}
const InfoColumn: React.FC<InfoColumnProps> = (props) => {
const { data, fieldList } = props;
const intl = useIntl();
return (
<span className="flex">
{fieldList.map((item, index) => {
return (
<>
<span className="flex-column flex-center">
<span> {intl.formatMessage({ id: item.label })}</span>
<span> {convertFileSize(data[item.key], 0)}</span>
</span>
{index < fieldList.length - 1 ? (
<Divider
type="vertical"
style={{
height: 30,
marginInline: 16,
borderColor: 'var(--color-white-light-2)',
alignSelf: 'center'
}}
></Divider>
) : null}
</>
);
})}
</span>
);
};
export default InfoColumn;
src/global.less
+4
View File
@@ -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%);
src/pages/llmodels/components/advance-config.tsx
-1
View File
@@ -295,7 +295,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
required
showSearch
expandTrigger="hover"
onChange={handleGPUSelectorChange}
multiple={backend !== backendOptionsMap.voxBox}
popupClassName="cascader-popup-wrapper gpu-selector"
maxTagCount={1}
src/pages/playground/components/dynamic-params.tsx
+1 -1
View File
@@ -125,7 +125,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
</Form.Item>
);
});
}, [formFields, intl, watchFields]);
}, [formFields, paramsConfig, intl, watchFields]);
return (
<Form
src/pages/playground/components/ground-images.tsx
+3 -1
View File
@@ -55,7 +55,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
initialValues,
parameters,
isOpenaiCompatible
} = useInitImageMeta(props);
} = useInitImageMeta(props, {
type: 'create'
});
const {
loading,
tokenResult,
src/pages/playground/components/image-edit.tsx
+17 -3
View File
@@ -75,13 +75,16 @@ const GroundImages: React.FC<MessageProps> = 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<MessageProps> = 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<MessageProps> = forwardRef((props, ref) => {
});
setInitialValues(newParameters);
},
[parameters, isOpenaiCompatible]
[parameters, modelMeta, isOpenaiCompatible]
);
const handleUpdateImageList = useCallback(
src/pages/playground/hooks/use-init-meta.ts
+12 -3
View File
@@ -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<any>(null);
const [searchParams] = useSearchParams();
const [modelMeta, setModelMeta] = useState<any>({});
@@ -473,6 +481,7 @@ export const useInitImageMeta = (props: MessageProps) => {
updateParamsConfig,
setParamsConfig,
form,
modelMeta,
formFields,
watchFields,
paramsConfig,
src/pages/resources/components/container-install.tsx
+1 -6
View File
@@ -118,12 +118,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
}}
></div>
)}
<HighlightCode
theme="dark"
code={code}
lang="bash"
height={130}
></HighlightCode>
<HighlightCode theme="dark" code={code} lang="bash"></HighlightCode>
<h3 className="m-b-0 m-t-10">
3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
</h3>
src/pages/resources/components/workers.tsx
+45 -46
View File
@@ -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 ? (
<span className="flex-column">
<span>
{intl.formatMessage({ id: 'resources.table.total' })}:{' '}
{convertFileSize(mountRoot?.total, 0)}
</span>
<span>
{intl.formatMessage({ id: 'resources.table.used' })}:{' '}
{convertFileSize(mountRoot?.used, 0)}
</span>
</span>
) : (
0
);
};
const handleUpdateLabelsOk = useCallback(
async (values: Record<string, any>) => {
try {
@@ -264,27 +259,18 @@ 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>
const renderStorageTooltip = (files: Filesystem[]) => {
const mountRoot = _.find(
files,
(item: Filesystem) => item.mount_point === '/'
);
return mountRoot ? (
<InfoColumn
fieldList={fieldList.filter((item) => item.key !== 'allocated')}
data={mountRoot}
></InfoColumn>
) : (
0
);
};
@@ -449,7 +435,12 @@ const Workers: React.FC = () => {
record?.status?.memory?.used,
record?.status?.memory?.total
)}
label={renderProgressLabels(record?.status?.memory)}
label={
<InfoColumn
fieldList={fieldList}
data={record.status.memory}
></InfoColumn>
}
></ProgressBar>
);
}}
@@ -520,7 +511,12 @@ const Workers: React.FC = () => {
0
)
}
label={renderProgressLabels(item.memory)}
label={
<InfoColumn
fieldList={fieldList}
data={item.memory}
></InfoColumn>
}
></ProgressBar>
{item.memory.is_unified_memory && (
<Tooltip
@@ -528,7 +524,10 @@ const Workers: React.FC = () => {
id: 'resources.table.unified'
})}
>
<InfoCircleOutlined className="m-l-5" />
<InfoCircleOutlined
className="m-l-5"
style={{ color: 'var(--ant-blue-5)' }}
/>
</Tooltip>
)}
</span>
src/pages/resources/config/index.ts
+1 -26
View File
@@ -44,7 +44,6 @@ export const addWorkerGuide: Record<string, any> = {
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<string, any> = {
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: {
src/utils/index.ts
+4 -1
View File
@@ -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';