From 9aa297a804abfe53ef46171d21ec69eb7cc2d69e Mon Sep 17 00:00:00 2001 From: jialin Date: Mon, 13 Jan 2025 15:49:26 +0800 Subject: [PATCH] chore: model file description --- src/assets/styles/common.less | 5 ++ src/components/logs-viewer/logs-list.tsx | 4 +- .../logs-viewer/virtual-log-list.tsx | 2 +- src/components/tooltip-list/index.tsx | 41 ++++++++++++ src/locales/en-US/models.ts | 23 ++++--- src/locales/zh-CN/models.ts | 23 ++++--- src/pages/llmodels/catalog.tsx | 1 - .../llmodels/components/advance-config.tsx | 32 ++-------- .../llmodels/components/catalog-item.tsx | 7 ++- src/pages/llmodels/components/data-form.tsx | 48 +++++++++----- .../llmodels/components/search-model.tsx | 16 ++--- .../playground/components/ground-images.tsx | 8 +-- .../playground/components/image-edit.tsx | 10 ++- src/pages/playground/config/params-config.ts | 63 +++++++------------ 14 files changed, 165 insertions(+), 118 deletions(-) create mode 100644 src/components/tooltip-list/index.tsx diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less index c9488093..54aa1629 100644 --- a/src/assets/styles/common.less +++ b/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; +} diff --git a/src/components/logs-viewer/logs-list.tsx b/src/components/logs-viewer/logs-list.tsx index 1960796f..0b9d200a 100644 --- a/src/components/logs-viewer/logs-list.tsx +++ b/src/components/logs-viewer/logs-list.tsx @@ -65,8 +65,8 @@ const LogsList: React.FC = 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?.({ diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index e69f623d..6ed8c228 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -215,7 +215,7 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { ); const debouncedScroll = useCallback( - _.debounce(() => { + _.throttle(() => { if (scrollPos[0] === 'top' && scrollPosRef.current.pos === 'top') { logListRef.current?.scrollToTop(); } diff --git a/src/components/tooltip-list/index.tsx b/src/components/tooltip-list/index.tsx new file mode 100644 index 00000000..cd5b4c5d --- /dev/null +++ b/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 = (props) => { + const { list } = props; + return ( +
    + {list.map((item, index: number) => { + return ( +
  • + + {item.title}: + + + {item.tips} + +
    • + ); + })} +
+ ); +}; + +export default TooltipList; diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts index 6a9760c7..b2250309 100644 --- a/src/locales/en-US/models.ts +++ b/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.', - '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).` }; diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index 660150b8..64fa88ec 100644 --- a/src/locales/zh-CN/models.ts +++ b/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)。', - '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)' }; diff --git a/src/pages/llmodels/catalog.tsx b/src/pages/llmodels/catalog.tsx index e6787598..f836ce0a 100644 --- a/src/pages/llmodels/catalog.tsx +++ b/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<{ diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx index 2f279964..192e426b 100644 --- a/src/pages/llmodels/components/advance-config.tsx +++ b/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 = (props) => { return null; }, [backend]); - const renderSelectTips = (list: Array<{ title: string; tips: string }>) => { - return ( -
- {list.map((item, index) => { - return ( -
- - {item.title}: - - - {item.tips} - -
- ); - })} -
- ); - }; - const handleWorkerLabelsChange = useCallback( (labels: Record) => { form.setFieldValue('worker_selector', labels); @@ -155,7 +131,7 @@ const AdvanceConfig: React.FC = (props) => { } options={[ { label: intl.formatMessage({ @@ -180,7 +156,9 @@ const AdvanceConfig: React.FC = (props) => { id: 'resources.form.placementStrategy' })} options={placementStrategyOptions} - description={renderSelectTips(placementStrategyTips)} + description={ + + } > diff --git a/src/pages/llmodels/components/catalog-item.tsx b/src/pages/llmodels/components/catalog-item.tsx index 89cc0442..da33cbc0 100644 --- a/src/pages/llmodels/components/catalog-item.tsx +++ b/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 = (props) => { + const intl = useIntl(); const { onClick, activeId, data } = props; const handleOnClick = useCallback(() => { @@ -92,7 +94,10 @@ const CatalogItem: React.FC = (props) => {
- + = forwardRef((props, ref) => { const localPathCache = useRef(''); + 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 = forwardRef((props, ref) => { ]} > } > @@ -545,19 +577,7 @@ const DataForm: React.FC = forwardRef((props, ref) => { required onChange={handleBackendChange} label={intl.formatMessage({ id: 'models.form.backend' })} - description={ -
-
- 1. {intl.formatMessage({ id: 'models.form.backend.llamabox' })} -
-
- 2. {intl.formatMessage({ id: 'models.form.backend.vllm' })} -
-
- 3. {intl.formatMessage({ id: 'models.form.backend.voxbox' })} -
-
- } + description={} options={ backendOptions ?? [ { diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx index ff64a7e8..67358069 100644 --- a/src/pages/llmodels/components/search-model.tsx +++ b/src/pages/llmodels/components/search-model.tsx @@ -257,19 +257,19 @@ const SearchModel: React.FC = (props) => { -
+
    +
  • {intl.formatMessage({ id: 'models.search.gguf.tips' })} -
-
+ +
  • {intl.formatMessage({ id: 'models.search.vllm.tips' })} -
    • -
    + +
  • {intl.formatMessage({ id: 'models.search.voxbox.tips' })} -
    • -
    + + } > GGUF diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index 51f6d407..32f4ddac 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/src/pages/playground/components/ground-images.tsx @@ -578,15 +578,15 @@ const GroundImages: React.FC = 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] diff --git a/src/pages/playground/components/image-edit.tsx b/src/pages/playground/components/image-edit.tsx index 364d2660..5e3eb6e3 100644 --- a/src/pages/playground/components/image-edit.tsx +++ b/src/pages/playground/components/image-edit.tsx @@ -600,8 +600,6 @@ const GroundImages: React.FC = 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 = 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] diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index 542a8831..f64d9edb 100644 --- a/src/pages/playground/config/params-config.ts +++ b/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),