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

style: check compatibility

Browse Source
This commit is contained in:
jialin
2025-04-01 20:47:52 +08:00
parent f5c4749954
commit 5cbb5e7d40
18 changed files with 98 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/alert-info/block.less
+10
View File
@@ -21,6 +21,12 @@
background-color: var(--ant-color-warning-bg);
}
&.transition {
color: var(--ant-geekblue-7);
background: var(--ant-geekblue-1);
border-color: var(--ant-geekblue-3);
}
.title {
position: absolute;
left: 0;
@@ -38,6 +44,10 @@
&.warning {
color: var(--ant-color-warning);
}
&.transition {
color: var(--ant-geekblue-7);
}
}
.text {
src/components/alert-info/block.tsx
+6 -3
View File
@@ -6,7 +6,7 @@ import styled from 'styled-components';
import OverlayScroller from '../overlay-scroller';
import './block.less';
interface AlertInfoProps {
type: 'danger' | 'warning';
type: 'danger' | 'warning' | 'transition' | 'info';
message: React.ReactNode;
rows?: number;
icon?: React.ReactNode;
@@ -38,7 +38,8 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
ellipsis,
style,
title,
contentStyle
contentStyle,
icon
} = props;
return (
@@ -57,7 +58,9 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
}
>
<div className={classNames('title', type)}>
<WarningFilled className={classNames('info-icon', type)} />
<span className={classNames('info-icon', type)}>
{icon ?? <WarningFilled />}
</span>
</div>
{title && <TitleWrapper>{title}</TitleWrapper>}
<OverlayScroller maxHeight={80} style={{ ...contentStyle }}>
src/components/copy-button/index.tsx
+3 -1
View File
@@ -11,6 +11,7 @@ type CopyButtonProps = {
type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
size?: 'small' | 'middle' | 'large';
shape?: 'circle' | 'round' | 'default';
tips?: string;
placement?:
| 'top'
| 'left'
@@ -25,6 +26,7 @@ type CopyButtonProps = {
};
const CopyButton: React.FC<CopyButtonProps> = ({
tips,
text,
disabled,
type = 'text',
@@ -68,7 +70,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
return (
<Tooltip
title={intl.formatMessage({ id: 'common.button.copy' })}
title={tips ?? intl.formatMessage({ id: 'common.button.copy' })}
placement={placement}
>
<Button
src/locales/en-US/models.ts
+4 -3
View File
@@ -123,9 +123,10 @@ export default {
'models.form.files': 'files',
'models.table.status': 'Status',
'models.form.submit.anyway': 'Submit Anyway',
'models.form.evaluating': 'Evaluating...',
'models.form.incompatible': 'Incompatible',
'models.form.evaluating': 'Evaluating Model Compatibliity',
'models.form.incompatible': 'Incompatibility Detected',
'models.form.restart.onerror': 'Auto-Restart On Error',
'models.form.restart.onerror.tips':
'When an error occurs, it will automatically attempt to restart.'
'When an error occurs, it will automatically attempt to restart.',
'models.form.check.params': 'Checking configuration...'
};
src/locales/en-US/resources.ts
+2 -1
View File
@@ -70,5 +70,6 @@ export default {
'Waiting for download to complete...',
'resources.filter.worker': 'Filter by Worker',
'resources.filter.source': 'Filter by Source',
'resources.modelfiles.delete.tips': 'Also delete the file from disk!'
'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
'resources.modelfiles.copy.tips': 'Copy Full Path'
};
src/locales/ja-JP/models.ts
+6 -4
View File
@@ -120,11 +120,12 @@ export default {
'models.form.files': 'files',
'models.table.status': 'Status',
'models.form.submit.anyway': 'Submit Anyway',
'models.form.evaluating': 'Evaluating...',
'models.form.incompatible': 'Incompatible',
'models.form.evaluating': 'Evaluating Model Compatibliity',
'models.form.incompatible': 'Incompatibility Detected',
'models.form.restart.onerror': 'Auto-Restart On Error',
'models.form.restart.onerror.tips':
'When an error occurs, it will automatically attempt to restart.'
'When an error occurs, it will automatically attempt to restart.',
'models.form.check.params': 'Checking configuration...'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -134,5 +135,6 @@ export default {
// 4. 'models.form.evaluating',
// 5. 'models.form.incompatible',
// 6. 'models.form.restart.onerror',
// 7. 'models.form.restart.onerror.tips'
// 7. 'models.form.restart.onerror.tips',
// 8. 'models.form.check.params',
// ========== End of To-Do List ==========
src/locales/ja-JP/resources.ts
+3 -1
View File
@@ -71,7 +71,8 @@ export default {
'Waiting for download to complete...',
'resources.filter.worker': 'Filter by Worker',
'resources.filter.source': 'Filter by Source',
'resources.modelfiles.delete.tips': 'Also delete the file from disk!'
'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
'resources.modelfiles.copy.tips': 'Copy Full Path'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -89,4 +90,5 @@ export default {
// 12. 'resources.modelfiles.delete.tips',
// 13. 'resources.worker.add.step1',
// 14. 'resources.worker.add.step2.tips',
// 15. 'resources.modelfiles.copy.tips',
// ========== End of To-Do List ==========
src/locales/ru-RU/models.ts
+6 -4
View File
@@ -123,11 +123,12 @@ export default {
'models.form.files': 'файлы',
'models.table.status': 'Status',
'models.form.submit.anyway': 'Submit Anyway',
'models.form.evaluating': 'Evaluating...',
'models.form.incompatible': 'Incompatible',
'models.form.evaluating': 'Evaluating Model Compatibliity',
'models.form.incompatible': 'Incompatibility Detected',
'models.form.restart.onerror': 'Auto-Restart On Error',
'models.form.restart.onerror.tips':
'When an error occurs, it will automatically attempt to restart.'
'When an error occurs, it will automatically attempt to restart.',
'models.form.check.params': 'Checking configuration...'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -136,5 +137,6 @@ export default {
// 3. 'models.form.evaluating',
// 4. 'models.form.incompatible',
// 5. 'models.form.restart.onerror',
// 6. 'models.form.restart.onerror.tips'
// 6. 'models.form.restart.onerror.tips',
// 7. 'models.form.check.params',
// ========== End of To-Do List ==========
src/locales/ru-RU/resources.ts
+4 -2
View File
@@ -69,11 +69,13 @@ export default {
'resources.modelfiles.storagePath.holder': 'Ожидание завершения загрузки...',
'resources.filter.worker': 'Фильтровать по узлу',
'resources.filter.source': 'Фильтровать по источнику',
'resources.modelfiles.delete.tips': 'Also delete the file from disk!'
'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
'resources.modelfiles.copy.tips': 'Copy Full Path'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'resources.modelfiles.delete.tips',
// 2. 'resources.worker.add.step1',
// 3. 'resources.worker.add.step2.tips
// 3. 'resources.worker.add.step2.tips,
// 4. 'resources.modelfiles.copy.tips',
// ========== End of To-Do List ==========
src/locales/zh-CN/models.ts
+4 -3
View File
@@ -116,8 +116,9 @@ export default {
'models.form.files': '文件',
'models.table.status': '状态',
'models.form.submit.anyway': '仍然提交',
'models.form.evaluating': '评估中...',
'models.form.incompatible': '不兼容',
'models.form.evaluating': '评估模型兼容性',
'models.form.incompatible': '检测到不兼容',
'models.form.restart.onerror': '错误时重启',
'models.form.restart.onerror.tips': '当发生错误时，将自动尝试恢复'
'models.form.restart.onerror.tips': '当发生错误时，将自动尝试恢复',
'models.form.check.params': '正在校验配置...'
};
src/locales/zh-CN/resources.ts
+2 -1
View File
@@ -68,5 +68,6 @@ export default {
'resources.modelfiles.storagePath.holder': '等待下载完成...',
'resources.filter.worker': '按 worker 筛选',
'resources.filter.source': '按来源筛选',
'resources.modelfiles.delete.tips': '同时从磁盘删除文件！'
'resources.modelfiles.delete.tips': '同时从磁盘删除文件！',
'resources.modelfiles.copy.tips': '复制完整路径'
};
src/pages/llmodels/components/compatible-alert.tsx
+10 -4
View File
@@ -1,5 +1,9 @@
import AlertBlockInfo from '@/components/alert-info/block';
import { CloseOutlined } from '@ant-design/icons';
import {
CloseOutlined,
LoadingOutlined,
WarningFilled
} from '@ant-design/icons';
import { isArray } from 'lodash';
import React, { useMemo } from 'react';
import styled from 'styled-components';
@@ -9,6 +13,7 @@ interface CompatibilityAlertProps {
show: boolean;
title?: string;
isHtml?: boolean;
type: 'danger' | 'warning' | 'transition' | 'info';
message: string | string[];
};
contentStyle?: React.CSSProperties;
@@ -38,7 +43,7 @@ const MessageWrapper = styled.div`
const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
const { warningStatus, contentStyle, showClose, onClose } = props;
const { title, show, message, isHtml } = warningStatus;
const { title, show, message, isHtml, type } = warningStatus;
const renderMessage = useMemo(() => {
if (!message || !show) {
@@ -76,9 +81,10 @@ const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
message={renderMessage}
title={title}
contentStyle={contentStyle}
type="warning"
type={type || 'warning'}
icon={type === 'transition' ? <LoadingOutlined /> : <WarningFilled />}
></AlertBlockInfo>
{showClose && (
{showClose && type !== 'transition' && (
<CloseWrapper onClick={onClose}>
<CloseOutlined />
</CloseWrapper>
src/pages/llmodels/components/deploy-modal.tsx
+5 -1
View File
@@ -95,7 +95,8 @@ const AddModal: FC<AddModalProps> = (props) => {
const handleSelectModelFile = useCallback((item: any) => {
form.current?.setFieldsValue?.({
file_name: item.fakeName,
backend: backendOptionsMap.llamaBox
backend: backendOptionsMap.llamaBox,
...item.evaluateResult?.default_spec
});
if (item.fakeName) {
handleShowCompatibleAlert(item.evaluateResult);
@@ -107,6 +108,9 @@ const AddModal: FC<AddModalProps> = (props) => {
form.current?.handleOnSelectModel?.(item);
if (!isgguf) {
handleShowCompatibleAlert(item.evaluateResult);
form.current?.setFieldsValue?.({
...item.evaluateResult?.default_spec
});
}
};
src/pages/llmodels/components/hf-model-item.tsx
+2 -24
View File
@@ -2,15 +2,11 @@ import { formatNumber } from '@/utils';
import {
DownloadOutlined,
FolderOutlined,
HeartOutlined,
WarningOutlined
HeartOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import dayjs from 'dayjs';
import _ from 'lodash';
import React, { useMemo } from 'react';
import React from 'react';
import { EvaluateResult } from '../config/types';
import '../style/hf-model-item.less';
import IncompatiableInfo from './incompatiable-info';
@@ -27,20 +23,9 @@ interface HFModelItemProps {
evaluateResult?: EvaluateResult;
isEvaluating?: boolean;
}
const warningTask = ['video'];
const HFModelItem: React.FC<HFModelItemProps> = (props) => {
const { evaluateResult, isEvaluating } = props;
console.log('evaluateResult', evaluateResult);
const intl = useIntl();
const isExcludeTask = useMemo(() => {
if (!props.task) {
return false;
}
return _.some(warningTask, (item: string) => {
return props.task?.toLowerCase().includes(item);
});
}, [props.task]);
return (
<div
@@ -55,13 +40,6 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
{props.title}
{isExcludeTask && (
<Tooltip
title={intl.formatMessage({ id: 'models.search.unsupport' })}
>
<WarningOutlined className="m-l-2" style={{ color: 'orange' }} />
</Tooltip>
)}
</div>
<div className="info">
<div className="info-item">
src/pages/llmodels/components/incompatiable-info.tsx
+20 -11
View File
@@ -1,5 +1,5 @@
import OverlayScroller from '@/components/overlay-scroller';
import { WarningOutlined } from '@ant-design/icons';
import { LoadingOutlined, WarningOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Tag, Tooltip } from 'antd';
import React from 'react';
@@ -14,6 +14,8 @@ interface IncompatiableInfoProps {
const CompatibleTag = styled(Tag)`
border-radius: 4px;
margin-right: 0;
font-size: var(--font-size-base);
background: transparent !important;
`;
const IncompatibleInfo = styled.div`
@@ -50,11 +52,13 @@ const SMTitle = styled.div<{ $isTitle?: boolean }>`
const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
const { data, isEvaluating } = props;
const intl = useIntl();
console.log('IncompatiableInfo', data, isEvaluating);
if (isEvaluating) {
return (
<CompatibleTag color="warning">
{intl.formatMessage({ id: 'models.form.evaluating' })}
<CompatibleTag color="blue" bordered={false}>
<Tooltip title={intl.formatMessage({ id: 'models.form.evaluating' })}>
<LoadingOutlined />
</Tooltip>
</CompatibleTag>
);
}
@@ -67,23 +71,28 @@ const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
title={
<OverlayScroller maxHeight={200}>
<IncompatibleInfo>
<SMTitle $isTitle={!!data?.scheduling_messages?.length}>
{data?.compatibility_messages}
<SMTitle $isTitle={true}>
{intl.formatMessage({ id: 'models.form.incompatible' })}
</SMTitle>
{!!data?.scheduling_messages?.length && (
{
<ul>
{data?.compatibility_messages.map((item, index) => (
<li key={index}>{item}</li>
))}
{data?.scheduling_messages.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
)}
}
</IncompatibleInfo>
</OverlayScroller>
}
>
<CompatibleTag icon={<WarningOutlined />} color="warning">
{intl.formatMessage({ id: 'models.form.incompatible' })}
</CompatibleTag>
<CompatibleTag
icon={<WarningOutlined />}
color="warning"
bordered={false}
></CompatibleTag>
</Tooltip>
);
};
src/pages/llmodels/config/types.ts
+1 -1
View File
@@ -217,5 +217,5 @@ export interface EvaluateResult {
compatible: boolean;
compatibility_messages: string[];
scheduling_messages: string[];
default_backend_parameters: any[];
default_spec: Record<string, any>;
}
src/pages/llmodels/hooks/index.ts
+3 -1
View File
@@ -217,6 +217,7 @@ export const useCheckCompatibility = () => {
const [warningStatus, setWarningStatus] = useState<{
show: boolean;
title?: string;
type?: 'transition' | 'warning' | 'error';
message: string | string[];
}>({
show: false,
@@ -231,7 +232,8 @@ export const useCheckCompatibility = () => {
setWarningStatus({
show: true,
title: '',
message: 'Evaluating compatibility...'
type: 'transition',
message: intl.formatMessage({ id: 'models.form.check.params' })
});
const evalution = await evaluationsModelSpec(
{
src/pages/resources/components/model-files.tsx
+7
View File
@@ -411,6 +411,10 @@ const ModelFiles = () => {
}
};
const getResolvedPath = (pathList: string[]) => {
return _.split(pathList?.[0], /[\\/]/).pop();
};
const columns = [
{
title: intl.formatMessage({ id: 'models.form.source' }),
@@ -474,6 +478,9 @@ const ModelFiles = () => {
text={record.resolved_paths?.[0]}
type="link"
btnStyle={{ width: 18, paddingInline: 2 }}
tips={intl.formatMessage({
id: 'resources.modelfiles.copy.tips'
})}
></CopyButton>
</span>
{renderParts(record)}