1057 lines
35 KiB
JavaScript
1057 lines
35 KiB
JavaScript
'use client';
|
||
|
||
import { useState, useEffect, useMemo } from 'react';
|
||
import {
|
||
Typography,
|
||
Box,
|
||
Button,
|
||
TextField,
|
||
Grid,
|
||
Card,
|
||
CardContent,
|
||
Dialog,
|
||
DialogTitle,
|
||
DialogContent,
|
||
DialogActions,
|
||
FormControl,
|
||
Autocomplete,
|
||
Slider,
|
||
InputLabel,
|
||
Select,
|
||
MenuItem,
|
||
Stack,
|
||
Paper,
|
||
Tooltip,
|
||
IconButton,
|
||
Chip,
|
||
Divider,
|
||
CircularProgress
|
||
} from '@mui/material';
|
||
import AddIcon from '@mui/icons-material/Add';
|
||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||
import ErrorIcon from '@mui/icons-material/Error';
|
||
import { DEFAULT_MODEL_SETTINGS } from '@/constant/model';
|
||
import { useTranslation } from 'react-i18next';
|
||
import axios from 'axios';
|
||
import { toast } from 'sonner';
|
||
import EditIcon from '@mui/icons-material/Edit';
|
||
import DeleteIcon from '@mui/icons-material/Delete';
|
||
import ScienceIcon from '@mui/icons-material/Science';
|
||
import HealthAndSafetyIcon from '@mui/icons-material/HealthAndSafety';
|
||
import { useRouter } from 'next/navigation';
|
||
import { useAtom } from 'jotai';
|
||
import { modelConfigListAtom, selectedModelInfoAtom } from '@/lib/store';
|
||
import { getProviderLogo, sortProvidersByPriority } from '@/lib/util/providerLogo';
|
||
|
||
export default function ModelSettings({ projectId }) {
|
||
const { t } = useTranslation();
|
||
const router = useRouter();
|
||
// 展示端点的最大长度
|
||
const MAX_ENDPOINT_DISPLAY = 80;
|
||
const MAX_GENERATION_TOKENS = 131072;
|
||
// 模型对话框状态
|
||
const [openModelDialog, setOpenModelDialog] = useState(false);
|
||
const [editingModel, setEditingModel] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [providerList, setProviderList] = useState([]);
|
||
const [providerOptions, setProviderOptions] = useState([]);
|
||
const [selectedProvider, setSelectedProvider] = useState({});
|
||
const [models, setModels] = useState([]);
|
||
const [modelConfigList, setModelConfigList] = useAtom(modelConfigListAtom);
|
||
const [selectedModelInfo, setSelectedModelInfo] = useAtom(selectedModelInfoAtom);
|
||
const orderedModelConfigList = useMemo(
|
||
() => sortProvidersByPriority(modelConfigList, item => item.providerId),
|
||
[modelConfigList]
|
||
);
|
||
const [modelConfigForm, setModelConfigForm] = useState({
|
||
id: '',
|
||
providerId: '',
|
||
providerName: '',
|
||
endpoint: '',
|
||
apiKey: '',
|
||
modelId: '',
|
||
modelName: '',
|
||
type: 'text',
|
||
temperature: 0.0,
|
||
maxTokens: DEFAULT_MODEL_SETTINGS.maxTokens,
|
||
topP: 0,
|
||
topK: 0,
|
||
status: 1
|
||
});
|
||
const [healthStatusMap, setHealthStatusMap] = useState({});
|
||
const [batchCheckingHealth, setBatchCheckingHealth] = useState(false);
|
||
|
||
const isModelConfigured = model => {
|
||
if (!model) return false;
|
||
const hasEndpoint = Boolean(String(model.endpoint || '').trim());
|
||
const hasModel = Boolean(String(model.modelId || model.modelName || '').trim());
|
||
const providerId = String(model.providerId || '').toLowerCase();
|
||
|
||
if (providerId === 'ollama') {
|
||
return hasEndpoint && hasModel;
|
||
}
|
||
|
||
const hasApiKey = Boolean(String(model.apiKey || '').trim());
|
||
return hasEndpoint && hasApiKey && hasModel;
|
||
};
|
||
|
||
const configuredModelList = useMemo(() => orderedModelConfigList.filter(isModelConfigured), [orderedModelConfigList]);
|
||
|
||
const unconfiguredModelList = useMemo(
|
||
() => orderedModelConfigList.filter(model => !isModelConfigured(model)),
|
||
[orderedModelConfigList]
|
||
);
|
||
|
||
const normalizePositiveInteger = value => {
|
||
const parsedValue = Number(value);
|
||
if (!Number.isInteger(parsedValue) || parsedValue < 1) {
|
||
return null;
|
||
}
|
||
return parsedValue;
|
||
};
|
||
|
||
const getSafeMaxTokensValue = value => {
|
||
return normalizePositiveInteger(value) ?? DEFAULT_MODEL_SETTINGS.maxTokens;
|
||
};
|
||
|
||
useEffect(() => {
|
||
getProvidersList();
|
||
getModelConfigList();
|
||
}, []);
|
||
|
||
// 获取提供商列表
|
||
const getProvidersList = () => {
|
||
axios.get('/api/llm/providers').then(response => {
|
||
console.log('获取的模型列表', response.data);
|
||
const sortedProviders = sortProvidersByPriority(response.data, item => item.id);
|
||
setProviderList(sortedProviders);
|
||
const providerOptions = sortedProviders.map(provider => ({
|
||
id: provider.id,
|
||
label: provider.name
|
||
}));
|
||
if (sortedProviders.length > 0) {
|
||
setSelectedProvider(sortedProviders[0]);
|
||
getProviderModels(sortedProviders[0].id);
|
||
}
|
||
setProviderOptions(providerOptions);
|
||
});
|
||
};
|
||
|
||
// 裁剪端点展示长度（不改变实际值，仅用于 UI 展示）
|
||
const formatEndpoint = model => {
|
||
if (!model?.endpoint) return '';
|
||
const base = model.endpoint.replace(/^https?:\/\//, '');
|
||
if (base.length > MAX_ENDPOINT_DISPLAY) {
|
||
return base.slice(0, MAX_ENDPOINT_DISPLAY) + '...';
|
||
}
|
||
return base;
|
||
};
|
||
|
||
// 获取模型配置列表
|
||
const getModelConfigList = () => {
|
||
axios
|
||
.get(`/api/projects/${projectId}/model-config`)
|
||
.then(response => {
|
||
setModelConfigList(sortProvidersByPriority(response.data.data, item => item.providerId));
|
||
setLoading(false);
|
||
})
|
||
.catch(error => {
|
||
setLoading(false);
|
||
toast.error('Fetch model list Error');
|
||
});
|
||
};
|
||
|
||
const onChangeProvider = (event, newValue) => {
|
||
console.log('选择提供商', newValue, typeof newValue);
|
||
if (typeof newValue === 'string') {
|
||
// 用户手动输入了自定义提供商
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
providerId: 'custom',
|
||
endpoint: '',
|
||
providerName: ''
|
||
}));
|
||
} else if (newValue && newValue.id) {
|
||
// 用户从下拉列表中选择了一个提供商
|
||
const selectedProvider = providerList.find(p => p.id === newValue.id);
|
||
if (selectedProvider) {
|
||
setSelectedProvider(selectedProvider);
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
providerId: selectedProvider.id,
|
||
endpoint: selectedProvider.apiUrl,
|
||
providerName: selectedProvider.name,
|
||
modelName: ''
|
||
}));
|
||
getProviderModels(newValue.id);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 获取提供商的模型列表（DB）
|
||
const getProviderModels = providerId => {
|
||
axios
|
||
.get(`/api/llm/model?providerId=${providerId}`)
|
||
.then(response => {
|
||
setModels(response.data);
|
||
})
|
||
.catch(error => {
|
||
toast.error('Get Models Error');
|
||
});
|
||
};
|
||
|
||
// 同步模型列表
|
||
const refreshProviderModels = async () => {
|
||
let data = await getNewModels();
|
||
if (!data) return;
|
||
if (data.length > 0) {
|
||
setModels(data);
|
||
toast.success('Refresh Success');
|
||
const newModelsData = await axios.post('/api/llm/model', {
|
||
newModels: data,
|
||
providerId: selectedProvider.id
|
||
});
|
||
if (newModelsData.status === 200) {
|
||
toast.success('Get Model Success');
|
||
}
|
||
} else {
|
||
toast.info('No Models Need Refresh');
|
||
}
|
||
};
|
||
|
||
// 获取最新模型列表
|
||
async function getNewModels() {
|
||
try {
|
||
if (!modelConfigForm || !modelConfigForm.endpoint) {
|
||
return null;
|
||
}
|
||
const providerId = modelConfigForm.providerId;
|
||
console.log(providerId, 'getNewModels providerId');
|
||
|
||
// 使用后端 API 代理请求
|
||
const res = await axios.post('/api/llm/fetch-models', {
|
||
endpoint: modelConfigForm.endpoint,
|
||
providerId: providerId,
|
||
apiKey: modelConfigForm.apiKey
|
||
});
|
||
|
||
return res.data;
|
||
} catch (err) {
|
||
if (err.response && err.response.status === 401) {
|
||
toast.error('API Key Invalid');
|
||
} else {
|
||
toast.error('Get Model List Error');
|
||
}
|
||
return null;
|
||
}
|
||
}
|
||
|
||
const getHealthCheckErrorMessage = error => {
|
||
if (error?.response?.data?.error) return String(error.response.data.error);
|
||
if (error?.response?.data?.message) return String(error.response.data.message);
|
||
if (error?.message) return String(error.message);
|
||
return t('models.endpointCheckFailed', { defaultValue: 'Endpoint check failed' });
|
||
};
|
||
|
||
const checkModelEndpointHealth = async (model, { silent = false } = {}) => {
|
||
if (!model?.id) return false;
|
||
|
||
const endpoint = String(model.endpoint || '').trim();
|
||
if (!endpoint) {
|
||
setHealthStatusMap(prev => ({
|
||
...prev,
|
||
[model.id]: {
|
||
status: 'error',
|
||
message: t('models.endpointMissing', { defaultValue: 'Endpoint is empty' })
|
||
}
|
||
}));
|
||
if (!silent) {
|
||
toast.error(t('models.endpointMissing', { defaultValue: 'Endpoint is empty' }));
|
||
}
|
||
return false;
|
||
}
|
||
|
||
setHealthStatusMap(prev => ({
|
||
...prev,
|
||
[model.id]: {
|
||
status: 'checking',
|
||
message: t('models.checking', { defaultValue: 'Checking...' })
|
||
}
|
||
}));
|
||
|
||
try {
|
||
const response = await axios.post('/api/llm/fetch-models', {
|
||
endpoint,
|
||
providerId: model.providerId,
|
||
apiKey: model.apiKey
|
||
});
|
||
|
||
const resultList = Array.isArray(response.data) ? response.data : [];
|
||
const currentModelId = String(model.modelId || model.modelName || '').trim();
|
||
const hasMatchedModel =
|
||
!currentModelId ||
|
||
resultList.some(item => {
|
||
return item?.modelId === currentModelId || item?.modelName === currentModelId;
|
||
});
|
||
|
||
if (!hasMatchedModel) {
|
||
setHealthStatusMap(prev => ({
|
||
...prev,
|
||
[model.id]: {
|
||
status: 'warning',
|
||
message: t('models.endpointReachableModelMissing', {
|
||
defaultValue: 'Endpoint reachable, but current model is not in the returned model list'
|
||
}),
|
||
checkedAt: Date.now()
|
||
}
|
||
}));
|
||
if (!silent) {
|
||
toast.warning(
|
||
t('models.endpointReachableModelMissing', {
|
||
defaultValue: 'Endpoint reachable, but current model is not in the returned model list'
|
||
})
|
||
);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
setHealthStatusMap(prev => ({
|
||
...prev,
|
||
[model.id]: {
|
||
status: 'success',
|
||
message: t('models.endpointHealthy', { defaultValue: 'Endpoint is healthy' }),
|
||
checkedAt: Date.now()
|
||
}
|
||
}));
|
||
if (!silent) {
|
||
toast.success(t('models.endpointHealthy', { defaultValue: 'Endpoint is healthy' }));
|
||
}
|
||
return true;
|
||
} catch (error) {
|
||
const message = getHealthCheckErrorMessage(error);
|
||
setHealthStatusMap(prev => ({
|
||
...prev,
|
||
[model.id]: {
|
||
status: 'error',
|
||
message,
|
||
checkedAt: Date.now()
|
||
}
|
||
}));
|
||
if (!silent) {
|
||
toast.error(message);
|
||
}
|
||
return false;
|
||
}
|
||
};
|
||
|
||
const checkAllConfiguredModelHealth = async () => {
|
||
if (configuredModelList.length === 0) {
|
||
toast.info(t('models.noConfiguredModels', { defaultValue: 'No configured models to check' }));
|
||
return;
|
||
}
|
||
|
||
setBatchCheckingHealth(true);
|
||
let okCount = 0;
|
||
let failCount = 0;
|
||
|
||
for (const model of configuredModelList) {
|
||
const isHealthy = await checkModelEndpointHealth(model, { silent: true });
|
||
if (isHealthy) {
|
||
okCount += 1;
|
||
} else {
|
||
failCount += 1;
|
||
}
|
||
}
|
||
|
||
setBatchCheckingHealth(false);
|
||
toast.success(
|
||
t('models.healthCheckSummary', {
|
||
defaultValue: `Health check completed: ${okCount} healthy, ${failCount} failed`,
|
||
okCount,
|
||
failCount
|
||
})
|
||
);
|
||
};
|
||
|
||
const getHealthStatusInfo = model => {
|
||
const status = healthStatusMap[model.id]?.status || 'idle';
|
||
const message = healthStatusMap[model.id]?.message;
|
||
|
||
if (status === 'checking') {
|
||
return {
|
||
color: 'default',
|
||
icon: <CircularProgress size={14} />,
|
||
label: t('models.checking', { defaultValue: 'Checking...' }),
|
||
message
|
||
};
|
||
}
|
||
|
||
if (status === 'success') {
|
||
return {
|
||
color: 'success',
|
||
icon: <CheckCircleIcon fontSize="small" />,
|
||
label: t('models.healthy', { defaultValue: 'Healthy' }),
|
||
message
|
||
};
|
||
}
|
||
|
||
if (status === 'warning') {
|
||
return {
|
||
color: 'warning',
|
||
icon: <ErrorIcon fontSize="small" />,
|
||
label: t('models.reachable', { defaultValue: 'Reachable' }),
|
||
message
|
||
};
|
||
}
|
||
|
||
if (status === 'error') {
|
||
return {
|
||
color: 'error',
|
||
icon: <ErrorIcon fontSize="small" />,
|
||
label: t('models.unhealthy', { defaultValue: 'Unhealthy' }),
|
||
message
|
||
};
|
||
}
|
||
|
||
return {
|
||
color: 'default',
|
||
icon: <HealthAndSafetyIcon fontSize="small" />,
|
||
label: t('models.notChecked', { defaultValue: 'Not checked' }),
|
||
message: t('models.notChecked', { defaultValue: 'Not checked' })
|
||
};
|
||
};
|
||
|
||
// 打开模型对话框
|
||
const handleOpenModelDialog = (model = null) => {
|
||
if (model) {
|
||
setEditingModel(model);
|
||
console.log('handleOpenModelDialog', model);
|
||
// 兼容逻辑：如果 modelId 为空，则用 modelName 作为 modelId
|
||
const initialForm = { ...model };
|
||
if (!initialForm.modelId && initialForm.modelName) {
|
||
initialForm.modelId = initialForm.modelName;
|
||
}
|
||
|
||
// 编辑现有模型时，为未设置的参数应用默认值
|
||
setModelConfigForm({
|
||
...initialForm,
|
||
temperature: model.temperature !== undefined ? model.temperature : DEFAULT_MODEL_SETTINGS.temperature,
|
||
maxTokens: model.maxTokens !== undefined ? model.maxTokens : DEFAULT_MODEL_SETTINGS.maxTokens,
|
||
topP: model.topP !== undefined && model.topP !== 0 ? model.topP : DEFAULT_MODEL_SETTINGS.topP
|
||
});
|
||
getProviderModels(model.providerId);
|
||
} else {
|
||
setEditingModel(null);
|
||
// 添加新模型时，完全重置表单
|
||
setModelConfigForm({
|
||
providerId: selectedProvider?.id || '',
|
||
providerName: selectedProvider?.name || '',
|
||
endpoint: selectedProvider?.apiUrl || '',
|
||
apiKey: '',
|
||
modelId: '',
|
||
modelName: '',
|
||
type: 'text',
|
||
...DEFAULT_MODEL_SETTINGS,
|
||
id: ''
|
||
});
|
||
if (selectedProvider?.id) {
|
||
getProviderModels(selectedProvider.id);
|
||
}
|
||
}
|
||
setOpenModelDialog(true);
|
||
};
|
||
|
||
// 关闭模型对话框
|
||
const handleCloseModelDialog = () => {
|
||
setEditingModel(null);
|
||
setOpenModelDialog(false);
|
||
};
|
||
|
||
// 处理模型表单变更
|
||
const handleModelFormChange = e => {
|
||
const { name, value } = e.target;
|
||
console.log('handleModelFormChange', name, value);
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
[name]: value
|
||
}));
|
||
};
|
||
|
||
const handleMaxTokensSliderChange = (event, newValue) => {
|
||
const value = Array.isArray(newValue) ? newValue[0] : newValue;
|
||
const normalizedValue = normalizePositiveInteger(value);
|
||
if (normalizedValue === null) {
|
||
return;
|
||
}
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
maxTokens: normalizedValue
|
||
}));
|
||
};
|
||
|
||
const handleMaxTokensInputChange = e => {
|
||
const { value } = e.target;
|
||
if (value === '') {
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
maxTokens: ''
|
||
}));
|
||
return;
|
||
}
|
||
const normalizedValue = normalizePositiveInteger(value);
|
||
if (normalizedValue === null) {
|
||
return;
|
||
}
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
maxTokens: normalizedValue
|
||
}));
|
||
};
|
||
|
||
const handleMaxTokensInputBlur = () => {
|
||
const normalizedValue = normalizePositiveInteger(modelConfigForm.maxTokens);
|
||
if (normalizedValue !== null) {
|
||
return;
|
||
}
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
maxTokens: DEFAULT_MODEL_SETTINGS.maxTokens
|
||
}));
|
||
};
|
||
|
||
// 保存模型
|
||
const handleSaveModel = () => {
|
||
// 确保有模型 ID
|
||
const normalizedModelId = String(modelConfigForm.modelId || '').trim();
|
||
const normalizedModelName = String(modelConfigForm.modelName || '').trim();
|
||
const isEditingExistingModel = Boolean(modelConfigForm.id || editingModel?.id);
|
||
|
||
if (!isEditingExistingModel && !normalizedModelId) {
|
||
toast.error(t('models.modelIdPlaceholder'));
|
||
return;
|
||
}
|
||
|
||
const normalizedMaxTokens = normalizePositiveInteger(modelConfigForm.maxTokens);
|
||
if (normalizedMaxTokens === null) {
|
||
toast.error(t('models.maxTokensPositiveError', { defaultValue: 'Max Tokens must be a positive integer' }));
|
||
return;
|
||
}
|
||
|
||
// 如果模型名称为空，则默认为模型 ID
|
||
const dataToSave = {
|
||
...modelConfigForm,
|
||
modelId: normalizedModelId,
|
||
maxTokens: normalizedMaxTokens,
|
||
modelName: normalizedModelName || normalizedModelId
|
||
};
|
||
|
||
axios
|
||
.post(`/api/projects/${projectId}/model-config`, dataToSave)
|
||
.then(response => {
|
||
if (selectedModelInfo && selectedModelInfo.id === response.data.id) {
|
||
setSelectedModelInfo(response.data);
|
||
}
|
||
toast.success(t('settings.saveSuccess'));
|
||
getModelConfigList();
|
||
handleCloseModelDialog();
|
||
})
|
||
.catch(error => {
|
||
toast.error(t('settings.saveFailed'));
|
||
console.error(error);
|
||
});
|
||
};
|
||
|
||
// 删除模型
|
||
const handleDeleteModel = id => {
|
||
axios
|
||
.delete(`/api/projects/${projectId}/model-config/${id}`)
|
||
.then(response => {
|
||
toast.success(t('settings.deleteSuccess'));
|
||
getModelConfigList();
|
||
})
|
||
.catch(error => {
|
||
toast.error(t('settings.deleteFailed'));
|
||
});
|
||
};
|
||
|
||
// 获取模型状态图标和颜色
|
||
const getModelStatusInfo = model => {
|
||
const providerId = String(model?.providerId || '').toLowerCase();
|
||
if (providerId === 'ollama') {
|
||
return {
|
||
icon: <CheckCircleIcon fontSize="small" />,
|
||
color: 'success',
|
||
text: t('models.localModel')
|
||
};
|
||
} else if (model.apiKey) {
|
||
return {
|
||
icon: <CheckCircleIcon fontSize="small" />,
|
||
color: 'success',
|
||
text: t('models.apiKeyConfigured')
|
||
};
|
||
} else {
|
||
return {
|
||
icon: <ErrorIcon fontSize="small" />,
|
||
color: 'warning',
|
||
text: t('models.apiKeyNotConfigured')
|
||
};
|
||
}
|
||
};
|
||
|
||
const renderModelCard = model => {
|
||
const modelStatus = getModelStatusInfo(model);
|
||
const healthStatus = getHealthStatusInfo(model);
|
||
const providerId = String(model?.providerId || '').toLowerCase();
|
||
const endpointLabel = `${formatEndpoint(model)}${
|
||
providerId !== 'ollama' && !model.apiKey ? ' (' + t('models.unconfiguredAPIKey') + ')' : ''
|
||
}`;
|
||
|
||
return (
|
||
<Paper
|
||
key={model.id}
|
||
elevation={1}
|
||
sx={{
|
||
p: 2,
|
||
borderRadius: 2,
|
||
transition: 'all 0.2s',
|
||
'&:hover': {
|
||
boxShadow: 3,
|
||
transform: 'translateY(-2px)'
|
||
}
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 1.5 }}>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||
<Box
|
||
component="img"
|
||
src={getProviderLogo(model.providerId, model.providerName)}
|
||
alt={model.providerName}
|
||
sx={{ width: 32, height: 32, objectFit: 'contain' }}
|
||
onError={e => {
|
||
e.target.src = '/imgs/models/default.svg';
|
||
}}
|
||
/>
|
||
<Box>
|
||
<Typography variant="subtitle1" fontWeight="bold">
|
||
{model.modelName ? model.modelName : t('models.unselectedModel')}
|
||
</Typography>
|
||
<Typography
|
||
variant="body2"
|
||
color="primary"
|
||
sx={{
|
||
fontWeight: 'medium',
|
||
bgcolor: 'primary.50',
|
||
px: 1,
|
||
py: 0.2,
|
||
borderRadius: 1,
|
||
display: 'inline-block'
|
||
}}
|
||
>
|
||
{model.providerName}
|
||
</Typography>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||
<Tooltip title={modelStatus.text}>
|
||
<Chip
|
||
icon={modelStatus.icon}
|
||
label={endpointLabel}
|
||
size="small"
|
||
color={modelStatus.color}
|
||
variant="outlined"
|
||
/>
|
||
</Tooltip>
|
||
|
||
<Tooltip title={healthStatus.message || healthStatus.label}>
|
||
<Chip
|
||
icon={healthStatus.icon}
|
||
label={healthStatus.label}
|
||
size="small"
|
||
color={healthStatus.color}
|
||
variant="outlined"
|
||
/>
|
||
</Tooltip>
|
||
|
||
<Tooltip title={t('models.checkEndpointHealth', { defaultValue: 'Check endpoint health' })}>
|
||
<span>
|
||
<IconButton
|
||
size="small"
|
||
color="success"
|
||
onClick={() => checkModelEndpointHealth(model)}
|
||
disabled={healthStatusMap[model.id]?.status === 'checking'}
|
||
>
|
||
<HealthAndSafetyIcon fontSize="small" />
|
||
</IconButton>
|
||
</span>
|
||
</Tooltip>
|
||
|
||
<Tooltip title={t('models.typeTips')}>
|
||
<Chip
|
||
sx={{ marginLeft: '5px' }}
|
||
label={t(`models.${model.type || 'text'}`)}
|
||
size="small"
|
||
color={model.type === 'vision' ? 'secondary' : 'info'}
|
||
variant="outlined"
|
||
/>
|
||
</Tooltip>
|
||
<Tooltip title={t('playground.title')}>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => router.push(`/projects/${projectId}/playground?modelId=${model.id}`)}
|
||
color="secondary"
|
||
>
|
||
<ScienceIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
|
||
<Tooltip title={t('common.edit')}>
|
||
<IconButton size="small" onClick={() => handleOpenModelDialog(model)} color="primary">
|
||
<EditIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
|
||
<Tooltip title={t('common.delete')}>
|
||
<IconButton
|
||
size="small"
|
||
onClick={() => handleDeleteModel(model.id)}
|
||
disabled={modelConfigList.length <= 1}
|
||
color="error"
|
||
>
|
||
<DeleteIcon fontSize="small" />
|
||
</IconButton>
|
||
</Tooltip>
|
||
</Box>
|
||
</Box>
|
||
</Paper>
|
||
);
|
||
};
|
||
|
||
if (loading) {
|
||
return <Typography>{t('textSplit.loading')}</Typography>;
|
||
}
|
||
|
||
return (
|
||
<Card>
|
||
<CardContent>
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
||
<Typography variant="h6" fontWeight="bold">
|
||
{t('settings.modelConfig')}
|
||
</Typography>
|
||
<Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
|
||
<Button
|
||
variant="outlined"
|
||
color="success"
|
||
startIcon={batchCheckingHealth ? <CircularProgress size={14} /> : <HealthAndSafetyIcon />}
|
||
onClick={checkAllConfiguredModelHealth}
|
||
size="small"
|
||
disabled={batchCheckingHealth || configuredModelList.length === 0}
|
||
sx={{ textTransform: 'none' }}
|
||
>
|
||
{batchCheckingHealth
|
||
? t('models.checking', { defaultValue: 'Checking...' })
|
||
: t('models.checkAllEndpointHealth', { defaultValue: 'Check all endpoints' })}
|
||
</Button>
|
||
<Button
|
||
variant="outlined"
|
||
color="secondary"
|
||
startIcon={<ScienceIcon />}
|
||
onClick={() => router.push(`/projects/${projectId}/playground`)}
|
||
size="small"
|
||
sx={{ textTransform: 'none' }}
|
||
>
|
||
{t('playground.title')}
|
||
</Button>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
startIcon={<AddIcon />}
|
||
onClick={() => handleOpenModelDialog()}
|
||
size="small"
|
||
sx={{ textTransform: 'none' }}
|
||
>
|
||
{t('models.add')}
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
|
||
<Stack spacing={2}>
|
||
<Box>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<Typography variant="subtitle2" color="text.secondary">
|
||
{t('models.configuredModels', { defaultValue: 'Configured Models' })}
|
||
</Typography>
|
||
<Chip size="small" label={configuredModelList.length} />
|
||
</Box>
|
||
<Stack spacing={2}>
|
||
{configuredModelList.map(renderModelCard)}
|
||
{configuredModelList.length === 0 && (
|
||
<Typography variant="body2" color="text.secondary">
|
||
{t('models.noConfiguredModels', { defaultValue: 'No configured models' })}
|
||
</Typography>
|
||
)}
|
||
</Stack>
|
||
</Box>
|
||
|
||
<Divider />
|
||
|
||
<Box>
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||
<Typography variant="subtitle2" color="text.secondary">
|
||
{t('models.unconfiguredModels', { defaultValue: 'Unconfigured Models' })}
|
||
</Typography>
|
||
<Chip size="small" label={unconfiguredModelList.length} />
|
||
</Box>
|
||
<Stack spacing={2}>
|
||
{unconfiguredModelList.map(renderModelCard)}
|
||
{unconfiguredModelList.length === 0 && (
|
||
<Typography variant="body2" color="text.secondary">
|
||
{t('models.noUnconfiguredModels', { defaultValue: 'No unconfigured models' })}
|
||
</Typography>
|
||
)}
|
||
</Stack>
|
||
</Box>
|
||
</Stack>
|
||
</CardContent>
|
||
|
||
{/* 模型表单对话框 */}
|
||
<Dialog open={openModelDialog} onClose={handleCloseModelDialog} maxWidth="sm" fullWidth>
|
||
<DialogTitle>{editingModel ? t('models.edit') : t('models.add')}</DialogTitle>
|
||
<DialogContent>
|
||
<Grid container spacing={2} sx={{ mt: 0.5 }}>
|
||
{/* provider */}
|
||
<Grid item xs={12}>
|
||
<FormControl fullWidth>
|
||
<Autocomplete
|
||
freeSolo
|
||
options={providerOptions}
|
||
getOptionLabel={option => option.label}
|
||
value={
|
||
providerOptions.find(p => p.id === modelConfigForm.providerId) || {
|
||
id: 'custom',
|
||
label: modelConfigForm.providerName || ''
|
||
}
|
||
}
|
||
onChange={onChangeProvider}
|
||
renderInput={params => (
|
||
<TextField
|
||
{...params}
|
||
label={t('models.provider')}
|
||
onChange={e => {
|
||
// 当用户手动输入时，更新 provider 字段
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
providerId: 'custom',
|
||
providerName: e.target.value
|
||
}));
|
||
}}
|
||
/>
|
||
)}
|
||
renderOption={(props, option) => {
|
||
return (
|
||
<div {...props}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||
<Box
|
||
component="img"
|
||
src={getProviderLogo(option.id, option.label)}
|
||
alt={option.label}
|
||
sx={{ width: 24, height: 24, objectFit: 'contain' }}
|
||
onError={e => {
|
||
e.target.src = '/imgs/models/default.svg';
|
||
}}
|
||
/>
|
||
{option.label}
|
||
</div>
|
||
</div>
|
||
);
|
||
}}
|
||
/>
|
||
</FormControl>
|
||
</Grid>
|
||
{/* 接口地址 */}
|
||
<Grid item xs={12}>
|
||
<TextField
|
||
fullWidth
|
||
label={t('models.endpoint')}
|
||
name="endpoint"
|
||
value={modelConfigForm.endpoint}
|
||
onChange={handleModelFormChange}
|
||
placeholder="例如: https://api.openai.com/v1"
|
||
/>
|
||
</Grid>
|
||
{/* API Key */}
|
||
<Grid item xs={12}>
|
||
<TextField
|
||
fullWidth
|
||
label={t('models.apiKey')}
|
||
name="apiKey"
|
||
type="password"
|
||
value={modelConfigForm.apiKey}
|
||
onChange={handleModelFormChange}
|
||
placeholder="例如: sk-..."
|
||
/>
|
||
</Grid>
|
||
{/* 模型 ID */}
|
||
<Grid item xs={12} style={{ display: 'flex', alignItems: 'center' }}>
|
||
<FormControl style={{ width: '70%' }}>
|
||
<Autocomplete
|
||
freeSolo
|
||
options={models
|
||
.filter(model => model && model.modelId)
|
||
.map(model => ({
|
||
label: `${model.modelName} (${model.modelId})`,
|
||
modelName: model.modelName,
|
||
modelId: model.modelId,
|
||
providerId: model.providerId
|
||
}))}
|
||
value={modelConfigForm.modelId}
|
||
onChange={(event, newValue) => {
|
||
console.log('newValue', newValue);
|
||
const newId = newValue?.modelId || newValue || '';
|
||
const newName = newValue?.modelName || newValue?.modelId || newValue || '';
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
modelId: newId,
|
||
// 如果当前名称为空或与旧 ID 一致，则同步更新名称
|
||
modelName: !prev.modelName || prev.modelName === prev.modelId ? newName : prev.modelName
|
||
}));
|
||
}}
|
||
renderInput={params => (
|
||
<TextField
|
||
{...params}
|
||
label={t('models.modelId')}
|
||
placeholder={t('models.modelIdPlaceholder')}
|
||
onChange={e => {
|
||
setModelConfigForm(prev => ({
|
||
...prev,
|
||
modelId: e.target.value
|
||
}));
|
||
}}
|
||
/>
|
||
)}
|
||
/>
|
||
</FormControl>
|
||
<Button variant="contained" onClick={() => refreshProviderModels()} sx={{ ml: 2 }}>
|
||
{t('models.refresh')}
|
||
</Button>
|
||
</Grid>
|
||
{/* 模型名称 */}
|
||
<Grid item xs={12}>
|
||
<TextField
|
||
fullWidth
|
||
label={t('models.modelName')}
|
||
name="modelName"
|
||
value={modelConfigForm.modelName}
|
||
onChange={handleModelFormChange}
|
||
placeholder={t('models.modelNamePlaceholder')}
|
||
/>
|
||
</Grid>
|
||
{/* 新增：视觉模型选择项 */}
|
||
<Grid item xs={12}>
|
||
<FormControl fullWidth>
|
||
<InputLabel>{t('models.type')}</InputLabel>
|
||
<Select
|
||
label={t('models.type')}
|
||
value={modelConfigForm.type || 'text'}
|
||
onChange={handleModelFormChange}
|
||
name="type"
|
||
>
|
||
<MenuItem value="text">{t('models.text')}</MenuItem>
|
||
<MenuItem value="vision">{t('models.vision')}</MenuItem>
|
||
</Select>
|
||
</FormControl>
|
||
</Grid>
|
||
<Grid item xs={12}>
|
||
<Typography id="question-generation-length-slider" gutterBottom>
|
||
{t('models.temperature')}
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||
<Slider
|
||
min={0}
|
||
max={2}
|
||
name="temperature"
|
||
value={modelConfigForm.temperature}
|
||
onChange={handleModelFormChange}
|
||
step={0.1}
|
||
valueLabelDisplay="auto"
|
||
aria-label="Temperature"
|
||
sx={{ flex: 1 }}
|
||
/>
|
||
<Typography variant="body2" sx={{ minWidth: '40px' }}>
|
||
{modelConfigForm.temperature}
|
||
</Typography>
|
||
</Box>
|
||
</Grid>
|
||
<Grid item xs={12}>
|
||
<Typography id="question-generation-length-slider" gutterBottom>
|
||
{t('models.maxTokens')}
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||
<Slider
|
||
min={1}
|
||
max={MAX_GENERATION_TOKENS}
|
||
name="maxTokens"
|
||
value={Math.min(getSafeMaxTokensValue(modelConfigForm.maxTokens), MAX_GENERATION_TOKENS)}
|
||
onChange={handleMaxTokensSliderChange}
|
||
step={1}
|
||
valueLabelDisplay="auto"
|
||
aria-label="maxTokens"
|
||
sx={{ flex: 1 }}
|
||
/>
|
||
<TextField
|
||
size="small"
|
||
type="number"
|
||
value={modelConfigForm.maxTokens}
|
||
onChange={handleMaxTokensInputChange}
|
||
onBlur={handleMaxTokensInputBlur}
|
||
inputProps={{ min: 1, step: 1 }}
|
||
sx={{ width: 170 }}
|
||
/>
|
||
</Box>
|
||
<Typography variant="caption" color="text.secondary">
|
||
{t('models.maxTokensInputTip', {
|
||
defaultValue: `Slider range: 1-${MAX_GENERATION_TOKENS}. You can also input any positive integer.`
|
||
})}
|
||
</Typography>
|
||
</Grid>
|
||
<Grid item xs={12}>
|
||
<Typography id="top-p-slider" gutterBottom>
|
||
{t('models.topP', { defaultValue: 'Top P' })}
|
||
</Typography>
|
||
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||
<Slider
|
||
min={0}
|
||
max={1}
|
||
name="topP"
|
||
value={modelConfigForm.topP}
|
||
onChange={handleModelFormChange}
|
||
step={0.1}
|
||
valueLabelDisplay="auto"
|
||
aria-label="topP"
|
||
sx={{ flex: 1 }}
|
||
/>
|
||
<Typography variant="body2" sx={{ minWidth: '40px' }}>
|
||
{modelConfigForm.topP}
|
||
</Typography>
|
||
</Box>
|
||
</Grid>
|
||
</Grid>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button onClick={handleCloseModelDialog}>{t('common.cancel')}</Button>
|
||
<Button
|
||
onClick={handleSaveModel}
|
||
variant="contained"
|
||
disabled={!modelConfigForm.providerId || !modelConfigForm.providerName || !modelConfigForm.endpoint}
|
||
>
|
||
{t('common.save')}
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</Card>
|
||
);
|
||
}
|