PingChuan
307 lines
11 KiB
TypeScript
307 lines
11 KiB
TypeScript
import { SearchOutlined, FileSearchOutlined } from '@ant-design/icons';
|
|
import { Button, Tag, Input, Slider, Spin, Select, Flex } from 'antd';
|
|
import type { RetrieveRecord } from '~/api/dify-dataset/type';
|
|
import { useRetrieveTest } from '~/hooks/dify-dataset-manager/retrieve-test';
|
|
import type { RetrieveTestProps } from '~/types/dify-dataset-manager/retrieve-test';
|
|
|
|
// 颜色常量
|
|
const colors = {
|
|
bgContainer: '#fff',
|
|
bgLayout: '#f5f5f5',
|
|
bgElevated: '#fafafa',
|
|
border: '#e8e8e8',
|
|
text: '#262626',
|
|
textSecondary: '#8c8c8c',
|
|
textTertiary: '#bfbfbf',
|
|
textQuaternary: '#d9d9d9',
|
|
fillTertiary: '#f0f0f0',
|
|
};
|
|
|
|
/**
|
|
* 检索结果项组件
|
|
*/
|
|
function ResultItem({ record, index }: { record: RetrieveRecord; index: number }) {
|
|
const scorePercent = (record.score * 100).toFixed(1);
|
|
const scoreColor = record.score > 0.8 ? '#52c41a' : record.score > 0.5 ? '#faad14' : '#666';
|
|
|
|
return (
|
|
<Flex
|
|
vertical
|
|
gap={12}
|
|
style={{
|
|
padding: 16,
|
|
background: colors.bgContainer,
|
|
borderRadius: 8,
|
|
border: `1px solid ${colors.border}`,
|
|
}}
|
|
>
|
|
<Flex justify="space-between" align="center">
|
|
<Flex gap={8} align="center">
|
|
<Tag style={{ background: scoreColor, color: '#fff', border: 'none' }}>
|
|
{scorePercent}%
|
|
</Tag>
|
|
<span style={{ color: colors.textSecondary, fontSize: 12 }}>
|
|
#{index + 1} · {record.segment.word_count} 字 · 命中 {record.segment.hit_count} 次
|
|
</span>
|
|
</Flex>
|
|
{record.segment.document && (
|
|
<span style={{ color: colors.textTertiary, fontSize: 12 }}>
|
|
来源: {record.segment.document.name}
|
|
</span>
|
|
)}
|
|
</Flex>
|
|
<div style={{
|
|
color: colors.text,
|
|
fontSize: 14,
|
|
lineHeight: 1.6,
|
|
whiteSpace: 'pre-wrap',
|
|
}}>
|
|
{record.segment.content.length > 500
|
|
? record.segment.content.substring(0, 500) + '...'
|
|
: record.segment.content}
|
|
</div>
|
|
{record.segment.answer && (
|
|
<Flex
|
|
vertical
|
|
gap={4}
|
|
style={{
|
|
padding: 12,
|
|
background: colors.fillTertiary,
|
|
borderRadius: 6,
|
|
}}
|
|
>
|
|
<span style={{ color: colors.textSecondary, fontSize: 12 }}>
|
|
答案:
|
|
</span>
|
|
<span style={{ color: colors.text, fontSize: 14 }}>
|
|
{record.segment.answer.length > 200
|
|
? record.segment.answer.substring(0, 200) + '...'
|
|
: record.segment.answer}
|
|
</span>
|
|
</Flex>
|
|
)}
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 召回测试组件
|
|
*/
|
|
export default function RetrieveTest({ datasetId }: RetrieveTestProps) {
|
|
const {
|
|
searchQuery,
|
|
setSearchQuery,
|
|
retrieveResults,
|
|
retrieving,
|
|
searchMethod,
|
|
setSearchMethod,
|
|
topK,
|
|
setTopK,
|
|
handleRetrieve,
|
|
} = useRetrieveTest(datasetId);
|
|
|
|
// 检索方式选项（只有3种）
|
|
const searchMethodOptions = [
|
|
{ label: '向量检索', value: 'semantic_search' },
|
|
{ label: '全文检索', value: 'full_text_search' },
|
|
{ label: '混合检索', value: 'hybrid_search' },
|
|
];
|
|
|
|
return (
|
|
<Flex
|
|
style={{
|
|
height: '100%',
|
|
minHeight: 'calc(100vh - 120px)',
|
|
}}
|
|
>
|
|
{/* 左侧面板 - 输入区域 */}
|
|
<Flex
|
|
vertical
|
|
gap={16}
|
|
style={{
|
|
width: 400,
|
|
minWidth: 400,
|
|
padding: 20,
|
|
background: colors.bgLayout,
|
|
borderRight: `1px solid ${colors.border}`,
|
|
}}
|
|
>
|
|
{/* 标题 */}
|
|
<Flex vertical gap={4}>
|
|
<h2 style={{
|
|
margin: 0,
|
|
fontSize: 18,
|
|
fontWeight: 600,
|
|
color: colors.text,
|
|
}}>
|
|
召回测试
|
|
</h2>
|
|
<span style={{
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
}}>
|
|
根据给定的查询文本测试知识库召回效果
|
|
</span>
|
|
</Flex>
|
|
|
|
{/* 查询输入区 */}
|
|
<Flex vertical gap={8}>
|
|
<Flex justify="space-between" align="center">
|
|
<span style={{
|
|
fontSize: 13,
|
|
color: colors.text,
|
|
fontWeight: 500,
|
|
}}>
|
|
源文本
|
|
</span>
|
|
<Select
|
|
value={searchMethod}
|
|
onChange={(value) => setSearchMethod(value as any)}
|
|
options={searchMethodOptions}
|
|
style={{ width: 130 }}
|
|
size="small"
|
|
/>
|
|
</Flex>
|
|
<Input.TextArea
|
|
placeholder="请输入文本，建议使用简短的陈述句。"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onPressEnter={(e) => {
|
|
if (!e.shiftKey) {
|
|
e.preventDefault();
|
|
handleRetrieve();
|
|
}
|
|
}}
|
|
autoSize={{ minRows: 6, maxRows: 12 }}
|
|
style={{
|
|
background: colors.bgContainer,
|
|
resize: 'none',
|
|
}}
|
|
/>
|
|
<Flex justify="space-between" align="center">
|
|
<span style={{
|
|
fontSize: 12,
|
|
color: colors.textTertiary,
|
|
}}>
|
|
{searchQuery.length} / 200
|
|
</span>
|
|
<Button
|
|
type="primary"
|
|
icon={<SearchOutlined />}
|
|
onClick={handleRetrieve}
|
|
loading={retrieving}
|
|
>
|
|
测试
|
|
</Button>
|
|
</Flex>
|
|
</Flex>
|
|
|
|
{/* 检索设置 */}
|
|
<Flex vertical gap={12}>
|
|
<span style={{
|
|
fontSize: 13,
|
|
color: colors.text,
|
|
fontWeight: 500,
|
|
}}>
|
|
检索设置
|
|
</span>
|
|
<Flex align="center" gap={12}>
|
|
<span style={{
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
whiteSpace: 'nowrap',
|
|
}}>
|
|
返回数量 (Top K):
|
|
</span>
|
|
<Slider
|
|
value={topK}
|
|
onChange={setTopK}
|
|
min={1}
|
|
max={20}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
<span style={{
|
|
fontSize: 13,
|
|
color: colors.text,
|
|
minWidth: 24,
|
|
textAlign: 'right',
|
|
}}>
|
|
{topK}
|
|
</span>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|
|
|
|
{/* 右侧面板 - 结果展示 */}
|
|
<Flex
|
|
vertical
|
|
flex={1}
|
|
gap={16}
|
|
style={{
|
|
padding: 20,
|
|
background: colors.bgElevated,
|
|
overflow: 'auto',
|
|
}}
|
|
>
|
|
{retrieving ? (
|
|
<Flex
|
|
flex={1}
|
|
align="center"
|
|
justify="center"
|
|
vertical
|
|
gap={12}
|
|
>
|
|
<Spin size="large" />
|
|
<span style={{ color: colors.textSecondary }}>
|
|
检索中...
|
|
</span>
|
|
</Flex>
|
|
) : retrieveResults.length === 0 ? (
|
|
<Flex
|
|
flex={1}
|
|
align="center"
|
|
justify="center"
|
|
vertical
|
|
gap={12}
|
|
>
|
|
<FileSearchOutlined style={{
|
|
fontSize: 48,
|
|
color: colors.textQuaternary,
|
|
}} />
|
|
<span style={{ color: colors.textTertiary }}>
|
|
召回测试结果将展示在这里
|
|
</span>
|
|
</Flex>
|
|
) : (
|
|
<>
|
|
<Flex justify="space-between" align="center">
|
|
<span style={{
|
|
fontSize: 14,
|
|
color: colors.text,
|
|
fontWeight: 500,
|
|
}}>
|
|
检索结果
|
|
</span>
|
|
<span style={{
|
|
fontSize: 13,
|
|
color: colors.textSecondary,
|
|
}}>
|
|
共找到 {retrieveResults.length} 条结果
|
|
</span>
|
|
</Flex>
|
|
<Flex vertical gap={12}>
|
|
{retrieveResults.map((record, index) => (
|
|
<ResultItem
|
|
key={record.segment.id}
|
|
record={record}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</Flex>
|
|
</>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
}
|