70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import IconFont from '@/components/icon-font';
|
|
import { formatNumber } from '@/utils';
|
|
import { DownloadOutlined, HeartOutlined } from '@ant-design/icons';
|
|
import classNames from 'classnames';
|
|
import dayjs from 'dayjs';
|
|
import React from 'react';
|
|
import { modelSourceMap } from '../config';
|
|
import { EvaluateResult } from '../config/types';
|
|
import '../style/hf-model-item.less';
|
|
import IncompatiableInfo from './incompatiable-info';
|
|
|
|
interface HFModelItemProps {
|
|
title: string;
|
|
downloads: number;
|
|
likes: number;
|
|
task?: string;
|
|
updatedAt: string;
|
|
active: boolean;
|
|
source?: string;
|
|
tags?: string[];
|
|
evaluateResult?: EvaluateResult;
|
|
isEvaluating?: boolean;
|
|
}
|
|
|
|
const HFModelItem: React.FC<HFModelItemProps> = (props) => {
|
|
const { evaluateResult, isEvaluating } = props;
|
|
|
|
return (
|
|
<div
|
|
className={classNames('hf-model-item', {
|
|
active: props.active
|
|
})}
|
|
>
|
|
<div className="title">
|
|
<IconFont
|
|
type={
|
|
props.source === modelSourceMap.huggingface_value
|
|
? 'icon-huggingface1'
|
|
: 'icon-modelscope_light'
|
|
}
|
|
className="m-r-5"
|
|
style={{ color: 'var(--ant-color-text-tertiary)', fontSize: 16 }}
|
|
/>
|
|
{props.title}
|
|
</div>
|
|
<div className="info">
|
|
<div className="info-item">
|
|
<span>{dayjs().to(dayjs(props.updatedAt))}</span>
|
|
<span className="flex-center">
|
|
<HeartOutlined className="m-r-5" />
|
|
{props.likes}
|
|
</span>
|
|
<span className="flex-center">
|
|
<DownloadOutlined className="m-r-5" />
|
|
{formatNumber(props.downloads)}
|
|
</span>
|
|
</div>
|
|
{
|
|
<IncompatiableInfo
|
|
data={evaluateResult}
|
|
isEvaluating={isEvaluating}
|
|
></IncompatiableInfo>
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HFModelItem;
|