GPU检测修改

This commit is contained in:
2026-01-26 16:18:23 +08:00
parent 18e88601c0
commit b7cd8097ac
4 changed files with 445 additions and 104 deletions

View File

@@ -826,23 +826,45 @@
}
}
// 获取GPU数据模拟数据,实际可从API获取
// 获取GPU数据真实API获取
async function fetchGPUs() {
// 实际项目中可以调用后端API获取GPU信息
// const response = await fetch(`${API_BASE}/gpus`);
// return await response.json();
try {
const response = await fetch(`${API_BASE}/system-info`);
const result = await response.json();
// 模拟GPU数据
return [
{ id: 'gpu0', name: 'NVIDIA A100 80GB', memory: '80GB', cuda_cores: 6912, available: true },
{ id: 'gpu1', name: 'NVIDIA A100 80GB', memory: '80GB', cuda_cores: 6912, available: true },
{ id: 'gpu2', name: 'NVIDIA A100 40GB', memory: '40GB', cuda_cores: 6912, available: true },
{ id: 'gpu3', name: 'NVIDIA A100 40GB', memory: '40GB', cuda_cores: 6912, available: false },
{ id: 'gpu4', name: 'NVIDIA V100 32GB', memory: '32GB', cuda_cores: 5120, available: true },
{ id: 'gpu5', name: 'NVIDIA V100 16GB', memory: '16GB', cuda_cores: 5120, available: false },
{ id: 'gpu6', name: 'NVIDIA RTX 3090', memory: '24GB', cuda_cores: 10496, available: true },
{ id: 'gpu7', name: 'NVIDIA RTX 4090', memory: '24GB', cuda_cores: 16384, available: true }
];
if (result.code === 0 && result.data.gpu && result.data.gpu.length > 0) {
// 将真实GPU数据转换为前端所需格式
return result.data.gpu.map((gpu, index) => ({
id: `gpu${index}`,
name: gpu.name || `GPU ${index}`,
memory: `${gpu.memory_total_gb}GB`,
cuda_cores: 'N/A',
available: gpu.power_w > 0 || gpu.gpu_percent >= 0, // 有数据即为可用
real_data: gpu // 保存真实数据供显示
}));
}
// 如果没有真实数据,尝试获取驱动版本
const driverVersion = result.data.gpu?.[0]?.driver_version || '';
if (driverVersion) {
return [{
id: 'gpu0',
name: 'NVIDIA GPU (Detected)',
memory: 'Unknown',
cuda_cores: 'N/A',
available: true,
real_data: result.data.gpu?.[0] || null
}];
}
throw new Error('未检测到GPU设备');
} catch (error) {
console.warn('获取GPU信息失败使用模拟数据:', error);
// 失败时返回模拟数据作为后备
return [
{ id: 'gpu0', name: 'NVIDIA GPU (未检测到)', memory: 'Unknown', cuda_cores: 'N/A', available: false }
];
}
}
// 渲染GPU列表点击卡片选中无需复选框
@@ -850,7 +872,18 @@
const container = document.getElementById('gpuSelectionArea');
if (!container) return;
container.innerHTML = gpus.map(gpu => `
container.innerHTML = gpus.map(gpu => {
// 从真实数据中提取监控信息
const realData = gpu.real_data || {};
const memoryUsed = realData.memory_used_gb || 0;
const memoryTotal = realData.memory_total_gb || 0;
const temp = realData.temperature || 0;
const power = realData.power_w || 0;
const gpuPercent = realData.gpu_percent || 0;
const fanSpeed = realData.fan_speed || 0;
const clock = realData.clock_mhz || 0;
return `
<div id="gpu_card_${gpu.id}"
class="gpu-card ${!gpu.available ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:border-primary'} border rounded-lg p-3 transition-all"
onclick="toggleGPUSelection('${gpu.id}')"
@@ -865,14 +898,27 @@
? '<i class="fa fa-check-circle text-green-600 text-xs"></i>'
: '<i class="fa fa-times-circle text-red-500 text-xs"></i>'}
</div>
<div class="text-xs text-gray-500 mt-1">
<span class="mr-2"><i class="fa fa-floppy-o mr-1"></i>${gpu.memory}</span>
<span><i class="fa fa-cog mr-1"></i>${gpu.cuda_cores} CUDA</span>
<div class="text-xs text-gray-500 mt-1 flex flex-wrap gap-2">
<span class="mr-2"><i class="fa fa-floppy-o mr-1"></i>${memoryUsed}/${memoryTotal} GB</span>
<span class="mr-2"><i class="fa fa-thermometer-half mr-1"></i>${temp}°C</span>
<span class="mr-2"><i class="fa fa-bolt mr-1"></i>${power} W</span>
<span><i class="fa fa-tachometer mr-1"></i>${clock} MHz</span>
</div>
<!-- GPU利用率进度条 -->
<div class="mt-2">
<div class="flex justify-between text-[10px] text-gray-400 mb-0.5">
<span>GPU: ${gpuPercent}%</span>
<span>Fan: ${fanSpeed}%</span>
</div>
<div class="h-1.5 bg-gray-200 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-green-400 via-yellow-400 to-red-400 transition-all"
style="width: ${gpuPercent}%"></div>
</div>
</div>
</div>
</div>
</div>
`).join('');
`}).join('');
}
// 切换GPU选择状态
@@ -884,11 +930,16 @@
if (card.classList.contains('border-primary')) {
// 取消选中
card.classList.remove('border-primary', 'bg-blue-50');
card.querySelector('.fa-check-circle').classList.replace('text-primary', 'text-green-600');
// 恢复图标为可选中状态(绿色勾选圈)
const icon = card.querySelector('.fa-check, .fa-check-circle');
if (icon) {
icon.classList.remove('fa-check', 'text-primary');
icon.classList.add('fa-check-circle', 'text-green-600');
}
} else {
// 选中
card.classList.add('border-primary', 'bg-blue-50');
// 移除检查图标,添加选中标记
// 切换图标为已选中状态(蓝色勾选)
const icon = card.querySelector('.fa-check-circle');
if (icon) {
icon.classList.remove('fa-check-circle', 'text-green-600');
@@ -900,7 +951,17 @@
// 获取选中的GPU列表
function getSelectedGPUs() {
const cards = document.querySelectorAll('.gpu-card.border-primary');
return Array.from(cards).map(card => card.dataset.gpuId);
return Array.from(cards).map(card => {
const gpuId = card.dataset.gpuId;
// 获取GPU名称和显存信息用于显示
const nameEl = card.querySelector('.text-gray-700');
const name = nameEl ? nameEl.textContent : gpuId;
// 返回GPU信息对象
return {
id: gpuId,
name: name
};
});
}
// 提交表单