119 lines
3.1 KiB
TypeScript
119 lines
3.1 KiB
TypeScript
import { formatNumber } from '@/utils';
|
|
import {
|
|
DownloadOutlined,
|
|
FolderOutlined,
|
|
HeartOutlined,
|
|
WarningOutlined
|
|
} from '@ant-design/icons';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Tag, Tooltip } 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;
|
|
task?: string;
|
|
updatedAt: string;
|
|
active: boolean;
|
|
source?: string;
|
|
tags?: string[];
|
|
}
|
|
const warningTask = ['audio', 'video'];
|
|
|
|
const SUPPORTEDSOURCE = [
|
|
modelSourceMap.huggingface_value,
|
|
modelSourceMap.modelscope_value
|
|
];
|
|
|
|
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}
|
|
className={classNames('hf-model-item', {
|
|
active: props.active
|
|
})}
|
|
>
|
|
<div className="title">
|
|
<FolderOutlined
|
|
className="m-r-5"
|
|
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">
|
|
{SUPPORTEDSOURCE.includes(props.source || '') ? (
|
|
<div className="info-item">
|
|
{/* {props.task && (
|
|
<Tag
|
|
className="tag-item"
|
|
color="gold"
|
|
style={{
|
|
marginRight: 0
|
|
}}
|
|
>
|
|
<span style={{ opacity: 0.65 }}>{props.task}</span>
|
|
</Tag>
|
|
)} */}
|
|
<span>
|
|
{dayjs().to(
|
|
dayjs(dayjs(props.updatedAt).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>
|
|
</div>
|
|
) : (
|
|
<div className="flex-between">
|
|
<div className="tags">
|
|
{_.map(props.tags, (tag: string, index: string) => {
|
|
return (
|
|
<Tag
|
|
key={index}
|
|
style={{
|
|
backgroundColor: 'var(--color-white-1)',
|
|
marginRight: 0
|
|
}}
|
|
>
|
|
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
|
|
{tag}
|
|
</span>
|
|
</Tag>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HFModelItem;
|