style: add field tips in model form

src/components/seal-table/components/seal-column.tsx

@@ -10,7 +10,7 @@ import { SealColumnProps } from '../types';
 const SealColumn: React.FC<SealColumnProps> = (props) => {
   const intl = useIntl();
   const { row, onCell } = useContext(RowContext);
-  const { dataIndex, render, align, editable, valueType, title } = props;
+  const { dataIndex, render, align, editable } = props;
   const [isEditing, setIsEditing] = React.useState(false);
   const [current, setCurrent] = React.useState(row[dataIndex]);
   const cachedValue = React.useRef(row[dataIndex]);
@@ -38,9 +38,11 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
 
   const renderContent = () => {
     if (isEditing && editable) {
-      return valueType === 'number' ? (
+      const isNumType =
+        typeof editable === 'object' && editable.valueType === 'number';
+      return isNumType ? (
         <InputNumber
-          style={{ minWidth: '100px', width: '100%' }}
+          style={{ width: '80px' }}
           min={0}
           value={current}
           onChange={(val) => {
@@ -72,7 +74,7 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
       <span className="cell-content flex-center">
         {renderContent()}
         {editable && (
-          <span>
+          <span className="flex-column">
             {isEditing ? (
               <>
                 <Tooltip
@@ -103,15 +105,7 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
                 </Tooltip>
               </>
             ) : (
-              <Tooltip
-                key="edit"
-                title={
-                  <span>
-                    {intl.formatMessage({ id: 'common.button.edit' })}
-                    <span className="m-l-5">{title}</span>
-                  </span>
-                }
-              >
+              <Tooltip key="edit" title={<span>{editable?.title}</span>}>
                 <Button
                   type="text"
                   size="small"

src/components/seal-table/types.ts

@@ -10,7 +10,12 @@ export interface SealColumnProps {
   headerStyle?: React.CSSProperties;
   sorter?: boolean;
   defaultSortOrder?: 'ascend' | 'descend';
-  editable?: boolean;
+  editable?:
+    | boolean
+    | {
+        valueType?: 'text' | 'number' | 'date' | 'datetime' | 'time';
+        title?: string;
+      };
   valueType?: 'text' | 'number' | 'date' | 'datetime' | 'time';
   sortOrder?: 'ascend' | 'descend' | null;
 }

src/locales/en-US/models.ts

@@ -11,8 +11,13 @@ export default {
   'models.form.replicas': 'Replicas',
   'models.form.configurations': 'Configurations',
   'models.form.s3address': 'S3 Address',
+  'models.form.partialoffload.tips':
+    'refers to the strategy of offloading as many layers of a model to the GPU as possible based on available resources, while offload all layers completely is not possible.',
+  'models.form.distribution.tips':
+    'allows for offloading part of the computation to single or multiple remote workers when the resources of a single GPU or worker are insufficient.',
   'models.openinplayground': 'Open in Playground',
   'models.instances': 'instances',
+  'models.table.replicas.edit': 'Edit Replicas',
   'model.form.ollama.model': 'Ollama Model',
   'model.form.ollamaholder': 'Please select or input model name',
   'model.deploy.sort': 'Sort',

src/locales/zh-CN/models.ts

@@ -11,8 +11,13 @@ export default {
   'models.form.replicas': '副本数',
   'models.form.configurations': '配置',
   'models.form.s3address': 'S3 地址',
+  'models.form.partialoffload.tips':
+    '部分卸载指的是根据可用资源将尽可能多的模型层卸载到GPU的策略，但完全卸载所有层是不可能的。',
+  'models.form.distribution.tips':
+    '当单个 GPU 或 worker 的资源不足时，允许将部分计算卸载给单个或多个远程 worker。',
   'models.openinplayground': '在 Playground 中打开',
   'models.instances': '实例',
+  'models.table.replicas.edit': '调整副本数',
   'model.form.ollama.model': 'Ollama 模型',
   'model.form.ollamaholder': '请选择或输入模型名称',
   'model.deploy.sort': '排序',

src/locales/zh-CN/resources.ts

@@ -13,7 +13,7 @@ export default {
   'resources.form.workerSelector': '匹配的 Worker 标签',
   'resources.form.enableDistributedInferenceAcrossWorkers': '跨节点分布式推理',
   'resources.form.spread.tips':
-    '使得集群整体的资源在所有 Worker 之间分配地相对均匀。可能会在单个 Worker 上产生较多资源碎片。',
+    '使得集群整体的资源在所有 Worker 之间分配得相对均匀。可能会在单个 Worker 上产生较多资源碎片。',
   'resources.form.binpack.tips':
     '优先考虑整体集群的资源最大化利用，减少 Worker/GPU 上的资源碎片。',
   'resources.form.workerSelector.description':

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

@@ -5,9 +5,9 @@ import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
-import { RightOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Checkbox, Collapse, Form, Typography } from 'antd';
+import { Checkbox, Collapse, Form, Tooltip, Typography } from 'antd';
 import _ from 'lodash';
 import React, {
   forwardRef,
@@ -303,11 +303,21 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
               style={{ padding: '0 10px', marginBottom: 0 }}
             >
               <Checkbox>
-                <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                  {intl.formatMessage({
-                    id: 'resources.form.enablePartialOffload'
+                <Tooltip
+                  title={intl.formatMessage({
+                    id: 'models.form.partialoffload.tips'
                   })}
-                </span>
+                >
+                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                    {intl.formatMessage({
+                      id: 'resources.form.enablePartialOffload'
+                    })}
+                  </span>
+                  <InfoCircleOutlined
+                    className="m-l-2"
+                    style={{ color: 'var(--ant-color-text-tertiary)' }}
+                  />
+                </Tooltip>
               </Checkbox>
             </Form.Item>
           </FormItemWrapper>
@@ -321,11 +331,21 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
                 style={{ padding: '0 10px', marginBottom: 0 }}
               >
                 <Checkbox>
-                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                    {intl.formatMessage({
-                      id: 'resources.form.enableDistributedInferenceAcrossWorkers'
+                  <Tooltip
+                    title={intl.formatMessage({
+                      id: 'models.form.distribution.tips'
                     })}
-                  </span>
+                  >
+                    <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                      {intl.formatMessage({
+                        id: 'resources.form.enableDistributedInferenceAcrossWorkers'
+                      })}
+                    </span>
+                    <InfoCircleOutlined
+                      className="m-l-2"
+                      style={{ color: 'var(--ant-color-text-tertiary)' }}
+                    />
+                  </Tooltip>
                 </Checkbox>
               </Form.Item>
             </FormItemWrapper>

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

@@ -494,8 +494,10 @@ const Models: React.FC<ModelsProps> = ({
             key="replicas"
             align="center"
             span={4}
-            editable
-            valueType="number"
+            editable={{
+              valueType: 'number',
+              title: intl.formatMessage({ id: 'models.table.replicas.edit' })
+            }}
             render={(text, record: ListItem) => {
               return (
                 <span>

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

@@ -7,9 +7,9 @@ import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { convertFileSize } from '@/utils';
-import { RightOutlined } from '@ant-design/icons';
+import { InfoCircleOutlined, RightOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Checkbox, Collapse, Form, Modal, Typography } from 'antd';
+import { Checkbox, Collapse, Form, Modal, Tooltip, Typography } from 'antd';
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useState } from 'react';
 import SimpleBar from 'simplebar-react';
@@ -371,11 +371,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 style={{ padding: '0 10px', marginBottom: 0 }}
               >
                 <Checkbox>
-                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                    {intl.formatMessage({
-                      id: 'resources.form.enablePartialOffload'
+                  <Tooltip
+                    title={intl.formatMessage({
+                      id: 'models.form.partialoffload.tips'
                     })}
-                  </span>
+                  >
+                    <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                      {intl.formatMessage({
+                        id: 'resources.form.enablePartialOffload'
+                      })}
+                    </span>
+                    <InfoCircleOutlined
+                      className="m-l-2"
+                      style={{ color: 'var(--ant-color-text-tertiary)' }}
+                    />
+                  </Tooltip>
                 </Checkbox>
               </Form.Item>
             </FormItemWrapper>
@@ -388,11 +398,21 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 style={{ padding: '0 10px', marginBottom: 0 }}
               >
                 <Checkbox>
-                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                    {intl.formatMessage({
-                      id: 'resources.form.enableDistributedInferenceAcrossWorkers'
+                  <Tooltip
+                    title={intl.formatMessage({
+                      id: 'models.form.distribution.tips'
                     })}
-                  </span>
+                  >
+                    <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                      {intl.formatMessage({
+                        id: 'resources.form.enableDistributedInferenceAcrossWorkers'
+                      })}
+                    </span>
+                    <InfoCircleOutlined
+                      className="m-l-2"
+                      style={{ color: 'var(--ant-color-text-tertiary)' }}
+                    />
+                  </Tooltip>
                 </Checkbox>
               </Form.Item>
             </FormItemWrapper>