重构了main.html的主函数
重构了大量的页面的sidebar 优化了代码结构
This commit is contained in:
@@ -16,24 +16,14 @@
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
// 设置当前页面，供侧边栏高亮使用
|
||||
window.sidebarCurrentPage = 'model-compare';
|
||||
</script>
|
||||
<link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
|
||||
<!-- 侧边栏加载器 -->
|
||||
<script src="../js/components/sidebar-loader.js"></script>
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
.bg-primary { background-color: #1890ff; }
|
||||
.text-primary { color: #1890ff; }
|
||||
:root { --primary: #1890ff; }
|
||||
@@ -91,91 +81,8 @@
|
||||
</style>
|
||||
</head>
|
||||
<body class="antialiased bg-gray-50 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-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="#" 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 sidebar-item-active 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="#" 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>
|
||||
<i class="fa fa-question-circle-o text-[#bfcbd9]/70"></i>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<!-- 侧边栏容器 -->
|
||||
<div id="sidebar-container"></div>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<!-- 顶部导航 -->
|
||||
<header class="bg-white border-b border-gray-200 shadow-sm">
|
||||
@@ -270,6 +177,11 @@
|
||||
let compareTaskId = null;
|
||||
let taskName = '';
|
||||
let userQuestion = '';
|
||||
let systemPrompt = '';
|
||||
let temperature = 0.7;
|
||||
let topP = 0.9;
|
||||
let topK = 50;
|
||||
let maxTokens = 2048;
|
||||
let chatResults = [];
|
||||
let useLocalStorageResults = false; // 是否使用localStorage中的结果
|
||||
|
||||
@@ -281,6 +193,13 @@
|
||||
"根据我的理解，这个问题涉及到以下几个方面：首先，需要明确问题的具体背景；其次，要分析相关的技术方案；最后，需要评估实施的成本和收益。建议您先收集更多信息再做决定。"
|
||||
];
|
||||
|
||||
// 模型类型常量
|
||||
const MODEL_TYPE = {
|
||||
API: 'api', // API调用模型（如OpenAI、百度等）
|
||||
LOCAL: 'local', // 本地模型（vLLM）
|
||||
TRAINED: 'trained' // 训练后的模型（llamafactory）
|
||||
};
|
||||
|
||||
// 页面初始化
|
||||
async function initPage() {
|
||||
try {
|
||||
@@ -288,8 +207,15 @@
|
||||
compareTaskId = urlParams.get('taskId');
|
||||
taskName = urlParams.get('taskName') || '对比任务';
|
||||
userQuestion = decodeURIComponent(urlParams.get('question') || '');
|
||||
systemPrompt = decodeURIComponent(urlParams.get('systemPrompt') || '');
|
||||
temperature = parseFloat(urlParams.get('temperature') || 0.7);
|
||||
topP = parseFloat(urlParams.get('topP') || 0.9);
|
||||
topK = parseInt(urlParams.get('topK') || 50);
|
||||
maxTokens = parseInt(urlParams.get('maxTokens') || 2048);
|
||||
const needRealData = urlParams.get('real') === '1';
|
||||
|
||||
console.log('[INIT] 推理参数:', { temperature, topP, topK, maxTokens, systemPrompt });
|
||||
|
||||
// 设置用户提问
|
||||
const questionTextEl = document.getElementById('questionText');
|
||||
if (questionTextEl) {
|
||||
@@ -345,25 +271,107 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 调用批量对话 API 获取结果
|
||||
async function fetchChatResults() {
|
||||
// 使用 transformers 本地模型进行对话
|
||||
async function chatWithLocalModel(modelPath, modelName) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model-chat/batch`, {
|
||||
const response = await fetch(`${API_BASE}/model-chat/local/chat`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
model_ids: selectedModelIds,
|
||||
system_prompt: '',
|
||||
model_path: modelPath,
|
||||
system_prompt: systemPrompt,
|
||||
user_question: userQuestion,
|
||||
temperature: 0.7,
|
||||
max_tokens: 2048
|
||||
temperature: temperature,
|
||||
max_tokens: maxTokens
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
if (result.code === 0 && result.data) {
|
||||
chatResults = result.data;
|
||||
return {
|
||||
model_id: modelName,
|
||||
model_name: modelName,
|
||||
success: true,
|
||||
response: result.data.response || ''
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
model_id: modelName,
|
||||
model_name: modelName,
|
||||
success: false,
|
||||
error: result.message || '推理失败'
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
model_id: modelName,
|
||||
model_name: modelName,
|
||||
success: false,
|
||||
error: error.message
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// 调用批量对话 API 获取结果
|
||||
async function fetchChatResults() {
|
||||
try {
|
||||
// 1. 预加载本地和训练后的模型
|
||||
console.log('[FETCH] 开始预加载本地/训练模型...');
|
||||
const { localModelsNeedingPreload, trainedModelsNeedingPreload } = await preloadAllModels(selectedModelIds);
|
||||
|
||||
// 2. 获取所有模型详情，按类型分组
|
||||
const apiModels = []; // API 调用模型 (使用 batch API)
|
||||
const localModels = []; // 本地 transformers 模型
|
||||
const trainedModels = []; // 训练后的 llamafactory 模型
|
||||
|
||||
for (const modelId of selectedModelIds) {
|
||||
const model = await getModelDetails(modelId);
|
||||
if (model) {
|
||||
const modelType = getModelType(model);
|
||||
if (modelType === MODEL_TYPE.API) {
|
||||
apiModels.push(modelId);
|
||||
} else if (modelType === MODEL_TYPE.LOCAL) {
|
||||
localModels.push({ id: modelId, name: model.name || modelId, path: model.path });
|
||||
} else if (modelType === MODEL_TYPE.TRAINED) {
|
||||
trainedModels.push({ id: modelId, name: model.name || modelId, basePath: model.path || '' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 收集结果
|
||||
let results = [];
|
||||
|
||||
// API 模型使用批量接口
|
||||
if (apiModels.length > 0) {
|
||||
console.log(`[FETCH] 调用 API 模型批量接口: ${apiModels.length} 个模型`);
|
||||
const response = await fetch(`${API_BASE}/model-chat/batch`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
model_ids: apiModels,
|
||||
system_prompt: systemPrompt,
|
||||
user_question: userQuestion,
|
||||
temperature: temperature,
|
||||
max_tokens: maxTokens
|
||||
})
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.code === 0 && result.data) {
|
||||
results = results.concat(result.data);
|
||||
}
|
||||
}
|
||||
|
||||
// 本地 transformers 模型使用单独接口
|
||||
for (const lm of localModels) {
|
||||
console.log(`[FETCH] 调用本地模型: ${lm.name}, 路径: ${lm.path}`);
|
||||
const result = await chatWithLocalModel(lm.path, lm.name);
|
||||
results.push(result);
|
||||
}
|
||||
|
||||
// 训练后的 llamafactory 模型使用单独接口（如果有的话）
|
||||
// 这里假设 batch API 也能处理训练后的模型，如果没有则需要单独实现
|
||||
|
||||
chatResults = results;
|
||||
console.log(`[FETCH] 共获取 ${results.length} 个模型的结果`);
|
||||
} catch (error) {
|
||||
console.error('调用API失败:', error);
|
||||
}
|
||||
@@ -415,6 +423,200 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 获取模型详情
|
||||
async function getModelDetails(modelId) {
|
||||
// 支持 ID 数字或模型名称字符串
|
||||
const model = allModels.find(m =>
|
||||
m.id == modelId || m.id === modelId || m.name === modelId
|
||||
);
|
||||
if (model) return model;
|
||||
|
||||
// 如果没找到，尝试从 API 获取
|
||||
try {
|
||||
// 判断是数字ID还是名称
|
||||
const isNumericId = /^\d+$/.test(modelId);
|
||||
let apiUrl;
|
||||
if (isNumericId) {
|
||||
apiUrl = `${API_BASE}/model-manage/${modelId}`;
|
||||
} else {
|
||||
// 名称使用 name/<model_name> 端点
|
||||
apiUrl = `${API_BASE}/model-manage/name/${encodeURIComponent(modelId)}`;
|
||||
}
|
||||
const response = await fetch(apiUrl);
|
||||
const result = await response.json();
|
||||
if (result.code === 0) {
|
||||
return result.data;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取模型详情失败:', e);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 判断模型类型
|
||||
function getModelType(model) {
|
||||
if (!model) return null;
|
||||
const source = model.model_source || '';
|
||||
// 训练后的模型
|
||||
if (source === 'trained' || model.is_trained === true) {
|
||||
return MODEL_TYPE.TRAINED;
|
||||
}
|
||||
// 本地模型 (path 以 :// 开头表示 vLLM API 地址，或者是 transformers 本地路径)
|
||||
if (source === 'local' || (model.path && model.path.includes('://'))) {
|
||||
return MODEL_TYPE.LOCAL;
|
||||
}
|
||||
// API 调用模型
|
||||
if (source === 'api') {
|
||||
return MODEL_TYPE.API;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 判断是否为本地模型或训练后的模型
|
||||
function isLocalOrTrainedModel(model) {
|
||||
const type = getModelType(model);
|
||||
return type === MODEL_TYPE.LOCAL || type === MODEL_TYPE.TRAINED;
|
||||
}
|
||||
|
||||
// 预加载训练后的模型 (使用 llamafactory)
|
||||
async function preloadTrainedModel(modelName, baseModelPath) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model-chat/trained/preload`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
model_name: modelName,
|
||||
train_method: 'lora',
|
||||
base_model_path: baseModelPath
|
||||
})
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.code === 0) {
|
||||
console.log(`[PRELOAD] 训练模型 ${modelName} 预加载成功`);
|
||||
return true;
|
||||
} else {
|
||||
console.warn(`[PRELOAD] 训练模型 ${modelName} 预加载失败: ${result.message}`);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[PRELOAD] 训练模型 ${modelName} 预加载异常:`, error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 预加载本地模型 (使用 transformers)
|
||||
async function preloadLocalModel(modelPath, modelName) {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/model-chat/local/preload`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
model_path: modelPath,
|
||||
model_name: modelName || '本地模型'
|
||||
})
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.code === 0) {
|
||||
console.log(`[PRELOAD] 本地模型 ${modelName} 预加载成功`);
|
||||
return true;
|
||||
} else {
|
||||
console.warn(`[PRELOAD] 本地模型 ${modelName} 预加载失败: ${result.message}`);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[PRELOAD] 本地模型 ${modelName} 预加载异常:`, error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新卡片状态显示
|
||||
function updateCardStatus(modelId, status, message) {
|
||||
const statusEl = document.getElementById(`status-${modelId}`);
|
||||
if (statusEl) {
|
||||
statusEl.innerHTML = `<i class="fa ${status === 'loading' ? 'fa-spinner fa-spin' : status === 'success' ? 'fa-check-circle text-green-500' : 'fa-times-circle text-red-500'} mr-1"></i> ${message}`;
|
||||
if (status === 'loading') {
|
||||
statusEl.classList.remove('text-gray-400', 'text-green-500', 'text-red-500');
|
||||
statusEl.classList.add('text-primary');
|
||||
} else if (status === 'success') {
|
||||
statusEl.classList.remove('text-primary', 'text-gray-400', 'text-red-500');
|
||||
statusEl.classList.add('text-green-500');
|
||||
} else if (status === 'error') {
|
||||
statusEl.classList.remove('text-primary', 'text-gray-400', 'text-green-500');
|
||||
statusEl.classList.add('text-red-500');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预加载所有本地和训练后的模型
|
||||
async function preloadAllModels(modelIds) {
|
||||
const localModelsNeedingPreload = [];
|
||||
const trainedModelsNeedingPreload = [];
|
||||
|
||||
for (const modelId of modelIds) {
|
||||
const model = await getModelDetails(modelId);
|
||||
if (model) {
|
||||
const modelType = getModelType(model);
|
||||
|
||||
// 本地模型 (transformers)
|
||||
if (modelType === MODEL_TYPE.LOCAL) {
|
||||
localModelsNeedingPreload.push({
|
||||
id: modelId,
|
||||
name: model.name || modelId,
|
||||
path: model.path || ''
|
||||
});
|
||||
}
|
||||
// 训练后的模型 (llamafactory)
|
||||
if (modelType === MODEL_TYPE.TRAINED) {
|
||||
trainedModelsNeedingPreload.push({
|
||||
id: modelId,
|
||||
name: model.name || modelId,
|
||||
basePath: model.path || model.base_model_path || ''
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预加载本地模型 (transformers)
|
||||
if (localModelsNeedingPreload.length > 0) {
|
||||
// 更新所有本地模型的状态为"加载中"
|
||||
for (const lm of localModelsNeedingPreload) {
|
||||
updateCardStatus(lm.id, 'loading', '正在加载模型...');
|
||||
}
|
||||
|
||||
// 预加载每个本地模型
|
||||
for (const lm of localModelsNeedingPreload) {
|
||||
console.log(`[PRELOAD] 开始预加载本地模型: ${lm.name}, 路径: ${lm.path}`);
|
||||
await preloadLocalModel(lm.path, lm.name);
|
||||
}
|
||||
|
||||
// 更新状态为"加载完成"
|
||||
for (const lm of localModelsNeedingPreload) {
|
||||
updateCardStatus(lm.id, 'success', '模型已加载');
|
||||
}
|
||||
}
|
||||
|
||||
// 预加载训练后的模型 (llamafactory)
|
||||
if (trainedModelsNeedingPreload.length > 0) {
|
||||
// 更新所有训练模型的状态为"加载中"
|
||||
for (const tm of trainedModelsNeedingPreload) {
|
||||
updateCardStatus(tm.id, 'loading', '正在加载模型...');
|
||||
}
|
||||
|
||||
// 预加载每个训练模型
|
||||
for (const tm of trainedModelsNeedingPreload) {
|
||||
console.log(`[PRELOAD] 开始预加载训练模型: ${tm.name}`);
|
||||
await preloadTrainedModel(tm.name, tm.basePath);
|
||||
}
|
||||
|
||||
// 更新状态为"加载完成"
|
||||
for (const tm of trainedModelsNeedingPreload) {
|
||||
updateCardStatus(tm.id, 'success', '模型已加载');
|
||||
}
|
||||
}
|
||||
|
||||
return { localModelsNeedingPreload, trainedModelsNeedingPreload };
|
||||
}
|
||||
|
||||
// 初始化输出卡片
|
||||
function initializeOutputCards(showLoading = false) {
|
||||
const grid = document.getElementById('outputGrid');
|
||||
@@ -425,10 +627,10 @@
|
||||
? selectedModelIds.slice(0, 4)
|
||||
: [1, 2, 3, 4];
|
||||
|
||||
const statusText = showLoading ? '加载中...' : '等待中';
|
||||
const statusText = showLoading ? '准备中...' : '等待中';
|
||||
const statusIcon = showLoading ? 'fa-spinner fa-spin' : 'fa-clock-o';
|
||||
const statusClass = showLoading ? 'text-primary' : 'text-gray-400';
|
||||
const contentText = showLoading ? '<span class="text-gray-400">正在调用模型API...</span>' : '<span class="text-gray-300">模型即将开始生成回答...</span>';
|
||||
const contentText = showLoading ? '<span class="text-gray-400">正在加载模型并准备推理...</span>' : '<span class="text-gray-300">模型即将开始生成回答...</span>';
|
||||
|
||||
grid.innerHTML = displayModelIds.map((modelId, index) => {
|
||||
// 支持 ID 数字或模型名称字符串匹配
|
||||
|
||||
Reference in New Issue
Block a user