ResNet18+Flask构建Web应用：云端GPU加速开发

引言

作为一名计算机专业的学生，毕业设计总是让人既期待又头疼。我选择了开发一个智能相册网站作为毕业设计项目，核心功能是通过AI自动识别照片中的物体和场景。最初我在本地电脑上训练ResNet18模型，结果电脑频繁卡死，风扇狂转得像要起飞一样。直到我发现了云端GPU开发这个解决方案，整个项目的开发效率才有了质的飞跃。

本文将带你一步步用ResNet18模型和Flask框架，在云端GPU环境下构建一个完整的智能相册Web应用。即使你没有任何AI开发经验，也能跟着教程轻松完成。我们会从最基础的模型部署开始，到最终构建一个可交互的Web界面，整个过程只需要几小时就能完成。

1. 为什么选择ResNet18+Flask组合

ResNet18是计算机视觉领域最经典的轻量级模型之一，它完美平衡了性能和计算资源消耗。相比更复杂的模型，ResNet18有以下几个优势：

模型体积小：仅约45MB，适合Web应用部署
计算量低：在普通GPU上也能快速完成推理
准确度够用：在ImageNet数据集上能达到70%以上的top-1准确率

Flask则是Python中最轻量级的Web框架，特别适合快速开发小型Web应用。它不需要复杂的配置，几行代码就能构建一个功能完整的Web服务。

将两者结合，你就能用最少的代码构建一个AI驱动的Web应用。更重要的是，借助云端GPU资源，你可以完全摆脱本地硬件的限制。

2. 环境准备与镜像选择

2.1 为什么需要GPU环境

ResNet18虽然轻量，但在CPU上运行仍然较慢。实测表明：

在Intel i7 CPU上：单张图片推理需要约200ms
在NVIDIA T4 GPU上：单张图片推理仅需约20ms

10倍的性能差距意味着，当你的网站有多个用户同时访问时，GPU能提供更流畅的体验。

2.2 选择适合的云端镜像

在CSDN星图镜像广场，你可以找到预装了PyTorch和CUDA的基础镜像。推荐选择包含以下组件的镜像：

PyTorch 1.12+ (支持ResNet18预训练模型)
CUDA 11.3+ (确保GPU加速可用)
Flask 2.0+ (构建Web界面)

这些镜像已经配置好了所有底层依赖，你只需要专注于业务逻辑开发。

3. 快速部署ResNet18模型

3.1 加载预训练模型

在PyTorch中加载ResNet18预训练模型非常简单：

import torch import torchvision.models as models # 加载预训练模型 model = models.resnet18(pretrained=True) model.eval() # 设置为评估模式 # 如果有GPU，将模型转移到GPU上 device = torch.device("cuda" if torch.cuda.is_available() else "cpu") model = model.to(device)

这段代码会下载预训练好的ResNet18模型(约45MB)，并自动将其转移到GPU上(如果可用)。

3.2 图像预处理

ResNet18需要特定的输入格式，我们需要对上传的图片进行预处理：

from torchvision import transforms # 定义图像预处理流程 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] ) ]) def prepare_image(image): # 应用预处理 input_tensor = preprocess(image) # 添加batch维度 (模型需要batch输入) input_batch = input_tensor.unsqueeze(0) # 转移到GPU return input_batch.to(device)

4. 构建Flask Web应用

4.1 基础Flask应用结构

创建一个基本的Flask应用只需要几行代码：

from flask import Flask, request, render_template from PIL import Image app = Flask(__name__) @app.route("/", methods=["GET"]) def home(): return render_template("index.html") if __name__ == "__main__": app.run(host="0.0.0.0", port=5000)

4.2 添加图片上传和识别功能

扩展上面的基础应用，添加图片上传和识别功能：

import json from torchvision.models.resnet import ResNet18_Weights @app.route("/predict", methods=["POST"]) def predict(): # 获取上传的文件 if "file" not in request.files: return "没有上传文件", 400 file = request.files["file"] if file.filename == "": return "没有选择文件", 400 try: # 打开图片并预处理 image = Image.open(file.stream) input_batch = prepare_image(image) # 模型推理 with torch.no_grad(): output = model(input_batch) # 获取预测结果 probabilities = torch.nn.functional.softmax(output[0], dim=0) _, predicted_idx = torch.max(output, 1) # 加载ImageNet类别标签 weights = ResNet18_Weights.DEFAULT categories = weights.meta["categories"] # 返回前5个预测结果 top5_prob, top5_catid = torch.topk(probabilities, 5) results = [] for i in range(top5_prob.size(0)): results.append({ "label": categories[top5_catid[i]], "probability": f"{top5_prob[i].item()*100:.2f}%" }) return json.dumps(results) except Exception as e: return f"处理出错: {str(e)}", 500

5. 前端界面设计

5.1 基础HTML模板

在templates文件夹下创建index.html：

<!DOCTYPE html> <html> <head> <title>智能相册 - ResNet18识别</title> <style> body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 20px; } #preview { max-width: 100%; margin-top: 10px; } #results { margin-top: 20px; } .result-item { padding: 10px; border-bottom: 1px solid #eee; } </style> </head> <body> <h1>智能相册</h1> <p>上传图片，AI将自动识别其中的内容</p> <div class="upload-area"> <form id="uploadForm" enctype="multipart/form-data"> <input type="file" id="fileInput" accept="image/*" required> <button type="submit">识别图片</button> </form> <img id="preview" style="display: none;"> </div> <div id="results"></div> <script> // 显示预览图 document.getElementById('fileInput').addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(event) { const preview = document.getElementById('preview'); preview.src = event.target.result; preview.style.display = 'block'; }; reader.readAsDataURL(file); } }); // 处理表单提交 document.getElementById('uploadForm').addEventListener('submit', function(e) { e.preventDefault(); const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; if (!file) return; const formData = new FormData(); formData.append('file', file); fetch('/predict', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { const resultsDiv = document.getElementById('results'); resultsDiv.innerHTML = '<h3>识别结果：</h3>'; data.forEach(item => { const div = document.createElement('div'); div.className = 'result-item'; div.innerHTML = `<strong>${item.label}</strong>: ${item.probability}`; resultsDiv.appendChild(div); }); }) .catch(error => { console.error('Error:', error); alert('识别失败，请重试'); }); }); </script> </body> </html>

6. 部署与优化技巧

6.1 一键部署Web服务

在云端GPU环境中，你可以使用以下命令启动Flask应用：

# 安装必要依赖 pip install flask torch torchvision pillow # 启动应用 (确保你的代码保存在app.py中) python app.py

应用启动后，通常会运行在5000端口。在CSDN星图平台上，你可以配置端口映射，将服务暴露给外部访问。

6.2 性能优化建议

启用多线程：修改Flask启动命令，启用多线程处理请求python app.run(host="0.0.0.0", port=5000, threaded=True)
模型缓存：确保模型只加载一次，而不是每次请求都加载
图片大小限制：在前端和后端都添加图片大小限制，防止大图片导致内存溢出
使用gunicorn：生产环境建议使用gunicorn作为WSGI服务器bash pip install gunicorn gunicorn -w 4 -b 0.0.0.0:5000 app:app