454 lines
13 KiB
TypeScript
454 lines
13 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
||
|
|
import { useForm } from 'react-hook-form';
|
||
|
|
import {
|
||
|
|
Box,
|
||
|
|
Container,
|
||
|
|
Typography,
|
||
|
|
Paper,
|
||
|
|
TextField,
|
||
|
|
Button,
|
||
|
|
Slider,
|
||
|
|
FormControl,
|
||
|
|
InputLabel,
|
||
|
|
Select,
|
||
|
|
MenuItem,
|
||
|
|
FormControlLabel,
|
||
|
|
Switch,
|
||
|
|
Fab,
|
||
|
|
Snackbar,
|
||
|
|
Alert,
|
||
|
|
Grid,
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
Chip,
|
||
|
|
Divider,
|
||
|
|
Stack,
|
||
|
|
CircularProgress,
|
||
|
|
} from '@mui/material';
|
||
|
|
import {
|
||
|
|
ArrowBack as ArrowBackIcon,
|
||
|
|
Search as SearchIcon,
|
||
|
|
Psychology as PsychologyIcon,
|
||
|
|
} from '@mui/icons-material';
|
||
|
|
import { useKnowledgeDetail } from '@/hooks/knowledge-hooks';
|
||
|
|
import knowledgeService from '@/services/knowledge_service';
|
||
|
|
import type { ITestRetrievalRequestBody } from '@/interfaces/request/knowledge';
|
||
|
|
import type { ITestingResult, ITestingChunk, ITestingDocument } from '@/interfaces/database/knowledge';
|
||
|
|
import KnowledgeBreadcrumbs from './components/KnowledgeBreadcrumbs';
|
||
|
|
|
||
|
|
interface TestFormData {
|
||
|
|
question: string;
|
||
|
|
similarity_threshold: number;
|
||
|
|
vector_similarity_weight: number;
|
||
|
|
rerank_id?: string;
|
||
|
|
top_k: number;
|
||
|
|
use_kg: boolean;
|
||
|
|
highlight: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ResultViewProps {
|
||
|
|
result: ITestingResult | null;
|
||
|
|
loading: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
function ResultView({ result, loading }: ResultViewProps) {
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<Paper sx={{ p: 3, textAlign: 'center' }}>
|
||
|
|
<CircularProgress />
|
||
|
|
<Typography variant="body2" sx={{ mt: 2 }}>
|
||
|
|
正在检索测试...
|
||
|
|
</Typography>
|
||
|
|
</Paper>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!result) {
|
||
|
|
return (
|
||
|
|
<Paper sx={{ p: 3, textAlign: 'center' }}>
|
||
|
|
<PsychologyIcon sx={{ fontSize: 48, color: 'text.secondary', mb: 2 }} />
|
||
|
|
<Typography variant="h6" color="text.secondary">
|
||
|
|
请输入测试问题并点击测试按钮
|
||
|
|
</Typography>
|
||
|
|
</Paper>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
{/* 测试结果概览 */}
|
||
|
|
<Paper sx={{ p: 3, mb: 3 }}>
|
||
|
|
<Typography variant="h6" gutterBottom>
|
||
|
|
测试结果概览
|
||
|
|
</Typography>
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
<Grid size={{xs: 12, sm: 4}}>
|
||
|
|
<Card>
|
||
|
|
<CardContent>
|
||
|
|
<Typography variant="h4" color="primary">
|
||
|
|
{result.total}
|
||
|
|
</Typography>
|
||
|
|
<Typography variant="body2" color="text.secondary">
|
||
|
|
匹配的文档块
|
||
|
|
</Typography>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{xs: 12, sm: 4}}>
|
||
|
|
<Card>
|
||
|
|
<CardContent>
|
||
|
|
<Typography variant="h4" color="secondary">
|
||
|
|
{result.documents?.length || 0}
|
||
|
|
</Typography>
|
||
|
|
<Typography variant="body2" color="text.secondary">
|
||
|
|
相关文档
|
||
|
|
</Typography>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
<Grid size={{xs: 12, sm: 4}}>
|
||
|
|
<Card>
|
||
|
|
<CardContent>
|
||
|
|
<Typography variant="h4" color="success.main">
|
||
|
|
{result.chunks?.length || 0}
|
||
|
|
</Typography>
|
||
|
|
<Typography variant="body2" color="text.secondary">
|
||
|
|
返回的块数
|
||
|
|
</Typography>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Paper>
|
||
|
|
|
||
|
|
{/* 匹配的文档块 */}
|
||
|
|
{result.chunks && result.chunks.length > 0 && (
|
||
|
|
<Paper sx={{ p: 3, mb: 3 }}>
|
||
|
|
<Typography variant="h6" gutterBottom>
|
||
|
|
匹配的文档块
|
||
|
|
</Typography>
|
||
|
|
<Stack spacing={2}>
|
||
|
|
{result.chunks.map((chunk: ITestingChunk, index: number) => (
|
||
|
|
<Card key={chunk.id || index} variant="outlined">
|
||
|
|
<CardContent>
|
||
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
|
||
|
|
<Typography variant="subtitle2" color="primary">
|
||
|
|
文档: {chunk.document_name}
|
||
|
|
</Typography>
|
||
|
|
<Stack direction="row" spacing={1}>
|
||
|
|
<Chip
|
||
|
|
label={`相似度: ${(chunk.similarity * 100).toFixed(1)}%`}
|
||
|
|
size="small"
|
||
|
|
color="primary"
|
||
|
|
variant="outlined"
|
||
|
|
/>
|
||
|
|
{chunk.vector_similarity && (
|
||
|
|
<Chip
|
||
|
|
label={`向量: ${(chunk.vector_similarity * 100).toFixed(1)}%`}
|
||
|
|
size="small"
|
||
|
|
color="secondary"
|
||
|
|
variant="outlined"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
{chunk.term_similarity && (
|
||
|
|
<Chip
|
||
|
|
label={`词项: ${(chunk.term_similarity * 100).toFixed(1)}%`}
|
||
|
|
size="small"
|
||
|
|
color="info"
|
||
|
|
variant="outlined"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</Stack>
|
||
|
|
</Box>
|
||
|
|
<Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
|
||
|
|
{chunk.content || '内容不可用'}
|
||
|
|
</Typography>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</Stack>
|
||
|
|
</Paper>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 相关文档统计 */}
|
||
|
|
{result.documents && result.documents.length > 0 && (
|
||
|
|
<Paper sx={{ p: 3 }}>
|
||
|
|
<Typography variant="h6" gutterBottom>
|
||
|
|
相关文档统计
|
||
|
|
</Typography>
|
||
|
|
<Stack spacing={1}>
|
||
|
|
{result.documents.map((doc: ITestingDocument, index: number) => (
|
||
|
|
<Box key={doc.doc_id || index} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||
|
|
<Typography variant="body2">
|
||
|
|
{doc.doc_name}
|
||
|
|
</Typography>
|
||
|
|
<Chip
|
||
|
|
label={`${doc.count} 个匹配块`}
|
||
|
|
size="small"
|
||
|
|
color="default"
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
))}
|
||
|
|
</Stack>
|
||
|
|
</Paper>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function KnowledgeBaseTesting() {
|
||
|
|
const { id } = useParams<{ id: string }>();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [testResult, setTestResult] = useState<ITestingResult | null>(null);
|
||
|
|
const [testing, setTesting] = useState(false);
|
||
|
|
const [snackbar, setSnackbar] = useState<{
|
||
|
|
open: boolean;
|
||
|
|
message: string;
|
||
|
|
severity: 'success' | 'error';
|
||
|
|
}>({
|
||
|
|
open: false,
|
||
|
|
message: '',
|
||
|
|
severity: 'success',
|
||
|
|
});
|
||
|
|
|
||
|
|
// 获取知识库详情
|
||
|
|
const { knowledge, loading: detailLoading } = useKnowledgeDetail(id || '');
|
||
|
|
|
||
|
|
// 测试表单
|
||
|
|
const form = useForm<TestFormData>({
|
||
|
|
defaultValues: {
|
||
|
|
question: '',
|
||
|
|
similarity_threshold: 0.2,
|
||
|
|
vector_similarity_weight: 0.3,
|
||
|
|
rerank_id: '',
|
||
|
|
top_k: 6,
|
||
|
|
use_kg: false,
|
||
|
|
highlight: true,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const { register, handleSubmit, watch, setValue, formState: { errors } } = form;
|
||
|
|
|
||
|
|
const handleTestSubmit = async (data: TestFormData) => {
|
||
|
|
if (!id) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
setTesting(true);
|
||
|
|
|
||
|
|
const requestBody: ITestRetrievalRequestBody = {
|
||
|
|
question: data.question,
|
||
|
|
similarity_threshold: data.similarity_threshold,
|
||
|
|
vector_similarity_weight: data.vector_similarity_weight,
|
||
|
|
top_k: data.top_k,
|
||
|
|
use_kg: data.use_kg,
|
||
|
|
highlight: data.highlight,
|
||
|
|
kb_id: [id],
|
||
|
|
};
|
||
|
|
|
||
|
|
if (data.rerank_id && data.rerank_id.trim()) {
|
||
|
|
requestBody.rerank_id = data.rerank_id;
|
||
|
|
}
|
||
|
|
|
||
|
|
const response = await knowledgeService.retrievalTest(requestBody);
|
||
|
|
|
||
|
|
if (response.data.code === 0) {
|
||
|
|
setTestResult(response.data.data);
|
||
|
|
setSnackbar({
|
||
|
|
open: true,
|
||
|
|
message: '检索测试完成',
|
||
|
|
severity: 'success',
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
throw new Error(response.data.message || '检索测试失败');
|
||
|
|
}
|
||
|
|
} catch (error: any) {
|
||
|
|
setSnackbar({
|
||
|
|
open: true,
|
||
|
|
message: error.message || '检索测试失败',
|
||
|
|
severity: 'error',
|
||
|
|
});
|
||
|
|
} finally {
|
||
|
|
setTesting(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleBackToDetail = () => {
|
||
|
|
navigate(`/knowledge/${id}`);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleCloseSnackbar = () => {
|
||
|
|
setSnackbar(prev => ({ ...prev, open: false }));
|
||
|
|
};
|
||
|
|
|
||
|
|
if (detailLoading) {
|
||
|
|
return (
|
||
|
|
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||
|
|
<Typography>加载中...</Typography>
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container maxWidth="lg" sx={{ py: 4 }}>
|
||
|
|
{/* 面包屑导航 */}
|
||
|
|
<KnowledgeBreadcrumbs knowledge={knowledge} />
|
||
|
|
|
||
|
|
<Box sx={{ mb: 3 }}>
|
||
|
|
<Typography variant="h4" gutterBottom>
|
||
|
|
知识库测试
|
||
|
|
</Typography>
|
||
|
|
<Typography variant="subtitle1" color="text.secondary">
|
||
|
|
{knowledge?.name}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Grid container spacing={3}>
|
||
|
|
{/* 测试表单 */}
|
||
|
|
<Grid size={{xs: 12, sm: 4}}>
|
||
|
|
<Paper sx={{ p: 3, position: 'sticky', top: 20 }}>
|
||
|
|
<Typography variant="h6" gutterBottom>
|
||
|
|
测试配置
|
||
|
|
</Typography>
|
||
|
|
|
||
|
|
<Box component="form" onSubmit={handleSubmit(handleTestSubmit)} sx={{ mt: 2 }}>
|
||
|
|
<TextField
|
||
|
|
{...register('question', { required: '请输入测试问题' })}
|
||
|
|
label="测试问题"
|
||
|
|
multiline
|
||
|
|
rows={3}
|
||
|
|
fullWidth
|
||
|
|
margin="normal"
|
||
|
|
error={!!errors.question}
|
||
|
|
helperText={errors.question?.message}
|
||
|
|
placeholder="请输入您想要测试的问题..."
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Box sx={{ mt: 3 }}>
|
||
|
|
<Typography gutterBottom>
|
||
|
|
相似度阈值: {watch('similarity_threshold')}
|
||
|
|
</Typography>
|
||
|
|
<Slider
|
||
|
|
{...register('similarity_threshold')}
|
||
|
|
value={watch('similarity_threshold')}
|
||
|
|
onChange={(_, value) => setValue('similarity_threshold', value as number)}
|
||
|
|
min={0}
|
||
|
|
max={1}
|
||
|
|
step={0.1}
|
||
|
|
marks
|
||
|
|
valueLabelDisplay="auto"
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box sx={{ mt: 3 }}>
|
||
|
|
<Typography gutterBottom>
|
||
|
|
向量相似度权重: {watch('vector_similarity_weight')}
|
||
|
|
</Typography>
|
||
|
|
<Slider
|
||
|
|
{...register('vector_similarity_weight')}
|
||
|
|
value={watch('vector_similarity_weight')}
|
||
|
|
onChange={(_, value) => setValue('vector_similarity_weight', value as number)}
|
||
|
|
min={0}
|
||
|
|
max={1}
|
||
|
|
step={0.1}
|
||
|
|
marks
|
||
|
|
valueLabelDisplay="auto"
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
{...register('top_k')}
|
||
|
|
label="返回结果数量"
|
||
|
|
type="number"
|
||
|
|
fullWidth
|
||
|
|
margin="normal"
|
||
|
|
inputProps={{ min: 1, max: 50 }}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<TextField
|
||
|
|
{...register('rerank_id')}
|
||
|
|
label="重排序模型ID (可选)"
|
||
|
|
fullWidth
|
||
|
|
margin="normal"
|
||
|
|
placeholder="留空使用默认设置"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<FormControlLabel
|
||
|
|
control={
|
||
|
|
<Switch
|
||
|
|
{...register('use_kg')}
|
||
|
|
checked={watch('use_kg')}
|
||
|
|
onChange={(e) => setValue('use_kg', e.target.checked)}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
label="使用知识图谱"
|
||
|
|
sx={{ mt: 2 }}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<FormControlLabel
|
||
|
|
control={
|
||
|
|
<Switch
|
||
|
|
{...register('highlight')}
|
||
|
|
checked={watch('highlight')}
|
||
|
|
onChange={(e) => setValue('highlight', e.target.checked)}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
label="高亮显示"
|
||
|
|
sx={{ mt: 1 }}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
variant="contained"
|
||
|
|
fullWidth
|
||
|
|
size="large"
|
||
|
|
disabled={testing}
|
||
|
|
startIcon={testing ? <CircularProgress size={20} /> : <SearchIcon />}
|
||
|
|
sx={{ mt: 3 }}
|
||
|
|
>
|
||
|
|
{testing ? '测试中...' : '开始测试'}
|
||
|
|
</Button>
|
||
|
|
</Box>
|
||
|
|
</Paper>
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
{/* 测试结果 */}
|
||
|
|
<Grid size={{xs: 12, md: 8}}>
|
||
|
|
<ResultView result={testResult} loading={testing} />
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
{/* 返回按钮 */}
|
||
|
|
<Fab
|
||
|
|
color="primary"
|
||
|
|
aria-label="返回知识库详情"
|
||
|
|
onClick={handleBackToDetail}
|
||
|
|
sx={{
|
||
|
|
position: 'fixed',
|
||
|
|
bottom: 16,
|
||
|
|
right: 16,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ArrowBackIcon />
|
||
|
|
</Fab>
|
||
|
|
|
||
|
|
{/* 消息提示 */}
|
||
|
|
<Snackbar
|
||
|
|
open={snackbar.open}
|
||
|
|
autoHideDuration={6000}
|
||
|
|
onClose={handleCloseSnackbar}
|
||
|
|
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
|
||
|
|
>
|
||
|
|
<Alert
|
||
|
|
onClose={handleCloseSnackbar}
|
||
|
|
severity={snackbar.severity}
|
||
|
|
sx={{ width: '100%' }}
|
||
|
|
>
|
||
|
|
{snackbar.message}
|
||
|
|
</Alert>
|
||
|
|
</Snackbar>
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default KnowledgeBaseTesting;
|