chore: update ui tips

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;

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.'
 };

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': '多副本数实现推理请求的负载均衡'
 };

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<AdvanceConfigProps> = (props) => {
                       id: 'resources.form.enablePartialOffload'
                     })}
                   </span>
-                  <InfoCircleOutlined
+                  <QuestionCircleOutlined
                     className="m-l-4"
                     style={{ color: 'var(--ant-color-text-tertiary)' }}
                   />
@@ -390,7 +390,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                       id: 'resources.form.enableDistributedInferenceAcrossWorkers'
                     })}
                   </span>
-                  <InfoCircleOutlined
+                  <QuestionCircleOutlined
                     className="m-l-4"
                     style={{ color: 'var(--ant-color-text-tertiary)' }}
                   />

src/pages/llmodels/components/catalog-list.tsx

@@ -15,45 +15,13 @@ interface CatalogListProps {
   onDeploy: (data: any) => void;
 }
 
-const CatalogList: React.FC<CatalogListProps> = (props) => {
+const ListSkeleton: React.FC<{
-  const { dataList, loading, activeId, isFirst, onDeploy } = props;
+  span: number;
-  const [span, setSpan] = React.useState(8);
+  loading: boolean;
-
+  isFirst: boolean;
-  const handleResize = useCallback(
+}> = ({ span, loading, isFirst }) => {
-    _.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);
-      }
-    }, 100),
-    []
-  );
-
   return (
-    <div className="relative" style={{ width: '100%' }}>
-      <ResizeObserver onResize={handleResize}>
     <div>
-          <Row gutter={[16, 16]}>
-            {dataList.map((item: CatalogItemType, index) => {
-              return (
-                <Col span={span} key={item.id}>
-                  <CatalogItem
-                    onClick={onDeploy}
-                    activeId={activeId}
-                    data={item}
-                  ></CatalogItem>
-                </Col>
-              );
-            })}
-          </Row>
       {loading && (
         <div
           style={{
@@ -80,6 +48,45 @@ const CatalogList: React.FC<CatalogListProps> = (props) => {
         </div>
       )}
     </div>
+  );
+};
+
+const CatalogList: React.FC<CatalogListProps> = (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 }) => {
+      setSpan(getSpanByWidth(size.width));
+    }, 100),
+    []
+  );
+
+  return (
+    <div className="relative" style={{ width: '100%' }}>
+      <ResizeObserver onResize={handleResize}>
+        <div>
+          <Row gutter={[16, 16]}>
+            {dataList.map((item: CatalogItemType, index) => {
+              return (
+                <Col span={span} key={item.id}>
+                  <CatalogItem
+                    onClick={onDeploy}
+                    activeId={activeId}
+                    data={item}
+                  ></CatalogItem>
+                </Col>
+              );
+            })}
+          </Row>
+          <ListSkeleton span={span} loading={loading} isFirst={isFirst} />
+        </div>
       </ResizeObserver>
       <FloatButton.BackTop visibilityHeight={1000} />
     </div>

src/pages/llmodels/components/data-form.tsx

@@ -695,6 +695,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             id: 'models.form.replicas'
           })}
           required
+          description={intl.formatMessage({ id: 'models.form.replicas.tips' })}
           min={0}
         ></SealInput.Number>
       </Form.Item>

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<ModelsProps> = ({
             }}
           />
           <SealColumn
-            title={intl.formatMessage({ id: 'models.form.replicas' })}
+            title={
+              <Tooltip
+                title={intl.formatMessage({ id: 'models.form.replicas.tips' })}
+              >
+                {intl.formatMessage({ id: 'models.form.replicas' })}
+                <QuestionCircleOutlined className="m-l-5" />
+              </Tooltip>
+            }
             dataIndex="replicas"
             key="replicas"
             align="center"

src/pages/llmodels/components/update-modal.tsx

@@ -591,6 +591,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 id: 'models.form.replicas'
               })}
               required
+              description={intl.formatMessage({
+                id: 'models.form.replicas.tips'
+              })}
               min={0}
             ></SealInput.Number>
           </Form.Item>

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;

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;

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;