chore: model file description

src/assets/styles/common.less

@@ -227,3 +227,8 @@
 .text-tertiary {
   color: var(--ant-color-text-tertiary);
 }
+
+.tips-desc-list {
+  list-style-type: decimal;
+  padding-left: 16px;
+}

src/components/logs-viewer/logs-list.tsx

@@ -65,8 +65,8 @@ const LogsList: React.FC<LogsListProps> = forwardRef((props, ref) => {
       const clientHeight = scrollEventElement?.clientHeight;
 
       stopScroll.current = scrollTop + clientHeight <= scrollHeight;
-      // is scroll to bottom
+
-      const isBottom = scrollTop + clientHeight === scrollHeight;
+      const isBottom = scrollTop + clientHeight + 150 >= scrollHeight;
       // is scroll to top
       if (scrollTop === 0) {
         onScroll?.({

src/components/logs-viewer/virtual-log-list.tsx

@@ -215,7 +215,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   );
 
   const debouncedScroll = useCallback(
-    _.debounce(() => {
+    _.throttle(() => {
       if (scrollPos[0] === 'top' && scrollPosRef.current.pos === 'top') {
         logListRef.current?.scrollToTop();
       }

src/components/tooltip-list/index.tsx

@@ -0,0 +1,41 @@
+import { Typography } from 'antd';
+import React from 'react';
+
+interface TooltipListProps {
+  list: { title: React.ReactNode; tips: React.ReactNode }[];
+}
+
+const TooltipList: React.FC<TooltipListProps> = (props) => {
+  const { list } = props;
+  return (
+    <ul className="tips-desc-list">
+      {list.map((item, index: number) => {
+        return (
+          <li className="m-b-8" key={index}>
+            <Typography.Title
+              level={5}
+              style={{
+                color: 'var(--color-white-1)',
+                marginRight: 10,
+                marginBottom: 0
+              }}
+            >
+              {item.title}:
+            </Typography.Title>
+            <Typography.Text
+              style={{
+                color: 'var(--color-white-1)',
+                display: 'inline-flex',
+                lineHeight: 1.5
+              }}
+            >
+              {item.tips}
+            </Typography.Text>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default TooltipList;

src/locales/en-US/models.ts

@@ -60,11 +60,11 @@ export default {
   'models.form.backend': 'Backend',
   'models.form.backend_parameters': 'Backend Parameters',
   'models.search.gguf.tips':
-    '1. GGUF models use llama-box(supports Linux, macOS and Windows).',
+    'GGUF models use llama-box(supports Linux, macOS and Windows).',
   'models.search.vllm.tips':
-    '2. Non-GGUF models use vox-box for audio and vLLM(x86 Linux only) for others.',
+    'Non-GGUF models use vox-box for audio and vLLM(x86 Linux only) for others.',
   'models.search.voxbox.tips':
-    '3. To deploy an audio model, uncheck the GGUF checkbox.',
+    'To deploy an audio model, uncheck the GGUF checkbox.',
   'models.form.ollamalink': 'Find More in Ollama Library',
   'models.form.backend_parameters.llamabox.placeholder':
     'e.g., --ctx-size=8192',
@@ -83,13 +83,22 @@ export default {
     'Pin a specific version to keep the backend stable across GPUStack upgrades.',
   'models.form.gpuselector': 'GPU Selector',
   'models.form.backend.llamabox':
-    'llama-box: For GGUF format models, supports Linux, macOS, and Windows.',
+    'For GGUF format models, supports Linux, macOS, and Windows.',
   'models.form.backend.vllm':
-    'vLLM: For non-GGUF format models, supports x86 Linux only.',
+    'For non-GGUF format models, supports x86 Linux only.',
-  'models.form.backend.voxbox': 'vox-box: For non-GGUF format audio models.',
+  'models.form.backend.voxbox': 'For non-GGUF format audio models.',
   'models.form.search.gguftips':
     'If using macOS or Windows as a worker, check GGUF (uncheck for audio models).',
   'models.form.button.addlabel': 'Add Label',
   'models.filter.category': 'Filter by category',
-  'models.list.more.logs': 'View More'
+  'models.list.more.logs': 'View More',
+  'models.catalog.release.date': 'Release Date',
+  'models.localpath.gguf.tips.title': 'GGUF format model',
+  'models.localpat.safe.tips.title': 'Safetensors format model',
+  'models.localpath.shared.tips.title': 'Sharded model',
+  'models.localpath.gguf.tips':
+    ' Specify the model file, e.g., /usr/local/models/model.gguf.',
+  'models.localpath.safe.tips':
+    'Specify the model directory, e.g., /usr/local/models/.',
+  'models.localpath.chunks.tips': `Specify one of the model's shard files, e.g., /usr/local/models/model-00001-of-00004.(gguf|safetensors).`
 };

src/locales/zh-CN/models.ts

@@ -59,10 +59,10 @@ export default {
   'models.form.backend': '后端',
   'models.form.backend_parameters': '后端参数',
   'models.search.gguf.tips':
-    '1. GGUF 模型用 llama-box(支持 Linux, macOS 和 Windows)。',
+    'GGUF 模型用 llama-box(支持 Linux, macOS 和 Windows)。',
   'models.search.vllm.tips':
-    '2. 非 GGUF 的音频模型用 vox-box，其它非 GGUF 的模型用 vLLM(仅支持 x86 Linux)。',
+    ' 非 GGUF 的音频模型用 vox-box，其它非 GGUF 的模型用 vLLM(仅支持 x86 Linux)。',
-  'models.search.voxbox.tips': '3. 若需部署音频模型取消勾选 GGUF 复选框。',
+  'models.search.voxbox.tips': '若需部署音频模型取消勾选 GGUF 复选框。',
   'models.form.ollamalink': '在 Ollama Library 中查找',
   'models.form.backend_parameters.llamabox.placeholder':
     '例如，--ctx-size=8192',
@@ -80,12 +80,21 @@ export default {
     '固定指定版本以保持后端在 GPUStack 升级过程中的稳定性',
   'models.form.gpuselector': 'GPU 选择器',
   'models.form.backend.llamabox':
-    'llama-box: 用于 GGUF 格式模型，支持 Linux, macOS 和 Windows',
+    '用于 GGUF 格式模型，支持 Linux, macOS 和 Windows',
-  'models.form.backend.vllm': 'vLLM: 用于非 GGUF 格式模型，仅支持 x86 Linux',
+  'models.form.backend.vllm': '用于非 GGUF 格式模型，仅支持 x86 Linux',
-  'models.form.backend.voxbox': 'vox-box: 用于非 GGUF 格式的音频模型',
+  'models.form.backend.voxbox': '用于非 GGUF 格式的音频模型',
   'models.form.search.gguftips':
     '当 macOS 或 Windows 作 worker 时勾选 GGUF（搜索音频模型时取消勾选）',
   'models.form.button.addlabel': '添加标签',
   'models.filter.category': '按类别筛选',
-  'models.list.more.logs': '查看更多'
+  'models.list.more.logs': '查看更多',
+  'models.catalog.release.date': '发布日期',
+  'models.localpath.gguf.tips.title': 'GGUF 格式模型',
+  'models.localpat.safe.tips.title': 'safetensors 格式模型',
+  'models.localpath.shared.tips.title': '分片的模型',
+  'models.localpath.gguf.tips':
+    '指向模型文件，例如 /usr/local/models/model.gguf',
+  'models.localpath.safe.tips': '指向模型目录，例如 /usr/local/models/',
+  'models.localpath.chunks.tips':
+    '指向模型其中一个分片文件，例如 /usr/local/models/model-00001-of-00004.(gguf|safetensors)'
 };

src/pages/llmodels/catalog.tsx

@@ -15,7 +15,6 @@ import { CatalogItem as CatalogItemType, FormData } from './config/types';
 const Catalog: React.FC = () => {
   const intl = useIntl();
   const navigate = useNavigate();
-  const [span, setSpan] = React.useState(8);
   const [activeId, setActiveId] = React.useState(-1);
   const [isFirst, setIsFirst] = React.useState(true);
   const [dataSource, setDataSource] = useState<{

src/pages/llmodels/components/advance-config.tsx

@@ -3,6 +3,7 @@ import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
 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 { useIntl } from '@umijs/max';
@@ -104,31 +105,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     return null;
   }, [backend]);
 
-  const renderSelectTips = (list: Array<{ title: string; tips: string }>) => {
-    return (
-      <div>
-        {list.map((item, index) => {
-          return (
-            <div className="m-b-8" key={index}>
-              <Typography.Title
-                level={5}
-                style={{
-                  color: 'var(--color-white-1)',
-                  marginRight: 10
-                }}
-              >
-                {item.title}:
-              </Typography.Title>
-              <Typography.Text style={{ color: 'var(--color-white-1)' }}>
-                {item.tips}
-              </Typography.Text>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
   const handleWorkerLabelsChange = useCallback(
     (labels: Record<string, any>) => {
       form.setFieldValue('worker_selector', labels);
@@ -155,7 +131,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
         <Form.Item name="scheduleType">
           <SealSelect
             label={intl.formatMessage({ id: 'models.form.scheduletype' })}
-            description={renderSelectTips(scheduleTypeTips)}
+            description={<TooltipList list={scheduleTypeTips}></TooltipList>}
             options={[
               {
                 label: intl.formatMessage({
@@ -180,7 +156,9 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                   id: 'resources.form.placementStrategy'
                 })}
                 options={placementStrategyOptions}
-                description={renderSelectTips(placementStrategyTips)}
+                description={
+                  <TooltipList list={placementStrategyTips}></TooltipList>
+                }
               ></SealSelect>
             </Form.Item>
             <Form.Item<FormData>

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

@@ -2,6 +2,7 @@ import fallbackImg from '@/assets/images/img.png';
 import AutoTooltip from '@/components/auto-tooltip';
 import IconFont from '@/components/icon-font';
 import TagWrapper from '@/components/tags-wrapper';
+import { useIntl } from '@umijs/max';
 import { Tag, Typography } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
@@ -17,6 +18,7 @@ interface CatalogItemProps {
   onClick: (data: CatalogItemType) => void;
 }
 const CatalogItem: React.FC<CatalogItemProps> = (props) => {
+  const intl = useIntl();
   const { onClick, activeId, data } = props;
 
   const handleOnClick = useCallback(() => {
@@ -92,7 +94,10 @@ const CatalogItem: React.FC<CatalogItemProps> = (props) => {
       </div>
       <div className="item-footer">
         <div className="update-time">
-          <span className="flex-center">
+          <span
+            className="flex-center"
+            title={intl.formatMessage({ id: 'models.catalog.release.date' })}
+          >
             <IconFont
               type="icon-new_release_outlined"
               className="m-r-5"

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

@@ -2,6 +2,7 @@ import IconFont from '@/components/icon-font';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import TooltipList from '@/components/tooltip-list';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
@@ -83,6 +84,36 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
 
   const localPathCache = useRef<string>('');
 
+  const backendTipsList = [
+    {
+      title: 'llama-box',
+      tips: intl.formatMessage({ id: 'models.form.backend.llamabox' })
+    },
+    {
+      title: 'vLLM',
+      tips: intl.formatMessage({ id: 'models.form.backend.vllm' })
+    },
+    {
+      title: 'vox-box',
+      tips: intl.formatMessage({ id: 'models.form.backend.voxbox' })
+    }
+  ];
+
+  const localPathTipsList = [
+    {
+      title: intl.formatMessage({ id: 'models.localpath.gguf.tips.title' }),
+      tips: intl.formatMessage({ id: 'models.localpath.gguf.tips' })
+    },
+    {
+      title: intl.formatMessage({ id: 'models.localpat.safe.tips.title' }),
+      tips: intl.formatMessage({ id: 'models.localpath.safe.tips' })
+    },
+    {
+      title: intl.formatMessage({ id: 'models.localpath.shared.tips.title' }),
+      tips: intl.formatMessage({ id: 'models.localpath.chunks.tips' })
+    }
+  ];
+
   const getGPUList = async () => {
     const data = await queryGPUList();
     const list = _.map(data.items, (item: GPUListItem) => {
@@ -325,10 +356,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           ]}
         >
           <SealInput.Input
+            required
             onBlur={handleLocalPathBlur}
             onFocus={handleOnFocus}
             label={intl.formatMessage({ id: 'models.form.filePath' })}
-            required
+            description={<TooltipList list={localPathTipsList}></TooltipList>}
           ></SealInput.Input>
         </Form.Item>
       </>
@@ -545,19 +577,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           required
           onChange={handleBackendChange}
           label={intl.formatMessage({ id: 'models.form.backend' })}
-          description={
+          description={<TooltipList list={backendTipsList}></TooltipList>}
-            <div>
-              <div>
-                1. {intl.formatMessage({ id: 'models.form.backend.llamabox' })}
-              </div>
-              <div>
-                2. {intl.formatMessage({ id: 'models.form.backend.vllm' })}
-              </div>
-              <div>
-                3. {intl.formatMessage({ id: 'models.form.backend.voxbox' })}
-              </div>
-            </div>
-          }
           options={
             backendOptions ?? [
               {

src/pages/llmodels/components/search-model.tsx

@@ -257,19 +257,19 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
                 <Tooltip
                   overlayInnerStyle={{ width: 'max-content' }}
                   title={
-                    <div>
+                    <ul className="tips-desc-list">
-                      <div>
+                      <li>
                         {intl.formatMessage({ id: 'models.search.gguf.tips' })}
-                      </div>
+                      </li>
-                      <div>
+                      <li>
                         {intl.formatMessage({ id: 'models.search.vllm.tips' })}
-                      </div>
+                      </li>
-                      <div>
+                      <li>
                         {intl.formatMessage({
                           id: 'models.search.voxbox.tips'
                         })}
-                      </div>
+                      </li>
-                    </div>
+                    </ul>
                   }
                 >
                   GGUF

src/pages/playground/components/ground-images.tsx

@@ -578,15 +578,15 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         form.current?.form?.setFieldsValue({
           ..._.pick(model?.meta, METAKEYS, {}),
           size: defaultSize,
-          width: model?.meta?.default_width || 512,
+          width: w,
-          height: model?.meta?.default_height || 512
+          height: h
         });
       }
       updateCacheFormData({
         ..._.pick(model?.meta, METAKEYS, {}),
         size: defaultSize,
-        width: model?.meta?.default_width || 512,
+        width: w,
-        height: model?.meta?.default_height || 512
+        height: h
       });
     },
     [modelList, isOpenaiCompatible]

src/pages/playground/components/image-edit.tsx

@@ -600,8 +600,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
 
       if (!isOpenaiCompatible) {
         setParams((pre: object) => {
-          const w = model?.meta?.default_width || 512;
-          const h = model?.meta?.default_height || 512;
           const obj = _.merge({}, pre, _.pick(model?.meta, METAKEYS, {}));
 
           return { ...obj, size: defaultSize, width: w, height: h };
@@ -609,15 +607,15 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
         form.current?.form?.setFieldsValue({
           ..._.pick(model?.meta, METAKEYS, {}),
           size: defaultSize,
-          width: model?.meta?.default_width || 512,
+          width: w,
-          height: model?.meta?.default_height || 512
+          height: h
         });
       }
       updateCacheFormData({
         ..._.pick(model?.meta, METAKEYS, {}),
         size: defaultSize,
-        width: model?.meta?.default_width || 512,
+        width: w,
-        height: model?.meta?.default_height || 512
+        height: h
       });
     },
     [modelList, isOpenaiCompatible]

src/pages/playground/config/params-config.ts

@@ -146,23 +146,6 @@ export const ImageParamsConfig: ParamsSchema[] = [
 ];
 
 export const ImageEidtParamsConfig: ParamsSchema[] = [
-  // {
-  //   type: 'Slider',
-  //   name: 'brush_size',
-  //   label: {
-  //     text: 'Brush Size',
-  //     isLocalized: false
-  //   },
-  //   attrs: {
-  //     min: 25,
-  //     max: 80
-  //   },
-  //   rules: [
-  //     {
-  //       required: false
-  //     }
-  //   ]
-  // },
   {
     type: 'InputNumber',
     name: 'n',
@@ -337,29 +320,6 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
       }
     ]
   },
-  {
-    type: 'InputNumber',
-    name: 'strength',
-    label: {
-      text: 'Strength',
-      isLocalized: false
-    },
-    description: {
-      text: 'playground.image.strength.tip',
-      html: false,
-      isLocalized: true
-    },
-    attrs: {
-      min: 0,
-      max: 1,
-      step: 0.1
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
   {
     type: 'InputNumber',
     name: 'cfg_scale',
@@ -383,6 +343,29 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
       }
     ]
   },
+  {
+    type: 'InputNumber',
+    name: 'strength',
+    label: {
+      text: 'Strength',
+      isLocalized: false
+    },
+    description: {
+      text: 'playground.image.strength.tip',
+      html: false,
+      isLocalized: true
+    },
+    attrs: {
+      min: 0,
+      max: 1,
+      step: 0.1
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
+  },
   {
     type: 'Input',
     name: 'negative_prompt', // e.g. ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2),