99 lines
2.7 KiB
TypeScript
99 lines
2.7 KiB
TypeScript
import {
|
|
Settings as SettingsIcon,
|
|
} from '@mui/icons-material'
|
|
import { LlmSvgIcon } from "@/components/AppSvgIcon";
|
|
import { IconMap, type LLMFactory } from "@/constants/llm";
|
|
import type { IFactory } from "@/interfaces/database/llm";
|
|
import { Box, Button, Card, CardContent, Chip, Typography } from "@mui/material";
|
|
|
|
// 模型类型标签颜色映射
|
|
export const MODEL_TYPE_COLORS: Record<string, string> = {
|
|
'LLM': '#1976d2',
|
|
'TEXT EMBEDDING': '#388e3c',
|
|
'TEXT RE-RANK': '#f57c00',
|
|
'TTS': '#7b1fa2',
|
|
'SPEECH2TEXT': '#c2185b',
|
|
'IMAGE2TEXT': '#5d4037',
|
|
'MODERATION': '#455a64',
|
|
};
|
|
|
|
// 模型工厂卡片组件
|
|
interface ModelFactoryCardProps {
|
|
factory: IFactory;
|
|
onConfigure: (factory: IFactory) => void;
|
|
}
|
|
|
|
const LLMFactoryCard: React.FC<ModelFactoryCardProps> = ({
|
|
factory,
|
|
onConfigure,
|
|
}) => {
|
|
|
|
// 获取工厂图标名称
|
|
const getFactoryIconName = (factoryName: LLMFactory) => {
|
|
return IconMap[factoryName] || 'default';
|
|
};
|
|
|
|
return (
|
|
<Card sx={{
|
|
mb: 2,
|
|
border: '1px solid #e0e0e0',
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}}>
|
|
<CardContent sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
textAlign: 'left',
|
|
gap: 2,
|
|
flex: 1,
|
|
}}>
|
|
{/* 图标 */}
|
|
<LlmSvgIcon
|
|
name={getFactoryIconName(factory.name as LLMFactory)}
|
|
sx={{ width: 48, height: 48, color: 'primary.main' }}
|
|
/>
|
|
|
|
{/* 标题 */}
|
|
<Typography variant="h6" component="div" sx={{ fontWeight: 'bold' }}>
|
|
{factory.name}
|
|
</Typography>
|
|
|
|
{/* 标签 */}
|
|
<Box display="flex" flexWrap="wrap" gap={0.5} justifyContent="left">
|
|
{factory.model_types.map((type) => (
|
|
<Chip
|
|
key={type}
|
|
label={type.toUpperCase()}
|
|
size="small"
|
|
sx={{
|
|
backgroundColor: MODEL_TYPE_COLORS[type.toUpperCase()] || '#757575',
|
|
color: 'white',
|
|
fontSize: '0.65rem',
|
|
height: '20px',
|
|
}}
|
|
/>
|
|
))}
|
|
</Box>
|
|
|
|
{/* 配置按钮 */}
|
|
<Button
|
|
variant="text"
|
|
size="small"
|
|
onClick={() => onConfigure(factory)}
|
|
sx={{
|
|
mt: 'auto',
|
|
color: 'primary.main',
|
|
alignSelf: 'center',
|
|
width: 'fit-content'
|
|
}}
|
|
>
|
|
添加模型
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default LLMFactoryCard |