改进之处主要是代码，页面都没有发送改变：

现在使用文件类选择文件和上传文件：

以上框出来的地方就是改进之处：

1.训练的权重文件：

自己训练的权重文件，其中数据集来自身边收集，只训练的5个类别：
分别是：cabbage-蔬菜,car-汽车,dog-狗,phone-手机,person-人:
链接：https://pan.baidu.com/s/1GY9_LDxzrvYYJvu3B2yLdQ
提取码：ha6l
注：这个权重文件是自己训练的，并且是采用迁移学习的方法，效果比不用迁移学习要好很多，但是毕竟是自己训练权重文件，数据集还是少了很多，所以你自己在进行图像识别的时候效果不一定好。

2.文件的结构：

3.测试结果：

点击运行predict.py文件：

注意这里的路由：所以如果你是像我这样写的路由方式，那么你在浏览器中输入的地址应该是这样：http://127.0.0.1:5000/index

4.主文件predict.py:

import os
import cv2
import numpy as  np
from PIL import Image,ImageTk
from flask_wtf import FlaskForm
from flask_wtf.file import FileField
from werkzeug.utils import secure_filename
from tensorflow.keras.models  import load_model
from flask import  Flask ,render_template,request,abort
from tensorflow.keras.preprocessing.image import img_to_array
app=Flask(__name__)
app.secret_key='predict'#加载模型
model=load_model('models/InceptionV3.h5')
classes={0:'cabbage',1:'car',2:'dog',3:'phone',4:'person'}#定义文件选择类
class FileSelect(FlaskForm):file=FileField(label='文件选择: ')#显示图片
def imshow(img_path):""":param img_path: 图片路径:return:"""image = cv2.imread(img_path)print(type(image))image = cv2.cvtColor(image, cv2.COLOR_RGBA2BGRA)cv2.imshow('image', image)cv2.waitKey(0)#对图像进行预处理
def preprocess_image(img_path,target_size):""":param img_path: 图片路径:param target_size: 图片大小:return:"""image=Image.open(img_path)if image.mode!='RGB':image=image.convert('RGB')image=image.resize(target_size)image=img_to_array(image)image=image/255.0image=np.expand_dims(image,axis=0)return image#自定义错误
@app.errorhandler(404)
def index(error):return render_template('404.html'),404@app.route('/index',methods=['POST','GET'])
def index():files = FileSelect()if request.method == 'POST':if files.validate_on_submit():#判断文件是否安全filename = secure_filename(files.file.data.filename)files.file.data.save('static/' + filename)print('filename: {}'.format(filename))# 获取当前的图片路径img_path = os.getcwd() + '\\static\\' + filenameimage = preprocess_image(img_path, target_size=(224, 224))# 预测的结果转换为列表形式predictions = model.predict(image)[0].tolist()max_pred = int(np.argmax(predictions))print('predictions: {}'.format(predictions))print('预测类别: {}'.format(classes[max_pred]))# 读取当前的图片路径并显示# imshow(img_path)response = {'predictions': {'cabbage': predictions[0],'car': predictions[1],'dog': predictions[2],'phone': predictions[3],'person': predictions[4]},'image': './static/' + filename,}print('cabbage: {}'.format(response['predictions']['cabbage']))print('car: {}'.format(response['predictions']['car']))print('dog: {}'.format(response['predictions']['dog']))print('phone: {}'.format(response['predictions']['phone']))print('person: {}'.format(response['predictions']['person']))return render_template('predict.html', response=response,files=files)else:abort(404)if request.method == 'GET':response = {'predictions': '','image': ''}return render_template('predict.html', response=response,files=files)if __name__=='__main__':print('Pycharm')app.run(debug=True)

5.CCS文件：

div {width: 200px;height: 50px;margin: auto;left: 500px;font-weight: bold;font-family: Arial, Helvetics, sans-serlf;font-size: 20px;color: '#00FF7F';border: 2px solid '#000000';margin-bottom: 50px;
}#form {width: 200px;height: 50px;font-size: 10px;font-weight: 400;
}#form input {cursor: pointer;margin-bottom: 10px;margin-right: 10px;
}
#img {width: 500px;height: 400px;margin-left: 400px;
}#img img {width: 500px;height: 500px;
}
#predict {width: 50px;height: 20px;margin-top: -50px;margin-left: 980px;
}#font {width: 100px;height: 20px;margin-top: -400px;margin-left: 900px;
}

6.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="static/predict.css"><title>图像预测</title>
</head>
<body><div id="h1"><h1>图像预测</h1></div><div id="form"><form action="http://127.0.0.1:5000/index" method="POST" enctype="multipart/form-data">{{files.csrf_token()}}{{files.file}}<br><input type="submit" name="submit" value="点击预测"/><input type="reset" name="reset" value="点击重置"></form></div>
<!--  {{response.image}}--><div id="img"><img src={{response.image}}></div><div id="font">预测结果</div><div id="predict">cabbage: {{response['predictions']['cabbage']}}car:     {{response['predictions']['car']}}dog:     {{response['predictions']['dog']}}phone:   {{response['predictions']['phone']}}person:  {{response['predictions']['person']}}</div></body>
</html>

7.404.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>404</title><style>img {width:1916px;height:1080px;text-align:center;}</style>
</head>
<body><img src="./static/404.png">
</body>
</html>

python中使用html前端页面显示图像预测结果（改进）相关推荐

python中使用html前端页面显示图像预测结果（Pycharm）
文章目录 1.训练的权重文件: 2.文件的结构: 3.测试结果: 4.主程序文件predict.py文件: 5.前端文件predict.html: 6.CSS文件predict.css: 1.训练的权 ...
Python中利用LSTM模型进行时间序列预测分析
时间序列模型时间序列预测分析就是利用过去一段时间内某事件时间的特征来预测未来一段时间内该事件的特征.这是一类相对比较复杂的预测建模问题,和回归分析模型的预测不同,时间序列模型是依赖于事件发生的先后顺 ...
[IDEA中SSM整合,前端页面jsp] tomcat一开始访问jsp页面就报404错误
文章目录前言: 问题描述错误详情解决办法前言: 前面的博客详细介绍了在IDEA中使用Maven构建SSM框架的基本过程,以及所需基本jar包的引入(其中包含了项目开发过程中业务所需的jar包) ...
图像处理——在Python中使用OpenCV和PIL显示图像(legacy)
2 南溪笔记首先,我们可以确定的是, 夏侯南溪在模型代码中使用plt来显示图片:(记得要加上等待按键继续) 主要是OpenCV的窗口化显示比较麻烦,容易出现各种各样的问题: 问题1:如果不加上cv2 ...
html一键清空数组中的内容,前端页面中JS和Jquery框架对数组遍历，添加,删除，清空的一些使用...
遍历 //res为数组 for (var i = 0; i < res.length; i++) { res[i] } var arr = new Array(); $(另一个数组在这).eac ...
python 生成pdf页面大小,如何在reportlab，python中创建具有不同页面大小的PDF文档...
Is it possible to create a PDF document with differing page sizes in reportlab? I would like to crea ...
特别编辑--windows+python+django实现前端页面上传到指定路径生成个性化二维码
等你点蓝字关注都等出蜘蛛网了坚持梦想就算所有人都不支持你.这条路会很曲折,你也会一度认为是不是自己选错了,但只要坚持,就算最后没有成功,但努力了就不会有遗憾. python-前端页面上传文件到指定 ...
python 线性回归模型_如何在Python中建立和训练线性和逻辑回归ML模型
python 线性回归模型 Linear regression and logistic regression are two of the most popular machine learning ...
python中如何画logistic_如何在 Python 中建立和训练线性和 logistic 回归 ML 模型？
原标题:如何在 Python 中建立和训练线性和 logistic 回归 ML 模型? 英语原文: 翻译:(Key.君思) 线性回归与logistic回归,是. 在我的里,你们已经学习了线性回归机器学 ...

python中使用html前端页面显示图像预测结果（改进）