Unity资产工具UABEA终极配置指南：5分钟快速上手全流程
2026/1/12 6:50:03
ResNet18实战教程：Flask WebUI集成详细步骤
1. 教程目标与背景
1.1 通用物体识别——ResNet-18 的工程价值
在计算机视觉领域，图像分类是基础且关键的任务之一。ResNet-18作为深度残差网络（Residual Network）的轻量级代表，凭借其简洁结构、高精度和低计算开销，广泛应用于边缘设备、嵌入式系统和快速原型开发中。
本教程聚焦于将TorchVision 官方预训练的 ResNet-18 模型集成到一个基于 Flask 的 Web 用户界面（WebUI），实现无需联网、本地运行的通用图像分类服务。该方案支持对ImageNet 1000 类常见物体与场景进行高效识别，适用于教育演示、产品原型、离线AI应用等场景。
1.2 为什么选择 ResNet-18 + Flask 组合？
- ResNet-18：模型参数量仅约1170万，权重文件小于45MB，适合CPU推理，单次前向传播耗时在毫秒级。
- Flask：轻量级Python Web框架，易于部署、调试灵活，非常适合构建AI模型的可视化交互前端。
- TorchVision 内置模型：直接调用官方API，避免手动实现网络结构或加载外部权重的风险，提升稳定性。
通过本教程，你将掌握： - 如何加载并使用 TorchVision 中的 ResNet-18 模型进行推理 - 构建 Flask Web 应用的基本流程 - 实现图片上传、预处理、模型预测与结果展示的完整闭环 - CPU优化技巧与性能调优建议
2. 环境准备与依赖安装
2.1 基础环境要求
确保你的开发环境满足以下条件：
- Python >= 3.8
- PyTorch >= 1.12（推荐使用 CPU 版本以降低资源消耗）
- TorchVision >= 0.13
- Flask >= 2.0
- Pillow（用于图像处理）
- NumPy（数值计算）
2.2 安装依赖包
创建虚拟环境并安装所需库：
python -m venv resnet-flask-env source resnet-flask-env/bin/activate # Linux/Mac # 或 resnet-flask-env\Scripts\activate # Windows pip install torch torchvision flask pillow numpy gunicorn⚠️ 注意：若仅需CPU推理，请安装CPU版本PyTorch以减少内存占用。可通过 https://pytorch.org/get-started/locally/ 获取对应命令。
3. 核心代码实现
3.1 模型加载与预处理函数
我们首先定义一个模块来加载 ResNet-18 模型，并设置标准的图像预处理流程（遵循 ImageNet 训练时的归一化方式）。
# model_loader.py import torch from torchvision import models, transforms from PIL import Image import json # 加载ImageNet类别标签 with open("imagenet_classes.txt", "r") as f: classes = [line.strip() for line in f.readlines()] # 定义预处理管道 preprocess = transforms.Compose([ transforms.Resize(256), transforms.CenterCrop(224), transforms.ToTensor(), transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]), ]) # 加载预训练ResNet-18模型 device = torch.device("cpu") model = models.resnet18(weights='IMAGENET1K_V1') # 使用官方稳定权重 model.eval() # 切换为评估模式 model.to(device) def predict_image(image_path, top_k=3): """输入图像路径，返回Top-K预测结果""" image = Image.open(image_path).convert("RGB") input_tensor = preprocess(image) input_batch = input_tensor.unsqueeze(0).to(device) # 添加batch维度 with torch.no_grad(): output = model(input_batch) probabilities = torch.nn.functional.softmax(output[0], dim=0) top_probs, top_indices = torch.topk(probabilities, top_k) results = [] for i in range(top_k): idx = top_indices[i].item() label = classes[idx] prob = top_probs[i].item() results.append({"label": label, "probability": round(prob * 100, 2)}) return results✅说明： -
weights='IMAGENET1K_V1'表示使用 TorchVision 提供的官方 ImageNet 预训练权重，保证“模型存在”和“权限合法”。 -imagenet_classes.txt是包含1000类名称的文本文件，每行一个类别，可从公开资源获取（如 GitHub 上 torchvision 示例项目附带）。
3.2 Flask WebUI 后端搭建
接下来构建 Flask 应用，提供/upload接口接收图片并返回识别结果。
# app.py from flask import Flask, request, render_template, jsonify, redirect, url_for import os from werkzeug.utils import secure_filename from model_loader import predict_image app = Flask(__name__) app.config['UPLOAD_FOLDER'] = 'static/uploads' app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # 最大上传16MB # 允许上传的文件类型 ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'bmp', 'tiff'} def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS @app.route('/') def index(): return render_template('index.html') @app.route('/upload', methods=['POST']) def upload_file(): if 'file' not in request.files: return jsonify({"error": "未检测到文件"}), 400 file = request.files['file'] if file.filename == '': return jsonify({"error": "未选择文件"}), 400 if file and allowed_file(file.filename): filename = secure_filename(file.filename) filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename) file.save(filepath) try: results = predict_image(filepath) return jsonify({ "success": True, "image_url": filepath, "results": results }) except Exception as e: return jsonify({"error": f"推理失败: {str(e)}"}), 500 else: return jsonify({"error": "不支持的文件格式"}), 400 if __name__ == '__main__': os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True) app.run(host='0.0.0.0', port=5000, debug=False)3.3 前端页面设计（HTML + CSS + JS）
创建模板目录templates/并添加index.html页面。
<!-- templates/index.html --> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>👁️ AI万物识别 - ResNet-18 图像分类</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; text-align: center; background-color: #f9f9f9; } h1 { color: #333; } .upload-box { border: 2px dashed #ccc; padding: 30px; margin: 20px auto; width: 80%; cursor: pointer; } .result-img { max-width: 100%; height: auto; margin-top: 20px; } .result-item { font-size: 1.2em; margin: 10px 0; padding: 10px; background: #eef; border-radius: 8px; display: inline-block; } .btn { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 1.1em; cursor: pointer; margin-top: 15px; } #preview { max-height: 300px; margin-top: 20px; display: none; } </style> </head> <body> <h1>👁️ AI 万物识别</h1> <p>基于 ResNet-18 的通用图像分类系统（官方稳定版）</p> <div class="upload-box" onclick="document.getElementById('fileInput').click()"> <p>📷 点击此处选择图片上传</p> <input type="file" id="fileInput" accept="image/*" style="display:none;" onchange="document.getElementById('uploadBtn').click();" /> </div> <form id="uploadForm" method="post" action="/upload" enctype="multipart/form-data"> <input type="file" name="file" id="uploadFile" required style="display:none;" /> <button type="submit" id="uploadBtn" style="display:none;"></button> </form> <img id="preview" class="result-img" /> <div id="results"></div> <script> document.getElementById('uploadFile').addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const url = URL.createObjectURL(file); const img = document.getElementById('preview'); img.src = url; img.style.display = 'block'; document.getElementById('results').innerHTML = ''; } }); document.getElementById('uploadForm').onsubmit = async function(e) { e.preventDefault(); const formData = new FormData(this); const response = await fetch('/upload', { method: 'POST', body: formData }); const data = await response.json(); if (data.success) { document.getElementById('preview').src = data.image_url + '?' + new Date().getTime(); let resultHtml = '<h3>🔍 识别结果（Top-3）：</h3>'; data.results.forEach(r => { resultHtml += `<div class="result-item">${r.label} (${r.probability}%)</div>`; }); document.getElementById('results').innerHTML = resultHtml; } else { alert('识别失败: ' + data.error); } }; </script> </body> </html>4. 启动与测试
4.1 目录结构整理
确保项目目录如下：
resnet-flask-app/ │ ├── app.py ├── model_loader.py ├── imagenet_classes.txt ├── static/ │ └── uploads/ └── templates/ └── index.html4.2 启动服务
运行主程序：
python app.py访问http://localhost:5000即可看到 WebUI 界面。
4.3 测试案例验证
上传一张雪山风景图，预期输出类似：
Top-3 结果： 1. alp (高山) —— 92.3% 2. ski (滑雪场) —— 87.1% 3. valley (山谷) —— 76.5%这表明模型不仅能识别具体物体，还能理解整体场景语义。
5. 性能优化与部署建议
5.1 CPU 推理优化技巧
尽管 ResNet-18 本身已很轻量，但仍可通过以下方式进一步提升效率：
- 启用 TorchScript：将模型导出为 TorchScript 格式，减少Python解释器开销。
- 使用 ONNX Runtime：转换为 ONNX 模型后利用 ONNX Runtime 进行加速推理。
- 批处理支持：修改接口支持多图同时上传，提高吞吐量。
- 缓存机制：对重复上传的图片哈希值做结果缓存，避免重复计算。
5.2 生产环境部署建议
- 使用Gunicorn + Nginx替代内置 Flask 服务器，提升并发能力。
- 设置日志记录与错误监控，便于排查问题。
- 添加请求频率限制，防止滥用。
- 将静态资源托管至 CDN，减轻服务器压力。
6. 总结
6.1 核心收获回顾
本文详细讲解了如何将TorchVision 官方 ResNet-18 模型与Flask WebUI深度集成，打造一个稳定、高效的本地图像分类服务。我们实现了：
- 基于官方预训练权重的零依赖模型加载
- 图像上传 → 预处理 → 推理 → 展示的全流程闭环
- 可视化前端界面，支持实时 Top-3 分类结果展示
- 轻量化设计，适配 CPU 环境，启动快、内存低
6.2 最佳实践建议
- 优先使用 TorchVision 官方模型 API，避免“模型不存在”或“权限不足”等问题。
- 保持前端简洁直观，突出核心功能（上传+识别+展示）。
- 定期更新依赖库，确保安全性和兼容性。
- 加入异常处理机制，提升用户体验和系统健壮性。
此项目可作为 AI 应用原型开发的标准模板，后续可扩展为动物识别、植物分类、工业质检等多种场景。
💡获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。