Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>交互式 Markdown 知识库处理器 (最终版)</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-bg { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } | |
| .status-dot { width: 10px; height: 10px; border-radius: 50%; } | |
| .status-dot.red { background-color: #ef4444; } | |
| .status-dot.yellow { background-color: #f59e0b; animation: pulse 2s infinite; } | |
| .status-dot.green { background-color: #22c55e; } | |
| @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } | |
| .prose h1, .prose h2, .prose h3 { font-weight: 700; } | |
| .prose p { margin-bottom: 1em; line-height: 1.6; } | |
| .prose ul { list-style-type: disc; margin-left: 1.5em; } | |
| .prose code { background-color: #e5e7eb; padding: 0.2em 0.4em; border-radius: 3px; font-size: 85%; } | |
| .prose pre > code { background-color: transparent; padding: 0; } | |
| details > summary { list-style: none; cursor: pointer; } | |
| details > summary::-webkit-details-marker { display: none; } | |
| details[open] summary .fa-chevron-down { transform: rotate(180deg); } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen text-gray-800"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4"><span class="highlight-text relative inline-block z-10">Markdown</span> 知识库处理器</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">✨ Gemini 增强版：将静态文档转变为可对话、会总结的智能知识库。</p> | |
| </header> | |
| <section class="mb-16 bg-white p-6 sm:p-8 rounded-2xl shadow-lg border border-gray-200"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-3xl font-bold"><i class="fas fa-bolt text-blue-500 mr-2"></i>知识库控制台</h2> | |
| <div id="status-container" class="flex items-center space-x-2"> | |
| <div id="status-dot" class="status-dot red"></div> | |
| <span id="status-text" class="text-gray-600 font-medium">服务未连接</span> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 border border-yellow-200 p-6 rounded-lg mb-8"> | |
| <h3 class="font-bold text-xl mb-4 text-yellow-800"><i class="fas fa-key mr-2"></i>API 密钥配置</h3> | |
| <p class="text-gray-700 mb-4">请输入您的应用专属 API 密钥以授权访问。</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <input type="password" id="apiKeyInput" class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-yellow-500" placeholder="在此输入您的 API 密钥"> | |
| <button id="saveApiKeyButton" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-6 rounded-lg transition-colors shadow flex-shrink-0"> | |
| <i class="fas fa-save mr-2"></i>保存密钥 | |
| </button> | |
| </div> | |
| <p id="apiKeyMessage" class="text-sm text-gray-600 mt-3 h-5"></p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-8 border"> | |
| <h3 class="font-bold text-xl mb-2">1. 构建知识库</h3> | |
| <p class="text-gray-600 mb-4">输入 Markdown 文件夹的本地绝对路径。</p> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <input type="text" id="folderPathInput" class="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" placeholder="例如: C:\Users\YourName\Documents\Notes"> | |
| <button id="buildButton" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg transition-colors shadow flex-shrink-0" disabled> | |
| <i class="fas fa-hammer mr-2"></i>开始构建 | |
| </button> | |
| </div> | |
| <div class="mt-2"> | |
| <input id="clearExistingCheckbox" type="checkbox" class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"> | |
| <label for="clearExistingCheckbox" class="ml-2 text-sm text-gray-700">在构建前清空现有知识库</label> | |
| </div> | |
| <p id="build-message" class="text-sm text-gray-500 mt-3 h-5"></p> | |
| <details class="mt-4"> | |
| <summary class="font-medium text-indigo-600"> | |
| 高级构建设置 <i class="fas fa-chevron-down ml-1 text-sm transition-transform"></i> | |
| </summary> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 pt-4 border-t mt-2"> | |
| <div><label for="chunkSizeInput" class="block text-sm font-medium text-gray-700">块大小</label><input type="number" id="chunkSizeInput" value="4096" class="mt-1 block w-full p-2 border border-gray-300 rounded-md"></div> | |
| <div><label for="overlapInput" class="block text-sm font-medium text-gray-700">重叠大小</label><input type="number" id="overlapInput" value="400" class="mt-1 block w-full p-2 border border-gray-300 rounded-md"></div> | |
| <div><label for="maxFilesInput" class="block text-sm font-medium text-gray-700">最大文件数</label><input type="number" id="maxFilesInput" value="500" class="mt-1 block w-full p-2 border border-gray-300 rounded-md"></div> | |
| <div><label for="sampleModeInput" class="block text-sm font-medium text-gray-700">采样模式</label><select id="sampleModeInput" class="mt-1 block w-full p-2 border-gray-300 rounded-md"><option value="largest">最大的</option><option value="random">随机</option><option value="recent">最新的</option></select></div> | |
| </div> | |
| </details> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-8 border"> | |
| <h3 class="font-bold text-xl mb-2">2. 搜索知识库</h3> | |
| <div class="relative"> | |
| <input type="text" id="searchInput" class="w-full pl-4 pr-12 py-3 border-2 border-gray-300 rounded-lg" placeholder="输入问题开始搜索..." disabled> | |
| <button id="searchButton" class="absolute inset-y-0 right-0 px-4 text-gray-600" disabled><i class="fas fa-search text-xl"></i></button> | |
| </div> | |
| <details class="mt-4"> | |
| <summary class="font-medium text-blue-600"> | |
| 搜索设置 <i class="fas fa-chevron-down ml-1 text-sm transition-transform"></i> | |
| </summary> | |
| <div class="flex items-center gap-8 pt-4 border-t mt-2"> | |
| <div><label for="topKInput" class="block text-sm font-medium text-gray-700">返回结果数</label><input type="number" id="topKInput" value="5" class="mt-1 block w-full p-2 border border-gray-300 rounded-md"></div> | |
| </div> | |
| </details> | |
| </div> | |
| <div id="summarySection" class="hidden"><div class="flex justify-between items-center mb-4"><h3 class="font-bold text-xl">✨ AI 智能总结</h3><button id="summarizeButton" class="bg-gradient-to-r from-purple-500 to-blue-500 text-white font-bold py-2 px-4 rounded-lg"><i class="fas fa-magic-wand-sparkles mr-2"></i>生成智能总结</button></div><div id="summaryResultCard" class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-r-lg"></div></div> | |
| <div id="loadingIndicator" class="hidden text-center mt-8"><i class="fas fa-spinner fa-spin text-3xl text-blue-500"></i><p class="mt-2">正在检索...</p></div> | |
| <div id="searchResults" class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6"></div> | |
| </section> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const API_BASE_URL = 'http://127.0.0.1:5000'; | |
| const el = id => document.getElementById(id); | |
| const statusDot = el('status-dot'), statusText = el('status-text'); | |
| const apiKeyInput = el('apiKeyInput'), saveApiKeyButton = el('saveApiKeyButton'), apiKeyMessage = el('apiKeyMessage'); | |
| const folderPathInput = el('folderPathInput'), buildButton = el('buildButton'), buildMessage = el('build-message'), clearExistingCheckbox = el('clearExistingCheckbox'); | |
| const chunkSizeInput = el('chunkSizeInput'), overlapInput = el('overlapInput'), maxFilesInput = el('maxFilesInput'), sampleModeInput = el('sampleModeInput'); | |
| const searchInput = el('searchInput'), searchButton = el('searchButton'), topKInput = el('topKInput'); | |
| const summarySection = el('summarySection'), summarizeButton = el('summarizeButton'), summaryResultCard = el('summaryResultCard'); | |
| const loadingIndicator = el('loadingIndicator'), searchResultsContainer = el('searchResults'); | |
| let lastSearchResults = []; | |
| let statusInterval; | |
| const saveApiKey = () => { | |
| const key = apiKeyInput.value.trim(); | |
| if (key) { | |
| localStorage.setItem('knowledgeBaseApiKey', key); | |
| apiKeyMessage.textContent = '密钥已保存到浏览器。'; | |
| apiKeyMessage.style.color = 'green'; | |
| } else { | |
| apiKeyMessage.textContent = '请输入有效的密钥。'; | |
| apiKeyMessage.style.color = 'red'; | |
| } | |
| setTimeout(() => apiKeyMessage.textContent = '', 3000); | |
| }; | |
| const loadApiKey = () => { | |
| const key = localStorage.getItem('knowledgeBaseApiKey'); | |
| if (key) { | |
| apiKeyInput.value = key; | |
| apiKeyMessage.textContent = '已从本地加载密钥。'; | |
| setTimeout(() => apiKeyMessage.textContent = '', 3000); | |
| } | |
| }; | |
| const getAuthHeaders = (isGetRequest = false) => { | |
| const key = localStorage.getItem('knowledgeBaseApiKey'); | |
| const headers = {}; | |
| if (!isGetRequest) { | |
| headers['Content-Type'] = 'application/json'; | |
| } | |
| if (key) { | |
| headers['X-API-Key'] = key; | |
| } else { | |
| console.warn("API Key not found in localStorage."); | |
| } | |
| return headers; | |
| }; | |
| const updateStatus = async () => { | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/status`); | |
| if (!response.ok) throw new Error('Network response was not ok'); | |
| const data = await response.json(); | |
| statusText.textContent = data.message; | |
| statusDot.className = 'status-dot'; | |
| const isReadyForSearch = data.is_built && !data.is_building; | |
| const isReadyForBuild = !data.is_building; | |
| searchInput.disabled = !isReadyForSearch; | |
| searchButton.disabled = !isReadyForSearch; | |
| buildButton.disabled = !isReadyForBuild; | |
| if (data.is_building) { | |
| statusDot.classList.add('yellow'); | |
| buildButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>构建中...'; | |
| } else { | |
| buildButton.innerHTML = '<i class="fas fa-hammer mr-2"></i>开始构建'; | |
| statusDot.classList.add(data.is_built ? 'green' : 'red'); | |
| } | |
| } catch (error) { | |
| statusText.textContent = '服务连接失败'; | |
| statusDot.className = 'status-dot red'; | |
| searchInput.disabled = true; | |
| searchButton.disabled = true; | |
| buildButton.disabled = true; | |
| if(statusInterval) clearInterval(statusInterval); | |
| } | |
| }; | |
| const handleBuild = async () => { | |
| const folderPath = folderPathInput.value.trim(); | |
| if (!folderPath) { buildMessage.textContent = '错误：文件夹路径不能为空。'; return; } | |
| const buildParams = { | |
| folder_path: folderPath, | |
| clear_existing: clearExistingCheckbox.checked, | |
| chunk_size: parseInt(chunkSizeInput.value, 10) || 4096, | |
| overlap: parseInt(overlapInput.value, 10) || 400, | |
| max_files: parseInt(maxFilesInput.value, 10) || 500, | |
| sample_mode: sampleModeInput.value, | |
| }; | |
| buildMessage.textContent = '已发送构建请求...'; | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/build`, { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify(buildParams), | |
| }); | |
| const result = await response.json(); | |
| if (!response.ok) throw new Error(result.error || '构建请求失败'); | |
| buildMessage.textContent = result.message; | |
| updateStatus(); | |
| } catch (error) { buildMessage.textContent = `错误: ${error.message}`; } | |
| }; | |
| const performSearch = async () => { | |
| const query = searchInput.value.trim(); | |
| if (!query) return; | |
| summarySection.classList.add('hidden'); | |
| summaryResultCard.innerHTML = ''; | |
| searchResultsContainer.innerHTML = ''; | |
| loadingIndicator.classList.remove('hidden'); | |
| const searchUrl = new URL(`${API_BASE_URL}/search`); | |
| searchUrl.searchParams.append('query', query); | |
| searchUrl.searchParams.append('top_k', topKInput.value || 5); | |
| try { | |
| const response = await fetch(searchUrl, { method: 'GET', headers: getAuthHeaders(true) }); | |
| if (response.status === 403) throw new Error('授权失败。请检查 API 密钥是否正确。'); | |
| const results = await response.json(); | |
| if (!response.ok) throw new Error(results.error || '搜索失败'); | |
| lastSearchResults = results; | |
| displayResults(results, query); | |
| if (results.length > 0) { | |
| summarySection.classList.remove('hidden'); | |
| } | |
| } catch (error) { | |
| searchResultsContainer.innerHTML = `<p class="text-center text-red-500 md:col-span-2">搜索出错: ${error.message}</p>`; | |
| } finally { | |
| loadingIndicator.classList.add('hidden'); | |
| } | |
| }; | |
| const displayResults = (results, query) => { | |
| if (!results || results.length === 0) { | |
| searchResultsContainer.innerHTML = `<p class="text-center text-gray-500 md:col-span-2">未找到与 "${query}" 相关的结果。</p>`; | |
| return; | |
| } | |
| searchResultsContainer.innerHTML = results.map(result => { | |
| const distance = typeof result.distance === 'number' ? result.distance : 2.0; | |
| const similarity = Math.max(0, 1 - distance / 2); // Normalize score to be more intuitive | |
| const fileName = result.metadata?.file_name || '未知文件'; | |
| const sourcePath = result.metadata?.source || fileName; | |
| const sanitizedContent = result.content.replace(/</g, "<").replace(/>/g, ">"); | |
| return ` | |
| <div class="bg-white border border-gray-200 rounded-lg p-4 transition-all hover:shadow-md"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h4 class="font-bold text-blue-700 truncate pr-4" title="${sourcePath}">${fileName}</h4> | |
| <span class="text-xs font-medium bg-blue-100 text-blue-800 py-1 px-2 rounded-full flex-shrink-0">相似度: ${similarity.toFixed(4)}</span> | |
| </div> | |
| <p class="text-gray-600 text-sm break-words">${sanitizedContent}</p> | |
| </div>`; | |
| }).join(''); | |
| }; | |
| const handleSummarize = async () => { | |
| if (lastSearchResults.length === 0) return; | |
| summarizeButton.disabled = true; | |
| summarizeButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>AI 正在思考...'; | |
| summaryResultCard.innerHTML = '<p class="text-gray-600">请稍候，正在为您生成总结...</p>'; | |
| try { | |
| const response = await fetch(`${API_BASE_URL}/summarize`, { | |
| method: 'POST', | |
| headers: getAuthHeaders(), | |
| body: JSON.stringify({ query: searchInput.value, results: lastSearchResults }), | |
| }); | |
| if (response.status === 403) throw new Error('授权失败。请检查 API 密钥。'); | |
| const data = await response.json(); | |
| if (!response.ok) throw new Error(data.error || '总结生成失败'); | |
| summaryResultCard.innerHTML = marked.parse(data.summary); | |
| summaryResultCard.classList.add('prose'); | |
| } catch (error) { | |
| summaryResultCard.innerHTML = `<p class="text-red-500">生成总结时出错: ${error.message}</p>`; | |
| } finally { | |
| summarizeButton.disabled = false; | |
| summarizeButton.innerHTML = '<i class="fas fa-magic-wand-sparkles mr-2"></i>重新生成总结'; | |
| } | |
| }; | |
| saveApiKeyButton.addEventListener('click', saveApiKey); | |
| buildButton.addEventListener('click', handleBuild); | |
| searchButton.addEventListener('click', performSearch); | |
| searchInput.addEventListener('keyup', e => e.key === 'Enter' && performSearch()); | |
| summarizeButton.addEventListener('click', handleSummarize); | |
| loadApiKey(); | |
| updateStatus(); | |
| statusInterval = setInterval(updateStatus, 5000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |