root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: model file description

Browse Source
This commit is contained in:
jialin
2025-01-13 15:51:34 +08:00
parent 5c1bcdbd74
commit 9aa297a804
14 changed files with 165 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/common.less
+5
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+41
View File
@@ -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
+16 -7
View File
@@ -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.',
'models.form.backend.voxbox': 'vox-box: For non-GGUF format audio models.',
'For non-GGUF format models, supports x86 Linux only.',
'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
+16 -7
View File
@@ -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)。',
'models.search.voxbox.tips': '3. 若需部署音频模型取消勾选 GGUF 复选框。',
' 非 GGUF 的音频模型用 vox-box，其它非 GGUF 的模型用 vLLM(仅支持 x86 Linux)。',
'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',
'models.form.backend.vllm': 'vLLM: 用于非 GGUF 格式模型，仅支持 x86 Linux',
'models.form.backend.voxbox': 'vox-box: 用于非 GGUF 格式的音频模型',
'用于 GGUF 格式模型，支持 Linux, macOS 和 Windows',
'models.form.backend.vllm': '用于非 GGUF 格式模型，仅支持 x86 Linux',
'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
-1
View File
@@ -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
+5 -27
View File
@@ -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
+6 -1
View File
@@ -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
+34 -14
View File
@@ -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={
<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>
}
description={<TooltipList list={backendTipsList}></TooltipList>}
options={
backendOptions ?? [
{
src/pages/llmodels/components/search-model.tsx
+8 -8
View File
@@ -257,19 +257,19 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
<Tooltip
overlayInnerStyle={{ width: 'max-content' }}
title={
<div>
<div>
<ul className="tips-desc-list">
<li>
{intl.formatMessage({ id: 'models.search.gguf.tips' })}
</div>
<div>
</li>
<li>
{intl.formatMessage({ id: 'models.search.vllm.tips' })}
</div>
<div>
</li>
<li>
{intl.formatMessage({
id: 'models.search.voxbox.tips'
})}
</div>
</div>
</li>
</ul>
}
>
GGUF
src/pages/playground/components/ground-images.tsx
+4 -4
View File
@@ -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,
height: model?.meta?.default_height || 512
width: w,
height: h
});
}
updateCacheFormData({
..._.pick(model?.meta, METAKEYS, {}),
size: defaultSize,
width: model?.meta?.default_width || 512,
height: model?.meta?.default_height || 512
width: w,
height: h
});
},
[modelList, isOpenaiCompatible]
src/pages/playground/components/image-edit.tsx
+4 -6
View File
@@ -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,
height: model?.meta?.default_height || 512
width: w,
height: h
});
}
updateCacheFormData({
..._.pick(model?.meta, METAKEYS, {}),
size: defaultSize,
width: model?.meta?.default_width || 512,
height: model?.meta?.default_height || 512
width: w,
height: h
});
},
[modelList, isOpenaiCompatible]
src/pages/playground/config/params-config.ts
+23 -40
View File
@@ -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),