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/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)}