网页版手写数字识别的生产级部署实践

1. 这不是“跑个Demo”网页版手写数字识别背后的真实工程断层你在网上搜“tensorflow 手写数字识别 flask 部署”十有八九会看到一模一样的三步流程加载MNIST、训练一个简单CNN、用Flask写个/predict接口、前端扔个Canvas画板——然后截图发朋友圈“搞定AI部署成功”我试过不下二十次。第一次在某高校实验室做课程设计导师扫了一眼页面问“用户连续画了7个‘3’系统前5次返回0.92置信度第6次突然掉到0.41第7次又跳回0.89这个波动是模型问题还是你没处理输入归一化前端传来的base64图片有没有做尺寸校验Flask默认的单线程模式扛得住并发请求吗”那一刻我才意识到所谓“网页版手写数字识别”根本不是把Jupyter Notebook里那几十行代码复制粘贴进app.py就完事。它是一条横跨数据预处理、模型服务化、Web交互、并发安全、用户体验五个维度的完整链路。中间任何一环出问题用户看到的就不是“识别成功”而是“页面卡住”“结果乱码”“刷新后报500错误”。这个项目标题里的关键词——TensorFlow、网页版、手写数字识别、Flask部署——每个词都对应一个隐性技术关卡TensorFlow不只是调model.fit()它要求你明确区分训练态trainingTrue和推理态trainingFalse否则BatchNorm层在Flask服务中会持续更新统计量导致预测结果漂移网页版意味着你要直面浏览器Canvas的坐标系陷阱用户画的“数字”实际占据画布左上角30×30像素区域但模型期待的是居中、缩放、二值化后的28×28灰度图中间差了至少4步图像几何变换手写数字识别的难点从来不在准确率而在于鲁棒性——当用户用触控笔画出带毛刺的“7”或把“1”写成带底座的竖线模型是否仍能稳定输出0.95的置信度这取决于你是否在训练数据中注入了足够多的仿射变换噪声Flask部署更是暗坑密布默认的Werkzeug开发服务器禁止多线程但真实场景下用户同时打开两个标签页就会触发竞态条件不加app.route的methods[POST]限定攻击者用GET请求就能暴力遍历你的模型权重文件路径。这篇文章不讲“如何从零开始”而是聚焦于把一个能跑通的Demo变成一个可交付、可维护、可解释的生产级网页应用。我会带你逐层拆解为什么必须重写预处理流水线Flask的配置参数如何影响吞吐量前端Canvas的toDataURL()为何总生成模糊图像以及最关键的——当用户抱怨“识别不准”时你该先查模型、查前端、还是查Nginx反向代理的header转发规则所有内容均来自某跨平台教育系统的真实落地经验所有代码均可直接复用所有坑都已踩过并标记了深度。2. 预处理流水线重构从“能识别”到“稳识别”的决定性一步绝大多数教程的预处理逻辑只有一行img cv2.resize(img, (28, 28))。这在Jupyter里能跑通放到网页端就是灾难的起点。我曾在一个模拟项目X中遇到典型故障用户上传一张手机拍摄的纸张照片系统返回“识别为5置信度0.31”而同一张图用Photoshop手动裁剪后上传置信度立刻升至0.97。根源就在预处理环节的四个致命假设被现实击穿2.1 假设一输入图像是纯黑底白字真实场景中用户可能用黄色便签纸写字、用蓝色荧光笔描边、甚至把数字画在咖啡渍斑驳的桌面上。OpenCV的cv2.threshold()若直接用全局阈值如cv2.THRESH_BINARY cv2.THRESH_OTSU会在浅色背景上把数字“吃掉”。解决方案是改用自适应阈值局部对比度增强def preprocess_web_input(image_array): # image_array: numpy array from base64, shape (h, w, 3) or (h, w) if len(image_array.shape) 3: gray cv2.cvtColor(image_array, cv2.COLOR_RGB2GRAY) else: gray image_array # 步骤1高斯模糊降噪消除手机镜头摩尔纹 blurred cv2.GaussianBlur(gray, (5, 5), 0) # 步骤2自适应阈值块大小取奇数C10避免过度二值化 binary cv2.adaptiveThreshold( blurred, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY, 11, 10 ) # 步骤3形态学闭运算填充数字内部小孔洞 kernel np.ones((2, 2), np.uint8) cleaned cv2.morphologyEx(binary, cv2.MORPH_CLOSE, kernel) return cleaned提示cv2.adaptiveThreshold的blockSize必须为奇数且不能小于3C参数建议设为5~15过大会导致背景残留噪点过小则数字边缘断裂。实测发现blockSize11, C10在90%的手写场景下效果最稳。2.2 假设二数字必然居中且占满画布Canvas画布默认是空白的但用户习惯把数字画在左上角。直接缩放会导致数字严重偏移模型因从未见过此类分布而失效。必须实现动态ROI提取def extract_digit_roi(binary_img): # 寻找所有连通域 contours, _ cv2.findContours( binary_img, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE ) if not contours: # 无有效轮廓返回中心填充的28x28空白图 return np.zeros((28, 28), dtypenp.uint8) # 取面积最大的连通域假设为主数字 largest_contour max(contours, keycv2.contourArea) x, y, w, h cv2.boundingRect(largest_contour) # 添加10%边距避免裁切数字边缘 pad_w, pad_h int(w * 0.1), int(h * 0.1) x, y max(0, x - pad_w), max(0, y - pad_h) w, h min(w 2 * pad_w, binary_img.shape[1] - x), min(h 2 * pad_h, binary_img.shape[0] - y) # 裁剪并缩放至28x28 roi binary_img[y:yh, x:xw] resized cv2.resize(roi, (28, 28), interpolationcv2.INTER_AREA) return resized注意cv2.findContours对二值图敏感必须确保输入是uint8类型且前景为255。若用户画的是“白字黑底”需在调用前执行binary_img 255 - binary_img反转。2.3 假设三模型输入无需归一化校验TensorFlow模型训练时通常将像素值归一化到[0,1]但前端传来的base64解码后是[0,255]整数。若忘记除以255.0模型接收的将是远超训练分布的数值导致softmax输出全为0.111...10类均分。更隐蔽的问题是数据类型不匹配# 错误示范直接astype(np.float32)但未归一化 input_tensor tf.constant(img_array.astype(np.float32)) # 值域[0,255] # 正确做法归一化显式指定dtype input_tensor tf.constant(img_array.astype(np.float32) / 255.0) # 值域[0,1]我在某公司内部工具上线首日就栽在此处监控显示所有预测置信度集中在0.09~0.12区间排查3小时才发现前端JS脚本里Uint8Array转Float32Array时漏了除法。教训是在Flask路由函数入口处必须强制校验输入张量的shape、dtype、值域app.route(/predict, methods[POST]) def predict(): try: data request.get_json() img_base64 data[image] # 解码并预处理 img_array preprocess_from_base64(img_base64) # 返回(28,28) uint8 # 关键校验值域与类型 if img_array.dtype ! np.uint8: raise ValueError(Input must be uint8) if not (0 img_array.min() img_array.max() 255): raise ValueError(fPixel value out of range: [{img_array.min()}, {img_array.max()}]) # 归一化并转为模型输入格式 input_tensor tf.constant( img_array.astype(np.float32)[np.newaxis, ..., np.newaxis] / 255.0 ) # shape: (1, 28, 28, 1) prediction model(input_tensor, trainingFalse) # 显式禁用训练态 result tf.nn.softmax(prediction).numpy()[0] return jsonify({ digit: int(np.argmax(result)), confidence: float(np.max(result)), probabilities: result.tolist() }) except Exception as e: app.logger.error(fPrediction error: {str(e)}) return jsonify({error: str(e)}), 4002.4 假设四单张图片即完整输入用户可能一次上传多张图片如批量作业扫描件或Canvas画布上存在多个数字。此时需扩展预处理为多ROI检测模式def extract_multiple_digits(binary_img, min_area_ratio0.005): min_area_ratio: 最小连通域面积占全图比例过滤噪点 contours, _ cv2.findContours(binary_img, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) h, w binary_img.shape min_area h * w * min_area_ratio digits [] for cnt in contours: if cv2.contourArea(cnt) min_area: continue x, y, w_roi, h_roi cv2.boundingRect(cnt) # 同样添加边距并缩放 pad_w, pad_h int(w_roi * 0.1), int(h_roi * 0.1) x, y max(0, x - pad_w), max(0, y - pad_h) w_roi min(w_roi 2 * pad_w, binary_img.shape[1] - x) h_roi min(h_roi 2 * pad_h, binary_img.shape[0] - y) roi binary_img[y:yh_roi, x:xw_roi] resized cv2.resize(roi, (28, 28), interpolationcv2.INTER_AREA) digits.append(resized) return digits # Flask端调用示例 app.route(/batch_predict, methods[POST]) def batch_predict(): data request.get_json() img_base64 data[image] img_array preprocess_from_base64(img_base64) digit_rois extract_multiple_digits(img_array) if not digit_rois: return jsonify({error: No digits detected}), 400 # 批量推理注意需确保模型支持batch输入 batch_tensor tf.constant([ roi.astype(np.float32)[..., np.newaxis] / 255.0 for roi in digit_rois ]) predictions model(batch_tensor, trainingFalse) results tf.nn.softmax(predictions).numpy() return jsonify([{ digit: int(np.argmax(r)), confidence: float(np.max(r)) } for r in results])实测心得min_area_ratio0.005在A4纸扫描件上能稳定过滤掉铅笔划痕和纸张纹理但对手机微距拍摄的小字需调低至0.001。建议在前端提供“检测模式”开关让用户选择“单数字”或“多数字”。3. Flask服务加固从开发服务器到生产环境的七道防线Flask官方文档开篇就警告“Werkzeug development server is not suitable for production.” 但90%的教程直接用app.run()启动这等于把实验室的玻璃罩子搬到了高速公路上。某跨平台系统上线后遭遇的第一个雪崩点就是用户并发量突破15时所有请求响应时间从200ms飙升至8秒以上。根源在于七个被忽略的生产级配置项3.1 并发模型选择Werkzeug vs Gunicorn vs UvicornWerkzeug默认是单进程单线程app.run()本质是Werkzeug.serve(app, host0.0.0.0, port5000)。要支撑真实流量必须切换为多工作进程模型方案启动命令适用场景并发瓶颈Werkzeug调试flask run --host0.0.0.0 --port5000本地开发单线程CPU密集型任务阻塞整个进程Gunicorn推荐gunicorn -w 4 -b 0.0.0.0:5000 app:appCPU密集型如图像推理进程间内存不共享模型加载4次Uvicorn异步uvicorn app:app --host 0.0.0.0 --port 5000 --workers 4I/O密集型如API网关TensorFlow 2.x不完全兼容异步需验证我最终选用Gunicorn因为手写识别的核心耗时在模型推理CPU-bound而非网络I/O。关键参数解析-w 4启动4个工作进程。计算公式为2 × CPU核心数 1我的服务器为4核故设为4-b 0.0.0.0:5000绑定所有IP的5000端口--timeout 30请求超时设为30秒默认30秒但必须显式声明--keep-alive 5HTTP Keep-Alive连接保持5秒减少TCP握手开销--max-requests 1000每个工作进程处理1000个请求后自动重启防止内存泄漏累积。注意Gunicorn启动时每个工作进程都会独立加载一次模型。若模型文件达100MB4个进程将占用400MB内存。优化方案是在主进程加载模型通过multiprocessing.Manager共享但TensorFlow的tf.keras.Model对象无法被pickle序列化。因此更务实的做法是用--preload参数让Gunicorn在fork子进程前加载模型gunicorn -w 4 -b 0.0.0.0:5000 --preload app:app此时模型仅在主进程中加载一次子进程通过fork()继承内存空间实测内存占用降低65%。3.2 请求体大小限制防爆破式base64上传Canvas的toDataURL(image/png)生成的base64字符串一张28×28图约需2KB但用户若误传手机相册原图5MBFlask默认的MAX_CONTENT_LENGTH16MB虽能接收却会在base64解码时耗尽内存。必须在app.py顶部强制限制from flask import Flask import os app Flask(__name__) # 限制请求体最大为4MB足够容纳10张高清截图 app.config[MAX_CONTENT_LENGTH] 4 * 1024 * 1024 app.before_request def limit_content_length(): if request.method POST: content_length request.content_length if content_length and content_length app.config[MAX_CONTENT_LENGTH]: return jsonify({error: Request payload too large}), 413提示HTTP状态码413Payload Too Large比500错误更能帮助前端定位问题。前端应捕获此错误并提示“请上传小于4MB的图片”。3.3 跨域资源共享CORS前端调用失败的隐形杀手若前端页面域名是https://example.com而Flask后端在http://localhost:5000浏览器会拦截请求并报错Access to fetch at http://localhost:5000/predict from origin https://example.com has been blocked by CORS policy.解决方案不是简单加cross_origin()而是精确控制headerfrom flask_cors import CORS # 允许特定源禁用凭证因无需cookie认证 CORS(app, origins[https://example.com, http://localhost:3000], methods[GET, POST], allow_headers[Content-Type]) # 或更安全的手动设置不依赖flask-cors包 app.after_request def after_request(response): response.headers.add(Access-Control-Allow-Origin, https://example.com) response.headers.add(Access-Control-Allow-Headers, Content-Type,Authorization) response.headers.add(Access-Control-Allow-Methods, GET,PUT,POST,DELETE,OPTIONS) return response经验生产环境务必禁用origins*否则任何网站都能发起请求构成CSRF风险。若需支持多源用列表明确声明。3.4 日志分级与错误捕获让问题可追溯默认的Flask日志只输出HTTP状态码当模型推理报错时你只能看到500 Internal Server Error却不知是InvalidArgumentError: Input to reshape is a tensor with 784 values还是ResourceExhaustedError: OOM when allocating tensor。必须重构日志系统import logging from logging.handlers import RotatingFileHandler # 创建日志器 handler RotatingFileHandler(app.log, maxBytes10*1024*1024, backupCount5) handler.setLevel(logging.INFO) formatter logging.Formatter( %(asctime)s - %(name)s - %(levelname)s - %(message)s ) handler.setFormatter(formatter) app.logger.addHandler(handler) app.logger.setLevel(logging.INFO) # 全局异常处理器 app.errorhandler(Exception) def handle_exception(e): app.logger.error(fUnhandled exception: {e}, exc_infoTrue) return jsonify({error: Internal server error}), 500 # 特定异常处理器 app.errorhandler(413) def request_entity_too_large(e): app.logger.warning(413 error occurred) return jsonify({error: Image too large}), 413关键点exc_infoTrue会记录完整的堆栈跟踪这是定位TensorFlow底层错误的唯一途径。日志文件按10MB轮转保留5份避免磁盘占满。3.5 模型热重载无需重启服务更新模型当发现模型在特定字体上识别率低需紧急替换.h5文件时传统做法是kill -HUP重启Gunicorn导致服务中断。更优雅的方式是实现模型版本管理import threading import time class ModelManager: def __init__(self, model_path): self.model_path model_path self.model self._load_model() self.lock threading.Lock() def _load_model(self): return tf.keras.models.load_model(self.model_path) def get_model(self): with self.lock: return self.model def reload_if_updated(self): # 检查文件修改时间 current_mtime os.path.getmtime(self.model_path) if not hasattr(self, _last_mtime) or current_mtime self._last_mtime: with self.lock: self.model self._load_model() self._last_mtime current_mtime app.logger.info(fModel reloaded from {self.model_path}) # 全局模型管理器 model_manager ModelManager(models/digit_recognizer_v2.h5) # 在请求处理中使用 app.route(/predict, methods[POST]) def predict(): model_manager.reload_if_updated() # 每次请求检查更新 model model_manager.get_model() # ... 推理逻辑实测此方案使模型更新延迟控制在1秒内用户无感知。但需注意频繁的文件IO检查会影响性能建议改为每30秒检查一次用threading.Timer后台轮询。3.6 健康检查端点让运维监控真正可用Kubernetes或Nginx健康检查需要明确的存活探针。不能只返回{status: ok}而要验证端到端链路app.route(/healthz, methods[GET]) def health_check(): try: # 1. 检查模型是否可加载 model model_manager.get_model() # 2. 检查预处理是否正常 test_img np.zeros((28, 28), dtypenp.uint8) processed preprocess_web_input(test_img) # 3. 检查推理是否成功用极简输入 input_tensor tf.constant( processed.astype(np.float32)[np.newaxis, ..., np.newaxis] / 255.0 ) _ model(input_tensor, trainingFalse) return jsonify({status: healthy, timestamp: time.time()}) except Exception as e: app.logger.error(fHealth check failed: {e}) return jsonify({status: unhealthy, error: str(e)}), 503运维提示Nginx配置中应设置health_check interval5 fails3 passes2即每5秒探测一次连续3次失败则剔除节点连续2次成功则恢复。3.7 环境隔离避免开发/测试/生产配置混用硬编码app.config[DEBUG] True在生产环境会暴露堆栈信息成为安全漏洞。必须用环境变量驱动配置import os class Config: DEBUG False TESTING False MODEL_PATH models/prod_model.h5 class ProductionConfig(Config): MODEL_PATH models/production_v3.h5 class DevelopmentConfig(Config): DEBUG True MODEL_PATH models/dev_model.h5 config { development: DevelopmentConfig, production: ProductionConfig, default: ProductionConfig } app.config.from_object(config[os.getenv(FLASK_ENV, default)])启动时指定环境export FLASK_ENVproduction gunicorn -w 4 -b 0.0.0.0:5000 --preload app:app4. 前端交互优化让用户感觉“识别快得不可思议”后端再强大若前端体验卡顿用户只会觉得“AI很慢”。某教育系统用户调研显示从点击“识别”到看到结果超过1.2秒35%的用户会反复点击按钮。优化重点不在算法而在交互节奏设计4.1 Canvas绘制性能告别掉帧的涂鸦体验HTML5 Canvas在移动端常因requestAnimationFrame未正确使用而掉帧。标准写法应为canvas iddrawingCanvas width400 height400/canvas script const canvas document.getElementById(drawingCanvas); const ctx canvas.getContext(2d); // 启用硬件加速 ctx.imageSmoothingEnabled false; let isDrawing false; let lastX 0; let lastY 0; canvas.addEventListener(mousedown, startDrawing); canvas.addEventListener(mousemove, draw); canvas.addEventListener(mouseup, stopDrawing); canvas.addEventListener(mouseout, stopDrawing); function startDrawing(e) { isDrawing true; [lastX, lastY] [e.offsetX, e.offsetY]; } function draw(e) { if (!isDrawing) return; // 使用requestAnimationFrame平滑绘制 requestAnimationFrame(() { ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.strokeStyle #000; ctx.lineWidth 12; ctx.lineCap round; ctx.stroke(); [lastX, lastY] [e.offsetX, e.offsetY]; }); } function stopDrawing() { isDrawing false; } /script关键技巧ctx.lineCap round让线条端点变圆润避免锯齿ctx.imageSmoothingEnabled false禁用插值提升绘制速度。4.2 图像压缩与传输base64不是万能钥匙Canvas的toDataURL(image/png)生成的base64字符串比原始PNG大33%一张400×400图可达200KB。更高效的方式是转为JPEG并压缩function getCompressedImage() { const canvas document.getElementById(drawingCanvas); // 转为Blob质量设为0.8平衡清晰度与体积 return new Promise((resolve) { canvas.toBlob((blob) { const reader new FileReader(); reader.onload () resolve(reader.result); // result是base64 reader.readAsDataURL(blob); }, image/jpeg, 0.8); }); } // 调用示例 async function predict() { const base64Img await getCompressedImage(); const response await fetch(/predict, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ image: base64Img }) }); const result await response.json(); console.log(result); }实测JPEG压缩使传输体积降低60%且手写数字在质量0.7~0.8时视觉无损。注意toBlob是异步的必须用Promise封装。4.3 加载状态反馈用骨架屏替代旋转图标用户最焦虑的时刻是“点击后没反应”。与其用div classspinner/div不如用渐进式骨架屏!-- 识别前 -- div classskeleton-container div classskeleton-digit?/div div classskeleton-confidence--%/div /div !-- 识别中 -- div classloading-container div classprogress-bar div classprogress-fill stylewidth: 0%/div /div div classloading-text正在分析笔迹特征.../div /div !-- 识别后 -- div classresult-container div classresult-digit7/div div classresult-confidence98.2%/div /divCSS动画让进度条自然填充.progress-fill { height: 4px; background: #4CAF50; border-radius: 2px; transition: width 0.3s ease; /* 平滑过渡 */ }用户心理进度条从0%到100%的动画比静态文字更能传递“正在处理”的确定性。实测将用户放弃率降低42%。4.4 结果可信度可视化让用户理解“为什么是7”单纯返回数字和置信度不够。TensorFlow的tf.keras.Model支持获取中间层输出我们可以可视化卷积层激活图让用户看到模型关注的区域# Flask端新增路由 app.route(/explain, methods[POST]) def explain_prediction(): data request.get_json() img_base64 data[image] img_array preprocess_from_base64(img_base64) # 获取最后一层卷积输出假设模型结构为Conv2D-MaxPool-Conv2D-...-Dense conv_model tf.keras.Model( inputsmodel.input, outputsmodel.layers[-3].output # 倒数第三层通常是最后一个Conv2D ) input_tensor tf.constant( img_array.astype(np.float32)[np.newaxis, ..., np.newaxis] / 255.0 ) conv_output conv_model(input_tensor).numpy()[0] # shape: (h, w, channels) # 对通道求平均得到热力图 heatmap np.mean(conv_output, axis-1) # 归一化到[0,255] heatmap (heatmap - heatmap.min()) / (heatmap.max() - heatmap.min() 1e-8) * 255 heatmap heatmap.astype(np.uint8) # 编码为base64返回 _, buffer cv2.imencode(.png, heatmap) heatmap_b64 base64.b64encode(buffer).decode(utf-8) return jsonify({heatmap: fdata:image/png;base64,{heatmap_b64}})前端用img srcdata:image/png;base64,...直接显示热力图叠加在原图上// 前端叠加热力图 const overlay document.createElement(canvas); overlay.width 400; overlay.height 400; const ctx overlay.getContext(2d); const img new Image(); img.src data:image/png;base64, heatmapData; img.onload () { ctx.globalAlpha 0.5; ctx.drawImage(img, 0, 0, 400, 400); };效果用户看到数字“7”的横线部分被高亮立刻理解模型判断依据信任度大幅提升。5. 端到端压测与故障注入在崩溃前找到所有弱点上线前不做压测等于把用户当测试员。我用locust对某模拟项目X进行压力测试发现三个意料之外的瓶颈5.1 Locust压测脚本模拟真实用户行为# locustfile.py from locust import HttpUser, task, between import base64 import numpy as np class DigitUser(HttpUser): wait_time between(1, 3) # 用户思考时间1~3秒 task def predict_single_digit(self): # 生成随机手写数字图像模拟Canvas输出 img np.random.randint(0, 256, (28, 28), dtypenp.uint8) # 添加一些笔画特征 img[10:12, 5:20] 255 # 横线 img[5:25, 12:14] 255 # 竖线 # 编码为base64 _, buffer cv2.imencode(.png, img) img_b64 base64.b64encode(buffer).decode(utf-8) self.client.post(/predict, json{image: fdata:image/png;base64,{img_b64}}) # 启动命令locust -f locustfile.py --host http://localhost:5000压测结果4核CPU16GB内存并发用户数平均响应时间错误率CPU使用率10120ms0%15%50210ms0%42%100480ms2.3%85%2001200ms18.7%100%瓶颈明确CPU在100并发时已达85%200并发时彻底饱和。解决方案是增加Gunicorn工作进程数至8但需同步调整--max-requests防止内存溢出。5.2 故障注入测试主动制造崩溃用chaos-mesh或手动方式注入故障验证系统韧性网络延迟注入tc qdisc add dev eth0 root netem delay 500ms观察前端超时处理是否优雅内存压力注入stress-ng --vm 2 --vm-bytes 4G --timeout 60s检查Gunicorn是否自动重启工作进程模型文件删除rm models/prod_model.h5验证健康检查端点是否返回503Nginx是否及时剔除节点。关键发现当模型文件被删除model_manager.reload_if_updated()抛出FileNotFoundError但未被捕获导致500错误。修复方案是在reload_if_updated中加try-except并记录告警。5.3 监控指标埋点让问题无所遁形在Flask中集成Prometheus指标from prometheus_flask_exporter import PrometheusMetrics metrics PrometheusMetrics(app) # 自定义指标预测耗时分布 prediction_time metrics.summary( prediction_latency_seconds, Prediction latency, labels{endpoint: lambda: request.endpoint} ) app.route(/predict, methods[POST]) prediction_time def predict(): # ... 原有逻辑 passGrafana看板监控三项核心指标