jialin
2 years ago
parent
a04773d487
commit
ab8483fc42
|
After Width: | Height: | Size: 274 KiB |
|
After Width: | Height: | Size: 31 KiB |
@ -1,7 +1,7 @@
|
||||
import { createFromIconfontCN } from '@ant-design/icons';
|
||||
|
||||
const IconFont = createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/c/font_4613488_cpb5yo1pk77.js'
|
||||
scriptUrl: '//at.alicdn.com/t/c/font_4613488_rsdrbzw4fyd.js'
|
||||
});
|
||||
|
||||
export default IconFont;
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
.radio-button-wrap {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: var(--font-size-base);
|
||||
padding: 2px;
|
||||
border-radius: var(--border-radius-base);
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: var(--ant-color-fill-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--ant-color-fill-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
import { Space } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import './index.less';
|
||||
|
||||
interface RadioButtonsProps {
|
||||
options: { value: any; label: React.ReactNode }[];
|
||||
value: string;
|
||||
gap?: number;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
const RadioButtons: React.FC<RadioButtonsProps> = (props) => {
|
||||
const { options, value, onChange, gap = 12 } = props;
|
||||
return (
|
||||
<Space className="radio-button-wrap" size={gap}>
|
||||
{options.map((option) => (
|
||||
<span
|
||||
key={option.value}
|
||||
onClick={() => onChange(option.value)}
|
||||
className={classNames('item', { active: value === option.value })}
|
||||
>
|
||||
{option.label}
|
||||
</span>
|
||||
))}
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default RadioButtons;
|
||||
@ -0,0 +1,75 @@
|
||||
import { formatNumber } from '@/utils';
|
||||
import {
|
||||
DownloadOutlined,
|
||||
FolderOutlined,
|
||||
HeartOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Space, Tag } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash';
|
||||
import { modelSourceMap } from '../config';
|
||||
import '../style/hf-model-item.less';
|
||||
|
||||
interface HFModelItemProps {
|
||||
title: string;
|
||||
downloads: number;
|
||||
likes: number;
|
||||
lastModified: string;
|
||||
active: boolean;
|
||||
source?: string;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
const HFModelItem: React.FC<HFModelItemProps> = (props) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('hf-model-item', {
|
||||
active: props.active
|
||||
})}
|
||||
>
|
||||
<div className="title">
|
||||
<FolderOutlined className="m-r-5" />
|
||||
{props.title}
|
||||
</div>
|
||||
<div className="info">
|
||||
{props.source === modelSourceMap.huggingface_value ? (
|
||||
<Space size={16}>
|
||||
<span>
|
||||
{dayjs().to(
|
||||
dayjs(dayjs(props.lastModified).format('YYYY-MM-DD HH:mm:ss'))
|
||||
)}
|
||||
</span>
|
||||
<span>
|
||||
<HeartOutlined className="m-r-5" />
|
||||
{props.likes}
|
||||
</span>
|
||||
<span>
|
||||
<DownloadOutlined className="m-r-5" />
|
||||
{formatNumber(props.downloads)}
|
||||
</span>
|
||||
</Space>
|
||||
) : (
|
||||
<Space size={10}>
|
||||
{_.map(props.tags, (tag: string) => {
|
||||
return (
|
||||
<Tag
|
||||
style={{
|
||||
backgroundColor: 'var(--color-white-1)',
|
||||
marginRight: 0
|
||||
}}
|
||||
>
|
||||
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
|
||||
{tag}
|
||||
</span>
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HFModelItem;
|
||||
@ -0,0 +1,173 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import RadioButtons from '@/components/radio-buttons';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Input } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { queryHuggingfaceModels } from '../apis';
|
||||
import { modelSourceMap, ollamaModelOptions } from '../config';
|
||||
import SearchStyle from '../style/search-result.less';
|
||||
import SearchResult from './search-result';
|
||||
|
||||
interface SearchInputProps {
|
||||
modelSource: string;
|
||||
onSourceChange: (source: string) => void;
|
||||
onSelectModel: (model: any) => void;
|
||||
}
|
||||
|
||||
const sourceList = [
|
||||
{
|
||||
label: (
|
||||
<IconFont type="icon-huggingface" className="font-size-14"></IconFont>
|
||||
),
|
||||
value: 'huggingface',
|
||||
key: 'huggingface'
|
||||
},
|
||||
{
|
||||
label: <IconFont type="icon-ollama" className="font-size-14"></IconFont>,
|
||||
value: 'ollama_library',
|
||||
key: 'ollama_library'
|
||||
}
|
||||
];
|
||||
|
||||
const SearchInput: React.FC<SearchInputProps> = (props) => {
|
||||
const { modelSource, onSourceChange, onSelectModel } = props;
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
const [repoOptions, setRepoOptions] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const cacheRepoOptions = useRef<any[]>([]);
|
||||
const axiosTokenRef = useRef<any>(null);
|
||||
|
||||
const handleOnSearchRepo = async (text: string) => {
|
||||
axiosTokenRef.current?.abort?.();
|
||||
axiosTokenRef.current = new AbortController();
|
||||
if (loading) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
cacheRepoOptions.current = [];
|
||||
const params = {
|
||||
search: {
|
||||
query: text,
|
||||
tags: ['gguf']
|
||||
}
|
||||
};
|
||||
const models = await queryHuggingfaceModels(params, {
|
||||
signal: axiosTokenRef.current.signal
|
||||
});
|
||||
const list = _.map(models || [], (item: any) => {
|
||||
return {
|
||||
...item,
|
||||
value: item.name,
|
||||
label: item.name
|
||||
};
|
||||
});
|
||||
const sortedList = _.sortBy(
|
||||
list,
|
||||
(item: any) => item.downloads
|
||||
).reverse();
|
||||
cacheRepoOptions.current = sortedList;
|
||||
setRepoOptions(sortedList);
|
||||
} catch (error) {
|
||||
setRepoOptions([]);
|
||||
cacheRepoOptions.current = [];
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlerSearchModels = async (e: any) => {
|
||||
const text = e.target.value;
|
||||
handleOnSearchRepo(text);
|
||||
};
|
||||
|
||||
const handleOnFocus = () => {
|
||||
setShowSearch(true);
|
||||
if (
|
||||
!repoOptions.length &&
|
||||
!cacheRepoOptions.current.length &&
|
||||
modelSource === modelSourceMap.huggingface_value
|
||||
) {
|
||||
handleOnSearchRepo('');
|
||||
}
|
||||
if (modelSourceMap.ollama_library_value === modelSource) {
|
||||
setRepoOptions(ollamaModelOptions);
|
||||
cacheRepoOptions.current = ollamaModelOptions;
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSelectModel = (item: any) => {
|
||||
onSelectModel(item);
|
||||
setShowSearch(false);
|
||||
};
|
||||
|
||||
const handleOnBlur = () => {
|
||||
setTimeout(() => {
|
||||
setShowSearch(false);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handleFilterModels = (e: any) => {
|
||||
const text = e.target.value;
|
||||
const list = _.filter(cacheRepoOptions.current, (item: any) => {
|
||||
return item.name.includes(text);
|
||||
});
|
||||
setRepoOptions(list);
|
||||
console.log('handleFilterModels', text);
|
||||
};
|
||||
|
||||
const debounceFilter = _.debounce((e: any) => {
|
||||
handleFilterModels(e);
|
||||
}, 300);
|
||||
|
||||
const handleSourceChange = (source: string) => {
|
||||
axiosTokenRef.current?.abort?.();
|
||||
onSourceChange(source);
|
||||
setRepoOptions([]);
|
||||
cacheRepoOptions.current = [];
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={SearchStyle['search-bar']}>
|
||||
<RadioButtons
|
||||
options={sourceList}
|
||||
value={modelSource}
|
||||
onChange={handleSourceChange}
|
||||
></RadioButtons>
|
||||
<Input
|
||||
onPressEnter={handlerSearchModels}
|
||||
onChange={debounceFilter}
|
||||
allowClear
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={() => handleOnBlur()}
|
||||
className="m-l-20"
|
||||
placeholder={
|
||||
modelSource === 'huggingface'
|
||||
? 'Search models from hugging face '
|
||||
: ''
|
||||
}
|
||||
prefix={
|
||||
<SearchOutlined
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
color: 'var(--ant-color-text-quaternary)'
|
||||
}}
|
||||
/>
|
||||
}
|
||||
></Input>
|
||||
</div>
|
||||
{showSearch && (
|
||||
<SearchResult
|
||||
loading={loading}
|
||||
resultList={repoOptions}
|
||||
current=""
|
||||
source={modelSource}
|
||||
onSelect={handleOnSelectModel}
|
||||
></SearchResult>
|
||||
)}
|
||||
<div style={{ height: '81px' }}></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SearchInput);
|
||||
@ -0,0 +1,64 @@
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Col, Empty, Row, Spin } from 'antd';
|
||||
import React from 'react';
|
||||
import '../style/search-result.less';
|
||||
import HFModelItem from './hf-model-item';
|
||||
|
||||
interface SearchResultProps {
|
||||
resultList: any[];
|
||||
onSelect?: (item: any) => void;
|
||||
current?: string;
|
||||
source?: string;
|
||||
style?: React.CSSProperties;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const SearchResult: React.FC<SearchResultProps> = (props) => {
|
||||
const { resultList, onSelect, source } = props;
|
||||
|
||||
const handleSelect = (e: any, item: any) => {
|
||||
e.stopPropagation();
|
||||
onSelect?.(item);
|
||||
};
|
||||
return (
|
||||
<div style={{ ...props.style }} className="search-result-wrap">
|
||||
<Spin spinning={props.loading} style={{ minHeight: 100 }}>
|
||||
{resultList.length ? (
|
||||
<Row gutter={[10, 10]}>
|
||||
{resultList.map((item, index) => (
|
||||
<Col span={12} key={item.name}>
|
||||
<div onClick={(e) => handleSelect(e, item)}>
|
||||
<HFModelItem
|
||||
source={source}
|
||||
tags={item.tags}
|
||||
key={index}
|
||||
title={item.name}
|
||||
downloads={item.downloads}
|
||||
likes={item.likes}
|
||||
lastModified={item.lastModified}
|
||||
active={item.id === props.current}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
) : (
|
||||
!props.loading && (
|
||||
<Empty
|
||||
imageStyle={{ height: 'auto', marginTop: '20px' }}
|
||||
image={
|
||||
<SearchOutlined
|
||||
className="font-size-16"
|
||||
style={{ color: 'var(--ant-color-text-tertiary)' }}
|
||||
></SearchOutlined>
|
||||
}
|
||||
description="No models found"
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(SearchResult);
|
||||
@ -0,0 +1,26 @@
|
||||
.hf-model-item {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: 12px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-fill-sider);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-fill-sider);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-normal);
|
||||
}
|
||||
|
||||
.info {
|
||||
color: var(--ant-color-text-tertiary);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
.search-result-wrap {
|
||||
background-color: rgba(255, 255, 255, 100%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 123px;
|
||||
padding: 16px;
|
||||
border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
|
||||
box-shadow: inset 0 -10px 10px rgba(5, 5, 5, 10%);
|
||||
z-index: 100;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--ant-color-split);
|
||||
box-shadow: 0 1px 2px rgba(5, 5, 5, 5%);
|
||||
padding-top: 0;
|
||||
}
|
||||
Loading…
Reference in new issue