企业官网建设流程全解析

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()，它要求你明确区分训练态（training=True）和推理态（training=False），否则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：自适应阈值（块大小取奇数，C=10避免过度二值化） 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必须为奇数，且不能小于3；C参数建议设为5~15，过大会导致背景残留噪点，过小则数字边缘断裂。实测发现blockSize=11, C=10在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), dtype=np.uint8) # 取面积最大的连通域（假设为主数字） largest_contour = max(contours, key=cv2.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:y+h, x:x+w] resized = cv2.resize(roi, (28, 28), interpolation=cv2.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(f"Pixel 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, training=False) # 显式禁用训练态 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(f"Prediction error: {str(e)}") return jsonify({'error': str(e)}), 400

2.4 假设四：单张图片即完整输入

用户可能一次上传多张图片（如批量作业扫描件），或Canvas画布上存在多个数字。此时需扩展预处理为多ROI检测模式：

def extract_multiple_digits(binary_img, min_area_ratio=0.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:y+h_roi, x:x+w_roi] resized = cv2.resize(roi, (28, 28), interpolation=cv2.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, training=False) results = tf.nn.softmax(predictions).numpy() return jsonify([{ 'digit': int(np.argmax(r)), 'confidence': float(np.max(r)) } for r in results])

实测心得：min_area_ratio=0.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 Uvicorn

Werkzeug默认是单进程单线程，app.run()本质是Werkzeug.serve(app, host='0.0.0.0', port=5000)。要支撑真实流量，必须切换为多工作进程模型：

我最终选用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 5：HTTP Keep-Alive连接保持5秒，减少TCP握手开销；
• --max-requests 1000：每个工作进程处理1000个请求后自动重启，防止内存泄漏累积。

注意：Gunicorn启动时，每个工作进程都会独立加载一次模型。若模型文件达100MB，4个进程将占用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，但用户若误传手机相册原图（5MB），Flask默认的MAX_CONTENT_LENGTH=16MB虽能接收，却会在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状态码413（Payload 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()，而是精确控制header：

from 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', maxBytes=10*1024*1024, backupCount=5) 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(f"Unhandled exception: {e}", exc_info=True) 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_info=True会记录完整的堆栈跟踪，这是定位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(f"Model 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), dtype=np.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, training=False) return jsonify({'status': 'healthy', 'timestamp': time.time()}) except Exception as e: app.logger.error(f"Health check failed: {e}") return jsonify({'status': 'unhealthy', 'error': str(e)}), 503

运维提示：Nginx配置中应设置health_check interval=5 fails=3 passes=2，即每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_ENV=production gunicorn -w 4 -b 0.0.0.0:5000 --preload app:app

4. 前端交互优化：让用户感觉“识别快得不可思议”

后端再强大，若前端体验卡顿，用户只会觉得“AI很慢”。某教育系统用户调研显示，从点击“识别”到看到结果超过1.2秒，35%的用户会反复点击按钮。优化重点不在算法，而在交互节奏设计：

4.1 Canvas绘制性能：告别掉帧的涂鸦体验

HTML5 Canvas在移动端常因requestAnimationFrame未正确使用而掉帧。标准写法应为：

<canvas id="drawingCanvas" width="400" height="400"></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 class="spinner"></div>，不如用渐进式骨架屏：

<!-- 识别前 --> <div class="skeleton-container"> <div class="skeleton-digit">?</div> <div class="skeleton-confidence">--%</div> </div> <!-- 识别中 --> <div class="loading-container"> <div class="progress-bar"> <div class="progress-fill" style="width: 0%"></div> </div> <div class="loading-text">正在分析笔迹特征...</div> </div> <!-- 识别后 --> <div class="result-container"> <div class="result-digit">7</div> <div class="result-confidence">98.2%</div> </div>

CSS动画让进度条自然填充：

.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( inputs=model.input, outputs=model.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': f'data:image/png;base64,{heatmap_b64}'})

前端用<img src="data: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), dtype=np.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": f"data:image/png;base64,{img_b64}"}) # 启动命令：locust -f locustfile.py --host http://localhost:5000

压测结果（4核CPU，16GB内存）：

并发用户数	平均响应时间	错误率	CPU使用率
10	120ms	0%	15%
50	210ms	0%	42%
100	480ms	2.3%	85%
200	1200ms	18.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，验证健康检查端点是否返回503，Nginx是否及时剔除节点。

关键发现：当模型文件被删除，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(): # ... 原有逻辑 pass

Grafana看板监控三项核心指标：