Komari主题如何实现GPU用量显示？保姆级修改指南
最近在折腾服务器仪表盘的时候，发现很多小伙伴都在用Komari这个主题，界面确实清爽好看。但是有个痛点，它默认只展示CPU、内存和硬盘的占用情况，对于手头有独显或者高性能显卡（比如用来炼丹/AI绘图）的朋友来说，看不到GPU占用率总觉得少了点什么。
今天就不发链接了，直接给干货，教大家怎么给Komari动动手术，把GPU用量显示加进去。这套方案不仅适用于NVIDIA显卡，原理通用的，只要能抓到数据就能展示。
为什么Komari默认不显示GPU？
Komari作为一个轻量级主题，主要依赖系统通用的API获取信息。CPU和内存数据在大部分Linux发行版里获取方式都差不多，但GPU这块就复杂了：你是N卡还是A卡？装没装驱动？用的是专有驱动还是开源驱动？
这就导致开发者很难写一个“万能”的代码来适配所有环境。所以，我们需要自己写个后端脚本，把GPU数据转换成主题能读懂的格式。
准备工作：你需要什么？
在开始之前，确保你的服务器环境符合以下条件：
- Python环境：服务器上最好装了Python 3，咱们用Flask写个微型API来提供数据。
- 显卡驱动：N卡用户确保
nvidia-smi命令能跑通并输出数据；A卡用户可以用rocm-smi或者/sys/class/drm下的数据节点。 - 编辑器：也就是你能修改Komari模板文件的能力。
第一步：编写GPU数据获取后端
既然是普通博主发文，咱们就不搞太复杂的编译语言了，Python脚本最实在。创建一个叫gpu_status.py的文件，内容如下（以N卡为例）：
import subprocess
import json
from flask import Flask, jsonify
app = Flask(__name__)
def get_gpu_info():
try:
# 调用nvidia-smi获取JSON格式数据
result = subprocess.run(['nvidia-smi', '--query-gpu=utilization.gpu,memory.used,memory.total', '--format=csv,noheader,nounits'],
stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True)
if result.returncode != 0:
return None
# 解析数据，假设是单卡
util, used, total = result.stdout.strip().split(', ')
return {
"gpu_util": int(util),
"vram_used": int(used),
"vram_total": int(total)
}
except Exception as e:
print(f"Error getting GPU info: {e}")
return None
@app.route('/gpu_status')
def gpu_status():
data = get_gpu_info()
if data:
return jsonify(data)
else:
return jsonify({"error": "Unable to fetch GPU data"}), 500
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5001)
``
把这个脚本跑起来，或者用systemd托管，保证它能一直监听在`127.0.0.1:5001`。此时访问`http://127.0.0.1:5001/gpu_status`，你应该能看到GPU的占用率和显存数据了。
### 第二步：修改Komari模板文件
Komari的前端通常是通过JavaScript去请求后端数据的。你需要找到它的HTML模板文件（通常在`templates`或者`layout`相关目录下）。
**1. 添加HTML元素**
找到显示系统信息的区域，通常是一排卡片或者列表。在CPU/内存卡片旁边，加上一个GPU的壳子：
```html
<div class="stat-card" id="gpu-stats">
<div class="stat-title">GPU Status</div>
<div class="stat-content">
<div class="progress-bar">
<div id="gpu-util-bar" style="width: 0%"></div>
</div>
<span id="gpu-util-text">0%</span>
<div class="stat-detail">
VRAM: <span id="vram-text">0/0 MB</span>
</div>
</div>
</div>
``
**2. 注入JavaScript逻辑**
Komari一般会有个主JS文件负责加载其他数据。你需要写一段AJAX请求去调用刚才写的Python接口。找到负责更新数据的函数，在里面加上这段代码：
```javascript
// 确保这段代码在页面加载完成后执行，或者在原有的定时器里调用
function updateGPUStatus() {
fetch('http://127.0.0.1:5001/gpu_status') // 如果是跨域，确保Python这边配置了Cors，或者建议走反向代理
.then(response => response.json())
.then(data => {
if (data.error) {
console.log('GPU data not available');
document.getElementById('gpu-stats').style.display = 'none'; // 没数据就隐藏
return;
}
// 更新进度条宽度
document.getElementById('gpu-util-bar').style.width = data.gpu_util + '%';
// 更新百分比文字
document.getElementById('gpu-util-text').innerText = data.gpu_util + '%';
// 更新显存显示
document.getElementById('vram-text').innerText = `${data.vram_used} MB / ${data.vram_total} MB`;
})
.catch(error => console.error('Error fetching GPU status:', error));
}
// 每5秒刷新一次
setInterval(updateGPUStatus, 5000);
// 初始执行一次
updateGPUStatus();
第三步：反向代理与样式微调
这里有个坑要注意，如果你直接在前端请求127.0.0.1:5001，由于浏览器安全策略，可能会报跨域错误（CORS）。
推荐做法：用Nginx做一个简单的代理。
在Nginx配置文件里加一段：
location /api/gpu {
proxy_pass http://127.0.0.1:5001/gpu_status;
}
然后JS里的请求地址改成/api/gpu，这样就完美了。
样式方面，Komari用的是简洁风，你可以加个简单的CSS判断，比如GPU占用超过90%就把进度条标红，提醒自己显卡快爆了。
常见问题排查
- Python脚本报错 permission denied：给脚本加上执行权限
chmod +x gpu_status.py，或者直接用python3 gpu_status.py跑。 - nvidia-smi command not found：说明驱动没装好或者没加入环境变量，这时候建议重装驱动或者检查PATH。
- 数据不更新：检查Nginx代理配置有没有加缓存，或者浏览器的JS有没有报错（F12大法好）。
总结
虽然没有现成的开关可以一秒开启GPU显示，但Komari胜在结构简单、易于定制。利用Python爬取底层数据，再通过JavaScript渲染到前端，这不仅解决了GPU显示的问题，其实也给了大家一个思路——想要监控温度、IO读写甚至是网速波动，都可以照葫芦画瓢加进去。
希望这篇手把手教程能帮到正在纠结这个问题的朋友。如果有其他个性化需求，也可以在评论区聊聊，咱们一起把服务器面板玩出花来。
评论已关闭