82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
|
import React from 'react';
|
|||
|
|
import {
|
|||
|
|
FormControl,
|
|||
|
|
InputLabel,
|
|||
|
|
Select,
|
|||
|
|
MenuItem,
|
|||
|
|
OutlinedInput,
|
|||
|
|
Box,
|
|||
|
|
Chip,
|
|||
|
|
Checkbox,
|
|||
|
|
ListItemText
|
|||
|
|
} from '@mui/material';
|
|||
|
|
import { useTranslation } from 'react-i18next';
|
|||
|
|
|
|||
|
|
const ITEM_HEIGHT = 48;
|
|||
|
|
const ITEM_PADDING_TOP = 8;
|
|||
|
|
const MenuProps = {
|
|||
|
|
PaperProps: {
|
|||
|
|
style: {
|
|||
|
|
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
|||
|
|
width: 250
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 模型选择组件
|
|||
|
|
* @param {Object} props
|
|||
|
|
* @param {Array} props.models - 可用模型列表
|
|||
|
|
* @param {Array} props.selectedModels - 已选择的模型ID列表
|
|||
|
|
* @param {Function} props.onChange - 选择改变时的回调函数
|
|||
|
|
*/
|
|||
|
|
export default function ModelSelector({ models, selectedModels, onChange }) {
|
|||
|
|
// 获取模型名称
|
|||
|
|
const getModelName = modelId => {
|
|||
|
|
const model = models.find(m => m.id === modelId);
|
|||
|
|
return model ? `${model.providerName}: ${model.modelName}` : modelId;
|
|||
|
|
};
|
|||
|
|
const { t } = useTranslation();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<FormControl fullWidth>
|
|||
|
|
<InputLabel id="model-select-label">{t('playground.selectModelMax3')}</InputLabel>
|
|||
|
|
<Select
|
|||
|
|
labelId="model-select-label"
|
|||
|
|
id="model-select"
|
|||
|
|
multiple
|
|||
|
|
value={selectedModels}
|
|||
|
|
onChange={onChange}
|
|||
|
|
input={<OutlinedInput label="选择模型（最多3个）" />}
|
|||
|
|
renderValue={selected => (
|
|||
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
|||
|
|
{selected.map(modelId => (
|
|||
|
|
<Chip key={modelId} label={getModelName(modelId)} color="primary" variant="outlined" size="small" />
|
|||
|
|
))}
|
|||
|
|
</Box>
|
|||
|
|
)}
|
|||
|
|
MenuProps={MenuProps}
|
|||
|
|
>
|
|||
|
|
{models
|
|||
|
|
.filter(m => {
|
|||
|
|
if (m.providerId.toLowerCase() === 'ollama') {
|
|||
|
|
return m.modelName && m.endpoint;
|
|||
|
|
} else {
|
|||
|
|
return m.modelName && m.endpoint && m.apiKey;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.map(model => (
|
|||
|
|
<MenuItem
|
|||
|
|
key={model.id}
|
|||
|
|
value={model.id}
|
|||
|
|
disabled={selectedModels.length >= 3 && !selectedModels.includes(model.id)}
|
|||
|
|
>
|
|||
|
|
<Checkbox checked={selectedModels.indexOf(model.id) > -1} />
|
|||
|
|
<ListItemText primary={`${model.providerName}: ${model.modelName}`} />
|
|||
|
|
</MenuItem>
|
|||
|
|
))}
|
|||
|
|
</Select>
|
|||
|
|
</FormControl>
|
|||
|
|
);
|
|||
|
|
}
|