coder
cdaadef10c
核心功能: - 文档索引：使用LLM分析提取关键词/摘要/主题/实体 - 查询处理：LLM分析查询意图并扩展关键词 - BM25检索：基于倒排索引的相关性排序 - RAG问答：检索增强生成 技术栈: - Flask + SQLAlchemy - OpenAI API兼容LLM - BM25算法 特点: 不依赖向量模型和向量库
195 lines
9.1 KiB
HTML
195 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>知识检索 - LLM Index RAG</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body { background-color: #f8f9fa; }
|
|
.search-box { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 0; }
|
|
.search-input { font-size: 1.2rem; border-radius: 10px; }
|
|
.result-card { border-radius: 10px; border-left: 4px solid #667eea; transition: all 0.3s; }
|
|
.result-card:hover { transform: translateX(5px); }
|
|
.rag-answer { background: linear-gradient(to right, #f8f9fa, #e9ecef); border-radius: 10px; }
|
|
.source-badge { font-size: 0.75rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/"><i class="bi bi-search"></i> LLM Index RAG</a>
|
|
<div class="navbar-nav ms-auto">
|
|
<a class="nav-link" href="/">首页</a>
|
|
<a class="nav-link" href="/documents">文档管理</a>
|
|
<a class="nav-link active" href="/search">知识检索</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="search-box">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<form id="searchForm">
|
|
<div class="input-group input-group-lg">
|
|
<input type="text" class="form-control search-input" id="queryInput"
|
|
placeholder="输入您的问题或关键词..." autocomplete="off">
|
|
<button class="btn btn-light" type="submit">
|
|
<i class="bi bi-search"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3 text-white">
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="mode" id="modeSearch" value="search" checked>
|
|
<label class="form-check-label" for="modeSearch">文档检索</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="mode" id="modeRAG" value="rag">
|
|
<label class="form-check-label" for="modeRAG">智能问答</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 结果区域 -->
|
|
<div class="container mt-4">
|
|
<!-- 加载中 -->
|
|
<div id="loadingSection" style="display:none;" class="text-center py-4">
|
|
<div class="spinner-border text-primary" role="status"></div>
|
|
<p class="mt-2">正在检索...</p>
|
|
</div>
|
|
|
|
<!-- RAG回答 -->
|
|
<div id="ragSection" style="display:none;">
|
|
<h5><i class="bi bi-chat-dots-fill"></i> 智能回答</h5>
|
|
<div id="ragAnswer" class="card rag-answer p-4 mb-4"></div>
|
|
<h6><i class="bi bi-book"></i> 参考来源</h6>
|
|
<div id="ragSources"></div>
|
|
</div>
|
|
|
|
<!-- 搜索结果 -->
|
|
<div id="resultsSection" style="display:none;">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5><i class="bi bi-list-ul"></i> 检索结果</h5>
|
|
<span id="resultCount" class="badge bg-primary"></span>
|
|
</div>
|
|
<div id="resultsContainer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('searchForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const query = document.getElementById('queryInput').value.trim();
|
|
const mode = document.querySelector('input[name="mode"]:checked').value;
|
|
|
|
if (!query) return;
|
|
|
|
// 显示加载
|
|
document.getElementById('loadingSection').style.display = 'block';
|
|
document.getElementById('ragSection').style.display = 'none';
|
|
document.getElementById('resultsSection').style.display = 'none';
|
|
|
|
if (mode === 'rag') {
|
|
// RAG问答
|
|
fetch('/api/rag/answer', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({query: query})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('loadingSection').style.display = 'none';
|
|
document.getElementById('ragSection').style.display = 'block';
|
|
|
|
// 显示回答
|
|
document.getElementById('ragAnswer').innerHTML = `
|
|
<div class="d-flex align-items-start">
|
|
<i class="bi bi-robot fs-4 me-3 text-primary"></i>
|
|
<div>${data.answer.replace(/\n/g, '<br>')}</div>
|
|
</div>
|
|
<div class="mt-3 text-muted small">
|
|
<i class="bi bi-speedometer2"></i> 置信度: ${(data.confidence * 100).toFixed(0)}%
|
|
</div>
|
|
`;
|
|
|
|
// 显示来源
|
|
let sourcesHtml = '<div class="row">';
|
|
data.sources.forEach((s, i) => {
|
|
sourcesHtml += `
|
|
<div class="col-md-4 mb-3">
|
|
<div class="card result-card">
|
|
<div class="card-body">
|
|
<h6 class="card-title">${s.title}</h6>
|
|
<small class="text-muted">相关度: ${s.score.toFixed(2)}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
sourcesHtml += '</div>';
|
|
document.getElementById('ragSources').innerHTML = sourcesHtml;
|
|
});
|
|
} else {
|
|
// 文档检索
|
|
fetch('/api/search', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({query: query, top_k: 10})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
document.getElementById('loadingSection').style.display = 'none';
|
|
document.getElementById('resultsSection').style.display = 'block';
|
|
document.getElementById('resultCount').textContent = `共 ${data.total} 条结果`;
|
|
|
|
let html = '';
|
|
data.results.forEach((r, i) => {
|
|
const chunks = r.matched_chunks.map(c =>
|
|
`<div class="bg-light p-2 rounded small mb-1">${c.content || c.summary || ''}</div>`
|
|
).join('');
|
|
|
|
html += `
|
|
<div class="card result-card mb-3">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between">
|
|
<h6 class="card-title">${r.doc.title || r.doc.filename}</h6>
|
|
<span class="badge bg-primary">${r.score.toFixed(2)}</span>
|
|
</div>
|
|
<div class="mb-2">
|
|
${r.matched_terms.map(t => `<span class="source-badge bg-info text-white px-2 py-1 rounded me-1">${t}</span>`).join('')}
|
|
</div>
|
|
<div class="mt-2">
|
|
${chunks}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
document.getElementById('resultsContainer').innerHTML = html || '<p class="text-muted">没有找到相关文档</p>';
|
|
});
|
|
}
|
|
});
|
|
|
|
// 自动补全
|
|
document.getElementById('queryInput').addEventListener('input', function() {
|
|
const prefix = this.value;
|
|
if (prefix.length < 2) return;
|
|
|
|
fetch(`/api/search/suggestions?prefix=${encodeURIComponent(prefix)}`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
// 简单显示建议（可改用自动补全组件）
|
|
console.log('建议:', data.suggestions);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |