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/assets/styles/common.less
+4
View File
@@ -136,6 +136,10 @@
position: relative;
}
.font-size-0 {
font-size: 0;
}
.font-size-12 {
font-size: var(--font-size-base);
}
src/components/seal-table/styles/cell.less
+2 -1
View File
@@ -4,13 +4,14 @@
display: flex;
align-items: center;
justify-content: flex-start;
height: 68px;
min-height: 68px;
word-break: break-word;
min-width: 20px;
overflow: hidden;
.cell-content {
max-width: 100%;
line-height: 18px;
}
&-left {
src/global.less
+1
View File
@@ -65,6 +65,7 @@ html {
--color-progress-green: rgba(84, 204, 152, 100%);
--color-border-1: rgba(217, 217, 217, 100%);
--ant-rate-star-color: #fadb14;
--color-fill-mask: rgba(255, 255, 255, 60%);
// ======== input ============
--ant-input-active-shadow: 0 0 0 2px rgba(5, 255, 105, 6%);
--ant-input-active-border-color: #007bff;
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;
}
src/pages/playground/components/thumb-img.tsx
+10 -3
View File
@@ -23,12 +23,19 @@ const ThumbImg: React.FC<{
<div className="thumb-list-wrap">
{_.map(dataList, (item: any) => {
return (
<span key={item.uid} className="thumb-img">
<span
key={item.uid}
className="thumb-img"
style={{
width: item.width,
height: item.height
}}
>
<span className="img">
<Image
src={item.dataUrl}
width={56}
height={56}
width={item.width}
height={item.height}
preview={{
mask: <EyeOutlined />
}}
src/pages/playground/components/upload-img.tsx
+27 -2
View File
@@ -3,11 +3,12 @@ import { useIntl } from '@umijs/max';
import { Button, Tooltip, Upload } from 'antd';
import type { UploadFile } from 'antd/es/upload';
import { RcFile } from 'antd/es/upload';
import { debounce } from 'lodash';
import { debounce, round } from 'lodash';
import React, { useCallback, useRef } from 'react';
interface UploadImgProps {
size?: 'small' | 'middle' | 'large';
height?: number;
handleUpdateImgList: (
imgList: { dataUrl: string; uid: number | string }[]
) => void;
@@ -15,6 +16,7 @@ interface UploadImgProps {
const UploadImg: React.FC<UploadImgProps> = ({
handleUpdateImgList,
height = 100,
size = 'small'
}) => {
const intl = useIntl();
@@ -36,6 +38,22 @@ const UploadImg: React.FC<UploadImgProps> = ({
[handleUpdateImgList, intl]
);
const getImgDimensions = useCallback(
(file: any): Promise<{ ratio: number }> => {
return new Promise((resolve) => {
const img = new Image();
img.onload = () => {
resolve({ ratio: round(img.width / img.height, 2) });
};
img.onerror = () => {
resolve({ ratio: 1 });
};
img.src = URL.createObjectURL(file);
});
},
[]
);
const handleChange = useCallback(
async (info: any) => {
const { fileList } = info;
@@ -44,7 +62,12 @@ const UploadImg: React.FC<UploadImgProps> = ({
fileList.map(async (item: UploadFile) => {
if (item.originFileObj && !item.url) {
const base64 = await getBase64(item.originFileObj as RcFile);
const { ratio } = await getImgDimensions(
item.originFileObj as RcFile
);
item.url = base64;
item.ratio = ratio;
}
return item;
})
@@ -56,7 +79,9 @@ const UploadImg: React.FC<UploadImgProps> = ({
.map((item: UploadFile) => {
return {
dataUrl: item.url as string,
uid: item.uid
uid: item.uid,
height: height,
width: height * item.ratio
};
});