438 lines
14 KiB
HTML
438 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>知识库管理 - TXT版轻量NotebookLM</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
.nav {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.nav a {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
margin: 0 10px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
}
|
|
.nav a:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.nav a.settings {
|
|
background-color: #2196F3;
|
|
}
|
|
.nav a.settings:hover {
|
|
background-color: #0b7dda;
|
|
}
|
|
.nav a.kb {
|
|
background-color: #9C27B0;
|
|
}
|
|
.nav a.kb:hover {
|
|
background-color: #7B1FA2;
|
|
}
|
|
.section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
}
|
|
.section h2 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
border-bottom: 2px solid #9C27B0;
|
|
padding-bottom: 5px;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
input, select, textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
background-color: #9C27B0;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin: 5px;
|
|
}
|
|
button:hover {
|
|
background-color: #7B1FA2;
|
|
}
|
|
.btn-secondary {
|
|
background-color: #2196F3;
|
|
}
|
|
.btn-secondary:hover {
|
|
background-color: #0b7dda;
|
|
}
|
|
.btn-danger {
|
|
background-color: #f44336;
|
|
}
|
|
.btn-danger:hover {
|
|
background-color: #d32f2f;
|
|
}
|
|
.alert {
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
border-radius: 5px;
|
|
}
|
|
.alert.info {
|
|
background-color: #e3f2fd;
|
|
border-left: 4px solid #2196F3;
|
|
color: #0d47a1;
|
|
}
|
|
.alert.success {
|
|
background-color: #e8f5e9;
|
|
border-left: 4px solid #4CAF50;
|
|
color: #1b5e20;
|
|
}
|
|
.alert.warning {
|
|
background-color: #fff3e0;
|
|
border-left: 4px solid #FF9800;
|
|
color: #e65100;
|
|
}
|
|
.alert.error {
|
|
background-color: #ffebee;
|
|
border-left: 4px solid #f44336;
|
|
color: #b71c1c;
|
|
}
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
.kb-list {
|
|
margin-top: 20px;
|
|
}
|
|
.kb-item {
|
|
padding: 15px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
background-color: #fafafa;
|
|
}
|
|
.kb-item h3 {
|
|
margin-top: 0;
|
|
color: #9C27B0;
|
|
}
|
|
.file-input {
|
|
margin: 15px 0;
|
|
padding: 20px;
|
|
border: 2px dashed #ccc;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
}
|
|
.file-input:hover {
|
|
border-color: #999;
|
|
}
|
|
.file-input.dragover {
|
|
border-color: #9C27B0;
|
|
background-color: #f0f8f0;
|
|
}
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 10px;
|
|
}
|
|
.container {
|
|
padding: 15px;
|
|
}
|
|
.nav a {
|
|
display: block;
|
|
margin: 5px 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>TXT版轻量NotebookLM 知识库管理</h1>
|
|
|
|
<div class="nav">
|
|
<a href="/">主页面</a>
|
|
<a href="/settings" class="settings">设置</a>
|
|
<a href="/knowledge_bases" class="kb active">知识库管理</a>
|
|
</div>
|
|
|
|
<div id="messageArea" class="alert hidden"></div>
|
|
|
|
<!-- 创建知识库 -->
|
|
<div class="section">
|
|
<h2>创建知识库</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="kbName">知识库名称:</label>
|
|
<input type="text" id="kbName" placeholder="请输入知识库名称">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="kbDescription">知识库描述:</label>
|
|
<textarea id="kbDescription" placeholder="请输入知识库描述"></textarea>
|
|
</div>
|
|
|
|
<button id="createKbBtn">创建知识库</button>
|
|
</div>
|
|
|
|
<!-- 知识库列表 -->
|
|
<div class="section">
|
|
<h2>知识库列表</h2>
|
|
|
|
<div id="kbList" class="kb-list">
|
|
<!-- 知识库列表将通过JavaScript动态加载 -->
|
|
<p>加载中...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 页面加载时获取知识库列表
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
await loadKnowledgeBases();
|
|
});
|
|
|
|
// 加载知识库列表
|
|
async function loadKnowledgeBases() {
|
|
try {
|
|
const response = await fetch('/api/knowledge_bases');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
displayKnowledgeBases(data.knowledge_bases);
|
|
} else {
|
|
throw new Error('获取知识库列表失败');
|
|
}
|
|
} catch (error) {
|
|
showMessage('加载知识库列表失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 显示知识库列表
|
|
function displayKnowledgeBases(knowledgeBases) {
|
|
const kbList = document.getElementById('kbList');
|
|
|
|
if (knowledgeBases.length === 0) {
|
|
kbList.innerHTML = '<p>暂无知识库</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
knowledgeBases.forEach(kb => {
|
|
html += `
|
|
<div class="kb-item">
|
|
<h3>${kb.name}</h3>
|
|
<p><strong>描述:</strong> ${kb.description || '无描述'}</p>
|
|
<p><strong>文档数量:</strong> ${kb.document_count}</p>
|
|
<button onclick="uploadToKb('${kb.name}')">上传文件</button>
|
|
<button onclick="searchInKb('${kb.name}')">搜索</button>
|
|
<button class="btn-danger" onclick="deleteKb('${kb.name}')">删除</button>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
kbList.innerHTML = html;
|
|
}
|
|
|
|
// 创建知识库
|
|
document.getElementById('createKbBtn').addEventListener('click', async function() {
|
|
const name = document.getElementById('kbName').value.trim();
|
|
const description = document.getElementById('kbDescription').value.trim();
|
|
|
|
if (!name) {
|
|
showMessage('请输入知识库名称', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('name', name);
|
|
formData.append('description', description);
|
|
|
|
const response = await fetch('/knowledge_bases', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
showMessage('知识库创建成功', 'success');
|
|
document.getElementById('kbName').value = '';
|
|
document.getElementById('kbDescription').value = '';
|
|
await loadKnowledgeBases();
|
|
} else {
|
|
const data = await response.json();
|
|
throw new Error(data.detail || '创建失败');
|
|
}
|
|
} catch (error) {
|
|
showMessage('创建知识库失败: ' + error.message, 'error');
|
|
}
|
|
});
|
|
|
|
// 删除知识库
|
|
async function deleteKb(name) {
|
|
if (!confirm(`确定要删除知识库 "${name}" 吗？此操作不可恢复。`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/knowledge_bases/${name}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
showMessage('知识库删除成功', 'success');
|
|
await loadKnowledgeBases();
|
|
} else {
|
|
const data = await response.json();
|
|
throw new Error(data.detail || '删除失败');
|
|
}
|
|
} catch (error) {
|
|
showMessage('删除知识库失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 上传文件到知识库
|
|
async function uploadToKb(name) {
|
|
// 创建文件选择对话框
|
|
const fileInput = document.createElement('input');
|
|
fileInput.type = 'file';
|
|
fileInput.multiple = true;
|
|
fileInput.accept = '.txt';
|
|
|
|
fileInput.onchange = async function() {
|
|
if (fileInput.files.length === 0) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
for (let i = 0; i < fileInput.files.length; i++) {
|
|
formData.append('files', fileInput.files[i]);
|
|
}
|
|
|
|
const response = await fetch(`/knowledge_bases/${name}/upload`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
showMessage(`文件上传成功: 处理了${data.processed_segments}个段落`, 'success');
|
|
await loadKnowledgeBases();
|
|
} else {
|
|
const data = await response.json();
|
|
throw new Error(data.detail || '上传失败');
|
|
}
|
|
} catch (error) {
|
|
showMessage('上传文件失败: ' + error.message, 'error');
|
|
}
|
|
};
|
|
|
|
fileInput.click();
|
|
}
|
|
|
|
// 在知识库中搜索
|
|
async function searchInKb(name) {
|
|
const query = prompt('请输入搜索关键词:');
|
|
if (!query) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('query', query);
|
|
formData.append('k', 5);
|
|
|
|
const response = await fetch(`/knowledge_bases/${name}/search`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
showSearchResults(data);
|
|
} else {
|
|
const data = await response.json();
|
|
throw new Error(data.detail || '搜索失败');
|
|
}
|
|
} catch (error) {
|
|
showMessage('搜索失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
// 显示搜索结果
|
|
function showSearchResults(data) {
|
|
let html = `<h3>搜索结果 - 知识库: ${data.knowledge_base}</h3>
|
|
<p>查询: ${data.query}</p>
|
|
<p>返回结果数: ${data.results.length}</p>`;
|
|
|
|
data.results.forEach((item, index) => {
|
|
html += `
|
|
<div style="margin: 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
|
|
<p><strong>结果 ${index + 1} (${item.metadata.segment_id})</strong></p>
|
|
<p><strong>相似度得分:</strong> ${(item.score * 100).toFixed(2)}%</p>
|
|
<p><strong>内容:</strong> ${item.content}</p>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
const resultsWindow = window.open('', '_blank');
|
|
resultsWindow.document.write(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>搜索结果</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
.result { margin: 15px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${html}
|
|
</body>
|
|
</html>
|
|
`);
|
|
resultsWindow.document.close();
|
|
}
|
|
|
|
// 显示消息
|
|
function showMessage(message, type) {
|
|
const messageArea = document.getElementById('messageArea');
|
|
messageArea.textContent = message;
|
|
messageArea.className = 'alert ' + type;
|
|
messageArea.classList.remove('hidden');
|
|
|
|
// 3秒后自动隐藏消息
|
|
setTimeout(() => {
|
|
messageArea.classList.add('hidden');
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |