49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Space, Tag } from 'antd';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { queryHuggingfaceModelDetail } from '../apis';
|
|
import '../style/model-card.less';
|
|
import TitleWrapper from './title-wrapper';
|
|
|
|
const ModelCard: React.FC<{ repo: string }> = (props) => {
|
|
const { repo } = props;
|
|
const [modelData, setModelData] = useState<any>({});
|
|
|
|
const getModelCardData = async () => {
|
|
if (!repo) {
|
|
return;
|
|
}
|
|
try {
|
|
const res = await queryHuggingfaceModelDetail({ repo });
|
|
console.log('modelcarddata==========', res);
|
|
setModelData(res);
|
|
} catch (error) {
|
|
setModelData({});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getModelCardData();
|
|
}, [repo]);
|
|
|
|
return (
|
|
<>
|
|
<TitleWrapper>
|
|
<span>Model Card</span>
|
|
</TitleWrapper>
|
|
<div className="wrapper">
|
|
<div className="model-card-wrap">
|
|
<div className="title">{modelData.id}</div>
|
|
<Space>
|
|
<Tag className="tag-item">
|
|
<span className="m-r-5">Architecture:</span>
|
|
{modelData.config?.model_type}
|
|
</Tag>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default React.memo(ModelCard);
|