tensorflow网页版手写数字识别-使用flask进行网络部署

tensorflow网页版手写数字识别-使用flask进行网络部署

tensorflow如何将训练好的模型部署在网页中呢，在python中可以很方便的使用django或者flask框架来进行搭建。这里我使用轻量级的flask框架进行搭建。

首先模型已经放在了checkpoint目录下，想要知道模型怎么保存的，可以查看我往期的博客

使用flask需要两个文件夹：

一个是static，存放静态文件，例如图片，音乐之类的

还有一个是templates，前端网页的模板就放在这个文件夹中

主要思路：在前端页面提供一个上传按钮，可以将图片下载到本地。flask后台代码将图片进行处理，识别出数字之后，输出到前端页面中。

接下来是python的flask后台代码：

from flask import Flask, render_template, request, flash, redirect, url_for, make_response
from flask_bootstrap import Bootstrap
import os
from werkzeug.utils import secure_filenamefrom PIL import Image #导入图片模块import numpy as np #导入科学计算库import tensorflow as tf #导入机器学习框架model_save_path = './checkpoint/mnist.ckpt' #训练好的模型路径model = tf.keras.models.Sequential([ #实现前向传播tf.keras.layers.Flatten(),tf.keras.layers.Dense(128, activation = "relu"),tf.keras.layers.Dense(10, activation = "softmax")
])model.load_weights(model_save_path) #加载参数def yuce(uploadpath):image_path = uploadpathimg = Image.open(image_path)img = img.resize((28, 28), Image.ANTIALIAS)  # 把输入图片resieze成28*28尺寸的图片，转换为灰度图img_arr = np.array(img.convert('L'))# img_arr = 255 - img_arr #颜色取反for i in range(28):  # 让图片变为只有黑色和白色的高对比图for j in range(28):if img_arr[i][j] < 200:img_arr[i][j] = 255  # 像素点小于200的全部变为255，纯白色else:img_arr[i][j] = 0  # 像素点大于200的全部变为0，纯黑色img_arr = img_arr / 255.0  # 归一化处理x_predict = img_arr[tf.newaxis, ...]  # 添加一个维度，变为三个维度result = model.predict(x_predict)  # 预测结果pred = tf.argmax(result, axis=1) #获取结果# print("\n")# tf.print(pred)return pred #返回预测值app = Flask(__name__) #新建flask实例
bootstrap = Bootstrap(app) #引用了bootstrap
app.config['SECRET_KEY'] = os.urandom(24)basedir = os.path.abspath(os.path.dirname(__file__))
uploadDir = os.path.join(basedir, 'static/uploads') #存储文件地址def address(filename): #获得地址和文件名，也就是获得文件地址uploadpath = os.path.join(uploadDir, filename)return uploadpath@app.route('/', methods=['POST', 'GET'])
def process():if request.method == 'POST':f = request.files.get('selectfile') #得到表单if not os.path.exists(uploadDir):os.makedirs(uploadDir) #新建文件夹if f:filename = secure_filename(f.filename) #安全设置types = ['jpg', 'png', 'tif'] #指定格式if filename.split('.')[-1] in types:# uploadpath = os.path.join(uploadDir, filename)uploadpath = address(filename) #存储文件的地址f.save(uploadpath) #保存文件#前向传播pred = yuce(uploadpath) #调用函数，进行前向传播预测flash('Upload Load Successful!', 'success') #前端进行输出，说明上传成功return render_template('base.html', imagename=filename, predvalue = pred) #渲染模板else:flash('Unknown Types!', 'danger')else:flash('No File Selected.', 'danger')return render_template('base.html')if __name__ == '__main__':app.run(debug=True)

前端模板代码：

这里使用了bootstrap的框架进行了优化，大家可以随意搭建自己的前端模板

{% extends "bootstrap/base.html" %}
{% block title %}Flask-Upload{% endblock %}{% block content %}
<div class="container">{% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}{% for category, message in messages %}{% if category in ["success","danger"] %}<div class="alert alert-{{ category }}"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>{{ message }}</div>{% endif %}{% endfor %}{% endif %}{% endwith %}<form method="post" enctype="multipart/form-data"><input id="lefile" type="file" style="display:none" name="selectfile"><div class="input-append form-inline"><input id="photoCover" class="input-large form-control" type="text"style="height:34px;width:60vw;border:2px #337ab7 solid"placeholder="请选择影像"><a class="btn btn-primary" onclick="$('input[id=lefile]').click();">浏览</a><button type="submit" class="btn btn-primary">上传</button></div></form>{% if imagename %}<img src="{{ url_for('static',filename='uploads/'+imagename) }}" width="300px" height="300px"/>{% endif %}<div>{% if predvalue %}预测的数字为：{{predvalue}}{% endif %}</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="text/javascript">$('input[id=lefile]').change(function () {$('#photoCover').val($(this).val());});$("#photoCover").attr('autocomplete', 'off')
</script>
{% endblock %}

结果为：

tensorflow网页版手写数字识别-使用flask进行网络部署相关推荐

tensorflow saver_机器学习入门(6)：Tensorflow项目Mnist手写数字识别-分析详解
本文主要内容:Ubuntu下基于Tensorflow的Mnist手写数字识别的实现训练数据和测试数据资料:http://yann.lecun.com/exdb/mnist/ 前面环境都搭建好了,直接 ...
mnist手写数字识别python_Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】...
本文实例讲述了Python tensorflow实现mnist手写数字识别.分享给大家供大家参考,具体如下: 非卷积实现 import tensorflow as tf from tensorflow ...
深度学习之基于CNN实现汉字版手写数字识别（Chinese-Mnist）
Mnist数据集是深度学习入门的数据集,昨天发现了Chinese-Mnist数据集,与Mnist数据集类似,只不过是汉字数字,例如'一'.'二'.'三'等,本次实验利用自己搭建的CNN网络实现Chin ...
Tensorflow 神经网络作业手写数字识别训练、回测准确率
大白话讲解卷积神经网络工作原理,推荐一个bilibili的讲卷积神经网络的视频,up主从youtube搬运过来,用中文讲了一遍. 这篇文章是 TensorFlow 2.0 Tutorial 入门教程的 ...
Python(TensorFlow框架)实现手写数字识别系统
手写数字识别算法的设计与实现本文使用python基于TensorFlow设计手写数字识别算法,并编程实现GUI界面,构建手写数字识别系统.这是本人的本科毕业论文课题,当然,这个也是机器学习的基本问题 ...
Python TensorFlow框架实现手写数字识别系统
手写数字识别算法的设计与实现本文使用python基于TensorFlow设计手写数字识别算法,并编程实现GUI界面,构建手写数字识别系统.这是本人的本科毕业论文课题,当然,这个也是机器学习的基本问题 ...
学习笔记CB009:人工神经网络模型、手写数字识别、多层卷积网络、词向量、word2vec...
人工神经网络,借鉴生物神经网络工作原理数学模型. 由n个输入特征得出与输入特征几乎相同的n个结果,训练隐藏层得到意想不到信息.信息检索领域,模型训练合理排序模型,输入特征,文档质量.文档点击历史.文档 ...
【手写数字识别】基于Lenet网络实现手写数字识别附matlab代码
1 内容介绍当今社会,人工智能得到快速发展,而模式识别作为人工智能的一个重要应用领域也得到了飞速发展,它利用计算机通过计算的方法根据样本的特征对样本进行分类,其中的光学字符识别技术受到广大研 ...
mnist手写数字识别python_基于tensorflow的MNIST手写数字识别（二）--入门篇
一.本文的意义因为谷歌官方其实已经写了MNIST入门和深入两篇教程了,那我写这些文章又是为什么呢,只是抄袭?那倒并不是,更准确的说应该是笔记吧,然后用更通俗的语言来解释,并且补充更多,官方文章中没有 ...

tensorflow网页版手写数字识别-使用flask进行网络部署

tensorflow网页版手写数字识别-使用flask进行网络部署

主要思路：在前端页面提供一个上传按钮，可以将图片下载到本地。flask后台代码将图片进行处理，识别出数字之后，输出到前端页面中。

tensorflow网页版手写数字识别-使用flask进行网络部署相关推荐

最新文章

热门文章