From d62e43790c3339938399d549207f482c089633da Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 8 Apr 2025 19:18:28 +0800 Subject: [PATCH] chore: extract a model file item --- src/components/alert-info/block.less | 2 +- src/components/page-tools/index.tsx | 2 +- src/components/seal-form/wrapper/input.ts | 2 +- src/components/status-tag/index.less | 1 - src/config/index.ts | 2 +- src/global.less | 1 + src/locales/en-US/models.ts | 3 +- src/locales/en-US/resources.ts | 2 +- src/locales/ja-JP/models.ts | 4 +- src/locales/ja-JP/resources.ts | 3 +- src/locales/ru-RU/models.ts | 1 + src/locales/ru-RU/resources.ts | 2 +- src/locales/zh-CN/models.ts | 7 +- src/locales/zh-CN/resources.ts | 2 +- .../llmodels/components/hf-model-file.tsx | 112 ++++------------- .../llmodels/components/model-file-item.tsx | 114 ++++++++++++++++++ .../llmodels/components/search-input.tsx | 3 +- .../llmodels/components/search-model.tsx | 6 +- src/pages/llmodels/config/audio-catalog.ts | 36 +++++- src/pages/llmodels/hooks/index.ts | 37 ++---- .../playground/components/dynamic-params.tsx | 2 +- src/pages/playground/style/content-item.less | 1 + src/utils/index.ts | 4 +- 23 files changed, 207 insertions(+), 142 deletions(-) create mode 100644 src/pages/llmodels/components/model-file-item.tsx diff --git a/src/components/alert-info/block.less b/src/components/alert-info/block.less index 1f6dbaa5..482c7374 100644 --- a/src/components/alert-info/block.less +++ b/src/components/alert-info/block.less @@ -30,7 +30,7 @@ &.success { border: 1px solid var(--color-progress-green); color: var(--color-progress-green); - background: var(--ant-green-1); + background: var(--color-green-fill-light); .content.success { font-weight: var(--font-weight-normal); diff --git a/src/components/page-tools/index.tsx b/src/components/page-tools/index.tsx index a0161cfe..91efd6b5 100644 --- a/src/components/page-tools/index.tsx +++ b/src/components/page-tools/index.tsx @@ -146,7 +146,7 @@ export const FilterBar: React.FC = (props) => { ); - }, [actionItems, actionType]); + }, [actionItems, actionType, rowSelection?.selectedRowKeys]); return ( { - if (!props.parts || !props.parts.length) { - return null; - } - const { parts } = props; - return ( - } - > - - - - {parts.length} parts - - - - ); -}; - const HFModelFile: React.FC = forwardRef((props, ref) => { const { collapsed, modelSource, isDownload } = props; const intl = useIntl(); @@ -332,28 +307,6 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { setDataSource({ ...dataSource, fileList: list }); }; - const getModelQuantizationType = useCallback((item: any) => { - let path = item.path; - if (item?.parts?.length) { - path = `${item.path}.gguf`; - } - const quanType = getFileType(path); - if (quanType) { - return ( - - {_.toUpper(quanType)} - - ); - } - return null; - }, []); - const handleOnEnter = (e: any, item: any) => { e.stopPropagation(); if (e.key === 'Enter') { @@ -418,43 +371,20 @@ const HFModelFile: React.FC = forwardRef((props, ref) => { >
{dataSource.fileList.length ? ( - + {_.map(dataSource.fileList, (item: any) => { return ( - -
handleSelectModelFile(item)} - onKeyDown={(e) => handleOnEnter(e, item)} - > -
{item.path}
-
- - - {convertFileSize(item.size)} - - {getModelQuantizationType(item)} - - - -
-
- + ); })} - + ) : ( !dataSource.loading && !dataSource.fileList.length && ( diff --git a/src/pages/llmodels/components/model-file-item.tsx b/src/pages/llmodels/components/model-file-item.tsx new file mode 100644 index 00000000..dac8094e --- /dev/null +++ b/src/pages/llmodels/components/model-file-item.tsx @@ -0,0 +1,114 @@ +import { convertFileSize } from '@/utils'; +import { InfoCircleOutlined } from '@ant-design/icons'; +import { Tag, Tooltip } from 'antd'; +import classNames from 'classnames'; +import _ from 'lodash'; +import React from 'react'; +import 'simplebar-react/dist/simplebar.min.css'; +import { getFileType } from '../config/file-type'; +import '../style/hf-model-file.less'; +import FileParts from './file-parts'; +import IncompatiableInfo from './incompatiable-info'; + +interface ModelFileItemProps { + data: Record; + isEvaluating: boolean; + active: boolean; + handleSelectModelFile: (item: any) => void; + handleOnEnter: (e: any, item: any) => void; +} + +const FilePartsTag = (props: { parts: any[] }) => { + if (!props.parts || !props.parts.length) { + return null; + } + const { parts } = props; + return ( + } + > + + + + {parts.length} parts + + + + ); +}; + +const ModelFileItem: React.FC = (props) => { + const { + data: item, + isEvaluating, + active, + handleSelectModelFile, + handleOnEnter + } = props; + + const getModelQuantizationType = (item: any) => { + let path = item.path; + if (item?.parts?.length) { + path = `${item.path}.gguf`; + } + const quanType = getFileType(path); + if (quanType) { + return ( + + {_.toUpper(quanType)} + + ); + } + return null; + }; + + return ( +
handleSelectModelFile(item)} + onKeyDown={(e) => handleOnEnter(e, item)} + > +
{item.path}
+
+ + + {convertFileSize(item.size)} + + {getModelQuantizationType(item)} + + + +
+
+ ); +}; + +export default ModelFileItem; diff --git a/src/pages/llmodels/components/search-input.tsx b/src/pages/llmodels/components/search-input.tsx index df8a8667..165155c2 100644 --- a/src/pages/llmodels/components/search-input.tsx +++ b/src/pages/llmodels/components/search-input.tsx @@ -14,9 +14,10 @@ const SearchInputWrapper = styled.div` const Holder = styled.div` pointer-events: none; position: absolute; - top: 12px; + top: 13px; left: 34px; color: var(--ant-color-text-quaternary); + font-size: var(--font-size-small); z-index: 10; kbd { border: 1px solid var(--ant-color-border); diff --git a/src/pages/llmodels/components/search-model.tsx b/src/pages/llmodels/components/search-model.tsx index df1b02a0..f9ed1ad7 100644 --- a/src/pages/llmodels/components/search-model.tsx +++ b/src/pages/llmodels/components/search-model.tsx @@ -24,7 +24,7 @@ import { backendOptionsMap, modelSourceMap } from '../config'; -import { identifyModelTask } from '../config/audio-catalog'; +import { handleRecognizeAudioModel } from '../config/audio-catalog'; import SearchStyle from '../style/search-result.less'; import SearchInput from './search-input'; import SearchResult from './search-result'; @@ -206,9 +206,9 @@ const SearchModel: React.FC = (props) => { } try { const repoList = list.map((item) => { - const isAuido = identifyModelTask(modelSource, item.name); + const res = handleRecognizeAudioModel(item, modelSource); return { - ...(isAuido ? { backend: backendOptionsMap.voxBox } : {}), + ...(res.isAudio ? { backend: backendOptionsMap.voxBox } : {}), source: modelSource, ...(modelSource === modelSourceMap.huggingface_value ? { diff --git a/src/pages/llmodels/config/audio-catalog.ts b/src/pages/llmodels/config/audio-catalog.ts index 6c3f57a3..b3ba38e1 100644 --- a/src/pages/llmodels/config/audio-catalog.ts +++ b/src/pages/llmodels/config/audio-catalog.ts @@ -1,4 +1,9 @@ -import { modelSourceMap, modelTaskMap } from './index'; +import { + HuggingFaceTaskMap, + ModelscopeTaskMap, + modelSourceMap, + modelTaskMap +} from './index'; export const HuggingFaceModels = [ { @@ -208,3 +213,32 @@ export const identifyModelTask = (source: string, modelName: string) => { } return ''; }; + +export const handleRecognizeAudioModel = (selectModel: any, source: string) => { + const modelTaskType = identifyModelTask(source, selectModel.name); + let isAudio = modelTaskType === modelTaskMap.audio; + + // Check if the model is audio type, if not, check if the task is audio + if (!isAudio) { + const modelTask = + HuggingFaceTaskMap.audio.includes(selectModel.task) || + ModelscopeTaskMap.audio.includes(selectModel.task) + ? modelTaskMap.audio + : ''; + + isAudio = modelTask === modelTaskMap.audio; + } + + const modelTaskData = { + value: selectModel.task, + type: isAudio ? modelTaskMap.audio : '', + isAudio: isAudio, + text2speech: + HuggingFaceTaskMap[modelTaskMap.textToSpeech] === selectModel.task || + ModelscopeTaskMap[modelTaskMap.textToSpeech] === selectModel.task, + speech2text: + HuggingFaceTaskMap[modelTaskMap.speechToText] === selectModel.task || + ModelscopeTaskMap[modelTaskMap.speechToText] === selectModel.task + }; + return modelTaskData; +}; diff --git a/src/pages/llmodels/hooks/index.ts b/src/pages/llmodels/hooks/index.ts index cdff5a33..816535d9 100644 --- a/src/pages/llmodels/hooks/index.ts +++ b/src/pages/llmodels/hooks/index.ts @@ -8,15 +8,13 @@ import _ from 'lodash'; import { useEffect, useRef, useState } from 'react'; import { evaluationsModelSpec, queryGPUList } from '../apis'; import { - HuggingFaceTaskMap, - ModelscopeTaskMap, backendOptionsMap, getSourceRepoConfigValue, modelSourceMap, modelTaskMap, setSourceRepoConfigValue } from '../config'; -import { identifyModelTask } from '../config/audio-catalog'; +import { handleRecognizeAudioModel } from '../config/audio-catalog'; import { EvaluateResult, FormData, @@ -310,10 +308,12 @@ export const useCheckCompatibility = () => { const vram = convertFileSize(resource_claim.vram, 2); msgData = { title: intl.formatMessage({ id: 'models.form.check.passed' }), - message: intl.formatMessage( - { id: 'models.form.check.claims' }, - { ram, vram } - ) + message: ram + ? intl.formatMessage( + { id: 'models.form.check.claims' }, + { ram, vram } + ) + : intl.formatMessage({ id: 'models.form.check.claims2' }, { vram }) }; } @@ -522,28 +522,6 @@ export const useCheckCompatibility = () => { }; export const useSelectModel = () => { - const handleRecognizeAudioModel = (selectModel: any, source: string) => { - const modelTaskType = identifyModelTask(source, selectModel.name); - - const modelTask = - HuggingFaceTaskMap.audio.includes(selectModel.task) || - ModelscopeTaskMap.audio.includes(selectModel.task) - ? modelTaskMap.audio - : ''; - - const modelTaskData = { - value: selectModel.task, - type: modelTaskType || modelTask, - text2speech: - HuggingFaceTaskMap[modelTaskMap.textToSpeech] === selectModel.task || - ModelscopeTaskMap[modelTaskMap.textToSpeech] === selectModel.task, - speech2text: - HuggingFaceTaskMap[modelTaskMap.speechToText] === selectModel.task || - ModelscopeTaskMap[modelTaskMap.speechToText] === selectModel.task - }; - return modelTaskData; - }; - // just for setting the model name or repo_id, and the backend, Since the model type is fixed. const onSelectModel = (selectModel: any, source: string) => { let name = _.split(selectModel.name, '/').slice(-1)[0]; @@ -551,6 +529,7 @@ export const useSelectModel = () => { name = _.toLower(name).replace(reg, ''); const modelTaskData = handleRecognizeAudioModel(selectModel, source); + return { repo_id: selectModel.name, name: name, diff --git a/src/pages/playground/components/dynamic-params.tsx b/src/pages/playground/components/dynamic-params.tsx index 0ec8870c..1fc0b2bb 100644 --- a/src/pages/playground/components/dynamic-params.tsx +++ b/src/pages/playground/components/dynamic-params.tsx @@ -151,7 +151,7 @@ const ParamsSettings: React.FC = forwardRef(
{ <> -

+

{parametersTitle || ( {intl.formatMessage({ id: 'playground.parameters' })} diff --git a/src/pages/playground/style/content-item.less b/src/pages/playground/style/content-item.less index af02fd1c..755e1458 100644 --- a/src/pages/playground/style/content-item.less +++ b/src/pages/playground/style/content-item.less @@ -25,6 +25,7 @@ position: relative; padding: 0 4px; border-radius: var(--border-radius-mini); + font-weight: var(--font-weight-medium); } .actions { diff --git a/src/utils/index.ts b/src/utils/index.ts index e138b412..01baac82 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -25,8 +25,8 @@ export const convertFileSize = ( sizeInBytes?: number, prec = 1, allowEmpty = false -): string => { - if (!sizeInBytes) return allowEmpty ? '' : '0'; +): string | number => { + if (!sizeInBytes) return allowEmpty ? '' : 0; const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB']; let size = sizeInBytes;