From f6bc183972dce828d8edf84010c4aa1595d8fefa Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 8 Apr 2025 13:26:57 +0800 Subject: [PATCH] fix(style): unify casing of system terms --- .../seal-form/components/label-info.tsx | 1 - src/components/seal-form/wrapper/input.ts | 5 +- src/components/tooltip-list/index.tsx | 49 +++++++++++-------- src/locales/en-US/resources.ts | 14 +++--- src/locales/ja-JP/resources.ts | 6 +-- src/locales/ru-RU/resources.ts | 2 +- src/locales/zh-CN/models.ts | 6 +-- src/locales/zh-CN/resources.ts | 16 +++--- .../llmodels/components/advance-config.tsx | 8 +-- .../llmodels/components/compatible-alert.tsx | 3 +- src/pages/llmodels/components/data-form.tsx | 9 ++-- .../llmodels/components/search-model.tsx | 11 ++++- .../llmodels/components/update-modal.tsx | 9 ++-- src/pages/llmodels/config/index.ts | 7 +++ src/pages/llmodels/hooks/index.ts | 4 +- .../playground/components/dynamic-params.tsx | 21 ++++++-- src/pages/playground/config/types.ts | 1 + .../components/container-install.tsx | 4 +- .../resources/components/script-install.tsx | 2 +- 19 files changed, 109 insertions(+), 69 deletions(-) diff --git a/src/components/seal-form/components/label-info.tsx b/src/components/seal-form/components/label-info.tsx index 7cc77216..5de64da8 100644 --- a/src/components/seal-form/components/label-info.tsx +++ b/src/components/seal-form/components/label-info.tsx @@ -12,7 +12,6 @@ interface NoteInfoProps { const NoteInfo: React.FC = (props) => { const { required, description, label, labelExtra } = props || {}; if (!label) return null; - return ( {description ? ( diff --git a/src/components/seal-form/wrapper/input.ts b/src/components/seal-form/wrapper/input.ts index 90c02433..55ce8ef1 100644 --- a/src/components/seal-form/wrapper/input.ts +++ b/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 { diff --git a/src/components/tooltip-list/index.tsx b/src/components/tooltip-list/index.tsx index 4e90ebd3..f9b1a37a 100644 --- a/src/components/tooltip-list/index.tsx +++ b/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 = (props) => { const intl = useIntl(); const { list } = props; return ( -
    +
      {list.map((item, index: number) => { return ( -
    • - +
    • + {item.title?.locale ? intl.formatMessage({ id: item.title?.text || '' }) : item.title} : - - + + {intl.formatMessage({ id: item.tips })} - +
      • ); })} -
    +
); }; diff --git a/src/locales/en-US/resources.ts b/src/locales/en-US/resources.ts index 0c165407..bcb9a313 100644 --- a/src/locales/en-US/resources.ts +++ b/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 (Run on the server)', 'resources.worker.add.step2': 'Register Worker', 'resources.worker.add.step2.tips': - 'Note: run on the worker to be added, mytoken is the token obtained in the first step.', + '(Run on the worker to be added, mytoken is the token obtained in the first step.)', 'resources.worker.add.step3': - 'After success, refresh the workers list to see the new worker.', - 'resources.worker.container.supported': 'Do not support MacOS or Windows.', + 'After success, refresh the workers list to view the new worker.', + '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' }; diff --git a/src/locales/ja-JP/resources.ts b/src/locales/ja-JP/resources.ts index 87df6ae2..697a451b 100644 --- a/src/locales/ja-JP/resources.ts +++ b/src/locales/ja-JP/resources.ts @@ -45,7 +45,7 @@ export default { 'Get Token (Run on the server)', 'resources.worker.add.step2': 'ワーカーを登録', 'resources.worker.add.step2.tips': - 'Note: run on the worker to be added, mytoken is the token obtained in the first step.', + '(Run on the worker to be added, mytoken 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) ========== diff --git a/src/locales/ru-RU/resources.ts b/src/locales/ru-RU/resources.ts index c0a69153..1fd23676 100644 --- a/src/locales/ru-RU/resources.ts +++ b/src/locales/ru-RU/resources.ts @@ -45,7 +45,7 @@ export default { 'Получить токен (Запустить на сервере)', 'resources.worker.add.step2': 'Зарегистрировать воркер', 'resources.worker.add.step2.tips': - 'Примечание: выполнить на подключаемом воркере, mytoken это токен, полученный на первом шаге', + '(выполнить на подключаемом воркере, mytoken это токен, полученный на первом шаге)', 'resources.worker.add.step3': 'После успешной регистрации обновите список воркеров.', 'resources.worker.container.supported': 'Только для Linux.', diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index 5fcbfedd..8c801a85 100644 --- a/src/locales/zh-CN/models.ts +++ b/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': '查看更多', diff --git a/src/locales/zh-CN/resources.ts b/src/locales/zh-CN/resources.ts index 8e2814fa..2ef59474 100644 --- a/src/locales/zh-CN/resources.ts +++ b/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 (在 server 上运行)', + '获取 token（在 Server 上运行）', 'resources.worker.add.step2': '注册 Worker', 'resources.worker.add.step2.tips': - '注意：在需要添加的 worker 上运行，mytoken 为第一步获取到的 Token', - 'resources.worker.add.step3': '成功后，刷新 worker 列表即可看到新的 worker', - 'resources.worker.container.supported': '不支持 MacOS 和 Windows', + '（在需要添加的 Worker 上运行，mytoken 为第一步获取到的 token）', + 'resources.worker.add.step3': '成功后，刷新 Worker 列表即可看到新的 Worker', + '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 { '默认存储目录为 /var/lib/gpustack/cache，或使用 --cache-dir 指定的目录', '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': '复制完整路径', diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx index 9e469b27..45f5ad8e 100644 --- a/src/pages/llmodels/components/advance-config.tsx +++ b/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 = (props) => { id: 'models.form.backendVersion.tips' }, { - backend: backend, + backend: backendLabelMap[backend], link: backendParamsTips?.releases && ( = (props) => { > @@ -375,12 +376,13 @@ const AdvanceConfig: React.FC = (props) => { options={paramsConfig} description={ backendParamsTips && ( - + {intl.formatMessage( { id: 'models.form.backend_parameters.vllm.tips' }, { backend: backendParamsTips.backend || '' } )}{' '} = (props) => { }, [type]); return ( - show && ( + show && + !!message && ( = 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 = 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 = 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 = forwardRef((props, ref) => { : isGGUF }, { - label: 'vox-box', + label: backendLabelMap[backendOptionsMap.voxBox], value: backendOptionsMap.voxBox, disabled: props.source === modelSourceMap.local_path_value diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx index 6ea254aa..5b14ed80 100644 --- a/src/pages/llmodels/components/search-model.tsx +++ b/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 = (props) => { +
  • {intl.formatMessage({ id: 'models.search.gguf.tips' })}
  • {intl.formatMessage({ id: 'models.search.vllm.tips' })}
  • @@ -323,7 +330,7 @@ const SearchModel: React.FC = (props) => { id: 'models.search.voxbox.tips' })}
    • -
+ } > GGUF diff --git a/src/pages/llmodels/components/update-modal.tsx b/src/pages/llmodels/components/update-modal.tsx index cfb75f17..414d1021 100644 --- a/src/pages/llmodels/components/update-modal.tsx +++ b/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 = (props) => { description={} 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 = (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 = (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 = (props) => { : isGGUF }, { - label: 'vox-box', + label: backendLabelMap[backendOptionsMap.voxBox], value: backendOptionsMap.voxBox, disabled: formData?.source === modelSourceMap.local_path_value diff --git a/src/pages/llmodels/config/index.ts b/src/pages/llmodels/config/index.ts index 73f3b123..4f1d831a 100644 --- a/src/pages/llmodels/config/index.ts +++ b/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', diff --git a/src/pages/llmodels/hooks/index.ts b/src/pages/llmodels/hooks/index.ts index cd129825..9fb519f6 100644 --- a/src/pages/llmodels/hooks/index.ts +++ b/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 vram = convertFileSize(resource_claim.vram, 1); + const ram = convertFileSize(resource_claim.ram, 2); + const vram = convertFileSize(resource_claim.vram, 2); msgData = { title: intl.formatMessage({ id: 'models.form.check.passed' }), message: intl.formatMessage( diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx index c705bdcd..0ec8870c 100644 --- a/src/pages/playground/components/dynamic-params.tsx +++ b/src/pages/playground/components/dynamic-params.tsx @@ -88,6 +88,21 @@ const ParamsSettings: React.FC = forwardRef( [onValuesChange] ); + const renderDescription = useCallback( + (description: any) => { + let desc = description?.text; + if (description?.isLocalized) { + desc = intl.formatMessage({ id: description?.text }); + } + if (description?.html) { + return
; + } + + return desc; + }, + [intl] + ); + const renderFields = useMemo(() => { if (!paramsConfig?.length) { return null; @@ -108,11 +123,7 @@ const ParamsSettings: React.FC = forwardRef( ? item.disabledConfig?.when?.(formValues) : item.disabled } - description={ - item.description?.isLocalized - ? intl.formatMessage({ id: item.description.text }) - : item.description?.text - } + description={renderDescription(item.description)} onChange={null} {..._.omit(item, [ 'name', diff --git a/src/pages/playground/config/types.ts b/src/pages/playground/config/types.ts index f15dc8c6..dbb745d7 100644 --- a/src/pages/playground/config/types.ts +++ b/src/pages/playground/config/types.ts @@ -64,5 +64,6 @@ export interface ParamsSchema { text: string; html?: boolean; isLocalized?: boolean; + isLink?: boolean; }; } diff --git a/src/pages/resources/components/container-install.tsx b/src/pages/resources/components/container-install.tsx index 717e917c..7b8e1b25 100644 --- a/src/pages/resources/components/container-install.tsx +++ b/src/pages/resources/components/container-install.tsx @@ -99,9 +99,9 @@ const AddWorker: React.FC = (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' - })})` + })}` }} > diff --git a/src/pages/resources/components/script-install.tsx b/src/pages/resources/components/script-install.tsx index 5a10947e..eb4c778c 100644 --- a/src/pages/resources/components/script-install.tsx +++ b/src/pages/resources/components/script-install.tsx @@ -42,7 +42,7 @@ const AddWorker: React.FC = (props) => { className="font-size-12" style={{ color: 'var(--ant-color-text-tertiary)' }} dangerouslySetInnerHTML={{ - __html: `(${labels.step2Tips})` + __html: `${labels.step2Tips}` }} >