GPU检测修改
This commit is contained in:
@@ -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
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
|
||||
Reference in New Issue
Block a user