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

fix: no request, search model

Browse Source
This commit is contained in:
jialin
2024-10-15 17:52:02 +08:00
parent 8fbdb884c7
commit a47f7cc0ce
10 changed files with 150 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/deploy-modal.tsx
+7 -3
View File
@@ -3,6 +3,7 @@ import { PageActionType } from '@/config/types';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
import { debounce } from 'lodash';
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { modelSourceMap } from '../config';
import { FormData, ListItem } from '../config/types';
@@ -53,6 +54,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
}, []);
const handleOnSelectModel = (item: any) => {
handleSelectModelFile({ fakeName: '' });
setSelectedModel(item);
};
@@ -60,12 +62,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
form.current?.submit?.();
};
const debounceFetchModelFiles = debounce(() => {
modelFileRef.current?.fetchModelFiles?.();
}, 300);
const handleSetIsGGUF = (flag: boolean) => {
setIsGGUF(flag);
if (flag) {
setTimeout(() => {
modelFileRef.current?.fetchModelFiles?.();
}, 50);
debounceFetchModelFiles();
}
};
src/pages/llmodels/components/hf-model-file.tsx
+72 -66
View File
@@ -261,7 +261,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
}, []);
return (
<div>
<div className="files-wrap">
<TitleWrapper>
<span className="title">
{intl.formatMessage({ id: 'models.available.files' })} (
@@ -282,83 +282,89 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
style={{ width: '120px' }}
></Select>
</TitleWrapper>
{dataSource.loading && (
<div className="spin-wrapper">
<Spin
spinning={dataSource.loading}
style={{ height: '100%', width: '100%' }}
></Spin>
</div>
)}
<SimpleBar
style={{
height: collapsed ? 'max-content' : 'calc(100vh - 300px)'
}}
>
<div style={{ padding: '16px 24px' }}>
<Spin spinning={dataSource.loading} style={{ minHeight: 100 }}>
{dataSource.fileList.length ? (
<Row gutter={[16, 24]}>
{_.map(dataSource.fileList, (item: any) => {
return (
<Col span={24} key={item.path}>
<div
className={classNames('hf-model-file', {
active: item.path === current
})}
tabIndex={0}
onClick={() => handleSelectModelFile(item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<div className="title">{item.path}</div>
<div className="tags">
<Tag
className="tag-item"
color="green"
style={{
marginRight: 0
{dataSource.fileList.length ? (
<Row gutter={[16, 24]}>
{_.map(dataSource.fileList, (item: any) => {
return (
<Col span={24} key={item.path}>
<div
className={classNames('hf-model-file', {
active: item.path === current
})}
tabIndex={0}
onClick={() => handleSelectModelFile(item)}
onKeyDown={(e) => handleOnEnter(e, item)}
>
<div className="title">{item.path}</div>
<div className="tags">
<Tag
className="tag-item"
color="green"
style={{
marginRight: 0
}}
>
<span style={{ opacity: 0.65 }}>
{convertFileSize(item.size)}
</span>
</Tag>
{getModelQuantizationType(item)}
{item.parts && item.parts.length > 1 && (
<Tooltip
overlayInnerStyle={{
width: 180,
padding: 0
}}
title={
<FileParts fileList={item.parts}></FileParts>
}
>
<span style={{ opacity: 0.65 }}>
{convertFileSize(item.size)}
</span>
</Tag>
{getModelQuantizationType(item)}
{item.parts && item.parts.length > 1 && (
<Tooltip
overlayInnerStyle={{
width: 180,
padding: 0
<Tag
className="tag-item"
color="purple"
style={{
marginRight: 0
}}
title={
<FileParts fileList={item.parts}></FileParts>
}
>
<Tag
className="tag-item"
color="purple"
style={{
marginRight: 0
}}
>
<span style={{ opacity: 1 }}>
<InfoCircleOutlined className="m-r-5" />
{item.parts.length} parts
</span>
</Tag>
</Tooltip>
)}
</div>
<span style={{ opacity: 1 }}>
<InfoCircleOutlined className="m-r-5" />
{item.parts.length} parts
</span>
</Tag>
</Tooltip>
)}
</div>
</Col>
);
</div>
</Col>
);
})}
</Row>
) : (
!dataSource.loading &&
!dataSource.fileList.length && (
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={intl.formatMessage({
id: 'models.search.nofiles'
})}
</Row>
) : (
!dataSource.loading &&
!dataSource.fileList.length && (
<Empty
imageStyle={{ height: 'auto', marginTop: '20px' }}
image={Empty.PRESENTED_IMAGE_SIMPLE}
description={intl.formatMessage({
id: 'models.search.nofiles'
})}
/>
)
)}
</Spin>
/>
)
)}
</div>
</SimpleBar>
</div>
src/pages/llmodels/components/search-model.tsx
-2
View File
@@ -136,7 +136,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
}
axiosTokenRef.current?.abort?.();
axiosTokenRef.current = new AbortController();
if (dataSource.loading) return;
const sort = sortType ?? dataSource.sortType;
try {
setDataSource((pre) => {
@@ -208,7 +207,6 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
};
const handleFilterGGUFChange = (e: any) => {
console.log('filterggufChange:', e.target.checked);
filterGGUFRef.current = e.target.checked;
handleOnSearchRepo();
};
src/pages/llmodels/components/table-list.tsx
+10 -6
View File
@@ -522,20 +522,24 @@ const Models: React.FC<ModelsProps> = ({
return (
<span
className="flex-center flex-wrap"
style={{ maxWidth: '100%' }}
style={{
maxWidth: '100%',
lineHeight:
record.reranker || record.embedding_only
? '24px'
: 'inherit'
}}
>
<AutoTooltip ghost>
<span className="m-r-5">{text}</span>
</AutoTooltip>
{record.reranker && (
<span>
<Tag style={{ margin: 0 }} color="geekblue">
Reranker
</Tag>
<span className="font-size-0">
<Tag style={{ margin: 0 }}>Reranker</Tag>
</span>
)}
{record.embedding_only && !record.reranker && (
<span>
<span className="font-size-0">
<Tag style={{ margin: 0 }} color="geekblue">
Embedding Only
</Tag>
src/pages/llmodels/style/hf-model-file.less
+17
View File
@@ -45,6 +45,23 @@
}
}
.files-wrap {
position: relative;
.spin-wrapper {
position: absolute;
left: 0;
right: 0;
height: 100%;
z-index: 100;
bottom: 0;
top: 0;
padding-top: 150px;
text-align: center;
background-color: var(--color-fill-mask);
}
}
.wrapper {
padding: 16px @padding;
}