DeOldify模型监控与可视化：使用Web技术打造实时仪表盘

DeOldify模型监控与可视化：使用Web技术打造实时仪表盘

每次看到那些黑白老照片在DeOldify模型的处理下焕发新生，都让人感叹技术的魅力。但作为负责维护这个服务的工程师，我的视角可能有点不同——我更关心它背后是否在稳定运行。模型服务上线后，就像一台7x24小时运转的机器，你没法一直盯着它看，但又必须随时知道它的“健康状况”：GPU是不是快满了？处理一张图片要多久？用户最喜欢给哪类照片上色？

这些问题如果靠手动查日志、看命令行，不仅效率低下，还容易错过关键信息。我们需要一个更直观、更实时的“驾驶舱”，让运维和业务人员一眼就能掌握全局。这就是为什么我们要用Web技术，为DeOldify模型服务打造一个专属的实时监控仪表盘。

1. 为什么需要监控DeOldify模型服务？

在深入技术细节之前，我们先聊聊为什么这件事值得做。DeOldify模型，特别是处理高分辨率图片时，对GPU资源消耗不小。如果没有监控，你可能会遇到这些情况：

• 半夜告警：服务突然卡死，用户投诉涌来，你才从睡梦中惊醒，手忙脚乱地排查。
• 资源浪费：GPU使用率长期很低，但你又不敢轻易缩容，因为不知道高峰期的真实压力。
• 业务盲区：产品经理问你：“用户最喜欢修复什么类型的照片？”你只能挠头说：“我查查日志……可能得花半天时间。”

一个设计良好的监控仪表盘，能把这些“事后救火”变成“事前预防”。它能告诉你：

• 服务是否健康：当前能否正常处理请求？
• 资源是否充足：GPU、内存够用吗？会不会马上要扩容？
• 用户体验如何：平均处理速度是快是慢？有没有超时的请求？
• 业务趋势是什么：哪些类型的图片处理需求最大？流量有没有周期性变化？

接下来，我们就一步步看看，怎么用常见的Web技术栈，把这些抽象的数据变成直观的图表。

2. 仪表盘设计与技术选型

我们要建的仪表盘，核心目标是直观和实时。这意味着数据不能是静态的，图表要能自己动起来，反映最新状态。

2.1 监控指标定义

首先，我们得确定到底要监控什么。对于DeOldify这样的AI图片处理服务，我通常会关注四类指标：

1. 资源指标：这是服务的“体力”。

   • GPU使用率：核心中的核心，直接决定并发处理能力。
   • 显存使用量：处理大图时，显存不足会导致失败。
   • 系统内存与CPU使用率：虽然主要负载在GPU，但整体系统资源也需要关注。

2. 性能指标：这是服务的“速度”。

   • 请求量（QPS）：每秒处理的图片数量。
   • 平均处理耗时：从收到图片到返回结果的平均时间。
   • 分位耗时（P90/P99）：比如P99耗时是2000ms，意味着99%的请求在2秒内完成，这能反映长尾延迟。

3. 业务指标：这是服务的“内容”。

   • 热门图片类别：通过简单的图像分类或标签分析，统计人像、风景、建筑、文档等类别的处理占比。
   • 成功率：处理成功的请求比例。
   • 输入图片平均尺寸：了解用户上传图片的普遍大小。

4. 状态指标：这是服务的“心跳”。

   • 服务活跃实例数：如果用了多个容器或进程。
   • 最近错误信息：滚动显示最新的几条错误日志。

2.2 技术栈选择

为了实现实时可视化，我们需要一套从前端到后端的轻量级方案：

• 前端可视化：ECharts。这是百度开源的一个图表库，功能强大，文档齐全，社区活跃。它的优点在于能轻松创建各种交互式图表，并且支持数据的实时更新，非常适合做仪表盘。相比D3.js，它更上层，开发效率高；相比Chart.js，它在复杂图表和大型数据集的性能上更有优势。
• 前端框架：为了快速搭建单页面应用，我选择Vue 3。它的响应式系统和组件化开发，能让图表组件和数据更新逻辑变得非常清晰。当然，你也可以用React或纯JavaScript，看团队熟悉什么。
• 后端与数据：假设DeOldify模型服务本身是用Python（例如FastAPI或Flask）部署的。我们不需要一个复杂的独立后端，可以：
  1. 在模型服务中埋点，将上述指标数据定期（如每5秒）写入一个时序数据库，如InfluxDB，或者更简单的，先写入Redis。
  2. 创建一个轻量的Node.js或Python中间层服务，它负责从数据库/Redis中查询最新数据，并通过WebSocket或Server-Sent Events (SSE)推送给前端。WebSocket适合双向高频通信，SSE更简单，适合服务器向客户端的单向推送。
• 数据传输：为了实时性，放弃传统的HTTP轮询，采用WebSocket。前端与中间层服务建立WebSocket连接，后端一旦有新的指标数据就立即推送，前端图表随之平滑更新。

整个数据流大致是这样的：DeOldify服务 -> (埋点写入) -> InfluxDB/Redis -> (中间层服务读取) -> WebSocket -> 前端Vue应用 -> ECharts渲染。

3. 构建实时数据后端

理论说完了，我们来点实际的代码。首先从后端开始，看看数据怎么来。

3.1 在DeOldify服务中埋点

我们需要修改或增强现有的DeOldify服务代码，在关键位置收集数据。这里以Python FastAPI为例：

# deoldify_service.py (部分代码) import time import psutil import pynvml # 用于获取NVIDIA GPU信息 from collections import defaultdict import asyncio import redis # 假设用Redis做临时存储 # 初始化Redis连接和指标存储 redis_client = redis.Redis(host='localhost', port=6379, db=0) request_stats = defaultdict(list) CATEGORIES = ['portrait', 'landscape', 'building', 'document', 'others'] async def predict_colorize(image_data, image_category='others'): """ 处理图片上色请求，并记录指标 """ start_time = time.time() # 1. 记录请求开始 redis_client.incr('total_requests_today') # 日请求总量+1 # 2. 调用模型进行上色处理 (这里是你的核心模型推理代码) # colored_image = model.predict(image_data) # 模拟处理耗时 processing_time = time.time() - start_time # 3. 记录性能指标 # 将本次处理耗时存入一个列表，用于计算平均值和分位值 redis_client.lpush('recent_latencies', processing_time) redis_client.ltrim('recent_latencies', 0, 999) # 只保留最近1000次 # 4. 记录业务指标（图片类别） redis_client.hincrby('category_counts', image_category, 1) # 5. 获取并记录资源指标 (每5秒收集一次，这里简化为每次请求收集) # 通常资源收集有独立定时任务，此处仅为示例 record_system_metrics() return colored_image def record_system_metrics(): """记录系统资源指标到Redis""" # 获取GPU信息 (需要pynvml) try: pynvml.nvmlInit() handle = pynvml.nvmlDeviceGetHandleByIndex(0) # 第一块GPU gpu_util = pynvml.nvmlDeviceGetUtilizationRates(handle).gpu gpu_memory = pynvml.nvmlDeviceGetMemoryInfo(handle) gpu_mem_percent = (gpu_memory.used / gpu_memory.total) * 100 pynvml.nvmlShutdown() except: gpu_util = 0 gpu_mem_percent = 0 # 获取CPU和内存 cpu_percent = psutil.cpu_percent(interval=None) memory = psutil.virtual_memory() metrics = { 'timestamp': int(time.time() * 1000), # 毫秒时间戳 'gpu_util': gpu_util, 'gpu_mem': gpu_mem_percent, 'cpu_util': cpu_percent, 'mem_util': memory.percent, 'qps': calculate_current_qps() # 需要另一个函数计算瞬时QPS } # 将指标数据作为JSON字符串存入Redis的一个列表或流中 redis_client.lpush('metrics_stream', json.dumps(metrics)) redis_client.ltrim('metrics_stream', 0, 119) # 保留最近2分钟的数据（假设5秒一次） def calculate_current_qps(): """简单计算当前QPS（每秒查询率）""" current_time = time.time() # ... 逻辑：统计最近1秒内的请求数 # 这里简化实现，实际可能需要更精确的滑动窗口 return recent_request_count

3.2 创建数据推送服务

有了数据，我们需要一个服务把它推送给前端。这里用一个简单的Node.js + WebSocket服务示例：

// server.js - WebSocket 数据推送服务 const WebSocket = require('ws'); const Redis = require('ioredis'); const http = require('http'); // 连接Redis const redisClient = new Redis(); const wss = new WebSocket.Server({ port: 8080 }); // 存储所有连接的客户端 const clients = new Set(); wss.on('connection', (ws) => { console.log('新的仪表盘客户端连接'); clients.add(ws); // 连接建立后，立即发送一次全量数据 sendInitialData(ws); ws.on('close', () => { console.log('客户端断开连接'); clients.delete(ws); }); }); // 定时从Redis获取数据并推送给所有客户端 setInterval(async () => { if (clients.size === 0) return; const dashboardData = await fetchDashboardData(); const dataString = JSON.stringify({ type: 'metrics_update', data: dashboardData, timestamp: Date.now() }); // 广播给所有连接的客户端 clients.forEach(client => { if (client.readyState === WebSocket.OPEN) { client.send(dataString); } }); }, 2000); // 每2秒推送一次 async function fetchDashboardData() { // 从Redis中获取各类指标 const [ rawMetrics, categoryCounts, recentLatencies ] = await Promise.all([ redisClient.lrange('metrics_stream', 0, -1), // 获取最新资源指标 redisClient.hgetall('category_counts'), // 获取分类统计 redisClient.lrange('recent_latencies', 0, 99) // 获取最近100次耗时 ]); // 解析和处理数据... const latestMetric = JSON.parse(rawMetrics[0] || '{}'); const latencies = recentLatencies.map(Number); const avgLatency = latencies.length > 0 ? (latencies.reduce((a, b) => a + b, 0) / latencies.length).toFixed(0) : 0; // 计算P90延迟 latencies.sort((a, b) => a - b); const p90Index = Math.floor(latencies.length * 0.9); const p90Latency = latencies[p90Index] || 0; return { resource: { gpuUtil: latestMetric.gpu_util || 0, gpuMem: latestMetric.gpu_mem || 0, cpuUtil: latestMetric.cpu_util || 0, memUtil: latestMetric.mem_util || 0, qps: latestMetric.qps || 0 }, performance: { avgLatency, p90Latency: p90Latency.toFixed(0), totalRequests: await redisClient.get('total_requests_today') || 0 }, business: { categories: categoryCounts || {} } }; } async function sendInitialData(ws) { const data = await fetchDashboardData(); ws.send(JSON.stringify({ type: 'initial_data', data: data })); } console.log('WebSocket 数据推送服务运行在 ws://localhost:8080');

4. 开发前端监控仪表盘

后端数据流打通了，现在我们来构建前端的可视化界面。使用Vue 3和ECharts。

4.1 项目初始化与WebSocket连接

首先，创建一个Vue项目并安装ECharts。

npm create vue@latest deoldify-dashboard cd deoldify-dashboard npm install echarts vue-echarts

然后，创建一个用于管理WebSocket连接和数据状态的Composable。

// src/composables/useWebSocket.js import { ref, onUnmounted } from 'vue'; export function useWebSocket(url) { const data = ref(null); const connected = ref(false); const error = ref(null); let socket = null; const connect = () => { socket = new WebSocket(url); socket.onopen = () => { connected.value = true; error.value = null; console.log('WebSocket连接成功'); }; socket.onmessage = (event) => { try { const message = JSON.parse(event.data); if (message.type === 'metrics_update' || message.type === 'initial_data') { data.value = message.data; } } catch (e) { console.error('解析消息失败:', e); } }; socket.onerror = (err) => { error.value = '连接错误'; console.error('WebSocket错误:', err); }; socket.onclose = () => { connected.value = false; console.log('WebSocket连接关闭'); }; }; const disconnect = () => { if (socket) { socket.close(); } }; onUnmounted(() => { disconnect(); }); return { data, connected, error, connect, disconnect }; }

4.2 构建仪表盘组件

接下来，创建主要的仪表盘组件，集成ECharts。

<!-- src/components/Dashboard.vue --> <template> <div class="dashboard"> <div v-if="!connected" class="connection-status"> 正在连接数据源... </div> <div v-else-if="error" class="error"> 连接错误: {{ error }} </div> <div v-else class="metrics-grid"> <!-- 第一行：关键指标卡片 --> <div class="metric-cards"> <MetricCard title="GPU使用率" :value="resource.gpuUtil" unit="%" :trend="gpuTrend" /> <MetricCard title="平均处理耗时" :value="performance.avgLatency" unit="ms" /> <MetricCard title="实时QPS" :value="resource.qps" /> <MetricCard title="今日请求总量" :value="performance.totalRequests" /> </div> <!-- 第二行：图表 --> <div class="chart-row"> <div class="chart-container"> <h3>资源使用率趋势</h3> <div ref="resourceChart" style="width: 100%; height: 300px;"></div> </div> <div class="chart-container"> <h3>热门图片处理类别</h3> <div ref="categoryChart" style="width: 100%; height: 300px;"></div> </div> </div> <!-- 第三行：耗时分布 --> <div class="chart-row"> <div class="chart-container full-width"> <h3>请求处理耗时分布 (P90: {{ performance.p90Latency }}ms)</h3> <div ref="latencyChart" style="width: 100%; height: 250px;"></div> </div> </div> </div> </div> </template> <script setup> import { ref, computed, onMounted, onUnmounted, watch } from 'vue'; import * as echarts from 'echarts'; import { useWebSocket } from '@/composables/useWebSocket'; import MetricCard from './MetricCard.vue'; // WebSocket连接 const { data: wsData, connected, error, connect } = useWebSocket('ws://localhost:8080'); // 图表DOM引用 const resourceChart = ref(null); const categoryChart = ref(null); const latencyChart = ref(null); // 图表实例 let resourceChartInstance = null; let categoryChartInstance = null; let latencyChartInstance = null; // 计算属性，方便模板使用 const resource = computed(() => wsData.value?.resource || {}); const performance = computed(() => wsData.value?.performance || {}); const business = computed(() => wsData.value?.business || {}); // 初始化连接 onMounted(() => { connect(); initCharts(); }); // 监听数据变化，更新图表 watch(wsData, (newData) => { if (newData) { updateResourceChart(); updateCategoryChart(); updateLatencyChart(); } }, { deep: true }); // 初始化图表 const initCharts = () => { if (resourceChart.value) { resourceChartInstance = echarts.init(resourceChart.value); } if (categoryChart.value) { categoryChartInstance = echarts.init(categoryChart.value); } if (latencyChart.value) { latencyChartInstance = echarts.init(latencyChart.value); } window.addEventListener('resize', handleResize); }; // 更新资源图表（折线图） const updateResourceChart = () => { if (!resourceChartInstance) return; const option = { tooltip: { trigger: 'axis' }, legend: { data: ['GPU使用率', '显存使用', 'CPU使用率', '内存使用率'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'time', // 这里的时间轴数据需要从历史数据中获取，示例简化 data: ['10:00', '10:05', '10:10', '10:15', '10:20'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } }, series: [ { name: 'GPU使用率', type: 'line', smooth: true, data: [65, 70, 80, 75, 85], // 示例数据，实际应从wsData中获取历史数组 itemStyle: { color: '#5470c6' } }, { name: '显存使用', type: 'line', smooth: true, data: [50, 55, 60, 58, 65], itemStyle: { color: '#91cc75' } } // ... 其他系列 ] }; resourceChartInstance.setOption(option); }; // 更新类别图表（饼图） const updateCategoryChart = () => { if (!categoryChartInstance || !business.value.categories) return; const categories = business.value.categories; const chartData = Object.entries(categories).map(([name, value]) => ({ name: name === 'portrait' ? '人像' : name === 'landscape' ? '风景' : name === 'building' ? '建筑' : name === 'document' ? '文档' : '其他', value: parseInt(value) })); const option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left' }, series: [ { name: '图片类别', type: 'pie', radius: '50%', data: chartData, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; categoryChartInstance.setOption(option); }; // 更新耗时分布图表（柱状图） const updateLatencyChart = () => { if (!latencyChartInstance) return; // 示例数据，实际应从wsData中获取历史延迟数组并计算分布 const option = { tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['<500ms', '500-1000ms', '1000-2000ms', '2000-5000ms', '>5000ms'] }, yAxis: { type: 'value', name: '请求数量' }, series: [ { name: '请求量', type: 'bar', data: [120, 200, 150, 80, 20], itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ]) } } ] }; latencyChartInstance.setOption(option); }; // 响应窗口大小变化 const handleResize = () => { [resourceChartInstance, categoryChartInstance, latencyChartInstance].forEach(chart => { chart && chart.resize(); }); }; onUnmounted(() => { window.removeEventListener('resize', handleResize); [resourceChartInstance, categoryChartInstance, latencyChartInstance].forEach(chart => { chart && chart.dispose(); }); }); </script> <style scoped> .dashboard { padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .metric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; } .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; } .chart-container { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .chart-container.full-width { grid-column: 1 / -1; } .chart-container h3 { margin-top: 0; margin-bottom: 15px; color: #333; font-size: 16px; } .connection-status, .error { padding: 40px; text-align: center; font-size: 18px; } .error { color: #f56c6c; } </style>

<!-- src/components/MetricCard.vue --> <template> <div class="metric-card" :class="{'trend-up': trend === 'up', 'trend-down': trend === 'down'}"> <div class="card-header"> <h4>{{ title }}</h4> <div v-if="trend" class="trend-indicator"> <span v-if="trend === 'up'">↗</span> <span v-if="trend === 'down'">↘</span> </div> </div> <div class="card-value"> {{ formattedValue }}<span v-if="unit" class="unit">{{ unit }}</span> </div> <div class="card-footer"> <slot></slot> </div> </div> </template> <script setup> import { computed } from 'vue'; const props = defineProps({ title: String, value: [Number, String], unit: String, trend: String // 'up', 'down', or undefined }); const formattedValue = computed(() => { const num = Number(props.value); if (isNaN(num)) return props.value; if (num >= 1000) { return (num / 1000).toFixed(1) + 'k'; } return num.toLocaleString(); }); </script> <style scoped> .metric-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-left: 4px solid #409eff; } .metric-card.trend-up { border-left-color: #f56c6c; } .metric-card.trend-down { border-left-color: #67c23a; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .card-header h4 { margin: 0; font-size: 14px; color: #666; font-weight: normal; } .trend-indicator { font-size: 18px; } .card-value { font-size: 32px; font-weight: bold; color: #333; margin-bottom: 8px; } .unit { font-size: 16px; color: #999; margin-left: 4px; } .card-footer { font-size: 12px; color: #999; } </style>

5. 部署与使用建议

把代码跑起来只是第一步，要让这个仪表盘真正发挥作用，还需要考虑部署和日常使用。

首先，部署上建议将前端Vue应用打包成静态文件，用Nginx这类Web服务器托管。后端的数据推送服务（Node.js）和DeOldify模型服务可以部署在同一内网，确保低延迟通信。如果条件允许，将Redis和时序数据库（如InfluxDB）单独部署，数据持久化会更可靠。

实际用起来，这个仪表盘的价值才会慢慢体现。对于运维同学，可以把它投屏到办公室的监控大屏上，GPU使用率一旦超过80%就亮起黄灯，超过90%变红灯并触发告警，这样不用一直盯着，瞟一眼就知道服务状态。对于业务或产品同学，可以定期查看“热门图片类别”图表，如果发现“文档类”图片处理量突然增长，也许可以推测出有企业用户开始批量处理老档案，这或许是一个新的商业机会点。

你还可以根据团队需要，增加一些高级功能。比如，点击图表上的某个异常时间点，能直接关联查询当时的错误日志；或者增加一个“预测”模块，基于历史QPS数据，预测未来一小时的资源需求，为自动扩缩容提供依据。

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。