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

ゝ一世哀愁。 2023-02-20 13:59 10阅读 0赞

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

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

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

![20200627232628658.png][]

**使用flask需要两个文件夹**：

![2020062723281965.png][]

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

![20200627232835346.png][]

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

![20200627232900504.png][]

> ###  主要思路：在前端页面提供一个上传按钮，可以将图片下载到本地。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_filename
>     
>     from 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 = uploadpath
>         img = 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 %}
> 
>

> ** 结果为：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70][]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70 1][]
> 
>  
> 
>  
> 
>  
> 
>

[20200627232628658.png]: https://img-blog.csdnimg.cn/20200627232628658.png
[2020062723281965.png]: https://img-blog.csdnimg.cn/2020062723281965.png
[20200627232835346.png]: https://img-blog.csdnimg.cn/20200627232835346.png
[20200627232900504.png]: https://img-blog.csdnimg.cn/20200627232900504.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627233623561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200627233727309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlYXRoZXI=,size_16,color_FFFFFF,t_70