Spaces:
Running
Running
<html lang="zh-CN"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>AI 对话系统</title> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"> | |
<style> | |
:root { | |
--primary-color: #3498db; | |
--secondary-color: #2ecc71; | |
--background-color: #f5f5f5; | |
--chat-background: #ffffff; | |
--text-color: #333333; | |
--chat-bubble-user: #e8f5fe; | |
--chat-bubble-ai: #f0f0f0; | |
--sidebar-background: #ffffff; | |
--input-background: #ffffff; | |
--send-button-color: #4CAF50; | |
--console-background: #f8f9fa; | |
--console-text: #495057; | |
--fold-background: #f8f9fa; | |
--fold-text: #495057; | |
--border-color: transparent; | |
--search-result-background: #f8f9fa; | |
} | |
.dark-mode { | |
--primary-color: #3498db; | |
--secondary-color: #2ecc71; | |
--background-color: #1e2124; | |
--chat-background: #36393f; | |
--text-color: #dcddde; | |
--chat-bubble-user: #4e5d94; | |
--chat-bubble-ai: #40444b; | |
--sidebar-background: #2f3136; | |
--input-background: #40444b; | |
--send-button-color: #7289da; | |
--console-background: #2f3136; | |
--console-text: #dcddde; | |
--fold-background: #2f3136; | |
--fold-text: #dcddde; | |
--border-color: #ffffff; | |
--search-result-background: #2f3136; | |
} | |
body { | |
background-color: var(--background-color); | |
color: var(--text-color); | |
transition: all 0.3s ease; | |
} | |
.chat-container { | |
background-color: var(--chat-background); | |
transition: all 0.3s ease; | |
border-radius: 8px; | |
box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
} | |
.chat-bubble { | |
max-width: 80%; | |
padding: 12px; | |
border-radius: 12px; | |
margin-bottom: 12px; | |
box-shadow: 0 1px 2px rgba(0,0,0,0.1); | |
transition: all 0.3s ease; | |
} | |
.user-bubble { | |
background-color: var(--chat-bubble-user); | |
color: var(--text-color); | |
margin-left: auto; | |
border-bottom-right-radius: 4px; | |
} | |
.ai-bubble { | |
background-color: var(--chat-bubble-ai); | |
color: var(--text-color); | |
margin-right: auto; | |
border-bottom-left-radius: 4px; | |
} | |
.dark-mode .chat-bubble { | |
border: 1px solid var(--border-color); | |
} | |
.status-indicator { | |
width: 12px; | |
height: 12px; | |
border-radius: 50%; | |
display: inline-block; | |
margin-right: 8px; | |
transition: all 0.3s ease; | |
} | |
.status-active { | |
background-color: var(--secondary-color); | |
} | |
.status-inactive { | |
background-color: #95a5a6; | |
} | |
.sidebar { | |
background-color: var(--sidebar-background); | |
transition: all 0.3s ease; | |
border-radius: 8px; | |
box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
} | |
#user-input { | |
background-color: var(--input-background); | |
color: var(--text-color); | |
transition: all 0.3s ease; | |
border-radius: 8px; | |
padding-right: 40px; | |
} | |
#send-btn { | |
position: absolute; | |
right: 10px; | |
top: 50%; | |
transform: translateY(-50%); | |
background: none; | |
border: none; | |
color: var(--send-button-color); | |
font-size: 20px; | |
cursor: pointer; | |
transition: all 0.3s ease; | |
} | |
#send-btn:hover { | |
opacity: 0.8; | |
} | |
.console { | |
background-color: var(--console-background); | |
color: var(--console-text); | |
transition: all 0.3s ease; | |
border-radius: 8px; | |
box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
} | |
#status-log { | |
background-color: var(--console-background); | |
color: var(--console-text); | |
transition: all 0.3s ease; | |
border: 1px solid var(--border-color); | |
} | |
/* 滚动条样式 */ | |
::-webkit-scrollbar { | |
width: 8px; | |
} | |
::-webkit-scrollbar-track { | |
background: var(--chat-background); | |
} | |
::-webkit-scrollbar-thumb { | |
background: var(--primary-color); | |
border-radius: 4px; | |
} | |
::-webkit-scrollbar-thumb:hover { | |
background: var(--secondary-color); | |
} | |
/* 代码块样式 */ | |
.hljs { | |
background: var(--fold-background) ; | |
color: var(--fold-text) ; | |
} | |
/* details { | |
background-color: var(--search-result-background); | |
color: var(--text-color); | |
border-radius: 8px; | |
padding: 10px; | |
margin-bottom: 10px; | |
transition: all 0.3s ease; | |
border: 1px solid var(--border-color); | |
} | |
summary { | |
cursor: pointer; | |
font-weight: bold; | |
color: var(--text-color); | |
} | |
details ul { | |
list-style-type: none; | |
padding-left: 0; | |
} | |
details li { | |
background-color: var(--chat-bubble-ai); | |
color: var(--text-color); | |
padding: 10px; | |
margin-top: 10px; | |
border-radius: 4px; | |
border: 1px solid var(--border-color); | |
} | |
details * { | |
background-color: var(--search-result-background); | |
} */ | |
.search-results { | |
background-color: var(--search-result-background); | |
color: var(--text-color); | |
border: 1px solid var(--border-color); | |
} | |
.search-results summary { | |
cursor: pointer; | |
font-weight: bold; | |
} | |
.search-results ul { | |
list-style-type: none; | |
padding-left: 0; | |
} | |
.search-results li { | |
background-color: var(--chat-bubble-ai); | |
border: 1px solid var(--border-color); | |
} | |
/* 控制台消息条目样式 */ | |
#status-log div { | |
background-color: var(--console-background); | |
color: var(--console-text); | |
border: 1px solid var(--border-color); | |
} | |
@media (max-width: 768px) { | |
.sidebar { | |
position: fixed; | |
right: -300px; | |
top: 0; | |
bottom: 0; | |
width: 300px; | |
z-index: 1000; | |
transition: right 0.3s ease-in-out; | |
} | |
.sidebar.open { | |
right: 0; | |
} | |
.sidebar-overlay { | |
display: none; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background-color: rgba(0, 0, 0, 0.5); | |
z-index: 999; | |
} | |
.sidebar-overlay.show { | |
display: block; | |
} | |
} | |
</style> | |
</head> | |
<body class="h-screen flex flex-col md:flex-row p-4"> | |
<!-- 主聊天窗口 --> | |
<div class="chat-container flex-grow md:w-3/4 p-4 flex flex-col h-screen mr-4"> | |
<div id="chat-window" class="flex-grow overflow-y-auto mb-4 p-4 rounded-lg shadow-inner"></div> | |
<div class="relative"> | |
<input id="user-input" type="text" class="w-full border p-2" placeholder="输入您的问题..."> | |
<button id="send-btn" class="text-2xl"> | |
<i class="fas fa-paper-plane"></i> | |
</button> | |
</div> | |
</div> | |
<!-- 右侧控制台 --> | |
<div class="sidebar console md:w-1/4 p-4 h-screen overflow-y-auto"> | |
<h2 class="text-xl font-bold mb-4">运行状态</h2> | |
<div class="mb-4"> | |
<div class="mb-2"> | |
<span class="status-indicator" id="main-model-status"></span> | |
主模型 | |
</div> | |
<div class="mb-2"> | |
<span class="status-indicator" id="sub-model-status"></span> | |
次模型 | |
</div> | |
<div class="mb-2"> | |
<span class="status-indicator" id="search-status"></span> | |
搜索 | |
</div> | |
<div> | |
<span class="status-indicator" id="email-status"></span> | |
邮件发送 | |
</div> | |
</div> | |
<div id="status-log" class="p-2 rounded h-64 overflow-y-auto mb-4"></div> | |
<button id="settings-btn" class="w-full bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200"> | |
<i class="fas fa-cog"></i> 设置 | |
</button> | |
</div> | |
<!-- 移动端侧边栏切换按钮 --> | |
<button id="sidebar-toggle" class="md:hidden fixed top-4 right-4 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200 z-50"> | |
<i class="fas fa-bars"></i> | |
</button> | |
<!-- 移动端侧边栏遮罩 --> | |
<div id="sidebar-overlay" class="sidebar-overlay"></div> | |
<!-- 暗色模式切换按钮 --> | |
<button id="dark-mode-toggle" class="fixed top-4 left-4 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200"> | |
<i class="fas fa-moon"></i> | |
</button> | |
<!-- 设置对话框 --> | |
<div id="settings-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden flex items-center justify-center z-50"> | |
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl"> | |
<h2 class="text-xl font-bold mb-4">设置</h2> | |
<div class="mb-4"> | |
<label for="max-history" class="block mb-2">保留对话轮数:</label> | |
<input type="number" id="max-history" class="border rounded p-2 w-full dark:bg-gray-700 dark:text-white" min="1" max="50" value="10"> | |
</div> | |
<div class="flex justify-end"> | |
<button id="save-settings" class="bg-blue-500 text-white px-4 py-2 rounded mr-2 hover:bg-blue-600 transition duration-200">保存</button> | |
<button id="cancel-settings" class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-200">取消</button> | |
</div> | |
</div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | |
<script> | |
const chatWindow = document.getElementById('chat-window'); | |
const userInput = document.getElementById('user-input'); | |
const sendBtn = document.getElementById('send-btn'); | |
const mainModelStatus = document.getElementById('main-model-status'); | |
const subModelStatus = document.getElementById('sub-model-status'); | |
const searchStatus = document.getElementById('search-status'); | |
const emailStatus = document.getElementById('email-status'); | |
const statusLog = document.getElementById('status-log'); | |
const settingsBtn = document.getElementById('settings-btn'); | |
const settingsModal = document.getElementById('settings-modal'); | |
const saveSettingsBtn = document.getElementById('save-settings'); | |
const cancelSettingsBtn = document.getElementById('cancel-settings'); | |
const maxHistoryInput = document.getElementById('max-history'); | |
const darkModeToggle = document.getElementById('dark-mode-toggle'); | |
const sidebarToggle = document.getElementById('sidebar-toggle'); | |
const sidebar = document.querySelector('.sidebar'); | |
const sidebarOverlay = document.getElementById('sidebar-overlay'); | |
let conversationHistory = []; | |
let maxHistory = 10; | |
function addMessage(content, isUser) { | |
const bubble = document.createElement('div'); | |
bubble.className = `chat-bubble ${isUser ? 'user-bubble' : 'ai-bubble'}`; | |
bubble.innerHTML = isUser ? content : marked.parse(content); | |
chatWindow.appendChild(bubble); | |
chatWindow.scrollTop = chatWindow.scrollHeight; | |
bubble.querySelectorAll('pre code').forEach((block) => { | |
hljs.highlightBlock(block); | |
}); | |
conversationHistory.push({ | |
role: isUser ? 'user' : 'assistant', | |
content: content | |
}); | |
if (conversationHistory.length > maxHistory * 2) { | |
conversationHistory = conversationHistory.slice(-maxHistory * 2); | |
} | |
} | |
function updateStatus(mainActive, subActive, searchActive, emailActive) { | |
mainModelStatus.className = `status-indicator ${mainActive ? 'status-active' : 'status-inactive'}`; | |
subModelStatus.className = `status-indicator ${subActive ? 'status-active' : 'status-inactive'}`; | |
searchStatus.className = `status-indicator ${searchActive ? 'status-active' : 'status-inactive'}`; | |
emailStatus.className = `status-indicator ${emailActive ? 'status-active' : 'status-inactive'}`; | |
} | |
function addStatusLog(message) { | |
const logEntry = document.createElement('div'); | |
logEntry.className = 'mb-2 p-2 bg-white dark:bg-gray-700 rounded shadow'; | |
logEntry.textContent = message; | |
statusLog.appendChild(logEntry); | |
statusLog.scrollTop = statusLog.scrollHeight; | |
} | |
function displaySearchResults(results, type) { | |
const searchResults = document.createElement('details'); | |
searchResults.className = 'search-results mb-2 p-2 rounded'; | |
const summary = document.createElement('summary'); | |
summary.textContent = type === 'papers' ? '论文搜索结果' : '搜索结果'; | |
searchResults.appendChild(summary); | |
const resultsList = document.createElement('ul'); | |
resultsList.className = 'mt-2'; | |
results.forEach(result => { | |
const li = document.createElement('li'); | |
li.className = 'mb-2 p-2 rounded'; | |
if (type === 'papers') { | |
li.innerHTML = ` | |
<strong>标题:</strong> ${result.标题}<br> | |
<strong>作者:</strong> ${result.作者}<br> | |
<strong>DOI:</strong> ${result.DOI}<br> | |
<strong>ISBN:</strong> ${result.ISBN}<br> | |
<strong>摘要:</strong> ${result.摘要} | |
`; | |
} else { | |
li.innerHTML = `<strong>${result.title}</strong><br>${result.body}`; | |
} | |
resultsList.appendChild(li); | |
}); | |
searchResults.appendChild(resultsList); | |
chatWindow.appendChild(searchResults); | |
} | |
async function sendMessage() { | |
const question = userInput.value.trim(); | |
if (!question) return; | |
addMessage(question, true); | |
userInput.value = ''; | |
updateStatus(false, false, false, false); | |
statusLog.innerHTML = ''; | |
addStatusLog('开始处理问题...'); | |
try { | |
const response = await fetch('/chat', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json' | |
}, | |
body: JSON.stringify({ | |
question, | |
history: conversationHistory.slice(-maxHistory * 2 + 1) | |
}) | |
}); | |
const data = await response.json(); | |
data.status_log.forEach(log => addStatusLog(log)); | |
updateStatus(true, true, data.search_used, data.email_sent); | |
if (data.search_used) { | |
if (Array.isArray(data.search_results) && data.search_results.length > 0 && 'DOI' in data.search_results[0]) { | |
displaySearchResults(data.search_results, 'papers'); | |
} else { | |
displaySearchResults(data.search_results, 'web'); | |
} | |
} | |
addMessage(data.response, false); | |
addStatusLog('回答完成'); | |
} catch (error) { | |
console.error('Error:', error); | |
addMessage('发生错误,请稍后再试。', false); | |
updateStatus(false, false, false, false); | |
addStatusLog('发生错误'); | |
} | |
} | |
sendBtn.addEventListener('click', sendMessage); | |
userInput.addEventListener('keypress', (e) => { | |
if (e.key === 'Enter') { | |
sendMessage(); | |
} | |
}); | |
// 设置相关功能 | |
settingsBtn.addEventListener('click', () => { | |
settingsModal.classList.remove('hidden'); | |
maxHistoryInput.value = maxHistory; | |
}); | |
saveSettingsBtn.addEventListener('click', async () => { | |
const newMaxHistory = parseInt(maxHistoryInput.value); | |
if (newMaxHistory >= 1 && newMaxHistory <= 50) { | |
maxHistory = newMaxHistory; | |
try { | |
const response = await fetch('/settings', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json' | |
}, | |
body: JSON.stringify({ max_history: maxHistory }) | |
}); | |
const data = await response.json(); | |
if (data.status === 'success') { | |
alert('设置已保存'); | |
} else { | |
alert('保存设置时出错'); | |
} | |
} catch (error) { | |
console.error('Error:', error); | |
alert('保存设置时出错'); | |
} | |
settingsModal.classList.add('hidden'); | |
} else { | |
alert('请输入1到50之间的数字'); | |
} | |
}); | |
cancelSettingsBtn.addEventListener('click', () => { | |
settingsModal.classList.add('hidden'); | |
}); | |
// 暗色模式切换 | |
darkModeToggle.addEventListener('click', () => { | |
document.body.classList.toggle('dark-mode'); | |
updateDarkModeIcon(); | |
}); | |
function updateDarkModeIcon() { | |
const icon = darkModeToggle.querySelector('i'); | |
if (document.body.classList.contains('dark-mode')) { | |
icon.classList.remove('fa-moon'); | |
icon.classList.add('fa-sun'); | |
} else { | |
icon.classList.remove('fa-sun'); | |
icon.classList.add('fa-moon'); | |
} | |
} | |
// 初始化暗色模式 | |
function initDarkMode() { | |
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |
document.body.classList.add('dark-mode'); | |
} | |
updateDarkModeIcon(); | |
} | |
// 监听系统主题变化 | |
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { | |
if (e.matches) { | |
document.body.classList.add('dark-mode'); | |
} else { | |
document.body.classList.remove('dark-mode'); | |
} | |
updateDarkModeIcon(); | |
}); | |
// 侧边栏控制 | |
sidebarToggle.addEventListener('click', () => { | |
sidebar.classList.toggle('open'); | |
sidebarOverlay.classList.toggle('show'); | |
}); | |
sidebarOverlay.addEventListener('click', () => { | |
sidebar.classList.remove('open'); | |
sidebarOverlay.classList.remove('show'); | |
}); | |
// 页面加载完成后初始化 | |
window.addEventListener('load', () => { | |
initDarkMode(); | |
}); | |
// 监听窗口大小变化,在大屏幕时关闭侧边栏遮罩 | |
window.addEventListener('resize', () => { | |
if (window.innerWidth >= 768) { | |
sidebar.classList.remove('open'); | |
sidebarOverlay.classList.remove('show'); | |
} | |
}); | |
</script> | |
</body> | |
</html> |