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

style: search models style

Browse Source
This commit is contained in:
jialin
2024-08-23 17:17:02 +08:00
parent 76444f28cb
commit a60be9c88f
24 changed files with 571 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/apis/index.ts
+4 -1
View File
@@ -148,7 +148,10 @@ export async function queryHuggingfaceModels(
additionalFields: ['sha'],
fetch(url: string, config: any) {
try {
return fetch(`${url}&sort=${params.search.sort}`, {
const newUrl = params.search.sort
? `${url}&sort=${params.search.sort}`
: url;
return fetch(`${newUrl}`, {
...config,
signal: options.signal
});
src/pages/llmodels/components/file-parts.tsx
+26
View File
@@ -0,0 +1,26 @@
import { convertFileSize } from '@/utils';
import React from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
const FileParts: React.FC<{
fileList: any[];
}> = ({ fileList }) => {
return (
<SimpleBar style={{ maxHeight: 200 }}>
{fileList.map((file, index) => {
return (
<div key={index} className="flex-between m-b-5">
<span>
{' '}
Part {file.part} of {file.total}
</span>
<span>{convertFileSize(file.size)}</span>
</div>
);
})}
</SimpleBar>
);
};
export default FileParts;
src/pages/llmodels/components/hf-model-file.tsx
+100 -13
View File
@@ -1,14 +1,16 @@
import { convertFileSize } from '@/utils';
import { InfoCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Col, Empty, Row, Select, Space, Spin, Tag } from 'antd';
import { Col, Empty, Row, Select, Spin, Tag, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
import { queryHuggingfaceModelFiles } from '../apis';
import FileType from '../config/file-type';
import '../style/hf-model-file.less';
import FileParts from './file-parts';
import TitleWrapper from './title-wrapper';
interface HFModelFileProps {
@@ -18,6 +20,8 @@ interface HFModelFileProps {
onSelectFile?: (file: any) => void;
}
const pattern = /^(.*)-(\d+)-of-(\d+)\.gguf$/;
const HFModelFile: React.FC<HFModelFileProps> = (props) => {
const { collapsed, loadingModel } = props;
const intl = useIntl();
@@ -44,6 +48,50 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
setCurrent(item.path);
};
const parseFilename = (filename: string) => {
const match = filename.match(pattern);
if (match) {
return {
filename: match[1],
part: parseInt(match[2], 10),
total: parseInt(match[3], 10)
};
} else {
return null;
}
};
const generateGroupByFilename = useCallback((list: any[]) => {
const data = _.find(list, (item: any) => {
const parsed = parseFilename(item.path);
return !!parsed;
});
// general file
if (!data) {
return list;
}
const newList = _.map(list, (item: any) => {
const parsed = parseFilename(item.path);
return {
...item,
...parsed
};
});
const group = _.groupBy(newList, 'filename');
return _.map(group, (value: any[], key: string) => {
return {
path: key,
size: _.sumBy(value, 'size'),
parts: value
};
});
}, []);
const handleFetchModelFiles = async () => {
if (!props.repo) {
setDataSource({ fileList: [], loading: false });
@@ -68,11 +116,15 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
const list = _.filter(fileList, (file: any) => {
return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
});
const sortList = _.sortBy(list, (item: any) => {
const newList = generateGroupByFilename(list);
console.log('newList==========', newList);
const sortList = _.sortBy(newList, (item: any) => {
return sortType === 'size' ? item.size : item.path;
});
setDataSource({ fileList: sortList, loading: false });
handleSelectModelFile(list[0]);
handleSelectModelFile(sortList[0]);
} catch (error) {
setDataSource({ fileList: [], loading: false });
handleSelectModelFile({});
@@ -87,22 +139,33 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
setDataSource({ ...dataSource, fileList: list });
};
const getModelQuantizationType = (item: any) => {
const name = _.split(item.path, '.').slice(0, -1).join('.');
const getModelQuantizationType = useCallback((item: any) => {
let itemPath = item.path;
let path = _.split(itemPath, '/').pop();
if (!_.endsWith(path, '.gguf') && !_.includes(path, '.gguf')) {
path = `${path}.gguf`;
}
const name = _.split(path, '.').slice(0, -1).join('.');
let quanType = _.toUpper(name.split('-').slice(-1)[0]);
if (quanType.indexOf('.') > -1) {
quanType = _.split(quanType, '.').pop();
}
console.log('quanType', quanType, FileType[quanType]);
if (FileType[quanType] !== undefined) {
return (
<Tag className="tag-item" color="cyan">
<Tag
className="tag-item"
color="cyan"
style={{
marginRight: 0
}}
>
{quanType}
</Tag>
);
}
return null;
};
}, []);
const handleOnEnter = (e: any, item: any) => {
e.stopPropagation();
@@ -143,7 +206,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
></Select>
</TitleWrapper>
<SimpleBar
style={{ maxHeight: collapsed ? 'max-content' : 'calc(100vh - 330px)' }}
style={{ maxHeight: collapsed ? 'max-content' : 'calc(100vh - 300px)' }}
>
<div style={{ padding: '16px 24px' }}>
<Spin
@@ -164,7 +227,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
onKeyDown={(e) => handleOnEnter(e, item)}
>
<div className="title">{item.path}</div>
<Space className="tags">
<div className="tags">
<Tag
className="tag-item"
color="green"
@@ -177,8 +240,32 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
</span>
</Tag>
{getModelQuantizationType(item)}
</Space>
<div className="btn"></div>
{item.parts && item.parts.length > 1 && (
<Tooltip
color="var(--color-white-1)"
overlayInnerStyle={{
width: 150,
color: 'var(--ant-color-text-secondary)'
}}
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>
</div>
</Col>
);
src/pages/llmodels/components/hf-model-item.tsx
+24 -10
View File
@@ -2,9 +2,11 @@ import { formatNumber } from '@/utils';
import {
DownloadOutlined,
FolderOutlined,
HeartOutlined
HeartOutlined,
WarningOutlined
} from '@ant-design/icons';
import { Space, Tag } from 'antd';
import { useIntl } from '@umijs/max';
import { Tag, Tooltip } from 'antd';
import classNames from 'classnames';
import dayjs from 'dayjs';
import _ from 'lodash';
@@ -21,8 +23,18 @@ interface HFModelItemProps {
source?: string;
tags?: string[];
}
const warningTask = ['image', 'audio', 'video'];
const HFModelItem: React.FC<HFModelItemProps> = (props) => {
const intl = useIntl();
const isExcludeTask = () => {
if (!props.task) {
return false;
}
return _.some(warningTask, (item: string) => {
return props.task?.toLowerCase().includes(item);
});
};
return (
<div
tabIndex={0}
@@ -36,10 +48,17 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
style={{ color: 'var(--ant-color-text-tertiary)' }}
/>
{props.title}
{isExcludeTask() && (
<Tooltip
title={intl.formatMessage({ id: 'models.search.unsupport' })}
>
<WarningOutlined className="m-l-2" style={{ color: 'orange' }} />
</Tooltip>
)}
</div>
<div className="info">
{props.source === modelSourceMap.huggingface_value ? (
<Space size={16}>
<div className="info-item">
{/* {props.task && (
<Tag
className="tag-item"
@@ -64,10 +83,10 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
<DownloadOutlined className="m-r-5" />
{formatNumber(props.downloads)}
</span>
</Space>
</div>
) : (
<div className="flex-between">
<Space size={10}>
<div className="tags">
{_.map(props.tags, (tag: string, index: string) => {
return (
<Tag
@@ -83,11 +102,6 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
</Tag>
);
})}
</Space>
<div className="btn">
{/* <Button size="middle">
{props.active ? 'Selected' : 'Select'}
</Button> */}
</div>
</div>
)}
src/pages/llmodels/components/model-card.tsx
+15 -16
View File
@@ -98,24 +98,23 @@ const ModelCard: React.FC<{
return (
<>
<TitleWrapper>
<span>{intl.formatMessage({ id: 'models.data.card' })}</span>
<div className="title">{modelData?.id} </div>
{modelData?.id && (
<Tooltip title={intl.formatMessage({ id: 'models.viewin.hf' })}>
<Button
size="small"
type="link"
target="_blank"
href={`https://huggingface.co/${modelData.id}`}
>
<IconFont type="icon-external-link"></IconFont>
</Button>
</Tooltip>
)}
</TitleWrapper>
<div className="wrapper">
<div className="card-wrapper">
{modelData ? (
<div className="model-card-wrap">
<div className="title">
{modelData.id}{' '}
<Tooltip title={intl.formatMessage({ id: 'models.viewin.hf' })}>
<Button
size="small"
type="link"
target="_blank"
href={`https://huggingface.co/${modelData.id}`}
>
<IconFont type="icon-external-link"></IconFont>
</Button>
</Tooltip>
</div>
<div className="flex-between flex-center">
{modelData.config?.model_type && (
<Tag className="tag-item" color="gold">
@@ -132,7 +131,6 @@ const ModelCard: React.FC<{
<div
style={{
borderRadius: 4,
backgroundColor: '#282c34',
marginTop: 16,
overflow: 'hidden'
}}
@@ -154,6 +152,7 @@ const ModelCard: React.FC<{
code={readmeText}
lang="markdown"
copyable={false}
theme="light"
></HighlightCode>
</SimpleBar>
</div>
src/pages/llmodels/components/search-input.tsx
+1 -15
View File
@@ -1,9 +1,8 @@
import IconFont from '@/components/icon-font';
import hotkeys from '@/config/hotkeys';
import { platformCall } from '@/utils';
import { SearchOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Input, Tag } from 'antd';
import { Input } from 'antd';
import React, { useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@@ -31,19 +30,6 @@ const SearchInput: React.FC<{
placeholder={intl.formatMessage({
id: 'model.deploy.search.placeholder'
})}
suffix={
!isFocus && (
<Tag style={{ marginRight: 0 }}>
{platform.isMac ? (
<>
<IconFont type="icon-command"></IconFont> + K
</>
) : (
<>CTRL + K</>
)}
</Tag>
)
}
prefix={
<>
<SearchOutlined
src/pages/llmodels/components/search-model.tsx
+11 -6
View File
@@ -65,6 +65,7 @@ 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) => {
pre.loading = true;
@@ -72,17 +73,19 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
});
setLoadingModel?.(true);
cacheRepoOptions.current = [];
const task: any = searchInputRef.current ? '' : 'text-generation';
const params = {
search: {
query: searchInputRef.current || '',
sort: sortType || dataSource.sortType,
tags: ['gguf']
sort: sort,
tags: ['gguf'],
task
}
};
const models = await queryHuggingfaceModels(params, {
signal: axiosTokenRef.current.signal
});
const list = _.map(models || [], (item: any) => {
let list = _.map(models || [], (item: any) => {
return {
...item,
value: item.name,
@@ -95,7 +98,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
repoOptions: list,
loading: false,
networkError: false,
sortType: sortType || dataSource.sortType
sortType: sort
});
setLoadingModel?.(false);
handleOnSelectModel(list[0]);
@@ -103,7 +106,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
setDataSource({
repoOptions: [],
loading: false,
sortType: sortType || dataSource.sortType,
sortType: sort,
networkError: error?.message === 'Failed to fetch'
});
setLoadingModel?.(false);
@@ -188,8 +191,9 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
};
const handleSortChange = (value: string) => {
handleOnSearchRepo(value);
handleOnSearchRepo(value || '');
};
const renderHFSearch = () => {
return (
<>
@@ -204,6 +208,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
</span>
</span>
<Select
allowClear
value={dataSource.sortType}
onChange={handleSortChange}
labelRender={({ label }) => {
src/pages/llmodels/components/table-list.tsx
+10 -30
View File
@@ -103,7 +103,10 @@ const Models: React.FC<ModelsProps> = ({
source: modelSourceMap.huggingface_value
});
},
{ preventDefault: true }
{
preventDefault: true,
enabled: !openAddModal && !openDeployModal.show && !openLogModal
}
);
useHotkeys(
@@ -115,25 +118,15 @@ const Models: React.FC<ModelsProps> = ({
source: modelSourceMap.ollama_library_value
});
},
{ preventDefault: true }
{
preventDefault: true,
enabled: !openAddModal && !openDeployModal.show && !openLogModal
}
);
const sourceOptions = [
{
label: (
<span className="flex-center flex-between">
<span>Hugging Face</span>
<Tag style={{ marginRight: 0 }} className="m-l-10">
{platform.isMac ? (
<>
<IconFont type="icon-command"></IconFont> + 1
</>
) : (
<>CTRL + 1</>
)}
</Tag>
</span>
),
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface',
icon: <IconFont type="icon-huggingface"></IconFont>,
@@ -146,20 +139,7 @@ const Models: React.FC<ModelsProps> = ({
}
},
{
label: (
<span className="flex-center flex-between">
<span>Ollama Library</span>
<Tag style={{ marginRight: 0 }} className="m-l-10">
{platform.isMac ? (
<>
<IconFont type="icon-command"></IconFont> + 2
</>
) : (
<>CTRL + 2</>
)}
</Tag>
</span>
),
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library',
icon: <IconFont type="icon-ollama"></IconFont>,
src/pages/llmodels/style/hf-model-file.less
+10 -2
View File
@@ -3,7 +3,7 @@
.hf-model-file {
display: flex;
flex-direction: column;
padding: 10px;
padding: 12px 14px;
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
cursor: pointer;
@@ -17,7 +17,15 @@
}
.title {
margin-bottom: 10px;
margin-bottom: 12px;
}
.tags {
display: flex;
gap: 8px;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.tag-item {
src/pages/llmodels/style/hf-model-item.less
+13 -1
View File
@@ -5,7 +5,7 @@
justify-content: space-between;
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
padding: 12px;
padding: 12px 14px;
cursor: pointer;
&:hover {
@@ -24,6 +24,12 @@
.info {
color: var(--ant-color-text-tertiary);
.info-item {
display: flex;
align-items: center;
gap: 16px;
}
.tag-item {
display: flex;
align-items: center;
@@ -37,4 +43,10 @@
// color: var(--ant-color-text-secondary);
}
}
.tags {
display: flex;
align-items: center;
flex-wrap: wrap;
}
}
src/pages/llmodels/style/model-card.less
+8 -9
View File
@@ -1,13 +1,10 @@
.model-card-wrap {
display: flex;
flex-direction: column;
min-height: 72px;
padding: 10px;
border: 1px solid var(--ant-color-border);
border-radius: var(--border-radius-base);
.title {
margin-bottom: 10px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -30,15 +27,17 @@
.mkd-title {
cursor: pointer;
color: rgba(255, 255, 255, 80%);
background-color: var(--color-fill-sider);
border-bottom: 1px solid rgba(255, 255, 255, 10%);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.simplebar-scrollbar::before {
background: var(--color-scroll-bg);
height: 36px;
}
}
.card-wrapper {
padding: 16px 24px;
padding-top: 0;
}
src/pages/llmodels/style/title-wrapper.less
+1 -1
View File
@@ -9,7 +9,7 @@
align-items: center;
font-size: 14px;
padding: @padding;
padding-top: 0;
padding-top: 10px;
margin-bottom: 0;
background-color: var(--color-white-1);
}
src/pages/resources/components/add-worker.tsx
+10 -2
View File
@@ -31,9 +31,15 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
<div>
<h3>1. {intl.formatMessage({ id: 'resources.worker.add.step1' })}</h3>
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
<HighlightCode code={addWorkerGuide.mac.getToken}></HighlightCode>
<HighlightCode
code={addWorkerGuide.mac.getToken}
theme="dark"
></HighlightCode>
<h4>Windows </h4>
<HighlightCode code={addWorkerGuide.win.getToken}></HighlightCode>
<HighlightCode
code={addWorkerGuide.win.getToken}
theme="dark"
></HighlightCode>
<h3>
2. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
<span
@@ -49,9 +55,11 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
<h4>{intl.formatMessage({ id: 'resources.worker.linuxormaxos' })}</h4>
<HighlightCode
code={addWorkerGuide.mac.registerWorker(origin)}
theme="dark"
></HighlightCode>
<h4>Windows </h4>
<HighlightCode
theme="dark"
code={addWorkerGuide.win.registerWorker(origin)}
></HighlightCode>
<h3>3. {intl.formatMessage({ id: 'resources.worker.add.step3' })}</h3>