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

feat: add awq,gptq filter

Browse Source
This commit is contained in:
jialin
2025-10-13 14:40:26 +08:00
parent bca1e8140e
commit 42217cf079
3 changed files with 95 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/apis/index.ts
+12 -48
View File
@@ -400,52 +400,16 @@ export async function evaluationsModelSpec(
} }
export async function queryBackendList() { export async function queryBackendList() {
// return request<{ return request<{
// items: { items: {
// backend_name: string; backend_name: string;
// backend_show_name: string; backend_show_name: string;
// from_config: boolean; from_config: boolean;
// default_version: string; default_version: string;
// default_backend_param: string[]; default_backend_param: string[];
// versions: string[]; versions: string[];
// }[]; }[];
// }>(BACKEND_LIST_API, { }>(BACKEND_LIST_API, {
// method: 'GET' method: 'GET'
// }); });
return {
items: [
{
backend_name: 'vllm',
backend_show_name: 'vLLM',
from_config: false,
default_version: '0.10.1.1',
default_backend_param: null,
versions: ['0.10.1.1', '0.10.0', '0.9.2', '0.8.5', '0.8.3']
},
{
backend_name: 'ascend-mindie',
backend_show_name: 'Ascend MindIE',
from_config: false,
default_version: null,
default_backend_param: null,
versions: null
},
{
backend_name: 'custom',
backend_show_name: 'Custom',
from_config: false,
default_version: null,
default_backend_param: null,
versions: null
},
{
backend_name: 'test',
backend_show_name: null,
from_config: true,
default_version: 'v1',
default_backend_param: ['--host=0.0.0.0'],
versions: ['v1']
}
]
};
} }
src/pages/llmodels/components/deploy-modal.tsx
-1
View File
@@ -210,7 +210,6 @@ const AddModal: FC<AddModalProps> = (props) => {
) { ) {
return; return;
} }
console.log('isgguf==================> select 1', item.isGGUF);
console.log('handleOnSelectModel:', item, selectedModel); console.log('handleOnSelectModel:', item, selectedModel);
setIsGGUF(item.isGGUF); setIsGGUF(item.isGGUF);
clearCahceFormValues(); clearCahceFormValues();
src/pages/llmodels/components/search-model.tsx
+83 -55
View File
@@ -11,13 +11,7 @@ import {
queryHuggingfaceModels, queryHuggingfaceModels,
queryModelScopeModels queryModelScopeModels
} from '../apis'; } from '../apis';
import { import { ModelScopeSortType, ModelSortType, modelSourceMap } from '../config';
HuggingFaceTaskMap,
ModelScopeSortType,
ModelSortType,
ModelscopeTaskMap,
modelSourceMap
} from '../config';
import { handleRecognizeAudioModel } from '../config/audio-catalog'; import { handleRecognizeAudioModel } from '../config/audio-catalog';
import { import {
MessageStatus, MessageStatus,
@@ -28,12 +22,10 @@ import SearchStyle from '../style/search-result.less';
import SearchInput from './search-input'; import SearchInput from './search-input';
import SearchResult from './search-result'; import SearchResult from './search-result';
const UL = styled.ul` const filterOptions = [
list-style: decimal; { label: 'AWQ', value: 'awq' },
padding-left: 16px; { label: 'GPTQ', value: 'gptq' }
margin: 0; ];
`;
const PaginationMain = styled(Pagination)` const PaginationMain = styled(Pagination)`
.ant-pagination-slash { .ant-pagination-slash {
margin-inline: 5px; margin-inline: 5px;
@@ -70,15 +62,19 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
} = props; } = props;
const [dataSource, setDataSource] = useState<{ const [dataSource, setDataSource] = useState<{
repoOptions: any[]; dataList: any[];
loading: boolean; loading: boolean;
networkError: boolean; networkError: boolean;
sortType: string; sortType: string;
filters: Record<string, any>;
}>({ }>({
repoOptions: [], dataList: [],
loading: false, loading: false,
networkError: false, networkError: false,
sortType: ModelSortType.trendingScore sortType: ModelSortType.trendingScore,
filters: {
tag: null
}
}); });
const SUPPORTEDSOURCE = [ const SUPPORTEDSOURCE = [
modelSourceMap.huggingface_value, modelSourceMap.huggingface_value,
@@ -92,16 +88,15 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
const axiosTokenRef = useRef<any>(null); const axiosTokenRef = useRef<any>(null);
const checkTokenRef = useRef<any>(null); const checkTokenRef = useRef<any>(null);
const searchInputRef = useRef<any>(''); const searchInputRef = useRef<any>('');
const filterTaskRef = useRef<string>('');
const timer = useRef<any>(null); const timer = useRef<any>(null);
const requestIdRef = useRef<number>(0); const requestIdRef = useRef<number>(0);
const searchRepoRequestIdRef = useRef<number>(0); const searchRepoRequestIdRef = useRef<number>(0);
const [query, setQuery] = useState({ const [paginationInfo, setPaginationInfo] = useState({
page: 1, page: 1,
perPage: 10, perPage: 10,
total: 0 total: 0
}); });
const modelFilesSortOptions = useRef<any[]>([ const modelFilesSortOptions = [
{ {
label: intl.formatMessage({ id: 'models.sort.trending' }), label: intl.formatMessage({ id: 'models.sort.trending' }),
value: ModelSortType.trendingScore value: ModelSortType.trendingScore
@@ -118,7 +113,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
label: intl.formatMessage({ id: 'models.sort.updated' }), label: intl.formatMessage({ id: 'models.sort.updated' }),
value: ModelSortType.lastModified value: ModelSortType.lastModified
} }
]); ];
const updateSearchRepoRequestId = () => { const updateSearchRepoRequestId = () => {
searchRepoRequestIdRef.current += 1; searchRepoRequestIdRef.current += 1;
@@ -152,15 +147,18 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
}; };
// huggeface // huggeface
const getModelsFromHuggingface = async (sort: string) => { const getModelsFromHuggingface = async (query: {
sort: string;
filters?: Record<string, any>;
}) => {
const currentSearchId = setRquestId(); const currentSearchId = setRquestId();
const task: any = searchInputRef.current ? '' : 'text-generation'; const task: any = searchInputRef.current ? '' : 'text-generation';
const params = { const params = {
search: { search: {
query: searchInputRef.current || '', query: searchInputRef.current || '',
sort: sort, sort: query.sort,
tags: [], tags: query.filters?.tag ? [query.filters.tag] : [],
task: HuggingFaceTaskMap[filterTaskRef.current] || task task: task
} }
}; };
const data = await queryHuggingfaceModels(params, { const data = await queryHuggingfaceModels(params, {
@@ -186,18 +184,17 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
sortType: string; sortType: string;
page: number; page: number;
perPage?: number; perPage?: number;
filters?: Record<string, any>;
}) => { }) => {
const currentSearchId = setRquestId(); const currentSearchId = setRquestId();
try { try {
const params = { const params = {
Name: `${searchInputRef.current}`, Name: `${searchInputRef.current}`,
tags: [], tags: queryParams.filters?.tag ? [queryParams.filters.tag] : [],
tasks: filterTaskRef.current
? ([ModelscopeTaskMap[filterTaskRef.current]] as string[])
: [],
SortBy: ModelScopeSortType[queryParams.sortType], SortBy: ModelScopeSortType[queryParams.sortType],
PageNumber: queryParams.page, PageNumber: queryParams.page,
PageSize: queryParams.perPage PageSize: queryParams.perPage,
tasks: []
}; };
const data = await queryModelScopeModels(params, { const data = await queryModelScopeModels(params, {
signal: axiosTokenRef.current.signal signal: axiosTokenRef.current.signal
@@ -221,6 +218,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
task: item.Tasks?.map((sItem: any) => sItem.Name).join(','), task: item.Tasks?.map((sItem: any) => sItem.Name).join(','),
tags: item.Tags, tags: item.Tags,
libraries: item.Libraries, libraries: item.Libraries,
avatar: item.Avatar,
isGGUF: checkIsGGUF({ isGGUF: checkIsGGUF({
tags: item.Tags, tags: item.Tags,
libraries: item.Libraries libraries: item.Libraries
@@ -229,7 +227,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
}; };
}); });
setQuery((prev) => { setPaginationInfo((prev) => {
return { return {
...prev, ...prev,
page: queryParams.page, page: queryParams.page,
@@ -238,7 +236,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
}); });
return list; return list;
} catch (error) { } catch (error) {
setQuery((prev) => { setPaginationInfo((prev) => {
return { return {
...prev, ...prev,
page: queryParams.page page: queryParams.page
@@ -342,8 +340,8 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
}; };
const getCurrentPage = (page: number) => { const getCurrentPage = (page: number) => {
const start = (page - 1) * query.perPage; const start = (page - 1) * paginationInfo.perPage;
const end = start + query.perPage; const end = start + paginationInfo.perPage;
return cacheRepoOptions.current.slice(start, end); return cacheRepoOptions.current.slice(start, end);
}; };
@@ -351,6 +349,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
sortType: string; sortType: string;
page: number; page: number;
perPage: number; perPage: number;
filters: Record<string, any>;
}) => { }) => {
if (!SUPPORTEDSOURCE.includes(modelSource)) { if (!SUPPORTEDSOURCE.includes(modelSource)) {
return; return;
@@ -362,7 +361,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
if (timer.current) { if (timer.current) {
clearTimeout(timer.current); clearTimeout(timer.current);
} }
const sort = params.sortType;
try { try {
setDataSource((pre) => { setDataSource((pre) => {
pre.loading = true; pre.loading = true;
@@ -372,13 +370,16 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
cacheRepoOptions.current = []; cacheRepoOptions.current = [];
let list: any[] = []; let list: any[] = [];
if (modelSource === modelSourceMap.huggingface_value) { if (modelSource === modelSourceMap.huggingface_value) {
const resultList = await getModelsFromHuggingface(sort); const resultList = await getModelsFromHuggingface({
sort: params.sortType,
filters: params.filters
});
cacheRepoOptions.current = resultList; cacheRepoOptions.current = resultList;
// hf has no page and perPage, so we need to slice the resultList // hf has no page and perPage, so we need to slice the resultList
list = getCurrentPage(params.page); list = getCurrentPage(params.page);
setQuery((prev) => { setPaginationInfo((prev) => {
return { return {
...prev, ...prev,
page: params.page, page: params.page,
@@ -392,10 +393,11 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
} }
setDataSource({ setDataSource({
repoOptions: list, dataList: list,
loading: false, loading: false,
networkError: false, networkError: false,
sortType: sort sortType: params.sortType,
filters: params.filters
}); });
handleOnSelectModel(list[0]); handleOnSelectModel(list[0]);
@@ -405,9 +407,10 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
} catch (error: any) { } catch (error: any) {
console.log('error:', error); console.log('error:', error);
setDataSource({ setDataSource({
repoOptions: [], dataList: [],
loading: currentSearchId !== searchRepoRequestIdRef.current, loading: currentSearchId !== searchRepoRequestIdRef.current,
sortType: sort, sortType: params.sortType,
filters: params.filters,
networkError: error?.message === 'Failed to fetch' networkError: error?.message === 'Failed to fetch'
}); });
@@ -428,21 +431,23 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
handleOnSearchRepo({ handleOnSearchRepo({
sortType: dataSource.sortType, sortType: dataSource.sortType,
page: 1, page: 1,
perPage: query.perPage perPage: paginationInfo.perPage,
filters: dataSource.filters
}), }),
100 100
); );
const handleOnOpen = () => { const handleOnOpen = () => {
if ( if (
!dataSource.repoOptions.length && !dataSource.dataList.length &&
!cacheRepoOptions.current.length && !cacheRepoOptions.current.length &&
SUPPORTEDSOURCE.includes(modelSource) SUPPORTEDSOURCE.includes(modelSource)
) { ) {
handleOnSearchRepo({ handleOnSearchRepo({
sortType: dataSource.sortType, sortType: dataSource.sortType,
page: 1, page: 1,
perPage: query.perPage perPage: paginationInfo.perPage,
filters: dataSource.filters
}); });
} }
}; };
@@ -451,14 +456,27 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
handleOnSearchRepo({ handleOnSearchRepo({
sortType: value, sortType: value,
page: 1, page: 1,
perPage: query.perPage perPage: paginationInfo.perPage,
filters: dataSource.filters
});
};
const handleFilterChange = (value: string) => {
handleOnSearchRepo({
sortType: dataSource.sortType,
page: 1,
perPage: paginationInfo.perPage,
filters: {
...dataSource.filters,
tag: value
}
}); });
}; };
const handleOnPageChange = (page: number) => { const handleOnPageChange = (page: number) => {
if (modelSource === modelSourceMap.huggingface_value) { if (modelSource === modelSourceMap.huggingface_value) {
const currentList = getCurrentPage(page); const currentList = getCurrentPage(page);
setQuery((prev) => { setPaginationInfo((prev) => {
return { return {
...prev, ...prev,
page: page page: page
@@ -467,13 +485,13 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
setDataSource((pre) => { setDataSource((pre) => {
return { return {
...pre, ...pre,
repoOptions: currentList dataList: currentList
}; };
}); });
handleOnSelectModel(currentList[0]); handleOnSelectModel(currentList[0]);
handleEvaluate(currentList); handleEvaluate(currentList);
} else if (modelSource === modelSourceMap.modelscope_value) { } else if (modelSource === modelSourceMap.modelscope_value) {
setQuery((prev) => { setPaginationInfo((prev) => {
return { return {
...prev, ...prev,
page: page page: page
@@ -482,7 +500,8 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
handleOnSearchRepo({ handleOnSearchRepo({
sortType: dataSource.sortType, sortType: dataSource.sortType,
page: page, page: page,
perPage: query.perPage perPage: paginationInfo.perPage,
filters: dataSource.filters
}); });
} }
}; };
@@ -509,7 +528,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
</span> </span>
</div> </div>
<div className={SearchStyle.filter}> <div className={SearchStyle.filter}>
<span> <span className="flex-center gap-8">
<BaseSelect <BaseSelect
value={dataSource.sortType} value={dataSource.sortType}
onChange={handleSortChange} onChange={handleSortChange}
@@ -520,19 +539,28 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
</span> </span>
); );
}} }}
options={modelFilesSortOptions.current} options={modelFilesSortOptions}
size="middle" size="middle"
style={{ width: '150px' }} style={{ width: '150px' }}
></BaseSelect> ></BaseSelect>
<BaseSelect
allowClear
value={dataSource.filters.tag}
onChange={handleFilterChange}
options={filterOptions}
size="middle"
placeholder="quantization type"
style={{ width: 150 }}
></BaseSelect>
</span> </span>
<PaginationMain <PaginationMain
simple={{ readOnly: true }} simple={{ readOnly: true }}
total={query.total} total={paginationInfo.total}
current={query.page} current={paginationInfo.page}
pageSize={query.perPage} pageSize={paginationInfo.perPage}
onChange={handleOnPageChange} onChange={handleOnPageChange}
showSizeChanger={false} showSizeChanger={false}
hideOnSinglePage={query.total <= query.perPage} hideOnSinglePage={paginationInfo.total <= paginationInfo.perPage}
></PaginationMain> ></PaginationMain>
</div> </div>
</> </>
@@ -560,7 +588,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
<SearchResult <SearchResult
loading={dataSource.loading} loading={dataSource.loading}
resultList={dataSource.repoOptions} resultList={dataSource.dataList}
networkError={dataSource.networkError} networkError={dataSource.networkError}
current={current} current={current}
source={modelSource} source={modelSource}