Hugging Face's logo

Spaces:
samlax12
/
agent
Sleeping

App Files Community
agent / templates /student1.html
samlax12's picture
samlax12
Rename templates/student.html to templates/student1.html
2d52ac2 verified
raw
history blame contribute delete
32.8 kB
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI学习助手</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--accent-color: #4cc9f0;
--success-color: #4caf50;
--warning-color: #ff9800;
--danger-color: #f44336;
--light-color: #f8f9fa;
--dark-color: #212529;
--border-color: #dee2e6;
--border-radius: 0.375rem;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
background-color: #f5f7fa;
color: #333;
display: flex;
flex-direction: column;
}
.header {
background-color: #fff;
border-bottom: 1px solid var(--border-color);
padding: 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.header-content {
max-width: 1600px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
margin: 0;
font-size: 1.5rem;
color: var(--primary-color);
}
.main-container {
flex: 1;
display: flex;
max-width: 1600px;
margin: 0 auto;
padding: 1rem;
width: 100%;
box-sizing: border-box;
height: calc(100vh - 70px); /* Header height + padding */
overflow: hidden;
}
.chat-container {
flex: 1;
display: flex;
flex-direction: column;
background-color: #fff;
border-radius: var(--border-radius);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-color);
overflow: hidden;
height: 100%;
max-width: 800px;
margin: 0 auto;
}
/* When plugins are active, adjust the chat container */
.main-container.with-plugin .chat-container {
margin: 0;
max-width: 350px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
}
.message {
max-width: 90%;
margin-bottom: 1rem;
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
position: relative;
}
.user-message {
background-color: #e3f2fd;
align-self: flex-end;
color: #0d47a1;
}
.bot-message {
background-color: #f5f5f5;
align-self: flex-start;
color: #333;
border-left: 3px solid var(--primary-color);
}
.input-container {
padding: 1rem;
border-top: 1px solid var(--border-color);
background-color: #f9f9f9;
}
.input-row {
display: flex;
gap: 0.5rem;
}
.input-field {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
resize: none;
font-size: 0.95rem;
}
.input-field:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.1);
}
.send-button {
padding: 0.75rem 1.5rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s;
}
.send-button:hover {
background-color: var(--secondary-color);
}
.send-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
.plugin-container {
display: none;
flex-direction: column;
background-color: #fff;
border-radius: var(--border-radius);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-color);
overflow: hidden;
height: 100%;
flex: 2;
margin-left: 1rem;
}
.plugin-header {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-color);
background-color: #f9f9f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.plugin-title {
margin: 0;
font-size: 1rem;
font-weight: 500;
}
.plugin-close {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
color: #777;
}
.plugin-content {
flex: 1;
overflow-y: auto;
}
/* 代码执行插件样式 */
.code-plugin .plugin-content {
padding: 0;
}
/* 可视化插件样式 */
.visualization-plugin .visualization-form {
margin-bottom: 1rem;
padding: 1rem;
}
.visualization-plugin .visualization-result {
margin-top: 1rem;
text-align: center;
padding: 0 1rem;
}
.visualization-plugin .visualization-image {
max-width: 100%;
border-radius: var(--border-radius);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 思维导图插件样式 */
.mindmap-plugin .mindmap-form {
margin-bottom: 1rem;
padding: 1rem;
}
.mindmap-plugin .mindmap-result {
margin-top: 1rem;
text-align: center;
padding: 0 1rem;
}
.mindmap-plugin .mindmap-image {
max-width: 100%;
border-radius: var(--border-radius);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* 参考资料样式 */
.reference-container {
margin-top: 10px;
border-top: 1px dashed #ddd;
padding-top: 10px;
}
.reference-toggle {
color: #666;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
}
.reference-content {
display: none;
margin-top: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
font-size: 0.85rem;
}
/* 代码样式 */
pre {
background-color: #f8f9fa;
border-radius: 5px;
padding: 12px;
margin: 10px 0;
overflow-x: auto;
border: 1px solid #eee;
}
code {
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
font-size: 14px;
}
/* 响应式样式 */
@media (max-width: 1200px) {
.main-container.with-plugin .chat-container {
max-width: 300px;
}
}
@media (max-width: 992px) {
.main-container {
flex-direction: column;
}
.main-container.with-plugin .chat-container {
max-width: 100%;
margin-bottom: 1rem;
height: 40vh;
}
.plugin-container {
margin-left: 0;
height: calc(60vh - 32px);
}
}
@media (max-width: 768px) {
.main-container {
padding: 0.5rem;
}
}
</style>
</head>
<body>
<header class="header">
<div class="header-content">
<h1>{{ agent_name }}</h1>
<div>
<span class="badge bg-primary">AI学习助手</span>
</div>
</div>
</header>
<div class="main-container" id="main-container">
<div class="chat-container">
<div class="chat-messages" id="chat-messages">
<div class="message bot-message">
<p>你好！我是{{ agent_name }}，有什么可以帮助你的吗？</p>
{% if agent_description %}
<p>{{ agent_description }}</p>
{% endif %}
</div>
</div>
<div class="input-container">
<div class="input-row">
<textarea class="input-field" id="user-input" placeholder="输入您的问题..." rows="2"></textarea>
<button class="send-button" id="send-button">
<i class="bi bi-send"></i>
</button>
</div>
</div>
</div>
<!-- 代码执行插件 -->
<div class="plugin-container code-plugin" id="code-plugin">
<div class="plugin-header">
<h3 class="plugin-title">Python代码执行</h3>
<button class="plugin-close" id="close-code-plugin">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="plugin-content">
<iframe id="code-execution-frame" src="" style="width: 100%; height: 100%; border: none;"></iframe>
</div>
</div>
<!-- 3D可视化插件 -->
<div class="plugin-container visualization-plugin" id="visualization-plugin">
<div class="plugin-header">
<h3 class="plugin-title">3D可视化</h3>
<button class="plugin-close" id="close-visualization-plugin">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="plugin-content">
<div class="visualization-result" id="visualization-result">
<div class="text-center py-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
<p class="mt-3">正在准备3D可视化...</p>
</div>
</div>
</div>
</div>
<!-- 思维导图插件 -->
<div class="plugin-container mindmap-plugin" id="mindmap-plugin">
<div class="plugin-header">
<h3 class="plugin-title">思维导图</h3>
<button class="plugin-close" id="close-mindmap-plugin">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="plugin-content">
<div class="mindmap-result" id="mindmap-result">
<div class="text-center py-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">加载中...</span>
</div>
<p class="mt-3">正在生成思维导图...</p>
</div>
</div>
</div>
</div>
</div>
<script>
// 全局变量
const agentId = "{{ agent_id }}";
const token = "{{ token }}";
let executionContext = null;
const mainContainer = document.getElementById('main-container');
// DOM元素
const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
// 代码执行插件元素
const codePlugin = document.getElementById('code-plugin');
const closeCodePlugin = document.getElementById('close-code-plugin');
const codeExecutionFrame = document.getElementById('code-execution-frame');
// 3D可视化插件元素
const visualizationPlugin = document.getElementById('visualization-plugin');
const closeVisualizationPlugin = document.getElementById('close-visualization-plugin');
const visualizationResult = document.getElementById('visualization-result');
// 思维导图插件元素
const mindmapPlugin = document.getElementById('mindmap-plugin');
const closeMindmapPlugin = document.getElementById('close-mindmap-plugin');
const mindmapResult = document.getElementById('mindmap-result');
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 初始化发送按钮事件
sendButton.addEventListener('click', sendMessage);
// 初始化输入框回车事件
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// 初始化插件关闭事件
closeCodePlugin.addEventListener('click', () => {
codePlugin.style.display = 'none';
// 清空iframe源以停止任何运行中的代码
codeExecutionFrame.src = '';
updateMainContainerLayout();
});
closeVisualizationPlugin.addEventListener('click', () => {
visualizationPlugin.style.display = 'none';
updateMainContainerLayout();
});
closeMindmapPlugin.addEventListener('click', () => {
mindmapPlugin.style.display = 'none';
updateMainContainerLayout();
});
});
// 更新主容器布局
function updateMainContainerLayout() {
// 检查是否有任何插件处于显示状态
const isAnyPluginVisible =
codePlugin.style.display === 'flex' ||
visualizationPlugin.style.display === 'flex' ||
mindmapPlugin.style.display === 'flex';
// 更新主容器类名
if (isAnyPluginVisible) {
mainContainer.classList.add('with-plugin');
} else {
mainContainer.classList.remove('with-plugin');
}
}
// 发送消息
async function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
// 添加用户消息
addMessage(message, true);
// 清空输入框
userInput.value = '';
// 禁用发送按钮
sendButton.disabled = true;
try {
// 发送请求
const response = await fetch(`/api/student/chat/${agentId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: message,
token: token
})
});
const data = await response.json();
if (data.success) {
// 处理回复内容，移除参考来源部分
const processedContent = processResponseContent(data.message);
// 添加机器人回复
const messageElement = addMessage(processedContent, false);
// 添加参考信息（如果有）
if (data.references && data.references.length > 0) {
addReferences(messageElement, data.references);
}
// 检查是否需要显示工具
if (data.tools && data.tools.length > 0) {
// 隐藏所有插件
hideAllPlugins();
// 使用新的插件激活函数
activatePlugins(data.message, data.tools);
}
} else {
// 添加错误消息
addMessage(`错误: ${data.message}`, false);
}
} catch (error) {
console.error('发送请求出错:', error);
addMessage('发送请求时出错，请重试', false);
} finally {
// 恢复发送按钮
sendButton.disabled = false;
}
}
// 处理回复内容，移除参考来源部分
function processResponseContent(content) {
// 移除 "===参考来源开始===" 到 "===参考来源结束===" 之间的内容
return content.replace(/===参考来源开始===[\s\S]*?===参考来源结束===/, '');
}
// 添加参考信息显示函数
function addReferences(messageElement, references) {
// 创建参考容器
const referenceContainer = document.createElement('div');
referenceContainer.className = 'reference-container';
// 创建参考切换按钮
const toggleButton = document.createElement('div');
toggleButton.className = 'reference-toggle';
toggleButton.textContent = '参考来源';
toggleButton.style.color = '#666';
toggleButton.style.fontSize = '0.9rem';
toggleButton.style.cursor = 'pointer';
toggleButton.style.display = 'flex';
toggleButton.style.alignItems = 'center';
// 创建参考内容
const referenceContent = document.createElement('div');
referenceContent.className = 'reference-content';
// 添加参考项
references.forEach(ref => {
const refItem = document.createElement('div');
refItem.style.marginBottom = '8px';
refItem.style.paddingBottom = '8px';
refItem.style.borderBottom = '1px solid #eee';
refItem.innerHTML = `
<div><strong>[${ref.index}]</strong> ${ref.summary}</div>
<div><small>来源: ${ref.file_name}</small></div>
`;
referenceContent.appendChild(refItem);
});
// 添加切换功能
toggleButton.addEventListener('click', () => {
if (referenceContent.style.display === 'none') {
referenceContent.style.display = 'block';
toggleButton.textContent = '折叠参考来源';
} else {
referenceContent.style.display = 'none';
toggleButton.textContent = '参考来源';
}
});
// 组装并添加到消息
referenceContainer.appendChild(toggleButton);
referenceContainer.appendChild(referenceContent);
messageElement.appendChild(referenceContainer);
}
// 添加消息函数
function addMessage(content, isUser) {
const messageDiv = document.createElement('div');
messageDiv.className = isUser ? 'message user-message' : 'message bot-message';
// 处理内容中的换行符和代码块
const processedContent = processMessageContent(content);
messageDiv.innerHTML = processedContent;
chatMessages.appendChild(messageDiv);
// 滚动到底部
chatMessages.scrollTop = chatMessages.scrollHeight;
// 对代码块应用高亮
if (!isUser) {
applySyntaxHighlighting(messageDiv);
}
return messageDiv;
}
// 处理消息内容中的换行符和代码块
function processMessageContent(content) {
// 先替换代码块，保护它们不受其他替换的影响
const codeBlocks = [];
let processedContent = content.replace(/```(\w*)\n([\s\S]*?)\n```/g, function(match, language, code) {
const id = codeBlocks.length;
codeBlocks.push({ language, code });
return `__CODE_BLOCK_${id}__`;
});
// 替换普通换行符
processedContent = processedContent.replace(/\n/g, '<br>');
// 恢复代码块
processedContent = processedContent.replace(/__CODE_BLOCK_(\d+)__/g, function(match, id) {
const { language, code } = codeBlocks[id];
const langClass = language ? ` class="language-${language}"` : '';
return `<pre><code${langClass}>${escapeHtml(code)}</code></pre>`;
});
return processedContent;
}
// 应用语法高亮
function applySyntaxHighlighting(element) {
// 检查是否已加载highlight.js
if (typeof hljs !== 'undefined') {
// 找出所有代码块并应用高亮
element.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
}
}
// 转义HTML字符
function escapeHtml(text) {
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
// 隐藏所有插件
function hideAllPlugins() {
codePlugin.style.display = 'none';
visualizationPlugin.style.display = 'none';
mindmapPlugin.style.display = 'none';
updateMainContainerLayout();
}
// 提取代码块
function extractCodeBlocks(message) {
const codeBlocks = [];
const codeRegex = /```python\n([\s\S]*?)\n```/g;
let match;
while ((match = codeRegex.exec(message)) !== null) {
codeBlocks.push(match[1]);
}
return codeBlocks;
}
// 提取3D可视化函数代码
function extract3DVisualizationCode(message) {
// 尝试提取函数代码块
const codeRegex = /```python\s*(import[\s\S]*?def create_3d_plot\(\):[\s\S]*?return[\s\S]*?})\s*```/i;
const match = codeRegex.exec(message);
if (match) {
return match[1].trim();
}
return null;
}
// 提取思维导图内容
function extractMindmapContent(message) {
// 尝试提取@startmindmap和@endmindmap之间的内容
const mindmapRegex = /@startmindmap\n([\s\S]*?)@endmindmap/;
const match = mindmapRegex.exec(message);
if (match) {
return `@startmindmap\n${match[1]}\n@endmindmap`;
}
return null;
}
// 激活代码执行插件
function activateCodePlugin(message) {
// 提取代码块
const codeBlocks = extractCodeBlocks(message);
if (codeBlocks.length > 0) {
const isAlreadyVisible = codePlugin.style.display === 'flex';
// 显示插件容器
codePlugin.style.display = 'flex';
updateMainContainerLayout();
// 获取iframe
const iframe = document.getElementById('code-execution-frame');
// 如果插件已经可见且iframe已加载
if (isAlreadyVisible && iframe.contentWindow) {
// 发送新代码到现有iframe
iframe.contentWindow.postMessage({
type: 'setCode',
code: codeBlocks[0]
}, '*');
} else {
// 设置iframe源
let src = '/code_execution.html';
if (codeBlocks.length > 0) {
src += `?code=${encodeURIComponent(codeBlocks[0])}`;
}
iframe.src = src;
// 设置iframe加载事件处理程序
iframe.onload = function() {
if (codeBlocks.length > 0) {
iframe.contentWindow.postMessage({
type: 'setCode',
code: codeBlocks[0]
}, '*');
}
};
}
}
}
// 激活3D可视化插件
// 激活3D可视化插件
function activate3DVisualization(message) {
const code = extract3DVisualizationCode(message);
if (code) {
// 显示插件容器
visualizationPlugin.style.display = 'flex';
updateMainContainerLayout();
// 显示加载状态
visualizationResult.innerHTML = `
<div class="text-center py-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">生成中...</span>
</div>
<p class="mt-3">正在生成3D图形，请稍候...</p>
</div>
`;
// 自动生成可视化
fetch('/api/visualization/3d-surface', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ code: code })
})
.then(response => response.json())
.then(data => {
if (data.success) {
// 直接嵌入HTML
visualizationResult.innerHTML = `
<div class="visualization-iframe-container" style="width:100%; height:500px;">
<iframe src="${data.html_url}" style="width:100%; height:100%; border:none;"></iframe>
</div>
<div class="text-center mt-3">
<p>3D图形生成成功</p>
<a href="${data.html_url}" class="btn btn-sm btn-outline-primary" target="_blank">
<i class="bi bi-arrows-fullscreen"></i> 全屏查看
</a>
</div>
`;
} else {
visualizationResult.innerHTML = `
<div class="alert alert-danger">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
生成失败: ${data.message}
</div>
`;
}
})
.catch(error => {
console.error('生成3D图形出错:', error);
visualizationResult.innerHTML = `
<div class="alert alert-danger">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
生成3D图形时发生错误，请重试
</div>
`;
});
}
}
// 激活思维导图插件
function activateMindmap(message) {
const content = extractMindmapContent(message);
if (content) {
// 显示插件容器
mindmapPlugin.style.display = 'flex';
updateMainContainerLayout();
// 显示加载状态
mindmapResult.innerHTML = `
<div class="text-center py-4">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">生成中...</span>
</div>
<p class="mt-3">正在生成思维导图，请稍候...</p>
</div>
`;
// 自动生成思维导图
fetch('/api/visualization/mindmap', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ content: content })
})
.then(response => response.json())
.then(data => {
if (data.success) {
mindmapResult.innerHTML = `
<div class="text-center">
<img src="${data.url}" class="mindmap-image" alt="思维导图">
<p class="mt-3">生成成功！</p>
</div>
`;
}
else {
mindmapResult.innerHTML = `
<div class="alert alert-danger">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
生成失败: ${data.message}
</div>
`;
}
})
.catch(error => {
console.error('生成思维导图出错:', error);
mindmapResult.innerHTML = `
<div class="alert alert-danger">
<i class="bi bi-exclamation-triangle-fill me-2"></i>
生成思维导图时发生错误，请重试
</div>
`;
});
}
}
// 根据消息内容激活适当的插件
function activatePlugins(message, tools) {
// 检查并激活代码执行插件
if (tools.includes('code') && message.includes('```python')) {
activateCodePlugin(message);
}
// 检查并激活3D可视化插件
if (tools.includes('visualization') &&
(message.includes('def create_3d_plot') ||
message.includes('3D') || message.includes('可视化'))) {
activate3DVisualization(message);
}
// 检查并激活思维导图插件
if (tools.includes('mindmap') &&
(message.includes('@startmindmap') ||
message.includes('思维导图'))) {
activateMindmap(message);
}
}
</script>
<!-- 添加highlight.js用于代码高亮 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/python.min.js"></script>
<script>
// 初始化代码高亮
document.addEventListener('DOMContentLoaded', function() {
if (typeof hljs !== 'undefined') {
hljs.configure({
languages: ['python']
});
}
});
</script>
</body>
</html>