546 lines
14 KiB
Vue
546 lines
14 KiB
Vue
<template>
|
||
<div class="rag-lab-page">
|
||
<div class="page-header">
|
||
<h1 class="page-title">RAG 实验室</h1>
|
||
<p class="page-desc">测试检索增强生成效果，查看检索结果和 AI 响应。</p>
|
||
</div>
|
||
|
||
<el-row :gutter="24">
|
||
<el-col :xs="24" :sm="24" :md="10" :lg="10">
|
||
<el-card shadow="hover" class="input-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<div class="header-left">
|
||
<div class="icon-wrapper">
|
||
<el-icon><Edit /></el-icon>
|
||
</div>
|
||
<span class="header-title">调试输入</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<el-form label-position="top">
|
||
<el-form-item label="查询 Query">
|
||
<el-input
|
||
v-model="query"
|
||
type="textarea"
|
||
:rows="4"
|
||
placeholder="输入测试问题..."
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="知识库范围">
|
||
<el-select
|
||
v-model="kbIds"
|
||
multiple
|
||
placeholder="请选择知识库"
|
||
style="width: 100%"
|
||
:loading="kbLoading"
|
||
:teleported="true"
|
||
:popper-options="{ modifiers: [{ name: 'flip', enabled: true }, { name: 'preventOverflow', enabled: true }] }"
|
||
>
|
||
<el-option
|
||
v-for="kb in knowledgeBases"
|
||
:key="kb.id"
|
||
:label="`${kb.name} (${kb.documentCount}个文档)`"
|
||
:value="kb.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="LLM 模型">
|
||
<LLMSelector
|
||
v-model="llmProvider"
|
||
:providers="llmProviders"
|
||
:loading="llmLoading"
|
||
:current-provider="currentLLMProvider"
|
||
placeholder="使用默认配置"
|
||
clearable
|
||
@change="handleLLMChange"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="参数配置">
|
||
<div class="param-item">
|
||
<span class="label">Top-K</span>
|
||
<el-input-number v-model="topK" :min="1" :max="10" />
|
||
</div>
|
||
<div class="param-item">
|
||
<span class="label">Score Threshold</span>
|
||
<el-slider
|
||
v-model="scoreThreshold"
|
||
:min="0"
|
||
:max="1"
|
||
:step="0.1"
|
||
show-input
|
||
/>
|
||
</div>
|
||
<div class="param-item">
|
||
<span class="label">生成 AI 回复</span>
|
||
<el-switch v-model="generateResponse" />
|
||
</div>
|
||
<div class="param-item" v-if="generateResponse">
|
||
<span class="label">流式输出</span>
|
||
<el-switch v-model="streamOutput" />
|
||
</div>
|
||
</el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
block
|
||
@click="handleRun"
|
||
:loading="loading || streaming"
|
||
>
|
||
{{ streaming ? '生成中...' : '运行实验' }}
|
||
</el-button>
|
||
<el-button
|
||
v-if="streaming"
|
||
type="danger"
|
||
block
|
||
@click="handleStopStream"
|
||
style="margin-top: 10px;"
|
||
>
|
||
停止生成
|
||
</el-button>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<el-col :xs="24" :sm="24" :md="14" :lg="14">
|
||
<el-tabs v-model="activeTab" type="border-card" class="result-tabs">
|
||
<el-tab-pane label="召回片段" name="retrieval">
|
||
<div v-if="retrievalResults.length === 0" class="placeholder-text">
|
||
暂无实验数据
|
||
</div>
|
||
<div v-else class="result-list">
|
||
<el-card
|
||
v-for="(item, index) in retrievalResults"
|
||
:key="index"
|
||
class="result-card"
|
||
shadow="never"
|
||
>
|
||
<div class="result-header">
|
||
<el-tag size="small" type="primary">Score: {{ item.score.toFixed(4) }}</el-tag>
|
||
<span class="source">来源: {{ item.source }}</span>
|
||
</div>
|
||
<div class="result-content">{{ item.content }}</div>
|
||
</el-card>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="最终 Prompt" name="prompt">
|
||
<div v-if="!finalPrompt" class="placeholder-text">
|
||
等待实验运行...
|
||
</div>
|
||
<div v-else class="prompt-view">
|
||
<pre><code>{{ finalPrompt }}</code></pre>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="AI 回复" name="ai-response" v-if="generateResponse">
|
||
<StreamOutput
|
||
v-if="streamOutput"
|
||
:content="streamContent"
|
||
:is-streaming="streaming"
|
||
:error="streamError"
|
||
/>
|
||
<AIResponseViewer
|
||
v-else
|
||
:response="aiResponse"
|
||
/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="诊断信息" name="diagnostics">
|
||
<div v-if="!diagnostics" class="placeholder-text">
|
||
等待实验运行...
|
||
</div>
|
||
<div v-else class="diagnostics-view">
|
||
<pre><code>{{ JSON.stringify(diagnostics, null, 2) }}</code></pre>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { Edit } from '@element-plus/icons-vue'
|
||
import { runRagExperiment, createSSEConnection, type AIResponse, type RetrievalResult } from '@/api/rag'
|
||
import { getLLMProviders, getLLMConfig, type LLMProviderInfo } from '@/api/llm'
|
||
import { listKnowledgeBases } from '@/api/kb'
|
||
import { useRagLabStore } from '@/stores/ragLab'
|
||
import { storeToRefs } from 'pinia'
|
||
import AIResponseViewer from '@/components/rag/AIResponseViewer.vue'
|
||
import StreamOutput from '@/components/rag/StreamOutput.vue'
|
||
import LLMSelector from '@/components/rag/LLMSelector.vue'
|
||
|
||
interface KnowledgeBase {
|
||
id: string
|
||
name: string
|
||
documentCount: number
|
||
}
|
||
|
||
const ragLabStore = useRagLabStore()
|
||
const {
|
||
query,
|
||
kbIds,
|
||
llmProvider,
|
||
topK,
|
||
scoreThreshold,
|
||
generateResponse,
|
||
streamOutput
|
||
} = storeToRefs(ragLabStore)
|
||
|
||
const loading = ref(false)
|
||
const kbLoading = ref(false)
|
||
const llmLoading = ref(false)
|
||
const streaming = ref(false)
|
||
const activeTab = ref('retrieval')
|
||
const knowledgeBases = ref<KnowledgeBase[]>([])
|
||
const llmProviders = ref<LLMProviderInfo[]>([])
|
||
const currentLLMProvider = ref('')
|
||
|
||
const retrievalResults = ref<RetrievalResult[]>([])
|
||
const finalPrompt = ref('')
|
||
const aiResponse = ref<AIResponse | null>(null)
|
||
const diagnostics = ref<any>(null)
|
||
const streamContent = ref('')
|
||
const streamError = ref<string | null>(null)
|
||
|
||
const totalLatencyMs = ref(0)
|
||
|
||
let abortStream: (() => void) | null = null
|
||
|
||
const fetchKnowledgeBases = async () => {
|
||
kbLoading.value = true
|
||
try {
|
||
const res: any = await listKnowledgeBases()
|
||
knowledgeBases.value = res.data || []
|
||
} catch (error) {
|
||
console.error('Failed to fetch knowledge bases:', error)
|
||
} finally {
|
||
kbLoading.value = false
|
||
}
|
||
}
|
||
|
||
const fetchLLMProviders = async () => {
|
||
llmLoading.value = true
|
||
try {
|
||
const [providersRes, configRes]: [any, any] = await Promise.all([
|
||
getLLMProviders(),
|
||
getLLMConfig()
|
||
])
|
||
llmProviders.value = providersRes?.providers || []
|
||
currentLLMProvider.value = configRes?.provider || ''
|
||
} catch (error) {
|
||
console.error('Failed to fetch LLM providers:', error)
|
||
} finally {
|
||
llmLoading.value = false
|
||
}
|
||
}
|
||
|
||
const handleLLMChange = (provider: LLMProviderInfo | undefined) => {
|
||
llmProvider.value = provider?.name || ''
|
||
}
|
||
|
||
const handleRun = async () => {
|
||
if (!query.value.trim()) {
|
||
ElMessage.warning('请输入查询 Query')
|
||
return
|
||
}
|
||
|
||
clearResults()
|
||
|
||
if (streamOutput.value && generateResponse.value) {
|
||
await runStreamExperiment()
|
||
} else {
|
||
await runNormalExperiment()
|
||
}
|
||
}
|
||
|
||
const runNormalExperiment = async () => {
|
||
loading.value = true
|
||
try {
|
||
const res: any = await runRagExperiment({
|
||
query: query.value,
|
||
kb_ids: kbIds.value,
|
||
top_k: topK.value,
|
||
score_threshold: scoreThreshold.value,
|
||
llm_provider: llmProvider.value || undefined,
|
||
generate_response: generateResponse.value
|
||
})
|
||
|
||
retrievalResults.value = res.retrieval_results || res.retrievalResults || []
|
||
finalPrompt.value = res.final_prompt || res.finalPrompt || ''
|
||
aiResponse.value = res.ai_response || res.aiResponse || null
|
||
diagnostics.value = res.diagnostics || null
|
||
totalLatencyMs.value = res.total_latency_ms || res.totalLatencyMs || 0
|
||
|
||
if (generateResponse.value) {
|
||
activeTab.value = 'ai-response'
|
||
} else {
|
||
activeTab.value = 'retrieval'
|
||
}
|
||
|
||
ElMessage.success('实验运行成功')
|
||
} catch (err: any) {
|
||
console.error(err)
|
||
ElMessage.error(err?.message || '实验运行失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
const runStreamExperiment = async () => {
|
||
streaming.value = true
|
||
streamContent.value = ''
|
||
streamError.value = null
|
||
activeTab.value = 'ai-response'
|
||
|
||
abortStream = createSSEConnection(
|
||
'/admin/rag/experiments/stream',
|
||
{
|
||
query: query.value,
|
||
kb_ids: kbIds.value,
|
||
top_k: topK.value,
|
||
score_threshold: scoreThreshold.value,
|
||
llm_provider: llmProvider.value || undefined,
|
||
generate_response: true
|
||
},
|
||
(data: string) => {
|
||
try {
|
||
const parsed = JSON.parse(data)
|
||
|
||
if (parsed.type === 'content') {
|
||
streamContent.value += parsed.content || ''
|
||
} else if (parsed.type === 'retrieval') {
|
||
retrievalResults.value = parsed.results || []
|
||
} else if (parsed.type === 'prompt') {
|
||
finalPrompt.value = parsed.prompt || ''
|
||
} else if (parsed.type === 'complete') {
|
||
aiResponse.value = {
|
||
content: streamContent.value,
|
||
prompt_tokens: parsed.prompt_tokens,
|
||
completion_tokens: parsed.completion_tokens,
|
||
total_tokens: parsed.total_tokens,
|
||
latency_ms: parsed.latency_ms,
|
||
model: parsed.model
|
||
}
|
||
totalLatencyMs.value = parsed.total_latency_ms || 0
|
||
streaming.value = false
|
||
ElMessage.success('生成完成')
|
||
} else if (parsed.type === 'error') {
|
||
streamError.value = parsed.message || '流式输出错误'
|
||
streaming.value = false
|
||
ElMessage.error(streamError.value || '未知错误')
|
||
}
|
||
} catch {
|
||
streamContent.value += data
|
||
}
|
||
},
|
||
(error: Error) => {
|
||
streaming.value = false
|
||
streamError.value = error.message
|
||
ElMessage.error(error.message)
|
||
},
|
||
() => {
|
||
streaming.value = false
|
||
}
|
||
)
|
||
}
|
||
|
||
const handleStopStream = () => {
|
||
if (abortStream) {
|
||
abortStream()
|
||
abortStream = null
|
||
}
|
||
streaming.value = false
|
||
ElMessage.info('已停止生成')
|
||
}
|
||
|
||
const clearResults = () => {
|
||
retrievalResults.value = []
|
||
finalPrompt.value = ''
|
||
aiResponse.value = null
|
||
diagnostics.value = null
|
||
streamContent.value = ''
|
||
streamError.value = null
|
||
totalLatencyMs.value = 0
|
||
}
|
||
|
||
onMounted(() => {
|
||
fetchKnowledgeBases()
|
||
fetchLLMProviders()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.rag-lab-page {
|
||
padding: 24px;
|
||
min-height: calc(100vh - 60px);
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.page-title {
|
||
margin: 0 0 8px 0;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
letter-spacing: -0.5px;
|
||
}
|
||
|
||
.page-desc {
|
||
margin: 0;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.input-card {
|
||
animation: fadeInUp 0.5s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0;
|
||
}
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.icon-wrapper {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--primary-lighter);
|
||
border-radius: 10px;
|
||
color: var(--primary-color);
|
||
font-size: 18px;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.param-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
gap: 16px;
|
||
}
|
||
|
||
.param-item .label {
|
||
width: 140px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.param-item :deep(.el-slider) {
|
||
flex: 1;
|
||
}
|
||
|
||
.result-tabs {
|
||
animation: fadeInUp 0.6s ease-out;
|
||
}
|
||
|
||
.result-tabs :deep(.el-tabs__header) {
|
||
border-radius: 12px 12px 0 0;
|
||
}
|
||
|
||
.placeholder-text {
|
||
color: var(--text-tertiary);
|
||
text-align: center;
|
||
padding: 60px 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.result-list {
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
.result-card {
|
||
margin-bottom: 16px;
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.result-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.source {
|
||
font-size: 12px;
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.result-content {
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.prompt-view,
|
||
.diagnostics-view {
|
||
background-color: var(--bg-tertiary);
|
||
padding: 16px;
|
||
border-radius: 10px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.prompt-view pre,
|
||
.diagnostics-view pre {
|
||
margin: 0;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.rag-lab-page {
|
||
padding: 16px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.param-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
}
|
||
|
||
.param-item .label {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|