fix(style): unify casing of system terms

main
jialin 1 year ago
parent a087677c6e
commit f6bc183972

@ -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 ? (

@ -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 {

@ -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}>
<Typography.Title
level={5}
style={{
color: 'var(--color-white-1)',
marginRight: 10,
marginBottom: 0
}}
>
<li key={index}>
<span className="title">
{item.title?.locale
? intl.formatMessage({ id: item.title?.text || '' })
: item.title}
:
</Typography.Title>
<Typography.Text
style={{
color: 'var(--color-white-1)',
display: 'inline-flex',
lineHeight: 1.5
}}
>
</span>
<span className="content">
{intl.formatMessage({ id: item.tips })}
</Typography.Text>
</span>
</li>
);
})}
</ul>
</UL>
);
};

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

@ -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) ==========

@ -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.',

@ -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': '查看更多',

@ -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',
'resources.worker.add.step3': '成功后,刷新 worker 列表即可看到新的 worker',
'resources.worker.container.supported': '不支持 MacOS 和 Windows',
'(在需要添加的 Worker 上运行,<span style="color: #000;font-weight: 600">mytoken</span> 为第一步获取到的 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 {
'默认存储目录为 <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': '复制完整路径',

@ -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"

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

@ -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

@ -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

@ -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

@ -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',

@ -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(

@ -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={
item.description?.isLocalized
? intl.formatMessage({ id: item.description.text })
: item.description?.text
}
description={renderDescription(item.description)}
onChange={null}
{..._.omit(item, [
'name',

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

@ -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>

@ -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>

Loading…
Cancel
Save