first-update
This commit is contained in:
@@ -0,0 +1,498 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Chip,
|
||||
Divider,
|
||||
TextField,
|
||||
OutlinedInput,
|
||||
Checkbox,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Paper
|
||||
} from '@mui/material';
|
||||
import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
|
||||
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { alpha, useTheme } from '@mui/material/styles';
|
||||
|
||||
export default function CreateBlindTestDialog({ open, onClose, projectId, onCreate }) {
|
||||
const { t } = useTranslation();
|
||||
const theme = useTheme();
|
||||
|
||||
// 模型选择
|
||||
const [models, setModels] = useState([]);
|
||||
const [modelsLoading, setModelsLoading] = useState(false);
|
||||
const [modelA, setModelA] = useState(null);
|
||||
const [modelB, setModelB] = useState(null);
|
||||
|
||||
// 题目选择
|
||||
const [questionTypes, setQuestionTypes] = useState(['short_answer', 'open_ended']);
|
||||
const [selectedTags, setSelectedTags] = useState([]);
|
||||
const [availableTags, setAvailableTags] = useState([]);
|
||||
const [questionCount, setQuestionCount] = useState(0);
|
||||
const [filteredCount, setFilteredCount] = useState(0);
|
||||
const [countLoading, setCountLoading] = useState(false);
|
||||
|
||||
// 提交状态
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// 加载模型列表
|
||||
useEffect(() => {
|
||||
if (!open || !projectId) return;
|
||||
|
||||
const fetchModels = async () => {
|
||||
try {
|
||||
setModelsLoading(true);
|
||||
const response = await fetch(`/api/projects/${projectId}/model-config`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.data) {
|
||||
setModels(result.data);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载模型失败:', err);
|
||||
} finally {
|
||||
setModelsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchModels();
|
||||
}, [open, projectId]);
|
||||
|
||||
// 加载标签和题目数量
|
||||
useEffect(() => {
|
||||
if (!open || !projectId) return;
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${projectId}/eval-datasets?page=1&pageSize=1&includeStats=true`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.stats?.byTag) {
|
||||
setAvailableTags(Object.keys(result.stats.byTag).sort());
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载统计失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchStats();
|
||||
}, [open, projectId]);
|
||||
|
||||
// 获取符合条件的题目数量
|
||||
const fetchFilteredCount = useCallback(async () => {
|
||||
if (!projectId) return;
|
||||
|
||||
try {
|
||||
setCountLoading(true);
|
||||
const params = new URLSearchParams();
|
||||
|
||||
// 只查询主观题
|
||||
questionTypes.forEach(t => params.append('questionTypes', t));
|
||||
selectedTags.forEach(t => params.append('tags', t));
|
||||
|
||||
const response = await fetch(`/api/projects/${projectId}/eval-datasets/count?${params.toString()}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.code === 0) {
|
||||
setFilteredCount(result.data?.total || 0);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('获取题目数量失败:', err);
|
||||
} finally {
|
||||
setCountLoading(false);
|
||||
}
|
||||
}, [projectId, questionTypes, selectedTags]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchFilteredCount();
|
||||
}
|
||||
}, [open, fetchFilteredCount]);
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
setModelA(null);
|
||||
setModelB(null);
|
||||
setQuestionTypes(['short_answer', 'open_ended']);
|
||||
setSelectedTags([]);
|
||||
setQuestionCount(0);
|
||||
setError('');
|
||||
};
|
||||
|
||||
// 关闭对话框
|
||||
const handleClose = () => {
|
||||
if (submitting) return;
|
||||
resetForm();
|
||||
onClose();
|
||||
};
|
||||
|
||||
// 提交创建
|
||||
const handleSubmit = async () => {
|
||||
// 验证
|
||||
if (!modelA) {
|
||||
setError(t('blindTest.errorSelectModelA', '请选择模型A'));
|
||||
return;
|
||||
}
|
||||
if (!modelB) {
|
||||
setError(t('blindTest.errorSelectModelB', '请选择模型B'));
|
||||
return;
|
||||
}
|
||||
if (modelA.id === modelB.id) {
|
||||
setError(t('blindTest.errorSameModel', '两个模型不能相同'));
|
||||
return;
|
||||
}
|
||||
if (filteredCount === 0) {
|
||||
setError(t('blindTest.errorNoQuestions', '没有符合条件的题目'));
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
setError('');
|
||||
|
||||
// 获取题目ID列表
|
||||
const params = new URLSearchParams();
|
||||
questionTypes.forEach(t => params.append('questionTypes', t));
|
||||
selectedTags.forEach(t => params.append('tags', t));
|
||||
|
||||
const pageSize = questionCount > 0 ? questionCount : filteredCount;
|
||||
params.append('pageSize', pageSize.toString());
|
||||
|
||||
const response = await fetch(`/api/projects/${projectId}/eval-datasets?${params.toString()}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (!result.items || result.items.length === 0) {
|
||||
setError(t('blindTest.errorNoQuestions', '没有符合条件的题目'));
|
||||
return;
|
||||
}
|
||||
|
||||
// 随机选择题目（如果指定了数量）
|
||||
let selectedIds = result.items.map(item => item.id);
|
||||
if (questionCount > 0 && questionCount < selectedIds.length) {
|
||||
// 随机抽取
|
||||
selectedIds = selectedIds.sort(() => Math.random() - 0.5).slice(0, questionCount);
|
||||
}
|
||||
|
||||
// 创建任务
|
||||
const createResult = await onCreate({
|
||||
modelA: { modelId: modelA.modelId, providerId: modelA.providerId, id: modelA.id },
|
||||
modelB: { modelId: modelB.modelId, providerId: modelB.providerId, id: modelB.id },
|
||||
evalDatasetIds: selectedIds
|
||||
});
|
||||
|
||||
if (createResult.success) {
|
||||
handleClose();
|
||||
} else {
|
||||
setError(createResult.error || '创建失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('创建任务失败:', err);
|
||||
setError('创建任务失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const QUESTION_TYPES = [
|
||||
{ value: 'short_answer', labelKey: 'eval.questionTypes.short_answer' },
|
||||
{ value: 'open_ended', labelKey: 'eval.questionTypes.open_ended' }
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
PaperProps={{
|
||||
sx: {
|
||||
borderRadius: 3,
|
||||
backgroundImage: 'none'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.5,
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
pb: 2
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: 1, borderRadius: 1.5, bgcolor: alpha(theme.palette.primary.main, 0.1), display: 'flex' }}>
|
||||
<CompareArrowsIcon color="primary" />
|
||||
</Box>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
{t('blindTest.createTitle', '创建盲测任务')}
|
||||
</Typography>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent sx={{ py: 3 }}>
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }} onClose={() => setError('')}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 模型选择 */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
sx={{ fontWeight: 600, mb: 2, display: 'flex', alignItems: 'center', gap: 1 }}
|
||||
>
|
||||
<SmartToyIcon fontSize="small" color="action" />
|
||||
{t('blindTest.selectModels', '选择对比模型')}
|
||||
</Typography>
|
||||
|
||||
<Paper variant="outlined" sx={{ p: 3, borderRadius: 3, bgcolor: 'background.default' }}>
|
||||
<Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start' }}>
|
||||
{/* 模型A */}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||||
<Avatar sx={{ width: 24, height: 24, bgcolor: 'primary.main', fontSize: '0.75rem' }}>A</Avatar>
|
||||
<Typography variant="subtitle2" color="primary.main" fontWeight="bold">
|
||||
{t('blindTest.modelA', '模型 A')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<FormControl fullWidth size="small">
|
||||
<Select
|
||||
value={modelA?.id || ''}
|
||||
onChange={e => {
|
||||
const selected = models.find(m => m.id === e.target.value);
|
||||
setModelA(selected || null);
|
||||
}}
|
||||
displayEmpty
|
||||
disabled={modelsLoading}
|
||||
sx={{ bgcolor: 'background.paper' }}
|
||||
>
|
||||
<MenuItem value="" disabled>
|
||||
<Typography color="text.secondary">{t('common.select', '请选择')}</Typography>
|
||||
</MenuItem>
|
||||
{models.map(model => (
|
||||
<MenuItem key={model.id} value={model.id} disabled={model.id === modelB?.id}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="body2" fontWeight="medium">
|
||||
{model.modelName || model.modelId}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{model.providerName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ alignSelf: 'center', pt: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: '50%',
|
||||
bgcolor: 'action.hover',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: 'bold',
|
||||
color: 'text.secondary',
|
||||
border: '1px solid',
|
||||
borderColor: 'divider'
|
||||
}}
|
||||
>
|
||||
VS
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 模型B */}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
|
||||
<Avatar sx={{ width: 24, height: 24, bgcolor: 'secondary.main', fontSize: '0.75rem' }}>B</Avatar>
|
||||
<Typography variant="subtitle2" color="secondary.main" fontWeight="bold">
|
||||
{t('blindTest.modelB', '模型 B')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<FormControl fullWidth size="small">
|
||||
<Select
|
||||
value={modelB?.id || ''}
|
||||
onChange={e => {
|
||||
const selected = models.find(m => m.id === e.target.value);
|
||||
setModelB(selected || null);
|
||||
}}
|
||||
displayEmpty
|
||||
disabled={modelsLoading}
|
||||
sx={{ bgcolor: 'background.paper' }}
|
||||
>
|
||||
<MenuItem value="" disabled>
|
||||
<Typography color="text.secondary">{t('common.select', '请选择')}</Typography>
|
||||
</MenuItem>
|
||||
{models.map(model => (
|
||||
<MenuItem key={model.id} value={model.id} disabled={model.id === modelA?.id}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<Typography variant="body2" fontWeight="medium">
|
||||
{model.modelName || model.modelId}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{model.providerName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{models.length === 0 && !modelsLoading && (
|
||||
<Alert severity="warning" sx={{ mt: 2 }}>
|
||||
{t('blindTest.noModelsAvailable', '暂无可用模型，请先在设置中配置模型')}
|
||||
</Alert>
|
||||
)}
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
{/* 题目筛选 */}
|
||||
<Box>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600, mb: 1.5 }}>
|
||||
{t('blindTest.selectQuestions', '选择测试题目')}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{t('blindTest.questionTypeHint', '盲测任务仅支持简答题和开放题')}
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box sx={{ display: 'flex', gap: 2 }}>
|
||||
{/* 题型筛选 */}
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel>{t('blindTest.questionType', '题型')}</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
value={questionTypes}
|
||||
onChange={e => setQuestionTypes(e.target.value)}
|
||||
input={<OutlinedInput label={t('blindTest.questionType', '题型')} />}
|
||||
renderValue={selected => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map(value => (
|
||||
<Chip key={value} label={t(`eval.questionTypes.${value}`)} size="small" />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{QUESTION_TYPES.map(type => (
|
||||
<MenuItem key={type.value} value={type.value}>
|
||||
<Checkbox checked={questionTypes.includes(type.value)} />
|
||||
<ListItemText primary={t(type.labelKey)} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
{/* 标签筛选 */}
|
||||
{availableTags.length > 0 && (
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel>{t('blindTest.filterByTag', '按标签筛选')}</InputLabel>
|
||||
<Select
|
||||
multiple
|
||||
value={selectedTags}
|
||||
onChange={e => setSelectedTags(e.target.value)}
|
||||
input={<OutlinedInput label={t('blindTest.filterByTag', '按标签筛选')} />}
|
||||
renderValue={selected => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map(value => (
|
||||
<Chip key={value} label={value} size="small" />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
>
|
||||
{availableTags.map(tag => (
|
||||
<MenuItem key={tag} value={tag}>
|
||||
<Checkbox checked={selectedTags.includes(tag)} />
|
||||
<ListItemText primary={tag} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* 题目数量 */}
|
||||
<Box sx={{ p: 2, bgcolor: 'background.default', borderRadius: 2 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
type="number"
|
||||
label={t('blindTest.questionCount', '题目数量')}
|
||||
value={questionCount}
|
||||
onChange={e => setQuestionCount(Math.max(0, parseInt(e.target.value) || 0))}
|
||||
inputProps={{ min: 0, max: filteredCount }}
|
||||
sx={{ width: 150, bgcolor: 'background.paper' }}
|
||||
/>
|
||||
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{countLoading ? (
|
||||
<CircularProgress size={14} />
|
||||
) : (
|
||||
t('blindTest.availableQuestions', '可用题目：{{count}} 道', { count: filteredCount })
|
||||
)}
|
||||
</Typography>
|
||||
{filteredCount > 0 && (
|
||||
<Chip
|
||||
label={t('common.ready', '就绪')}
|
||||
size="small"
|
||||
color="success"
|
||||
variant="outlined"
|
||||
sx={{ height: 20 }}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: 'block' }}>
|
||||
{questionCount === 0
|
||||
? t('blindTest.useAllQuestions', '使用全部筛选结果')
|
||||
: t('blindTest.randomSample', '将随机抽取 {{count}} 道题目', { count: questionCount })}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions sx={{ p: 3, borderTop: '1px solid', borderColor: 'divider' }}>
|
||||
<Button onClick={handleClose} disabled={submitting} color="inherit" size="large">
|
||||
{t('common.cancel', '取消')}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
variant="contained"
|
||||
disabled={submitting || !modelA || !modelB || filteredCount === 0}
|
||||
startIcon={submitting ? <CircularProgress size={16} color="inherit" /> : <CompareArrowsIcon />}
|
||||
size="large"
|
||||
sx={{ px: 4 }}
|
||||
>
|
||||
{submitting ? t('blindTest.creating', '创建中...') : t('blindTest.startBlindTest', '开始盲测')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user