feat: RAG实验室参数持久化与LLM选择器优化 [AC-ASA-05, AC-ASA-14, AC-ASA-15]
- 新增ragLab store,使用localStorage持久化RAG实验参数 - 修复LLM选择器placeholder显示逻辑,正确显示当前配置 - 添加'已选择'标签区分用户选择与系统默认配置 - 优化下拉框样式防止标签被遮挡
This commit is contained in:
parent
4579159c0a
commit
08e84d194f
|
|
@ -0,0 +1,41 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
export const useRagLabStore = defineStore('ragLab', () => {
|
||||
const query = ref(localStorage.getItem('ragLab_query') || '')
|
||||
const kbIds = ref<string[]>(JSON.parse(localStorage.getItem('ragLab_kbIds') || '[]'))
|
||||
const llmProvider = ref(localStorage.getItem('ragLab_llmProvider') || '')
|
||||
const topK = ref(parseInt(localStorage.getItem('ragLab_topK') || '3', 10))
|
||||
const scoreThreshold = ref(parseFloat(localStorage.getItem('ragLab_scoreThreshold') || '0.5'))
|
||||
const generateResponse = ref(localStorage.getItem('ragLab_generateResponse') !== 'false')
|
||||
const streamOutput = ref(localStorage.getItem('ragLab_streamOutput') === 'true')
|
||||
|
||||
watch(query, (val) => localStorage.setItem('ragLab_query', val))
|
||||
watch(kbIds, (val) => localStorage.setItem('ragLab_kbIds', JSON.stringify(val)), { deep: true })
|
||||
watch(llmProvider, (val) => localStorage.setItem('ragLab_llmProvider', val))
|
||||
watch(topK, (val) => localStorage.setItem('ragLab_topK', String(val)))
|
||||
watch(scoreThreshold, (val) => localStorage.setItem('ragLab_scoreThreshold', String(val)))
|
||||
watch(generateResponse, (val) => localStorage.setItem('ragLab_generateResponse', String(val)))
|
||||
watch(streamOutput, (val) => localStorage.setItem('ragLab_streamOutput', String(val)))
|
||||
|
||||
const clearParams = () => {
|
||||
query.value = ''
|
||||
kbIds.value = []
|
||||
llmProvider.value = ''
|
||||
topK.value = 3
|
||||
scoreThreshold.value = 0.5
|
||||
generateResponse.value = true
|
||||
streamOutput.value = false
|
||||
}
|
||||
|
||||
return {
|
||||
query,
|
||||
kbIds,
|
||||
llmProvider,
|
||||
topK,
|
||||
scoreThreshold,
|
||||
generateResponse,
|
||||
streamOutput,
|
||||
clearParams
|
||||
}
|
||||
})
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<el-form label-position="top">
|
||||
<el-form-item label="查询 Query">
|
||||
<el-input
|
||||
v-model="queryParams.query"
|
||||
v-model="query"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="输入测试问题..."
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="知识库范围">
|
||||
<el-select
|
||||
v-model="queryParams.kbIds"
|
||||
v-model="kbIds"
|
||||
multiple
|
||||
placeholder="请选择知识库"
|
||||
style="width: 100%"
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="LLM 模型">
|
||||
<LLMSelector
|
||||
v-model="queryParams.llmProvider"
|
||||
v-model="llmProvider"
|
||||
:providers="llmProviders"
|
||||
:loading="llmLoading"
|
||||
:current-provider="currentLLMProvider"
|
||||
|
|
@ -59,12 +59,12 @@
|
|||
<el-form-item label="参数配置">
|
||||
<div class="param-item">
|
||||
<span class="label">Top-K</span>
|
||||
<el-input-number v-model="queryParams.topK" :min="1" :max="10" />
|
||||
<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="queryParams.scoreThreshold"
|
||||
v-model="scoreThreshold"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.1"
|
||||
|
|
@ -73,11 +73,11 @@
|
|||
</div>
|
||||
<div class="param-item">
|
||||
<span class="label">生成 AI 回复</span>
|
||||
<el-switch v-model="queryParams.generateResponse" />
|
||||
<el-switch v-model="generateResponse" />
|
||||
</div>
|
||||
<div class="param-item" v-if="queryParams.generateResponse">
|
||||
<div class="param-item" v-if="generateResponse">
|
||||
<span class="label">流式输出</span>
|
||||
<el-switch v-model="queryParams.streamOutput" />
|
||||
<el-switch v-model="streamOutput" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
|
|
@ -130,9 +130,9 @@
|
|||
<pre><code>{{ finalPrompt }}</code></pre>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="AI 回复" name="ai-response" v-if="queryParams.generateResponse">
|
||||
<el-tab-pane label="AI 回复" name="ai-response" v-if="generateResponse">
|
||||
<StreamOutput
|
||||
v-if="queryParams.streamOutput"
|
||||
v-if="streamOutput"
|
||||
:content="streamContent"
|
||||
:is-streaming="streaming"
|
||||
:error="streamError"
|
||||
|
|
@ -157,12 +157,14 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
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'
|
||||
|
|
@ -173,6 +175,17 @@ interface KnowledgeBase {
|
|||
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)
|
||||
|
|
@ -182,16 +195,6 @@ const knowledgeBases = ref<KnowledgeBase[]>([])
|
|||
const llmProviders = ref<LLMProviderInfo[]>([])
|
||||
const currentLLMProvider = ref('')
|
||||
|
||||
const queryParams = reactive({
|
||||
query: '',
|
||||
kbIds: [] as string[],
|
||||
llmProvider: '',
|
||||
topK: 3,
|
||||
scoreThreshold: 0.5,
|
||||
generateResponse: true,
|
||||
streamOutput: false
|
||||
})
|
||||
|
||||
const retrievalResults = ref<RetrievalResult[]>([])
|
||||
const finalPrompt = ref('')
|
||||
const aiResponse = ref<AIResponse | null>(null)
|
||||
|
|
@ -232,18 +235,18 @@ const fetchLLMProviders = async () => {
|
|||
}
|
||||
|
||||
const handleLLMChange = (provider: LLMProviderInfo | undefined) => {
|
||||
queryParams.llmProvider = provider?.name || ''
|
||||
llmProvider.value = provider?.name || ''
|
||||
}
|
||||
|
||||
const handleRun = async () => {
|
||||
if (!queryParams.query.trim()) {
|
||||
if (!query.value.trim()) {
|
||||
ElMessage.warning('请输入查询 Query')
|
||||
return
|
||||
}
|
||||
|
||||
clearResults()
|
||||
|
||||
if (queryParams.streamOutput && queryParams.generateResponse) {
|
||||
if (streamOutput.value && generateResponse.value) {
|
||||
await runStreamExperiment()
|
||||
} else {
|
||||
await runNormalExperiment()
|
||||
|
|
@ -254,12 +257,12 @@ const runNormalExperiment = async () => {
|
|||
loading.value = true
|
||||
try {
|
||||
const res: any = await runRagExperiment({
|
||||
query: queryParams.query,
|
||||
kb_ids: queryParams.kbIds,
|
||||
top_k: queryParams.topK,
|
||||
score_threshold: queryParams.scoreThreshold,
|
||||
llm_provider: queryParams.llmProvider || undefined,
|
||||
generate_response: queryParams.generateResponse
|
||||
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 || []
|
||||
|
|
@ -268,7 +271,7 @@ const runNormalExperiment = async () => {
|
|||
diagnostics.value = res.diagnostics || null
|
||||
totalLatencyMs.value = res.total_latency_ms || res.totalLatencyMs || 0
|
||||
|
||||
if (queryParams.generateResponse) {
|
||||
if (generateResponse.value) {
|
||||
activeTab.value = 'ai-response'
|
||||
} else {
|
||||
activeTab.value = 'retrieval'
|
||||
|
|
@ -292,11 +295,11 @@ const runStreamExperiment = async () => {
|
|||
abortStream = createSSEConnection(
|
||||
'/admin/rag/experiments/stream',
|
||||
{
|
||||
query: queryParams.query,
|
||||
kb_ids: queryParams.kbIds,
|
||||
top_k: queryParams.topK,
|
||||
score_threshold: queryParams.scoreThreshold,
|
||||
llm_provider: queryParams.llmProvider || undefined,
|
||||
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) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue