简介本资源是一个基于卷积神经网络CNN实现的猫狗图像识别Web应用完整工程包面向深度学习初学者与Web部署实践者解决图像分类模型训练、封装与本地化部署的一体化学习需求。资源共218个文件涵盖44个Python源码含模型构建、训练脚本与Flask/Django后端逻辑、14个JPG与13个PNG测试图片、18个可执行文件用于快速启动服务、以及pyd/pyc等编译模块和HTML/CSS前端页面整体压缩包大小为22.84MB结构清晰兼顾模型开发与工程落地环节。已有122人学习下载适合希望从零复现CNN图像分类项目、理解Web接口对接图像推理流程、并掌握模型轻量化部署技巧的学习者。资源包含完整目录组织、环境激活脚本activate.bat、服务启动工具launch_instance、bundle_image等及配套配置文件可直接运行调试大幅降低入门门槛。1. 为什么一个猫狗识别 Web 应用必须从卷积神经网络CNN开始讲起你上传的基于卷积神经网络的猫狗识别 web 应用.zip不是一个普通的学生作业压缩包——它是一条完整的技术链路切片前端图像上传 → 后端模型加载与推理 → 返回结构化分类结果 → 页面实时渲染。真正决定这个应用能否“认得准、跑得稳、上线快”的不是 HTML 写得多漂亮而是 CNN 模型在部署侧是否适配 Web 场景。很多初学者直接拿 PyTorch 训练好的.pth文件扔进 Flask结果遇到CUDA out of memory、tensor size mismatch或model.eval() 后仍报 grad_fn等错误本质是没理解 CNN 在 Web 环境下的三重约束输入尺寸固定性、推理无梯度性、序列化兼容性。本篇不复现训练过程只聚焦“如何把已训练好的 CNN 模型安全、低延迟、可维护地嵌入 Web 工程”。适用对象包括刚跑通 Jupyter Notebook 分类实验、正卡在模型导出环节的 Python 初学者需要快速交付演示系统、但不想重写前端逻辑的后端开发者以及正在评估 Django/Flask/FastAPI 选型、关注模型服务化路径的全栈工程师。2. 用 PyTorch 导出 ONNX 模型解决 Web 部署中 CNN 的跨框架兼容问题Web 应用后端通常运行在 CPU 环境且需兼顾不同部署目标Docker 容器、轻量云函数、甚至边缘设备直接加载.pth文件会引入 PyTorch 运行时依赖增大镜像体积并增加安全审计负担。ONNXOpen Neural Network Exchange作为工业级中间表示格式能将 CNN 模型从 PyTorch 解耦交由更轻量的推理引擎如 ONNX Runtime执行。这步不是可选项而是 Web 工程化落地的第一道门槛。2.1 确认原始 CNN 模型结构与输入规范假设你的cat_dog_cnn.py中定义了标准 CNN 架构含 Conv2d、ReLU、MaxPool2d、AdaptiveAvgPool2d 和 Linear 层且训练时使用torchvision.transforms.Compose对图像做如下预处理transform transforms.Compose([ transforms.Resize((224, 224)), transforms.ToTensor(), transforms.Normalize(mean[0.485, 0.456, 0.406], std[0.229, 0.224, 0.225]) ])注意Resize尺寸必须与模型forward()接收的 tensor shape 严格一致。若模型最后一层Linear(in_features25088, out_features2)对应224×224输入则导出时dummy_input必须为torch.randn(1, 3, 224, 224)。尺寸不匹配会导致 ONNX 推理时input shape mismatch错误。2.2 使用 torch.onnx.export 导出可部署模型以下代码需在训练环境PyTorch ≥1.12中执行生成cat_dog_cnn.onnximport torch import torch.onnx from cat_dog_cnn import CatDogCNN # 替换为你的模型类名 # 1. 加载训练好的权重 model CatDogCNN(num_classes2) model.load_state_dict(torch.load(best_model.pth, map_locationcpu)) model.eval() # 关键必须设为 eval 模式否则 BatchNorm/ Dropout 行为异常 # 2. 构造 dummy input必须与训练时 transform 输出 shape 一致 dummy_input torch.randn(1, 3, 224, 224) # batch1, channel3, h224, w224 # 3. 导出 ONNX关键参数说明见下文 torch.onnx.export( model, dummy_input, cat_dog_cnn.onnx, export_paramsTrue, # 保存模型权重 opset_version12, # ONNX opset 版本12 兼容性最佳支持 PyTorch 1.10 do_constant_foldingTrue, # 优化常量计算 input_names[input], # 输入张量名称供 ONNX Runtime 调用时引用 output_names[output], # 输出张量名称 dynamic_axes{ input: {0: batch_size}, output: {0: batch_size} } # 支持动态 batch sizeWeb 请求可变长 )参数说明与常见失败点map_locationcpu强制加载到 CPU避免导出时因 GPU 设备不可用报错opset_version12低于 11 则部分 PyTorch 算子如adaptive_avg_pool2d无法映射高于 15 可能导致旧版 ONNX Runtime 不兼容dynamic_axes声明batch_size为动态维度使 Web 接口可接收单图或批量图请求否则默认静态 batch1多图请求会 crash若报错Unsupported ONNX opset version检查torch.onnx.supported_opset_version并降级opset_version若输出output维度为[1, 2]但 Web 调用返回softmax值异常需确认模型forward()是否已包含nn.Softmax(dim1)——推荐移除该层由 Web 后端统一做 softmax便于调试和阈值控制。2.3 验证 ONNX 模型正确性导出后必须验证前向一致性避免量化或算子转换引入偏差import onnxruntime as ort import numpy as np # 加载 ONNX 模型 ort_session ort.InferenceSession(cat_dog_cnn.onnx) # 构造与 dummy_input 相同的 numpy 输入注意 dtype 和 layout test_input np.random.randn(1, 3, 224, 224).astype(np.float32) # 执行推理 outputs ort_session.run(None, {input: test_input}) pred_onnx outputs[0] # shape: (1, 2) # 对比 PyTorch 原始输出需确保 model.eval() 且无 dropout with torch.no_grad(): pred_torch model(torch.from_numpy(test_input)).numpy() print(ONNX vs PyTorch max diff:, np.max(np.abs(pred_onnx - pred_torch))) # 输出应 1e-5否则检查模型是否含非 ONNX 支持算子如 torch.nn.functional.interpolate modebicubic3. 用 FastAPI 构建轻量 Web 接口让 CNN 模型真正响应 HTTP 请求Flask 因其同步阻塞特性在高并发图像请求下易成为瓶颈而 FastAPI 基于 Starlette 和 Pydantic原生支持异步 I/O 与类型校验配合 ONNX Runtime 的线程安全推理能稳定支撑每秒 20 次猫狗识别请求。本节构建最小可行 Web 工程不含前端页面仅提供/predict接口。3.1 初始化项目结构与依赖管理创建目录结构catdog_web/ ├── main.py # FastAPI 入口 ├── model/ # 存放 ONNX 模型与标签文件 │ ├── cat_dog_cnn.onnx │ └── labels.txt # 每行一个类别cat\n dog ├── requirements.txt └── Dockerfilerequirements.txt内容精简无冗余fastapi0.115.0 uvicorn0.32.0 onnxruntime1.19.2 Pillow10.4.0 python-multipart0.0.19提示onnxruntime优先安装 CPU 版本onnxruntime而非onnxruntime-gpu。Web 容器通常无 CUDA 环境GPU 版本会因找不到libcudart.so启动失败。3.2 编写 FastAPI 主服务main.pyfrom fastapi import FastAPI, File, UploadFile, HTTPException from fastapi.responses import JSONResponse import numpy as np from PIL import Image import io import onnxruntime as ort # 1. 初始化 ONNX Runtime 推理会话全局单例避免重复加载 ort_session ort.InferenceSession(./model/cat_dog_cnn.onnx, providers[CPUExecutionProvider]) # 2. 加载类别标签 with open(./model/labels.txt, r) as f: labels [line.strip() for line in f.readlines()] app FastAPI(titleCat-Dog CNN Web API, description基于卷积神经网络的猫狗二分类服务) app.post(/predict) async def predict_image(file: UploadFile File(...)): try: # 3. 读取并校验图像格式 contents await file.read() image Image.open(io.BytesIO(contents)).convert(RGB) # 强制转 RGB避免 RGBA 报错 # 4. 图像预处理与训练时 transform 完全一致 # Resize → ToTensor → Normalize手动实现不依赖 torchvision image image.resize((224, 224), Image.BILINEAR) img_array np.array(image).astype(np.float32) / 255.0 # 归一化到 [0,1] img_array img_array.transpose(2, 0, 1) # HWC → CHW mean np.array([0.485, 0.456, 0.406]).reshape(3, 1, 1) std np.array([0.229, 0.224, 0.225]).reshape(3, 1, 1) img_array (img_array - mean) / std # 标准化 # 5. 添加 batch 维度并转为 float32 input_tensor np.expand_dims(img_array, axis0) # shape: (1, 3, 224, 224) # 6. 执行 ONNX 推理 outputs ort_session.run(None, {input: input_tensor}) logits outputs[0].flatten() # shape: (2,) # 7. 计算 softmax 概率不在模型内做此处显式计算 exp_logits np.exp(logits) probs exp_logits / np.sum(exp_logits) # 8. 构建响应 result { prediction: labels[np.argmax(probs)], confidence: float(np.max(probs)), probabilities: { labels[0]: float(probs[0]), labels[1]: float(probs[1]) } } return JSONResponse(contentresult) except Exception as e: raise HTTPException(status_code400, detailfImage processing failed: {str(e)})关键设计说明providers[CPUExecutionProvider]显式指定 CPU 执行器避免 ONNX Runtime 自动尝试 GPU 导致启动失败image.convert(RGB)强制转换解决 PNG 透明通道RGBA导致np.array()产生 4 通道报错预处理完全复现训练流程resize插值方式用BILINEAR与transforms.Resize默认一致/255.0归一化transpose调整通道顺序mean/std标准化 ——任何一步偏差都会导致准确率断崖式下降np.expand_dims(..., axis0)添加 batch 维度匹配 ONNX 模型input的dynamic_axes定义JSONResponse直接返回结构化数据前端可直接消费无需额外解析。3.3 启动服务并测试接口终端执行uvicorn main:app --host 0.0.0.0 --port 8000 --reload用 curl 测试替换test.jpg为真实猫或狗图片curl -X POST http://localhost:8000/predict \ -H accept: application/json \ -F filetest.jpg预期返回{ prediction: dog, confidence: 0.924, probabilities: { cat: 0.076, dog: 0.924 } }4. 构建 Docker 容器实现 CNN Web 应用的一键部署与环境隔离本地能跑不等于生产可用。Web 应用需在无 Python 环境的服务器上启动且依赖版本必须锁定。Docker 提供标准化打包方案将 ONNX 模型、FastAPI 服务、ONNX Runtime 及所有依赖打包为单一镜像消除“在我机器上能跑”的陷阱。4.1 编写生产级 Dockerfile# 使用官方 Python 基础镜像精简版 FROM python:3.9-slim # 设置工作目录 WORKDIR /app # 复制依赖文件并安装分层缓存优化 COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt # 复制应用代码与模型文件 COPY . . # 暴露端口 EXPOSE 8000 # 启动命令使用 uvicorn 生产配置 CMD [uvicorn, main:app, --host, 0.0.0.0:8000, --port, 8000, --workers, 4, --limit-concurrency, 10]构建与运行命令# 构建镜像tag 名体现模型版本 docker build -t catdog-cnn-web:v1.0 . # 运行容器映射本地 8000 端口 docker run -p 8000:8000 --name catdog-api catdog-cnn-web:v1.0 # 查看日志确认启动成功 docker logs catdog-api # 输出应含 Uvicorn running on http://0.0.0.0:8000注意--workers 4设置 Uvicorn 工作进程数建议设为 CPU 核心数--limit-concurrency 10限制每个 worker 并发请求数防止 ONNX Runtime 线程争抢导致内存溢出。4.2 验证容器内模型推理稳定性进入容器执行诊断命令docker exec -it catdog-api bash # 在容器内手动测试 ONNX 推理延迟 python -c import time import numpy as np import onnxruntime as ort sess ort.InferenceSession(./model/cat_dog_cnn.onnx, providers[CPUExecutionProvider]) x np.random.randn(1,3,224,224).astype(np.float32) start time.time() for _ in range(10): sess.run(None, {input: x}) print(fAvg latency: {(time.time()-start)/10*1000:.2f} ms) 健康指标单次推理延迟应稳定在15–35msIntel i5 CPU。若 100ms检查是否误装onnxruntime-gpu或模型未启用CPUExecutionProvider。4.3 容器化后的 Web 工程优势对比表维度本地直接运行Python 脚本Docker 容器部署环境一致性依赖宿主机 Python/库版本镜像内固化所有依赖100% 一致启动可靠性ImportError风险高构建阶段即验证依赖完整性资源隔离与其他进程共享内存/CPU可通过--memory512m限容扩展性手动启多个进程管理复杂docker-compose scale一键扩缩安全审计无明确依赖清单docker scan自动生成 SBOM5. 前端集成与性能调优让猫狗识别在浏览器中真正“秒响应”FastAPI 提供了后端能力但用户需要一个可上传、可查看结果的界面。本节不写完整前端工程而是给出可直接嵌入现有网页的最小 HTML JavaScript 方案并解决 Web 场景下 CNN 推理的两个核心瓶颈图像上传体积过大和HTTP 请求超时。5.1 构建零依赖前端页面index.html!DOCTYPE html html head titleCat-Dog CNN Classifier/title style .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 10px 0; } .result { margin-top: 20px; font-size: 18px; font-weight: bold; } .spinner { border: 3px solid #f3f3f3; border-top: 3px solid #007bff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; margin-right: 10px; } keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /style /head body h1 猫狗识别 Web 应用/h1 div classupload-area p拖拽或点击选择图片JPG/PNG≤5MB/p input typefile idimageInput acceptimage/* styledisplay:none; button onclickdocument.getElementById(imageInput).click()选择图片/button /div div idpreview/div div idresult classresult/div script document.getElementById(imageInput).addEventListener(change, async function(e) { const file e.target.files[0]; if (!file) return; // 1. 前端压缩限制尺寸 质量减小上传体积 const compressedBlob await compressImage(file, 800, 0.8); // 2. 构建 FormData 并发送 const formData new FormData(); formData.append(file, compressedBlob, file.name); document.getElementById(result).innerHTML div classspinner/div识别中...; try { const res await fetch(http://localhost:8000/predict, { method: POST, body: formData }); const data await res.json(); document.getElementById(result).innerHTML 预测结果span stylecolor:${data.predictiondog?blue:red}${data.prediction}/span置信度 ${data.confidence.toFixed(3)}; } catch (err) { document.getElementById(result).innerHTML 错误${err.message}; } }); // 图像压缩函数降低分辨率 质量 async function compressImage(file, maxWidth, quality) { return new Promise((resolve) { const reader new FileReader(); reader.onload (e) { const img new Image(); img.src e.target.result; img.onload () { const canvas document.createElement(canvas); let width img.width; let height img.height; if (width maxWidth) { height * maxWidth / width; width maxWidth; } canvas.width width; canvas.height height; const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0, width, height); canvas.toBlob((blob) resolve(blob), image/jpeg, quality); }; }; reader.readAsDataURL(file); }); } /script /body /html关键优化点说明compressImage()函数在上传前将图片缩放到最大宽度 800px并以 80% 质量转为 JPEG ——可将 5MB 原图压缩至 300KB 以内减少网络传输时间 80%使用fetch原生 API避免引入 jQuery 等大型库spinner动画提升用户感知流畅度避免“白屏等待”。5.2 后端超时与并发调优main.py 进阶配置在 FastAPI 中增加请求超时与并发控制防止大图阻塞# 在 main.py 开头添加 from fastapi import Request from starlette.middleware.base import BaseHTTPMiddleware class TimeoutMiddleware(BaseHTTPMiddleware): async def dispatch(self, request: Request, call_next): try: # 设置单个请求最大处理时间 10 秒 response await asyncio.wait_for(call_next(request), timeout10.0) return response except asyncio.TimeoutError: return JSONResponse( status_code408, content{detail: Request timeout. Please upload smaller image.} ) # 在 app 实例化后挂载 app.add_middleware(TimeoutMiddleware)同时修改Dockerfile中的 uvicorn 启动命令增加超时参数CMD [uvicorn, main:app, --host, 0.0.0.0:8000, --port, 8000, --workers, 4, --timeout-keep-alive, 5]生产环境参数建议表参数推荐值说明--workersCPU 核心数避免过多进程竞争 ONNX Runtime 线程--timeout-keep-alive5HTTP keep-alive 超时释放空闲连接--limit-concurrency10单 worker 最大并发请求数防内存溢出前端压缩质量 (quality)0.7–0.8平衡画质与体积0.9 体积增长快但识别精度提升微弱当用户上传一张 3MB 的高清图时前端压缩后约 250KBFastAPI 接收 → ONNX 推理 → 返回结果全程耗时稳定在300–600ms含网络延迟符合 Web 应用“秒级响应”体验标准。本文还有配套的精品资源点击获取 CNN模型Web部署实战：PyTorch转ONNX+FastAPI服务化
简介本资源是一个基于卷积神经网络CNN实现的猫狗图像识别Web应用完整工程包面向深度学习初学者与Web部署实践者解决图像分类模型训练、封装与本地化部署的一体化学习需求。资源共218个文件涵盖44个Python源码含模型构建、训练脚本与Flask/Django后端逻辑、14个JPG与13个PNG测试图片、18个可执行文件用于快速启动服务、以及pyd/pyc等编译模块和HTML/CSS前端页面整体压缩包大小为22.84MB结构清晰兼顾模型开发与工程落地环节。已有122人学习下载适合希望从零复现CNN图像分类项目、理解Web接口对接图像推理流程、并掌握模型轻量化部署技巧的学习者。资源包含完整目录组织、环境激活脚本activate.bat、服务启动工具launch_instance、bundle_image等及配套配置文件可直接运行调试大幅降低入门门槛。1. 为什么一个猫狗识别 Web 应用必须从卷积神经网络CNN开始讲起你上传的基于卷积神经网络的猫狗识别 web 应用.zip不是一个普通的学生作业压缩包——它是一条完整的技术链路切片前端图像上传 → 后端模型加载与推理 → 返回结构化分类结果 → 页面实时渲染。真正决定这个应用能否“认得准、跑得稳、上线快”的不是 HTML 写得多漂亮而是 CNN 模型在部署侧是否适配 Web 场景。很多初学者直接拿 PyTorch 训练好的.pth文件扔进 Flask结果遇到CUDA out of memory、tensor size mismatch或model.eval() 后仍报 grad_fn等错误本质是没理解 CNN 在 Web 环境下的三重约束输入尺寸固定性、推理无梯度性、序列化兼容性。本篇不复现训练过程只聚焦“如何把已训练好的 CNN 模型安全、低延迟、可维护地嵌入 Web 工程”。适用对象包括刚跑通 Jupyter Notebook 分类实验、正卡在模型导出环节的 Python 初学者需要快速交付演示系统、但不想重写前端逻辑的后端开发者以及正在评估 Django/Flask/FastAPI 选型、关注模型服务化路径的全栈工程师。2. 用 PyTorch 导出 ONNX 模型解决 Web 部署中 CNN 的跨框架兼容问题Web 应用后端通常运行在 CPU 环境且需兼顾不同部署目标Docker 容器、轻量云函数、甚至边缘设备直接加载.pth文件会引入 PyTorch 运行时依赖增大镜像体积并增加安全审计负担。ONNXOpen Neural Network Exchange作为工业级中间表示格式能将 CNN 模型从 PyTorch 解耦交由更轻量的推理引擎如 ONNX Runtime执行。这步不是可选项而是 Web 工程化落地的第一道门槛。2.1 确认原始 CNN 模型结构与输入规范假设你的cat_dog_cnn.py中定义了标准 CNN 架构含 Conv2d、ReLU、MaxPool2d、AdaptiveAvgPool2d 和 Linear 层且训练时使用torchvision.transforms.Compose对图像做如下预处理transform transforms.Compose([ transforms.Resize((224, 224)), transforms.ToTensor(), transforms.Normalize(mean[0.485, 0.456, 0.406], std[0.229, 0.224, 0.225]) ])注意Resize尺寸必须与模型forward()接收的 tensor shape 严格一致。若模型最后一层Linear(in_features25088, out_features2)对应224×224输入则导出时dummy_input必须为torch.randn(1, 3, 224, 224)。尺寸不匹配会导致 ONNX 推理时input shape mismatch错误。2.2 使用 torch.onnx.export 导出可部署模型以下代码需在训练环境PyTorch ≥1.12中执行生成cat_dog_cnn.onnximport torch import torch.onnx from cat_dog_cnn import CatDogCNN # 替换为你的模型类名 # 1. 加载训练好的权重 model CatDogCNN(num_classes2) model.load_state_dict(torch.load(best_model.pth, map_locationcpu)) model.eval() # 关键必须设为 eval 模式否则 BatchNorm/ Dropout 行为异常 # 2. 构造 dummy input必须与训练时 transform 输出 shape 一致 dummy_input torch.randn(1, 3, 224, 224) # batch1, channel3, h224, w224 # 3. 导出 ONNX关键参数说明见下文 torch.onnx.export( model, dummy_input, cat_dog_cnn.onnx, export_paramsTrue, # 保存模型权重 opset_version12, # ONNX opset 版本12 兼容性最佳支持 PyTorch 1.10 do_constant_foldingTrue, # 优化常量计算 input_names[input], # 输入张量名称供 ONNX Runtime 调用时引用 output_names[output], # 输出张量名称 dynamic_axes{ input: {0: batch_size}, output: {0: batch_size} } # 支持动态 batch sizeWeb 请求可变长 )参数说明与常见失败点map_locationcpu强制加载到 CPU避免导出时因 GPU 设备不可用报错opset_version12低于 11 则部分 PyTorch 算子如adaptive_avg_pool2d无法映射高于 15 可能导致旧版 ONNX Runtime 不兼容dynamic_axes声明batch_size为动态维度使 Web 接口可接收单图或批量图请求否则默认静态 batch1多图请求会 crash若报错Unsupported ONNX opset version检查torch.onnx.supported_opset_version并降级opset_version若输出output维度为[1, 2]但 Web 调用返回softmax值异常需确认模型forward()是否已包含nn.Softmax(dim1)——推荐移除该层由 Web 后端统一做 softmax便于调试和阈值控制。2.3 验证 ONNX 模型正确性导出后必须验证前向一致性避免量化或算子转换引入偏差import onnxruntime as ort import numpy as np # 加载 ONNX 模型 ort_session ort.InferenceSession(cat_dog_cnn.onnx) # 构造与 dummy_input 相同的 numpy 输入注意 dtype 和 layout test_input np.random.randn(1, 3, 224, 224).astype(np.float32) # 执行推理 outputs ort_session.run(None, {input: test_input}) pred_onnx outputs[0] # shape: (1, 2) # 对比 PyTorch 原始输出需确保 model.eval() 且无 dropout with torch.no_grad(): pred_torch model(torch.from_numpy(test_input)).numpy() print(ONNX vs PyTorch max diff:, np.max(np.abs(pred_onnx - pred_torch))) # 输出应 1e-5否则检查模型是否含非 ONNX 支持算子如 torch.nn.functional.interpolate modebicubic3. 用 FastAPI 构建轻量 Web 接口让 CNN 模型真正响应 HTTP 请求Flask 因其同步阻塞特性在高并发图像请求下易成为瓶颈而 FastAPI 基于 Starlette 和 Pydantic原生支持异步 I/O 与类型校验配合 ONNX Runtime 的线程安全推理能稳定支撑每秒 20 次猫狗识别请求。本节构建最小可行 Web 工程不含前端页面仅提供/predict接口。3.1 初始化项目结构与依赖管理创建目录结构catdog_web/ ├── main.py # FastAPI 入口 ├── model/ # 存放 ONNX 模型与标签文件 │ ├── cat_dog_cnn.onnx │ └── labels.txt # 每行一个类别cat\n dog ├── requirements.txt └── Dockerfilerequirements.txt内容精简无冗余fastapi0.115.0 uvicorn0.32.0 onnxruntime1.19.2 Pillow10.4.0 python-multipart0.0.19提示onnxruntime优先安装 CPU 版本onnxruntime而非onnxruntime-gpu。Web 容器通常无 CUDA 环境GPU 版本会因找不到libcudart.so启动失败。3.2 编写 FastAPI 主服务main.pyfrom fastapi import FastAPI, File, UploadFile, HTTPException from fastapi.responses import JSONResponse import numpy as np from PIL import Image import io import onnxruntime as ort # 1. 初始化 ONNX Runtime 推理会话全局单例避免重复加载 ort_session ort.InferenceSession(./model/cat_dog_cnn.onnx, providers[CPUExecutionProvider]) # 2. 加载类别标签 with open(./model/labels.txt, r) as f: labels [line.strip() for line in f.readlines()] app FastAPI(titleCat-Dog CNN Web API, description基于卷积神经网络的猫狗二分类服务) app.post(/predict) async def predict_image(file: UploadFile File(...)): try: # 3. 读取并校验图像格式 contents await file.read() image Image.open(io.BytesIO(contents)).convert(RGB) # 强制转 RGB避免 RGBA 报错 # 4. 图像预处理与训练时 transform 完全一致 # Resize → ToTensor → Normalize手动实现不依赖 torchvision image image.resize((224, 224), Image.BILINEAR) img_array np.array(image).astype(np.float32) / 255.0 # 归一化到 [0,1] img_array img_array.transpose(2, 0, 1) # HWC → CHW mean np.array([0.485, 0.456, 0.406]).reshape(3, 1, 1) std np.array([0.229, 0.224, 0.225]).reshape(3, 1, 1) img_array (img_array - mean) / std # 标准化 # 5. 添加 batch 维度并转为 float32 input_tensor np.expand_dims(img_array, axis0) # shape: (1, 3, 224, 224) # 6. 执行 ONNX 推理 outputs ort_session.run(None, {input: input_tensor}) logits outputs[0].flatten() # shape: (2,) # 7. 计算 softmax 概率不在模型内做此处显式计算 exp_logits np.exp(logits) probs exp_logits / np.sum(exp_logits) # 8. 构建响应 result { prediction: labels[np.argmax(probs)], confidence: float(np.max(probs)), probabilities: { labels[0]: float(probs[0]), labels[1]: float(probs[1]) } } return JSONResponse(contentresult) except Exception as e: raise HTTPException(status_code400, detailfImage processing failed: {str(e)})关键设计说明providers[CPUExecutionProvider]显式指定 CPU 执行器避免 ONNX Runtime 自动尝试 GPU 导致启动失败image.convert(RGB)强制转换解决 PNG 透明通道RGBA导致np.array()产生 4 通道报错预处理完全复现训练流程resize插值方式用BILINEAR与transforms.Resize默认一致/255.0归一化transpose调整通道顺序mean/std标准化 ——任何一步偏差都会导致准确率断崖式下降np.expand_dims(..., axis0)添加 batch 维度匹配 ONNX 模型input的dynamic_axes定义JSONResponse直接返回结构化数据前端可直接消费无需额外解析。3.3 启动服务并测试接口终端执行uvicorn main:app --host 0.0.0.0 --port 8000 --reload用 curl 测试替换test.jpg为真实猫或狗图片curl -X POST http://localhost:8000/predict \ -H accept: application/json \ -F filetest.jpg预期返回{ prediction: dog, confidence: 0.924, probabilities: { cat: 0.076, dog: 0.924 } }4. 构建 Docker 容器实现 CNN Web 应用的一键部署与环境隔离本地能跑不等于生产可用。Web 应用需在无 Python 环境的服务器上启动且依赖版本必须锁定。Docker 提供标准化打包方案将 ONNX 模型、FastAPI 服务、ONNX Runtime 及所有依赖打包为单一镜像消除“在我机器上能跑”的陷阱。4.1 编写生产级 Dockerfile# 使用官方 Python 基础镜像精简版 FROM python:3.9-slim # 设置工作目录 WORKDIR /app # 复制依赖文件并安装分层缓存优化 COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt # 复制应用代码与模型文件 COPY . . # 暴露端口 EXPOSE 8000 # 启动命令使用 uvicorn 生产配置 CMD [uvicorn, main:app, --host, 0.0.0.0:8000, --port, 8000, --workers, 4, --limit-concurrency, 10]构建与运行命令# 构建镜像tag 名体现模型版本 docker build -t catdog-cnn-web:v1.0 . # 运行容器映射本地 8000 端口 docker run -p 8000:8000 --name catdog-api catdog-cnn-web:v1.0 # 查看日志确认启动成功 docker logs catdog-api # 输出应含 Uvicorn running on http://0.0.0.0:8000注意--workers 4设置 Uvicorn 工作进程数建议设为 CPU 核心数--limit-concurrency 10限制每个 worker 并发请求数防止 ONNX Runtime 线程争抢导致内存溢出。4.2 验证容器内模型推理稳定性进入容器执行诊断命令docker exec -it catdog-api bash # 在容器内手动测试 ONNX 推理延迟 python -c import time import numpy as np import onnxruntime as ort sess ort.InferenceSession(./model/cat_dog_cnn.onnx, providers[CPUExecutionProvider]) x np.random.randn(1,3,224,224).astype(np.float32) start time.time() for _ in range(10): sess.run(None, {input: x}) print(fAvg latency: {(time.time()-start)/10*1000:.2f} ms) 健康指标单次推理延迟应稳定在15–35msIntel i5 CPU。若 100ms检查是否误装onnxruntime-gpu或模型未启用CPUExecutionProvider。4.3 容器化后的 Web 工程优势对比表维度本地直接运行Python 脚本Docker 容器部署环境一致性依赖宿主机 Python/库版本镜像内固化所有依赖100% 一致启动可靠性ImportError风险高构建阶段即验证依赖完整性资源隔离与其他进程共享内存/CPU可通过--memory512m限容扩展性手动启多个进程管理复杂docker-compose scale一键扩缩安全审计无明确依赖清单docker scan自动生成 SBOM5. 前端集成与性能调优让猫狗识别在浏览器中真正“秒响应”FastAPI 提供了后端能力但用户需要一个可上传、可查看结果的界面。本节不写完整前端工程而是给出可直接嵌入现有网页的最小 HTML JavaScript 方案并解决 Web 场景下 CNN 推理的两个核心瓶颈图像上传体积过大和HTTP 请求超时。5.1 构建零依赖前端页面index.html!DOCTYPE html html head titleCat-Dog CNN Classifier/title style .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 10px 0; } .result { margin-top: 20px; font-size: 18px; font-weight: bold; } .spinner { border: 3px solid #f3f3f3; border-top: 3px solid #007bff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block; margin-right: 10px; } keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /style /head body h1 猫狗识别 Web 应用/h1 div classupload-area p拖拽或点击选择图片JPG/PNG≤5MB/p input typefile idimageInput acceptimage/* styledisplay:none; button onclickdocument.getElementById(imageInput).click()选择图片/button /div div idpreview/div div idresult classresult/div script document.getElementById(imageInput).addEventListener(change, async function(e) { const file e.target.files[0]; if (!file) return; // 1. 前端压缩限制尺寸 质量减小上传体积 const compressedBlob await compressImage(file, 800, 0.8); // 2. 构建 FormData 并发送 const formData new FormData(); formData.append(file, compressedBlob, file.name); document.getElementById(result).innerHTML div classspinner/div识别中...; try { const res await fetch(http://localhost:8000/predict, { method: POST, body: formData }); const data await res.json(); document.getElementById(result).innerHTML 预测结果span stylecolor:${data.predictiondog?blue:red}${data.prediction}/span置信度 ${data.confidence.toFixed(3)}; } catch (err) { document.getElementById(result).innerHTML 错误${err.message}; } }); // 图像压缩函数降低分辨率 质量 async function compressImage(file, maxWidth, quality) { return new Promise((resolve) { const reader new FileReader(); reader.onload (e) { const img new Image(); img.src e.target.result; img.onload () { const canvas document.createElement(canvas); let width img.width; let height img.height; if (width maxWidth) { height * maxWidth / width; width maxWidth; } canvas.width width; canvas.height height; const ctx canvas.getContext(2d); ctx.drawImage(img, 0, 0, width, height); canvas.toBlob((blob) resolve(blob), image/jpeg, quality); }; }; reader.readAsDataURL(file); }); } /script /body /html关键优化点说明compressImage()函数在上传前将图片缩放到最大宽度 800px并以 80% 质量转为 JPEG ——可将 5MB 原图压缩至 300KB 以内减少网络传输时间 80%使用fetch原生 API避免引入 jQuery 等大型库spinner动画提升用户感知流畅度避免“白屏等待”。5.2 后端超时与并发调优main.py 进阶配置在 FastAPI 中增加请求超时与并发控制防止大图阻塞# 在 main.py 开头添加 from fastapi import Request from starlette.middleware.base import BaseHTTPMiddleware class TimeoutMiddleware(BaseHTTPMiddleware): async def dispatch(self, request: Request, call_next): try: # 设置单个请求最大处理时间 10 秒 response await asyncio.wait_for(call_next(request), timeout10.0) return response except asyncio.TimeoutError: return JSONResponse( status_code408, content{detail: Request timeout. Please upload smaller image.} ) # 在 app 实例化后挂载 app.add_middleware(TimeoutMiddleware)同时修改Dockerfile中的 uvicorn 启动命令增加超时参数CMD [uvicorn, main:app, --host, 0.0.0.0:8000, --port, 8000, --workers, 4, --timeout-keep-alive, 5]生产环境参数建议表参数推荐值说明--workersCPU 核心数避免过多进程竞争 ONNX Runtime 线程--timeout-keep-alive5HTTP keep-alive 超时释放空闲连接--limit-concurrency10单 worker 最大并发请求数防内存溢出前端压缩质量 (quality)0.7–0.8平衡画质与体积0.9 体积增长快但识别精度提升微弱当用户上传一张 3MB 的高清图时前端压缩后约 250KBFastAPI 接收 → ONNX 推理 → 返回结果全程耗时稳定在300–600ms含网络延迟符合 Web 应用“秒级响应”体验标准。本文还有配套的精品资源点击获取