fix(style): unify casing of system terms

src/components/seal-form/components/label-info.tsx

@@ -12,7 +12,6 @@ interface NoteInfoProps {
 const NoteInfo: React.FC<NoteInfoProps> = (props) => {
   const { required, description, label, labelExtra } = props || {};
   if (!label) return null;
-
   return (
     <span className="label-text">
       {description ? (

src/components/seal-form/wrapper/input.ts

@@ -10,6 +10,9 @@ import {
 const InputWrapper = styled.div`
   .seal-input-number {
     padding-right: 0;
+    .isfoucs-has-value {
+      top: 9px;
+    }
   }
   .seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);
@@ -82,7 +85,7 @@ const InputWrapper = styled.div`
   input.ant-input-number-input {
     flex: 1;
     height: ${INPUTHEIGHT}px !important;
-    padding-block: 5px;
+    padding-block: 5px 4px;
     padding-inline: ${INPUT_INNER_PADDING}px;
   }
   .ant-input-group {

src/components/tooltip-list/index.tsx

@@ -1,6 +1,26 @@
 import { useIntl } from '@umijs/max';
-import { Typography } from 'antd';
 import React from 'react';
+import styled from 'styled-components';
+
+const UL = styled.ul`
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  li {
+    display: flex;
+    flex-direction: column;
+    .title {
+      font-weight: 600;
+      color: var(--ant-color-text-light-solid);
+    }
+    .content {
+      color: var(--color-white-tertiary);
+      display: inline-flex;
+    }
+  }
+`;
 
 interface TooltipListProps {
   list: { title: any; tips: string }[];
@@ -10,36 +30,23 @@ const TooltipList: React.FC<TooltipListProps> = (props) => {
   const intl = useIntl();
   const { list } = props;
   return (
-    <ul className="tips-desc-list">
+    <UL>
       {list.map((item, index: number) => {
         return (
-          <li className="m-b-8" key={index}>
+          <li key={index}>
-            <Typography.Title
+            <span className="title">
-              level={5}
-              style={{
-                color: 'var(--color-white-1)',
-                marginRight: 10,
-                marginBottom: 0
-              }}
-            >
               {item.title?.locale
                 ? intl.formatMessage({ id: item.title?.text || '' })
                 : item.title}
               :
-            </Typography.Title>
+            </span>
-            <Typography.Text
+            <span className="content">
-              style={{
-                color: 'var(--color-white-1)',
-                display: 'inline-flex',
-                lineHeight: 1.5
-              }}
-            >
               {intl.formatMessage({ id: item.tips })}
-            </Typography.Text>
+            </span>
           </li>
         );
       })}
-    </ul>
+    </UL>
   );
 };
 

src/locales/en-US/resources.ts

@@ -18,7 +18,7 @@ export default {
   'resources.form.spread.tips':
     'Make the resources of the entire cluster relatively evenly distributed among all workers. It may produce more resource fragmentation on a single worker.',
   'resources.form.binpack.tips':
-    'Prioritize the overall utilization of cluster resources, reducing resource fragmentation on Workers/GPUs.',
+    'Prioritize the overall utilization of cluster resources, reducing resource fragmentation on GPUs/Workers.',
   'resources.form.workerSelector.description':
     'The system selects the most suitable GPU or Worker for deploying model instances based on predefined labels.',
   'resources.table.ip': 'IP',
@@ -39,16 +39,16 @@ export default {
   'resources.table.used': 'Used',
   'resources.table.allocated': 'Allocated',
   'resources.table.wokers': 'workers',
-  'resources.worker.linuxormaxos': 'Linux or MacOS',
+  'resources.worker.linuxormaxos': 'Linux or macOS',
   'resources.table.unified': 'Unified Memory',
   'resources.worker.add.step1':
     'Get Token <span class="note-text">(Run on the server)</span>',
   'resources.worker.add.step2': 'Register Worker',
   'resources.worker.add.step2.tips':
-    'Note: run on the worker to be added, <span style="color: #000;font-weight: 600">mytoken</span> is the token obtained in the first step.',
+    '(Run on the worker to be added, <span style="color: #000;font-weight: 600">mytoken</span> is the token obtained in the first step.)',
   'resources.worker.add.step3':
-    'After success, refresh the workers list to see the new worker.',
+    'After success, refresh the workers list to view the new worker.',
-  'resources.worker.container.supported': 'Do not support MacOS or Windows.',
+  'resources.worker.container.supported': 'Do not support macOS or Windows.',
   'resources.worker.current.version': 'Current version is {version}.',
   'resources.worker.driver.install':
     'Ensure all necessary drivers and libraries are installed on the system prior to installing GPUStack.',
@@ -68,9 +68,9 @@ export default {
   'resources.modelfiles.retry.download': 'Retry Download',
   'resources.modelfiles.storagePath.holder':
     'Waiting for the download to complete...',
-  'resources.filter.worker': 'Filter by Worker',
+  'resources.filter.worker': 'Filter by worker',
   'resources.filter.source': 'Filter by Source',
   'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
   'resources.modelfiles.copy.tips': 'Copy Full Path',
-  'resources.filter.path': 'Filter by Path'
+  'resources.filter.path': 'Filter by path'
 };

src/locales/ja-JP/resources.ts

@@ -45,7 +45,7 @@ export default {
     'Get Token <span class="note-text">(Run on the server)</span>',
   'resources.worker.add.step2': 'ワーカーを登録',
   'resources.worker.add.step2.tips':
-    'Note: run on the worker to be added, <span style="color: #000;font-weight: 600">mytoken</span> is the token obtained in the first step.',
+    '(Run on the worker to be added, <span style="color: #000;font-weight: 600">mytoken</span> is the token obtained in the first step.)',
   'resources.worker.add.step3':
     '成功後、ワーカーリストを更新して新しいワーカーを確認してください。',
   'resources.worker.container.supported':
@@ -69,11 +69,11 @@ export default {
   'resources.modelfiles.retry.download': 'Retry Download',
   'resources.modelfiles.storagePath.holder':
     'Waiting for download to complete...',
-  'resources.filter.worker': 'Filter by Worker',
+  'resources.filter.worker': 'Filter by worker',
   'resources.filter.source': 'Filter by Source',
   'resources.modelfiles.delete.tips': 'Also delete the file from disk!',
   'resources.modelfiles.copy.tips': 'Copy Full Path',
-  'resources.filter.path': 'Filter by Path'
+  'resources.filter.path': 'Filter by path'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/ru-RU/resources.ts

@@ -45,7 +45,7 @@ export default {
     'Получить токен <span class="note-text">(Запустить на сервере)</span>',
   'resources.worker.add.step2': 'Зарегистрировать воркер',
   'resources.worker.add.step2.tips':
-    'Примечание: выполнить на подключаемом воркере, <span style="color: #000;font-weight: 600">mytoken</span> это токен, полученный на первом шаге',
+    '(выполнить на подключаемом воркере, <span style="color: #000;font-weight: 600">mytoken</span> это токен, полученный на первом шаге)',
   'resources.worker.add.step3':
     'После успешной регистрации обновите список воркеров.',
   'resources.worker.container.supported': 'Только для Linux.',

src/locales/zh-CN/models.ts

@@ -16,7 +16,7 @@ export default {
   'models.form.partialoffload.tips':
     '启用 CPU 卸载时，如果 GPU 资源不足，则模型的一部分层将被卸载到 CPU 上，在没有 GPU 可用时，会使用纯 CPU 推理。',
   'models.form.distribution.tips':
-    '允许在单个 worker 资源不足时，将部分计算卸载到一个或多个远程 worker。',
+    '允许在单个 Worker 资源不足时，将部分计算卸载到一个或多个远程 Worker。',
   'models.openinplayground': '在 Playground 中打开',
   'models.instances': '实例',
   'models.table.replicas.edit': '调整副本数',
@@ -54,7 +54,7 @@ export default {
   'models.form.manual.schedule': '手动调度',
   'models.table.gpuindex': 'GPU 序号',
   'models.table.backend': '后端',
-  'models.table.acrossworker': '跨 worker 推理',
+  'models.table.acrossworker': '跨 Worker 推理',
   'models.table.cpuoffload': 'CPU 卸载',
   'models.table.layers': '层',
   'models.form.backend': '后端',
@@ -85,7 +85,7 @@ export default {
   'models.form.backend.vllm': '用于非 GGUF 格式模型，仅支持 x86 Linux',
   'models.form.backend.voxbox': '用于非 GGUF 格式的音频模型',
   'models.form.search.gguftips':
-    '当 macOS 或 Windows 作 worker 时勾选 GGUF（搜索音频模型时取消勾选）',
+    '当 macOS 或 Windows 作 Worker 时勾选 GGUF（搜索音频模型时取消勾选）',
   'models.form.button.addlabel': '添加标签',
   'models.filter.category': '按类别筛选',
   'models.list.more.logs': '查看更多',

src/locales/zh-CN/resources.ts

@@ -14,11 +14,11 @@ export default {
   'resources.form.placementStrategy': '放置策略',
   'resources.form.workerSelector': 'Worker 选择器',
   'resources.form.enableDistributedInferenceAcrossWorkers':
-    '允许跨 worker 分布式推理',
+    '允许跨 Worker 分布式推理',
   'resources.form.spread.tips':
     '使得集群整体的资源在所有 Worker 之间分配得相对均匀。可能会在单个 Worker 上产生较多资源碎片。',
   'resources.form.binpack.tips':
-    '优先考虑整体集群的资源最大化利用，减少 Worker/GPU 上的资源碎片。',
+    '优先考虑整体集群的资源最大化利用，减少 GPU/Worker 上的资源碎片。',
   'resources.form.workerSelector.description':
     '系统在部署模型实例时，会根据预定义的标签来选择最符合要求的 GPU 或 Worker。',
   'resources.table.ip': 'IP',
@@ -40,14 +40,14 @@ export default {
   'resources.table.allocated': '已分配',
   'resources.table.wokers': 'workers',
   'resources.table.unified': '统一内存',
-  'resources.worker.linuxormaxos': 'Linux 或 MacOS',
+  'resources.worker.linuxormaxos': 'Linux 或 macOS',
   'resources.worker.add.step1':
-    '获取 Token <span class="note-text">(在 server 上运行)</span>',
+    '获取 token<span class="note-text">（在 Server 上运行）</span>',
   'resources.worker.add.step2': '注册 Worker',
   'resources.worker.add.step2.tips':
-    '注意：在需要添加的 worker 上运行，<span style="color: #000;font-weight: 600">mytoken</span> 为第一步获取到的 Token',
+    '（在需要添加的 Worker 上运行，<span style="color: #000;font-weight: 600">mytoken</span> 为第一步获取到的 token）',
-  'resources.worker.add.step3': '成功后，刷新 worker 列表即可看到新的 worker',
+  'resources.worker.add.step3': '成功后，刷新 Worker 列表即可看到新的 Worker',
-  'resources.worker.container.supported': '不支持 MacOS 和 Windows',
+  'resources.worker.container.supported': '不支持 macOS 和 Windows',
   'resources.worker.current.version': '当前版本为 {version}',
   'resources.worker.select.command': '选择一个标签生成命令并使用复制按钮复制',
   'resources.worker.driver.install':
@@ -66,7 +66,7 @@ export default {
     '默认存储目录为 <span class="desc-block">/var/lib/gpustack/cache</span>，或使用 <span class="desc-block">--cache-dir</span> 指定的目录',
   'resources.modelfiles.retry.download': '重新下载',
   'resources.modelfiles.storagePath.holder': '等待下载完成...',
-  'resources.filter.worker': '按 worker 筛选',
+  'resources.filter.worker': '按 Worker 筛选',
   'resources.filter.source': '按来源筛选',
   'resources.modelfiles.delete.tips': '同时从磁盘删除文件！',
   'resources.modelfiles.copy.tips': '复制完整路径',

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

@@ -21,6 +21,7 @@ import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';
 import {
+  backendLabelMap,
   backendOptionsMap,
   backendParamsHolderTips,
   modelCategories,
@@ -327,7 +328,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                 id: 'models.form.backendVersion.tips'
               },
               {
-                backend: backend,
+                backend: backendLabelMap[backend],
                 link: backendParamsTips?.releases && (
                   <span
                     style={{
@@ -336,7 +337,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                   >
                     <Typography.Link
                       className="flex-center"
-                      style={{ lineHeight: 1 }}
+                      style={{ display: 'inline' }}
                       href={backendParamsTips?.releases}
                       target="_blank"
                     >
@@ -375,12 +376,13 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             options={paramsConfig}
             description={
               backendParamsTips && (
-                <span>
+                <span style={{ marginLeft: 5 }}>
                   {intl.formatMessage(
                     { id: 'models.form.backend_parameters.vllm.tips' },
                     { backend: backendParamsTips.backend || '' }
                   )}{' '}
                   <Typography.Link
+                    style={{ display: 'inline' }}
                     className="flex-center"
                     href={backendParamsTips.link}
                     target="_blank"

src/pages/llmodels/components/compatible-alert.tsx

@@ -85,7 +85,8 @@ const CompatibilityAlert: React.FC<CompatibilityAlertProps> = (props) => {
   }, [type]);
 
   return (
-    show && (
+    show &&
+    !!message && (
       <DivWrapper>
         <AlertBlockInfo
           ellipsis={false}

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

@@ -9,6 +9,7 @@ import { Form } from 'antd';
 import _ from 'lodash';
 import React, { forwardRef, useImperativeHandle } from 'react';
 import {
+  backendLabelMap,
   backendOptionsMap,
   backendTipsList,
   excludeFields,
@@ -259,7 +260,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
           options={
             backendOptions ?? [
               {
-                label: `llama-box`,
+                label: backendLabelMap[backendOptionsMap.llamaBox],
                 value: backendOptionsMap.llamaBox,
                 disabled:
                   props.source === modelSourceMap.local_path_value
@@ -267,7 +268,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
                     : !isGGUF
               },
               {
-                label: 'vLLM',
+                label: backendLabelMap[backendOptionsMap.vllm],
                 value: backendOptionsMap.vllm,
                 disabled:
                   props.source === modelSourceMap.local_path_value
@@ -275,7 +276,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
                     : isGGUF
               },
               {
-                label: 'Ascend Mindie',
+                label: backendLabelMap[backendOptionsMap.ascendMindie],
                 value: backendOptionsMap.ascendMindie,
                 disabled:
                   props.source === modelSourceMap.local_path_value
@@ -283,7 +284,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
                     : isGGUF
               },
               {
-                label: 'vox-box',
+                label: backendLabelMap[backendOptionsMap.voxBox],
                 value: backendOptionsMap.voxBox,
                 disabled:
                   props.source === modelSourceMap.local_path_value

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

@@ -10,6 +10,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
 import {
   evaluationsModelSpec,
   queryHuggingfaceModels,
@@ -26,6 +27,12 @@ import SearchStyle from '../style/search-result.less';
 import SearchInput from './search-input';
 import SearchResult from './search-result';
 
+const UL = styled.ul`
+  list-style: decimal;
+  padding-left: 16px;
+  margin: 0;
+`;
+
 interface SearchInputProps {
   hasLinuxWorker?: boolean;
   modelSource: string;
@@ -315,7 +322,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
       <Tooltip
         overlayInnerStyle={{ width: 'max-content' }}
         title={
-          <ul className="tips-desc-list">
+          <UL>
             <li>{intl.formatMessage({ id: 'models.search.gguf.tips' })}</li>
             <li>{intl.formatMessage({ id: 'models.search.vllm.tips' })}</li>
             <li>
@@ -323,7 +330,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
                 id: 'models.search.voxbox.tips'
               })}
             </li>
-          </ul>
+          </UL>
         }
       >
         GGUF

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

@@ -12,6 +12,7 @@ import { Button, Form, Modal, Typography } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useRef } from 'react';
 import {
+  backendLabelMap,
   backendOptionsMap,
   backendTipsList,
   excludeFields,
@@ -504,7 +505,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                 description={<TooltipList list={backendTipsList}></TooltipList>}
                 options={[
                   {
-                    label: `llama-box`,
+                    label: backendLabelMap[backendOptionsMap.llamaBox],
                     value: backendOptionsMap.llamaBox,
                     disabled:
                       formData?.source === modelSourceMap.local_path_value
@@ -512,7 +513,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                         : !isGGUF
                   },
                   {
-                    label: 'vLLM',
+                    label: backendLabelMap[backendOptionsMap.vllm],
                     value: backendOptionsMap.vllm,
                     disabled:
                       formData?.source === modelSourceMap.local_path_value
@@ -520,7 +521,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                         : isGGUF
                   },
                   {
-                    label: 'Ascend Mindie',
+                    label: backendLabelMap[backendOptionsMap.ascendMindie],
                     value: backendOptionsMap.ascendMindie,
                     disabled:
                       formData?.source === modelSourceMap.local_path_value
@@ -528,7 +529,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
                         : isGGUF
                   },
                   {
-                    label: 'vox-box',
+                    label: backendLabelMap[backendOptionsMap.voxBox],
                     value: backendOptionsMap.voxBox,
                     disabled:
                       formData?.source === modelSourceMap.local_path_value

src/pages/llmodels/config/index.ts

@@ -135,6 +135,13 @@ export const backendOptionsMap = {
   ascendMindie: 'ascend-mindie'
 };
 
+export const backendLabelMap = {
+  [backendOptionsMap.llamaBox]: 'llama-box',
+  [backendOptionsMap.vllm]: 'vLLM',
+  [backendOptionsMap.voxBox]: 'vox-box',
+  [backendOptionsMap.ascendMindie]: 'Ascend MindIE'
+};
+
 export const backendParamsHolderTips = {
   [backendOptionsMap.llamaBox]: {
     holder: 'models.form.backend_parameters.llamabox.placeholder',

src/pages/llmodels/hooks/index.ts

@@ -307,8 +307,8 @@ export const useCheckCompatibility = () => {
           : compatibility_messages?.join(' ')
     };
     if (hasClaim) {
-      const ram = convertFileSize(resource_claim.ram, 1);
+      const ram = convertFileSize(resource_claim.ram, 2);
-      const vram = convertFileSize(resource_claim.vram, 1);
+      const vram = convertFileSize(resource_claim.vram, 2);
       msgData = {
         title: intl.formatMessage({ id: 'models.form.check.passed' }),
         message: intl.formatMessage(

src/pages/playground/components/dynamic-params.tsx

@@ -88,6 +88,21 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
       [onValuesChange]
     );
 
+    const renderDescription = useCallback(
+      (description: any) => {
+        let desc = description?.text;
+        if (description?.isLocalized) {
+          desc = intl.formatMessage({ id: description?.text });
+        }
+        if (description?.html) {
+          return <div dangerouslySetInnerHTML={{ __html: desc }}></div>;
+        }
+
+        return desc;
+      },
+      [intl]
+    );
+
     const renderFields = useMemo(() => {
       if (!paramsConfig?.length) {
         return null;
@@ -108,11 +123,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                   ? item.disabledConfig?.when?.(formValues)
                   : item.disabled
               }
-              description={
+              description={renderDescription(item.description)}
-                item.description?.isLocalized
-                  ? intl.formatMessage({ id: item.description.text })
-                  : item.description?.text
-              }
               onChange={null}
               {..._.omit(item, [
                 'name',

src/pages/playground/config/types.ts

@@ -64,5 +64,6 @@ export interface ParamsSchema {
     text: string;
     html?: boolean;
     isLocalized?: boolean;
+    isLink?: boolean;
   };
 }

src/pages/resources/components/container-install.tsx

@@ -99,9 +99,9 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
           className="font-size-12"
           style={{ color: 'var(--ant-color-text-tertiary)' }}
           dangerouslySetInnerHTML={{
-            __html: `(${intl.formatMessage({
+            __html: `${intl.formatMessage({
               id: 'resources.worker.add.step2.tips'
-            })})`
+            })}`
           }}
         ></span>
       </h3>

src/pages/resources/components/script-install.tsx

@@ -42,7 +42,7 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
           className="font-size-12"
           style={{ color: 'var(--ant-color-text-tertiary)' }}
           dangerouslySetInnerHTML={{
-            __html: `(${labels.step2Tips})`
+            __html: `${labels.step2Tips}`
           }}
         ></span>
       </h3>