408 lines
14 KiB
HTML
408 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>物体的浮沉条件是什么？</title>
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
display: flex;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.simulation-panel {
|
|||
|
|
flex: 1;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel {
|
|||
|
|
flex: 0 0 400px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
background-color: white;
|
|||
|
|
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-header {
|
|||
|
|
padding: 15px;
|
|||
|
|
background-color: #2196F3; /* 改为蓝色 */
|
|||
|
|
color: white;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-messages {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 15px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
max-width: 85%;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border-radius: 18px;
|
|||
|
|
word-break: break-word;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-message {
|
|||
|
|
background-color: #E3F2FD; /* 改为浅蓝色 */
|
|||
|
|
margin-left: auto;
|
|||
|
|
border-top-right-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ai-message {
|
|||
|
|
background-color: #E5E5EA;
|
|||
|
|
border-top-left-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-content {
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-input {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 10px;
|
|||
|
|
border-top: 1px solid #ddd;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-input input {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-input button {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
background-color: #2196F3; /* 改为蓝色 */
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-input button:hover {
|
|||
|
|
background-color: #1976D2; /* 改为深蓝色 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-indicator {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-dot {
|
|||
|
|
width: 8px;
|
|||
|
|
height: 8px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #666;
|
|||
|
|
margin: 0 4px;
|
|||
|
|
animation: pulse 1.4s infinite ease-in-out both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-dot:nth-child(1) {
|
|||
|
|
animation-delay: -0.32s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-dot:nth-child(2) {
|
|||
|
|
animation-delay: -0.16s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 80%, 100% {
|
|||
|
|
transform: scale(0);
|
|||
|
|
}
|
|||
|
|
40% {
|
|||
|
|
transform: scale(1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
iframe {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式设计 */
|
|||
|
|
@media (max-width: 900px) {
|
|||
|
|
.container {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.simulation-panel {
|
|||
|
|
height: 50vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-panel {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="simulation-panel">
|
|||
|
|
<iframe src="deepseek_html_20250812_5fd0ec.html"></iframe>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-panel">
|
|||
|
|
<div class="chat-header">AI 助手</div>
|
|||
|
|
<div class="chat-messages" id="chat-messages">
|
|||
|
|
<div class="message ai-message">
|
|||
|
|
<div class="message-content">提示词：
|
|||
|
|
开发一个高中化学讲解的课件，要求如下：
|
|||
|
|
左侧控制面板：
|
|||
|
|
标题：岩盐结构
|
|||
|
|
描述：NaCl晶体模型交互演示
|
|||
|
|
离子半径设置：
|
|||
|
|
钠离子半径：0.3
|
|||
|
|
氯离子半径：0.45
|
|||
|
|
视图控制：
|
|||
|
|
显示/隐藏离子：一个复选框，用于控制是否显示离子。
|
|||
|
|
显示/隐藏晶胞：一个复选框，用于控制是否显示晶胞。
|
|||
|
|
显示八面体：一个按钮，用于显示八面体结构。
|
|||
|
|
仅显示八面体：一个按钮，用于仅显示八面体结构。
|
|||
|
|
切八分之一晶胞：一个按钮，用于显示晶胞的八分之一。
|
|||
|
|
重置视图：一个按钮，用于重置视图到默认状态。
|
|||
|
|
观察视角：
|
|||
|
|
X轴、Y轴、Z轴：三个按钮，用于调整观察的三维视角。
|
|||
|
|
右侧主展示区：
|
|||
|
|
标题：氯化钠晶胞结构学演示
|
|||
|
|
描述：高中化学交互式教学演示
|
|||
|
|
氯化钠晶胞结构图：
|
|||
|
|
展示了氯化钠的晶胞结构，其中绿色球代表氯离子，蓝色球代表钠离子。晶胞的边缘用红色线条连接，形成一个立方体结构。
|
|||
|
|
交互提示：
|
|||
|
|
提示用户可以使用鼠标拖拽旋转视角，滚轮缩放，平行投影等操作来观察晶胞结构。
|
|||
|
|
这个网页的主要功能是通过交互式的方式，让用户能够观察和学习氯化钠的晶胞结构，并通过调整离子半径和视角来获得更深入的理解。</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chat-input">
|
|||
|
|
<input type="text" id="user-input" placeholder="输入你的问题..." value="氯化钠晶胞结构是什么样的？">
|
|||
|
|
<button id="send-btn">发送</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|||
|
|
const chatMessages = document.getElementById('chat-messages');
|
|||
|
|
const userInput = document.getElementById('user-input');
|
|||
|
|
const sendBtn = document.getElementById('send-btn');
|
|||
|
|
let sseConnection = null;
|
|||
|
|
let isLoading = false;
|
|||
|
|
|
|||
|
|
// 发送消息
|
|||
|
|
function sendMessage() {
|
|||
|
|
const message = userInput.value.trim();
|
|||
|
|
if (!message || isLoading) return;
|
|||
|
|
|
|||
|
|
// 添加用户消息
|
|||
|
|
addMessage(message, 'user');
|
|||
|
|
userInput.value = '';
|
|||
|
|
|
|||
|
|
// 显示加载中
|
|||
|
|
showLoading();
|
|||
|
|
|
|||
|
|
// 关闭当前可能存在的SSE连接
|
|||
|
|
if (sseConnection) {
|
|||
|
|
sseConnection.close();
|
|||
|
|
sseConnection = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 发送POST请求到/api/llm
|
|||
|
|
fetch('/api/llm', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({ question: message })
|
|||
|
|
})
|
|||
|
|
.then(response => {
|
|||
|
|
if (!response.ok) {
|
|||
|
|
throw new Error('HTTP error! status: ' + response.status);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理流式响应
|
|||
|
|
const reader = response.body.getReader();
|
|||
|
|
const decoder = new TextDecoder();
|
|||
|
|
let buffer = '';
|
|||
|
|
let aiMessageElement = null;
|
|||
|
|
let aiMessageContentElement = null;
|
|||
|
|
|
|||
|
|
function processChunk({ done, value }) {
|
|||
|
|
if (done) {
|
|||
|
|
// 处理最后一块数据
|
|||
|
|
if (buffer) {
|
|||
|
|
handleSSEMessage(buffer, aiMessageElement, aiMessageContentElement);
|
|||
|
|
}
|
|||
|
|
hideLoading();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 解码接收到的数据
|
|||
|
|
const chunk = decoder.decode(value, { stream: true });
|
|||
|
|
buffer += chunk;
|
|||
|
|
|
|||
|
|
// 按行分割数据
|
|||
|
|
const lines = buffer.split('\n');
|
|||
|
|
buffer = lines.pop(); // 保存不完整的行
|
|||
|
|
|
|||
|
|
// 如果还没有创建AI消息元素，则创建
|
|||
|
|
if (!aiMessageElement) {
|
|||
|
|
aiMessageElement = document.createElement('div');
|
|||
|
|
aiMessageElement.className = 'message ai-message';
|
|||
|
|
aiMessageContentElement = document.createElement('div');
|
|||
|
|
aiMessageContentElement.className = 'message-content';
|
|||
|
|
aiMessageElement.appendChild(aiMessageContentElement);
|
|||
|
|
chatMessages.appendChild(aiMessageElement);
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理每一行
|
|||
|
|
for (const line of lines) {
|
|||
|
|
if (line.trim()) {
|
|||
|
|
handleSSEMessage(line, aiMessageElement, aiMessageContentElement);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 继续读取
|
|||
|
|
return reader.read().then(processChunk);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 开始读取响应体
|
|||
|
|
return reader.read().then(processChunk);
|
|||
|
|
})
|
|||
|
|
.catch(error => {
|
|||
|
|
console.error('发送请求失败:', error);
|
|||
|
|
hideLoading();
|
|||
|
|
addMessage('抱歉，请求失败: ' + error.message, 'ai');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 处理SSE消息
|
|||
|
|
function handleSSEMessage(line, aiMessageElement, aiMessageContentElement) {
|
|||
|
|
// 检查是否是SSE格式 (以'data: '开头)
|
|||
|
|
if (line.startsWith('data: ')) {
|
|||
|
|
const data = line.substring(6).trim();
|
|||
|
|
|
|||
|
|
// 检查是否是结束信号
|
|||
|
|
if (data === 'DONE') {
|
|||
|
|
hideLoading();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 解析JSON
|
|||
|
|
const jsonData = JSON.parse(data);
|
|||
|
|
// 提取content字段
|
|||
|
|
if (jsonData.content) {
|
|||
|
|
aiMessageContentElement.textContent += jsonData.content;
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('解析JSON失败:', error, '数据:', data);
|
|||
|
|
// 如果解析失败，尝试直接添加文本
|
|||
|
|
aiMessageContentElement.textContent += data;
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
} else if (line) {
|
|||
|
|
// 如果不是标准SSE格式，尝试直接解析
|
|||
|
|
try {
|
|||
|
|
const jsonData = JSON.parse(line);
|
|||
|
|
if (jsonData.content) {
|
|||
|
|
aiMessageContentElement.textContent += jsonData.content;
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('解析非标准SSE数据失败:', error, '数据:', line);
|
|||
|
|
// 如果解析失败，直接添加文本
|
|||
|
|
aiMessageContentElement.textContent += line;
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加消息到聊天框
|
|||
|
|
function addMessage(message, sender) {
|
|||
|
|
const messageElement = document.createElement('div');
|
|||
|
|
messageElement.className = `message ${sender}-message`;
|
|||
|
|
|
|||
|
|
const contentElement = document.createElement('div');
|
|||
|
|
contentElement.className = 'message-content';
|
|||
|
|
contentElement.textContent = message;
|
|||
|
|
|
|||
|
|
messageElement.appendChild(contentElement);
|
|||
|
|
chatMessages.appendChild(messageElement);
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示加载中
|
|||
|
|
function showLoading() {
|
|||
|
|
if (isLoading) return;
|
|||
|
|
isLoading = true;
|
|||
|
|
|
|||
|
|
const loadingElement = document.createElement('div');
|
|||
|
|
loadingElement.className = 'loading-indicator';
|
|||
|
|
loadingElement.id = 'loading-indicator';
|
|||
|
|
|
|||
|
|
for (let i = 0; i < 3; i++) {
|
|||
|
|
const dot = document.createElement('div');
|
|||
|
|
dot.className = 'loading-dot';
|
|||
|
|
loadingElement.appendChild(dot);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
chatMessages.appendChild(loadingElement);
|
|||
|
|
scrollToBottom();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 隐藏加载中
|
|||
|
|
function hideLoading() {
|
|||
|
|
if (!isLoading) return;
|
|||
|
|
isLoading = false;
|
|||
|
|
|
|||
|
|
const loadingElement = document.getElementById('loading-indicator');
|
|||
|
|
if (loadingElement) {
|
|||
|
|
loadingElement.remove();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 滚动到底部
|
|||
|
|
function scrollToBottom() {
|
|||
|
|
chatMessages.scrollTop = chatMessages.scrollHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 发送按钮点击事件
|
|||
|
|
sendBtn.addEventListener('click', sendMessage);
|
|||
|
|
|
|||
|
|
// 输入框回车事件
|
|||
|
|
userInput.addEventListener('keypress', function(e) {
|
|||
|
|
if (e.key === 'Enter') {
|
|||
|
|
sendMessage();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|