YG-Soft/YG_FT_Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1. 我的模型页面修改

Browse Source
This commit is contained in:
WIN-JHFT4D3SIVT\caoxiaozhu
2026-01-29 17:34:59 +08:00
parent 49393fefa0
commit d0675aede3
3 changed files with 670 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/pages/main.html
View File

@@ -443,7 +443,7 @@
columns: [
{ title: '模型名称', key: 'name' },
{ title: '训练方法', key: 'train_methods', render: (val) => val && val[0] ? val[0].name : '-' },
{ title: '模型路径', key: 'path', render: (val) => `<span class="text-xs text-gray-500 truncate max-w-xs block" title="${val}">${val}</span>` },
{ title: '基座模型', key: 'base_model_path', render: (val) => `<span class="text-xs text-gray-500 truncate block" title="${val}">${val || '-'}</span>` },
{ title: '创建时间', key: 'create_time', render: (val) => val ? new Date(val).toLocaleString('zh-CN') : '-' }
],
actions: ['view', 'delete']
@@ -3164,12 +3164,10 @@
document.body.style.overflow = '';
}
// 查看已训练模型详情
// 查看已训练模型详情 - 跳转到推理页面
window.viewTrainedModel = function(name, method, path) {
const message = '<p class="mb-2">模型名称：' + name + '</p>' +
'<p class="mb-2">训练方法：' + method + '</p>' +
'<p class="text-sm text-gray-500 break-all">路径：' + path + '</p>';
showMessage('模型详情', message, 'info');
// 跳转到推理测试页面（main.html在pages目录下，所以直接用文件名）
window.location.href = `model-inference.html?model=${encodeURIComponent(name)}&method=${encodeURIComponent(method)}`;
};
// 确认弹窗（两个按钮）- 使用 window 确保全局可访问

165
web/pages/model-compare-create.html
View File

@@ -316,14 +316,46 @@
// 加载模型列表
async function loadModels() {
try {
const response = await fetch(`${API_BASE}/model-manage`);
const result = await response.json();
if (result.code === 0) {
allModels = result.data || [];
renderModels();
} else {
showMessage('错误', result.message || '加载模型失败', 'error');
// 并行加载数据库模型和已训练模型
const [dbResponse, trainedResponse] = await Promise.all([
fetch(`${API_BASE}/model-manage`),
fetch(`${API_BASE}/model-manage/trained-models`)
]);
const dbResult = await dbResponse.json();
const trainedResult = await trainedResponse.json();
let dbModels = [];
let trainedModels = [];
// 数据库模型
if (dbResult.code === 0) {
dbModels = dbResult.data || [];
}
// 已训练模型
if (trainedResult.code === 0) {
const trainedData = trainedResult.data?.models || [];
trainedData.forEach(model => {
if (model.train_methods && model.train_methods.length > 0) {
model.train_methods.forEach(method => {
trainedModels.push({
id: `trained_${model.name}_${method.name}`.replace(/[^a-zA-Z0-9]/g, '_'),
name: `${model.name} (${method.name})`,
type: 'LLM',
source: 'trained',
model_path: model.path,
train_method: method.name
});
});
}
});
}
// 合并所有模型
allModels = [...dbModels, ...trainedModels];
console.log('[DEBUG] 数据库模型:', dbModels.length, '已训练模型:', trainedModels.length);
renderModels();
} catch (error) {
console.error('加载模型失败:', error);
document.getElementById('modelList').innerHTML = `
@@ -335,9 +367,14 @@
}
}
// 渲染模型列表
// 渲染模型列表 - 使用分栏显示数据库模型和已训练模型
function renderModels() {
const container = document.getElementById('modelList');
// 分离数据库模型和已训练模型
const dbModels = allModels.filter(m => m.source !== 'trained');
const trainedModels = allModels.filter(m => m.source === 'trained');
if (allModels.length === 0) {
container.innerHTML = `
<div class="p-8 text-center text-gray-400">
@@ -348,7 +385,40 @@
return;
}
container.innerHTML = allModels.map(model => {
let html = '';
// 数据库模型区域
if (dbModels.length > 0) {
html += `
<div class="border-b border-gray-200">
<div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-600 flex items-center">
<i class="fa fa-database mr-1"></i> 数据库模型 (${dbModels.length})
</div>
<div class="divide-y divide-gray-100">
`;
html += dbModels.map(model => renderModelCard(model)).join('');
html += '</div>';
}
// 已训练模型区域
if (trainedModels.length > 0) {
html += `
<div class="border-b border-gray-200">
<div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center">
<i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
</div>
<div class="divide-y divide-gray-100">
`;
html += trainedModels.map(model => renderModelCard(model)).join('');
html += '</div>';
}
container.innerHTML = html;
updateSelectedCount();
}
// 渲染单个模型卡片
function renderModelCard(model) {
const isSelected = selectedModels.has(model.id);
const isDisabled = !isSelected && selectedModels.size >= 4;
const typeText = {
@@ -358,10 +428,12 @@
'Embedding': '向量模型',
'Other': '其他'
}[model.type] || model.type || '其他';
// 处理字符串类型的ID
const modelId = typeof model.id === 'string' ? `'${model.id.replace(/'/g, "\\'")}'` : model.id;
return `
<div class="model-card border-b border-gray-100 last:border-b-0 p-4 cursor-pointer ${isSelected ? 'selected bg-blue-50/50' : ''} ${isDisabled ? 'disabled opacity-50' : ''} hover:bg-gray-50 transition-colors"
onclick="toggleModel(${model.id})">
onclick="toggleModel(${modelId})">
<div class="flex items-center justify-between">
<div class="flex items-center flex-1 min-w-0">
<div class="w-5 h-5 rounded-full border-2 ${isSelected ? 'border-primary bg-primary' : 'border-gray-300'} flex items-center justify-center mr-3 flex-shrink-0">
@@ -376,14 +448,11 @@
</div>
</div>
<div class="ml-4 text-xs text-gray-400 flex-shrink-0">
${model.model_source === 'local' ? '本地模型' : '在线模型'}
${model.source === 'trained' || model.model_source === 'local' ? '本地模型' : '在线模型'}
</div>
</div>
</div>
`;
}).join('');
updateSelectedCount();
}
// 切换模型选择
@@ -399,6 +468,11 @@
renderModels();
}
// 暴露到全局作用域供 onclick 调用
window.toggleModel = toggleModel;
window.goBack = goBack;
window.submitForm = submitForm;
// 筛选模型
function filterModels(keyword) {
const filtered = allModels.filter(model => {
@@ -411,7 +485,7 @@
renderFilteredModels(filtered);
}
// 渲染筛选后的模型列表
// 渲染筛选后的模型列表 - 使用分栏显示
function renderFilteredModels(models) {
const container = document.getElementById('modelList');
if (models.length === 0) {
@@ -424,40 +498,39 @@
return;
}
container.innerHTML = models.map(model => {
const isSelected = selectedModels.has(model.id);
const isDisabled = !isSelected && selectedModels.size >= 4;
const typeText = {
'LLM': '大语言模型',
'CV': '计算机视觉',
'NLP': '自然语言处理',
'Embedding': '向量模型',
'Other': '其他'
}[model.type] || model.type || '其他';
// 分离数据库模型和已训练模型
const dbModels = models.filter(m => m.source !== 'trained');
const trainedModels = models.filter(m => m.source === 'trained');
return `
<div class="model-card border-b border-gray-100 last:border-b-0 p-4 cursor-pointer ${isSelected ? 'selected bg-blue-50/50' : ''} ${isDisabled ? 'disabled opacity-50' : ''} hover:bg-gray-50 transition-colors"
onclick="toggleModel(${model.id})">
<div class="flex items-center justify-between">
<div class="flex items-center flex-1 min-w-0">
<div class="w-5 h-5 rounded-full border-2 ${isSelected ? 'border-primary bg-primary' : 'border-gray-300'} flex items-center justify-center mr-3 flex-shrink-0">
${isSelected ? '<i class="fa fa-check text-white text-xs"></i>' : ''}
</div>
<div class="min-w-0">
<div class="flex items-center mb-1">
<span class="font-medium text-gray-800 truncate">${model.name}</span>
<span class="ml-2 px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded flex-shrink-0">${typeText}</span>
</div>
<p class="text-sm text-gray-500 truncate">${model.description || '暂无描述'}</p>
</div>
</div>
<div class="ml-4 text-xs text-gray-400 flex-shrink-0">
${model.model_source === 'local' ? '本地模型' : '在线模型'}
</div>
</div>
let html = '';
// 数据库模型区域
if (dbModels.length > 0) {
html += `
<div class="border-b border-gray-200">
<div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-600 flex items-center">
<i class="fa fa-database mr-1"></i> 数据库模型 (${dbModels.length})
</div>
<div class="divide-y divide-gray-100">
`;
}).join('');
html += dbModels.map(model => renderModelCard(model)).join('');
html += '</div>';
}
// 已训练模型区域
if (trainedModels.length > 0) {
html += `
<div class="border-b border-gray-200">
<div class="px-4 py-2 bg-green-50 text-xs font-medium text-green-700 flex items-center">
<i class="fa fa-check-circle mr-1"></i> 已训练模型 (${trainedModels.length})
</div>
<div class="divide-y divide-gray-100">
`;
html += trainedModels.map(model => renderModelCard(model)).join('');
html += '</div>';
}
container.innerHTML = html;
}
// 更新已选数量

522
web/pages/model-inference.html Normal file
View File

@@ -0,0 +1,522 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模型推理 - 远光软件微调平台</title>
<script src="../lib/tailwindcss/tailwind.js"></script>
<script>
if (typeof console !== 'undefined' && console.warn) {
const originalWarn = console.warn;
console.warn = function(...args) {
if (args[0] && args[0].includes && args[0].includes('cdn.tailwindcss.com')) {
return;
}
originalWarn.apply(console, args);
};
}
</script>
<link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<style>
:root { --primary: #1890ff; --danger: #f5222d; --success: #52c41a; }
.sidebar-section-title {
padding: 0.5rem 1rem;
font-size: 0.75rem;
color: rgba(191, 203, 217, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav-link:hover { background-color: rgba(0, 21, 41, 0.2); }
.sidebar-item-active {
background-color: rgba(24, 144, 255, 0.1);
color: #1890ff;
border-left: 4px solid #1890ff;
}
/* 侧边栏滑块动画 */
.sidebar-slider {
position: absolute;
width: 4px;
height: 0;
background-color: #1890ff;
border-radius: 0 2px 2px 0;
transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 10;
}
.nav-item-wrapper {
position: relative;
}
.nav-link {
position: relative;
z-index: 1;
}
.chat-message { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.typing-indicator span {
display: inline-block;
width: 6px;
height: 6px;
background-color: #1890ff;
border-radius: 50%;
margin: 0 2px;
animation: typing 1.4s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }
.bg-primary { background-color: #1890ff; }
.text-primary { color: #1890ff; }
.border-primary { border-color: #1890ff; }
</style>
</head>
<body class="antialiased bg-gray-100 flex h-screen overflow-hidden">
<!-- 侧边导航 -->
<aside class="w-64 text-[#bfcbd9] flex-shrink-0 hidden md:block flex flex-col h-full" style="background-color: #001529;">
<!-- 平台LOGO区域 -->
<div class="pt-5 pb-3 border-b border-[#001529]/30 flex items-center justify-center pl-2">
<img src="../assets/logo/logo.png" alt="Logo" class="w-8 h-8 object-contain mr-2">
<span class="text-white font-medium text-base">远光软件微调平台</span>
</div>
<!-- 导航主区域 -->
<nav class="flex-1 overflow-y-auto py-2 relative">
<!-- 滑块指示器 -->
<div class="sidebar-slider" id="sidebar-slider"></div>
<!-- 第一分区：模型服务 -->
<div class="sidebar-section-title">模型服务</div>
<div class="nav-item-wrapper">
<a href="#" data-page="fine-tune" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-cogs w-5 text-center"></i>
<span class="ml-2">模型调优</span>
</a>
</div>
<div class="nav-item-wrapper">
<a href="main.html?page=my-models" data-page="my-models" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-database w-5 text-center"></i>
<span class="ml-2">我的模型</span>
</a>
</div>
<div class="nav-item-wrapper">
<a href="#" data-page="model-eval" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-line-chart w-5 text-center"></i>
<span class="ml-2">模型评测</span>
</a>
</div>
<div class="nav-item-wrapper">
<a href="#" data-page="model-compare" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-server w-5 text-center"></i>
<span class="ml-2">模型对比</span>
</a>
</div>
<!-- 第二分区：资源管理 -->
<div class="sidebar-section-title mt-6">资源管理</div>
<div class="nav-item-wrapper">
<a href="#" data-page="model-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-cube w-5 text-center"></i>
<span class="ml-2">模型管理</span>
</a>
</div>
<div class="nav-item-wrapper">
<a href="#" data-page="dataset-manage" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-file-text w-5 text-center"></i>
<span class="ml-2">数据集管理</span>
</a>
</div>
<div class="nav-item-wrapper">
<a href="#" data-page="data-generate" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-database w-5 text-center"></i>
<span class="ml-2">其他工具</span>
</a>
</div>
<!-- 第三分区：系统设置 -->
<div class="sidebar-section-title mt-6">系统设置</div>
<div class="nav-item-wrapper">
<a href="#" data-page="config" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-bar-chart w-5 text-center"></i>
<span class="ml-2">平台性能</span>
</a>
</div>
<div class="nav-item-wrapper">
<a href="main.html?page=logs" data-page="logs" class="nav-link flex items-center px-4 py-2.5 hover:bg-[#001529]/20 transition-colors">
<i class="fa fa-file-text w-5 text-center"></i>
<span class="ml-2">查看日志</span>
</a>
</div>
</nav>
<div class="p-4 border-t border-[#001529]/30 text-xs mt-auto">
<div class="mb-2 text-[#bfcbd9]/80">默认业务空间</div>
<div class="flex items-center justify-between">
<span class="text-[#bfcbd9]">版本 v1.0.0</span>
</div>
</div>
</aside>
<!-- 主内容区 -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- 顶部导航 -->
<header class="bg-white border-b border-gray-200 shadow-sm">
<div class="flex items-center justify-between px-6 h-14">
<div class="flex items-center space-x-4">
<a href="main.html?page=my-models" class="text-gray-500 hover:text-gray-700 flex items-center">
<i class="fa fa-arrow-left"></i>
<span class="ml-1">返回我的模型</span>
</a>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center text-sm text-gray-600">
<i class="fa fa-cube text-primary mr-2"></i>
<span id="modelTitle">加载中...</span>
</div>
</div>
</div>
</header>
<!-- 对话区域 -->
<main class="flex-1 flex flex-col overflow-hidden bg-gray-50">
<!-- 模型信息栏 -->
<div class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between">
<div class="flex items-center space-x-6">
<div class="flex items-center">
<span class="text-xs text-gray-400 mr-2">训练方法:</span>
<span id="trainMethod" class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded">-</span>
</div>
<div class="flex items-center">
<span class="text-xs text-gray-400 mr-2">基座模型:</span>
<span id="baseModel" class="text-sm text-gray-700">-</span>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center">
<label class="text-xs text-gray-400 mr-2">Temperature:</label>
<input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7" class="w-24">
<span id="temperatureValue" class="ml-2 text-sm text-gray-600">0.7</span>
</div>
<button onclick="clearChat()" class="text-xs text-gray-500 hover:text-gray-700">
<i class="fa fa-trash-o mr-1"></i>清空对话
</button>
</div>
</div>
<!-- 聊天消息区域 -->
<div id="chatContainer" class="flex-1 overflow-y-auto p-6 space-y-4">
<!-- 欢迎消息 -->
<div class="chat-message flex justify-start">
<div class="max-w-3xl bg-white rounded-lg shadow-sm p-4 border border-gray-200">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
<i class="fa fa-robot text-white text-sm"></i>
</div>
<div class="ml-3">
<div class="text-xs text-gray-400 mb-1">AI 助手</div>
<div class="text-sm text-gray-700 leading-relaxed">
您好！我是基于该模型训练的AI助手。请在下方输入您的问题，我会尽力为您解答。
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 输入区域 -->
<div class="bg-white border-t border-gray-200 p-4">
<div class="max-w-4xl mx-auto">
<div class="flex items-stretch gap-3">
<div class="flex-1">
<textarea id="userInput" placeholder="请输入您的问题..." rows="2"
class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:border-primary focus:outline-none resize-none text-sm h-full"
onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"></textarea>
</div>
<button onclick="sendMessage()" id="sendBtn"
class="px-5 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center h-auto self-center">
<i class="fa fa-paper-plane mr-1.5"></i>
<span>发送</span>
</button>
</div>
<div class="mt-2 text-xs text-gray-400 flex items-center">
<i class="fa fa-info-circle mr-1"></i>
按 Enter 发送，Shift+Enter 换行
</div>
</div>
</div>
</main>
</div>
<script>
// API 基础地址
const getApiBase = () => {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
return `${protocol}//${hostname}:7861/api`;
};
const API_BASE = typeof window.API_BASE !== 'undefined' ? window.API_BASE : getApiBase();
// 全局状态
let currentModel = {
name: '',
trainMethod: '',
baseModel: ''
};
let chatHistory = [];
let isLoading = false;
// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
// 解析URL参数
const urlParams = new URLSearchParams(window.location.search);
const modelName = urlParams.get('model');
const trainMethod = urlParams.get('method');
if (modelName) {
currentModel.name = decodeURIComponent(modelName);
document.getElementById('modelTitle').textContent = currentModel.name;
}
if (trainMethod) {
currentModel.trainMethod = decodeURIComponent(trainMethod);
const methodDisplay = {
'lora': 'LoRA',
'full': '全参微调',
'sft': 'SFT',
'dpo': 'DPO',
'cpt': 'CPT'
};
document.getElementById('trainMethod').textContent = methodDisplay[currentModel.trainMethod] || currentModel.trainMethod;
}
// 绑定侧边栏导航点击事件
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const page = this.dataset.page;
if (page === 'logs') {
window.location.href = `main.html?page=${page}`;
} else if (page) {
window.location.href = `main.html?page=${page}`;
}
});
if (link.dataset.page === 'my-models') {
link.classList.add('sidebar-item-active');
link.classList.remove('hover:bg-[#001529]/20');
}
});
updateSidebarSlider();
// 绑定温度滑块
const tempSlider = document.getElementById('temperature');
const tempValue = document.getElementById('temperatureValue');
tempSlider.addEventListener('input', function() {
tempValue.textContent = this.value;
});
// 聚焦输入框
document.getElementById('userInput').focus();
console.log('[DEBUG] 模型推理页面初始化:', currentModel);
});
// 发送消息
async function sendMessage() {
const input = document.getElementById('userInput');
const message = input.value.trim();
if (!message) return;
if (isLoading) return;
if (!currentModel.name) {
alert('请先选择模型');
return;
}
// 添加用户消息
addMessage('user', message);
chatHistory.push({ role: 'user', content: message });
// 清空输入框
input.value = '';
// 显示加载状态
isLoading = true;
updateSendButton(true);
// 添加AI加载提示
const loadingId = addLoadingMessage();
try {
const response = await fetch(`${API_BASE}/model-chat/trained`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
model_name: currentModel.name,
train_method: currentModel.trainMethod || 'lora',
system_prompt: '',
user_question: message,
temperature: parseFloat(document.getElementById('temperature').value),
max_tokens: 2048
})
});
const result = await response.json();
// 移除加载提示
removeLoadingMessage(loadingId);
if (result.code === 0) {
const aiResponse = result.data?.response || '（无回复）';
addMessage('assistant', aiResponse);
chatHistory.push({ role: 'assistant', content: aiResponse });
} else {
addMessage('assistant', `推理失败: ${result.message || '未知错误'}`);
}
} catch (error) {
removeLoadingMessage(loadingId);
addMessage('assistant', `请求异常: ${error.message}`);
} finally {
isLoading = false;
updateSendButton(false);
}
}
// 添加消息到聊天框
function addMessage(role, content) {
const container = document.getElementById('chatContainer');
const isUser = role === 'user';
const messageDiv = document.createElement('div');
messageDiv.className = 'chat-message flex justify-' + (isUser ? 'end' : 'start');
const avatar = isUser
? `<div class="w-8 h-8 rounded-full bg-gray-400 flex items-center justify-center flex-shrink-0">
<i class="fa fa-user text-white text-sm"></i>
</div>`
: `<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
<i class="fa fa-robot text-white text-sm"></i>
</div>`;
const bgClass = isUser ? 'bg-primary text-white' : 'bg-white border border-gray-200';
messageDiv.innerHTML = `
<div class="max-w-3xl ${bgClass} rounded-lg shadow-sm p-4">
<div class="flex items-start ${isUser ? 'flex-row-reverse' : ''}">
${avatar}
<div class="ml-3 ${isUser ? 'text-right' : ''} flex-1">
<div class="text-xs ${isUser ? 'text-gray-300' : 'text-gray-400'} mb-1">
${isUser ? '你' : 'AI 助手'}
</div>
<div class="text-sm leading-relaxed whitespace-pre-wrap">${escapeHtml(content)}</div>
</div>
</div>
</div>
`;
container.appendChild(messageDiv);
container.scrollTop = container.scrollHeight;
}
// 添加加载中的消息
function addLoadingMessage() {
const container = document.getElementById('chatContainer');
const loadingId = 'loading-' + Date.now();
const loadingDiv = document.createElement('div');
loadingDiv.id = loadingId;
loadingDiv.className = 'chat-message flex justify-start';
loadingDiv.innerHTML = `
<div class="max-w-3xl bg-white rounded-lg shadow-sm p-4 border border-gray-200">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
<i class="fa fa-robot text-white text-sm"></i>
</div>
<div class="ml-3">
<div class="text-xs text-gray-400 mb-1">AI 助手</div>
<div class="typing-indicator">
<span></span><span></span><span></span>
</div>
</div>
</div>
</div>
`;
container.appendChild(loadingDiv);
container.scrollTop = container.scrollHeight;
return loadingId;
}
// 移除加载消息
function removeLoadingMessage(id) {
const loadingDiv = document.getElementById(id);
if (loadingDiv) {
loadingDiv.remove();
}
}
// 更新发送按钮状态
function updateSendButton(loading) {
const btn = document.getElementById('sendBtn');
if (loading) {
btn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>处理中';
btn.disabled = true;
btn.classList.add('opacity-50', 'cursor-not-allowed');
} else {
btn.innerHTML = '<i class="fa fa-paper-plane mr-2"></i>发送';
btn.disabled = false;
btn.classList.remove('opacity-50', 'cursor-not-allowed');
}
}
// 清空对话
function clearChat() {
const container = document.getElementById('chatContainer');
container.innerHTML = `
<div class="chat-message flex justify-start">
<div class="max-w-3xl bg-white rounded-lg shadow-sm p-4 border border-gray-200">
<div class="flex items-start">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
<i class="fa fa-robot text-white text-sm"></i>
</div>
<div class="ml-3">
<div class="text-xs text-gray-400 mb-1">AI 助手</div>
<div class="text-sm text-gray-700 leading-relaxed">
对话已清空，请继续提问。
</div>
</div>
</div>
</div>
</div>
`;
chatHistory = [];
}
// HTML转义
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// 更新侧边栏滑块位置
function updateSidebarSlider() {
const slider = document.getElementById('sidebar-slider');
if (!slider) return;
const activeLink = document.querySelector('.nav-link.bg-\\[\\#1890ff\\]\\/10');
if (activeLink) {
const wrapper = activeLink.closest('.nav-item-wrapper');
if (wrapper) {
slider.style.top = wrapper.offsetTop + 'px';
slider.style.height = wrapper.offsetHeight + 'px';
}
}
}
// 暴露到全局
window.sendMessage = sendMessage;
window.clearChat = clearChat;
</script>
</body>
</html>