From 7c546ed6b843a27919456f698b9f714a1994b095 Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 13 Feb 2025 14:34:35 +0800 Subject: [PATCH] chore: update ui tips --- src/components/seal-table/types.ts | 2 +- src/locales/en-US/models.ts | 4 +- src/locales/zh-CN/models.ts | 3 +- .../llmodels/components/advance-config.tsx | 6 +- .../llmodels/components/catalog-list.tsx | 81 ++++++++++--------- src/pages/llmodels/components/data-form.tsx | 1 + src/pages/llmodels/components/table-list.tsx | 21 ++++- .../llmodels/components/update-modal.tsx | 3 + src/pages/llmodels/index.tsx | 4 +- src/pages/resources/components/gpus.tsx | 4 +- src/pages/resources/components/workers.tsx | 6 +- 11 files changed, 83 insertions(+), 52 deletions(-) diff --git a/src/components/seal-table/types.ts b/src/components/seal-table/types.ts index d9ec5dca..2db12a73 100644 --- a/src/components/seal-table/types.ts +++ b/src/components/seal-table/types.ts @@ -1,7 +1,7 @@ import React from 'react'; export interface SealColumnProps { - title: string; + title: React.ReactNode; render?: (text: any, record: any) => React.ReactNode; dataIndex: string; width?: number; diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts index 8e314dff..739c23d7 100644 --- a/src/locales/en-US/models.ts +++ b/src/locales/en-US/models.ts @@ -100,5 +100,7 @@ export default { ' Specify the model file, e.g., /usr/local/models/model.gguf.', 'models.localpath.safe.tips': 'Specify the model directory that contains .safetensors and config.json files, e.g., /usr/local/models/model/.', - 'models.localpath.chunks.tips': `Specify the first shard file of the model, e.g., /usr/local/models/model-00001-of-00004.gguf.` + 'models.localpath.chunks.tips': `Specify the first shard file of the model, e.g., /usr/local/models/model-00001-of-00004.gguf.`, + 'models.form.replicas.tips': + 'Multiple replicas enable load balancing for inference requests.' }; diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index 14f020c2..dfe9fb83 100644 --- a/src/locales/zh-CN/models.ts +++ b/src/locales/zh-CN/models.ts @@ -97,5 +97,6 @@ export default { 'models.localpath.safe.tips': '指向包含 .safetensors, config.json 文件的模型目录，例如 /usr/local/models/model/', 'models.localpath.chunks.tips': - '指向模型第一个分片文件，例如 /usr/local/models/model-00001-of-00004.gguf' + '指向模型第一个分片文件，例如 /usr/local/models/model-00001-of-00004.gguf', + 'models.form.replicas.tips': '多副本数实现推理请求的负载均衡' }; diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx index edaba822..1a97e032 100644 --- a/src/pages/llmodels/components/advance-config.tsx +++ b/src/pages/llmodels/components/advance-config.tsx @@ -6,7 +6,7 @@ import SealInput from '@/components/seal-form/seal-input'; import SealSelect from '@/components/seal-form/seal-select'; import TooltipList from '@/components/tooltip-list'; import { PageActionType } from '@/config/types'; -import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons'; +import { QuestionCircleOutlined, RightOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Checkbox, @@ -362,7 +362,7 @@ const AdvanceConfig: React.FC = (props) => { id: 'resources.form.enablePartialOffload' })} - @@ -390,7 +390,7 @@ const AdvanceConfig: React.FC = (props) => { id: 'resources.form.enableDistributedInferenceAcrossWorkers' })} - diff --git a/src/pages/llmodels/components/catalog-list.tsx b/src/pages/llmodels/components/catalog-list.tsx index 63dacc37..b519956b 100644 --- a/src/pages/llmodels/components/catalog-list.tsx +++ b/src/pages/llmodels/components/catalog-list.tsx @@ -15,24 +15,55 @@ interface CatalogListProps { onDeploy: (data: any) => void; } +const ListSkeleton: React.FC<{ + span: number; + loading: boolean; + isFirst: boolean; +}> = ({ span, loading, isFirst }) => { + return ( +
+ {loading && ( +
+ + {isFirst && } + +
+ )} +
+ ); +}; + const CatalogList: React.FC = (props) => { const { dataList, loading, activeId, isFirst, onDeploy } = props; const [span, setSpan] = React.useState(8); + const getSpanByWidth = (width: number) => { + if (width < breakpoints.md) return 24; + if (width < breakpoints.lg) return 12; + return 8; + }; + const handleResize = useCallback( _.throttle((size: { width: number; height: number }) => { - const { width } = size; - if (width < breakpoints.xs) { - setSpan(24); - } else if (width < breakpoints.sm) { - setSpan(24); - } else if (width < breakpoints.md) { - setSpan(12); - } else if (width < breakpoints.lg) { - setSpan(12); - } else { - setSpan(8); - } + setSpan(getSpanByWidth(size.width)); }, 100), [] ); @@ -54,31 +85,7 @@ const CatalogList: React.FC = (props) => { ); })} - {loading && ( -
- - {isFirst && } - -
- )} + diff --git a/src/pages/llmodels/components/data-form.tsx b/src/pages/llmodels/components/data-form.tsx index c621022c..93d6ba3d 100644 --- a/src/pages/llmodels/components/data-form.tsx +++ b/src/pages/llmodels/components/data-form.tsx @@ -695,6 +695,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { id: 'models.form.replicas' })} required + description={intl.formatMessage({ id: 'models.form.replicas.tips' })} min={0} > diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx index 984327b8..88a49621 100644 --- a/src/pages/llmodels/components/table-list.tsx +++ b/src/pages/llmodels/components/table-list.tsx @@ -25,12 +25,22 @@ import { EditOutlined, ExperimentOutlined, PictureOutlined, + QuestionCircleOutlined, SyncOutlined, WechatWorkOutlined } from '@ant-design/icons'; import { PageContainer } from '@ant-design/pro-components'; import { Access, useAccess, useIntl, useNavigate } from '@umijs/max'; -import { Button, Dropdown, Input, Select, Space, Tag, message } from 'antd'; +import { + Button, + Dropdown, + Input, + Select, + Space, + Tag, + Tooltip, + message +} from 'antd'; import dayjs from 'dayjs'; import { useAtom } from 'jotai'; import _ from 'lodash'; @@ -944,7 +954,14 @@ const Models: React.FC = ({ }} /> + {intl.formatMessage({ id: 'models.form.replicas' })} + + + } dataIndex="replicas" key="replicas" align="center" diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx index 230fc101..bcd38b04 100644 --- a/src/pages/llmodels/components/update-modal.tsx +++ b/src/pages/llmodels/components/update-modal.tsx @@ -591,6 +591,9 @@ const UpdateModal: React.FC = (props) => { id: 'models.form.replicas' })} required + description={intl.formatMessage({ + id: 'models.form.replicas.tips' + })} min={0} > diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index ae948468..ec3478dd 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -8,7 +8,7 @@ import { } from '@/pages/resources/config/types'; import _ from 'lodash'; import qs from 'query-string'; -import { memo, useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { MODELS_API, MODEL_INSTANCE_API, @@ -316,4 +316,4 @@ const Models: React.FC = () => { ); }; -export default memo(Models); +export default Models; diff --git a/src/pages/resources/components/gpus.tsx b/src/pages/resources/components/gpus.tsx index 2eb3e417..3df088cc 100644 --- a/src/pages/resources/components/gpus.tsx +++ b/src/pages/resources/components/gpus.tsx @@ -7,7 +7,7 @@ import { SyncOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd'; import _ from 'lodash'; -import { memo, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { queryGpuDevicesList } from '../apis'; import { GPUDeviceItem } from '../config/types'; const { Column } = Table; @@ -252,4 +252,4 @@ const GPUList: React.FC = () => { ); }; -export default memo(GPUList); +export default GPUList; diff --git a/src/pages/resources/components/workers.tsx b/src/pages/resources/components/workers.tsx index f320f3cf..28559b4f 100644 --- a/src/pages/resources/components/workers.tsx +++ b/src/pages/resources/components/workers.tsx @@ -27,7 +27,7 @@ import { message } from 'antd'; import _ from 'lodash'; -import { memo, useCallback, useEffect, useRef, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { deleteWorker, queryWorkersList, updateWorker } from '../apis'; import { WorkerStatusMapValue, status } from '../config'; @@ -53,7 +53,7 @@ const ActionList = [ } ]; -const Resources: React.FC = () => { +const Workers: React.FC = () => { const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); @@ -589,4 +589,4 @@ const Resources: React.FC = () => { ); }; -export default memo(Resources); +export default Workers;