flask 无法加载样式_模型部署3/3-手把手实现利用flask深度学习模型部署

什么是Flask？

Flask是基于Python编写的轻量级Web应用框架，用他可以实现深度学习模型部署为web应用，阅读完本文最终能够实现：

首先一个简单的例子了解一下flask的基本框架：

1. 下载flask

在anaconda prompt输入：

python -m pip --default-timeout=100 install -i https://pypi.tuna.tsinghua.edu.cn/simple flask

此方法来自于《万能pip install大法》。

2. 复制以下代码：

from flask import Flask

# 1. 定义app
app = Flask(__name__)
# 2. 定义函数
@app.route('/')
def hello_world():
 return 'hello,word!'
# 3. 定义ip和端口
if __name__ == "__main__":
    app.run(host='127.0.0.1', port=8080)

3. 运行后复制该地址到chrome浏览器

web端展示结果：

了解完flask后，下面将进行基于flask的MNIST手写数字预测模型部署。

完成后终端会创建以下文件结构。这些文件包含：

• 前端web页面的框架结构(.html)
• 前端页面的样式(.css)
• 前端页面按钮的交互eg.predict和clear按钮(.js)
• 后台flask应用程序(.py)
• keras深度学习模型文件（.h5）

STEP 1：复制model.h5文件到py文件所在文件夹

Model.h5文件是在模型部署1/3-构建MNIST手写字深度学习模型生成的，同时也包含模型建立的过程。

更多的keras模型保存和加载的方式查看模型部署2/3-保存和加载Keras模型的三种方式。

STEP 2：创建index.js文件

创建Js文件到static文件夹，js文件能够解决前端交互的问题，复制以下代码。

(function() {
      
  var canvas = document.querySelector("#canvas");
  var context = canvas.getContext("2d");
  canvas.width = 280;
  canvas.height = 280;
  var Mouse = {
       x: 0, y: 0 };
  var lastMouse = {
       x: 0, y: 0 };
  context.fillStyle = "black";
  context.fillRect(0, 0, canvas.width, canvas.height);
  context.color = "white";
  context.lineWidth = 15;
  context.lineJoin = context.lineCap = "round";
clearCanvas();
canvas.addEventListener( "mousemove",
  function(e) {
      
    lastMouse.x = Mouse.x;
    lastMouse.y = Mouse.y;
    Mouse.x = e.pageX - this.offsetLeft;
    Mouse.y = e.pageY - this.offsetTop;
}, false);
canvas.addEventListener("mousedown",
  function(e) {
      
    canvas.addEventListener("mousemove", onDraw, false);
}, false);
canvas.addEventListener("mouseup",
  function() {
      
    canvas.removeEventListener("mousemove", onDraw, false);
}, false);
/* Canvas Draw */
var onDraw = function() {
      
  context.lineWidth = context.lineWidth;
  context.lineJoin = "round";
  context.lineCap = "round";
  context.strokeStyle = context.color;
  context.beginPath();
  context.moveTo(lastMouse.x, lastMouse.y);
  context.lineTo(Mouse.x, Mouse.y);
  context.closePath();
  context.stroke();
};
/* This function clears the box */
function clearCanvas() {
      
  var clearButton = $("#clearButton");
  clearButton.on("click", function() {
      
    context.clearRect(0, 0, 280, 280);
    context.fillStyle = "black";
    context.fillRect(0, 0, canvas.width, canvas.height);
});
/* Slider control */
var slider = document.getElementById("myRange");
var output = document.getElementById("sliderValue");
output.innerHTML = slider.value;
slider.oninput = function() {
      
  output.innerHTML = this.value;
  context.lineWidth = $(this).val();
};
$("#lineWidth").change(function() {
      
  context.lineWidth = $(this).val();
});
}})();

STEP 3：创建style.css

创建css文件到static文件夹，css文件创建了前端页面的元素，复制以下代码。

 body {
  padding-top: 20px;
  padding-bottom: 20px;
}
.header, .footer {
  padding-right: 15px;
  padding-left: 15px;
}
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  padding-top: 20px;
  padding-bottom: 20px;
}
.bodyDiv{
  text-align: center;
}
@media screen and (min-width: 768px) {
  .header,
  .footer {
    padding-right: 0;
    padding-left: 0;
}
.header {
  margin-bottom: 30px;
}
.jumbotron {
  border-bottom: 0;
}
}
@media screen and (max-width: 500px) {
  .slidecontainer{
    display: none;
  }
}
.slidecontainer{
  float: left;
  width: 30%;
}
.jumbotronHeading{
  margin-bottom: 7vh;
}
.canvasDiv{
  display: flow-root;
  text-align: center;
}

STEP 4：创建index.html文件

创建html文件到templates文件夹，html文件创建了web的基本框架，复制以下代码。

更多的前端知识查看第一章 产品经理必懂的前端技术。

 











  
    

      

        
MNIST Handwritten CNN
      
      

        
Draw the digit inside this Box   
        

          
Drag the slider to change the line width.
          
          
Value: 
        
        

          
          
          

          

          Predict
          Clear
          
        
      

      

        
Get your prediction here!!!
      
      

        
Keras MNIST
      
    

STEP 5：创建keras_flask.py文件

该文件包含了调用flask函数，具体的查看代码注释。

from flask import Flask, render_template, request
from scipy.misc import imread, imresize, imsave
import tensorflow as tf
import numpy as np
import re
import base64
from tensorflow.keras.models import load_model
from tensorflow.python.keras.backend import set_session

# 1. 初始化 flask app
app = Flask(__name__)

# 2. 初始化global variables
sess = tf.Session()
graph = tf.get_default_graph()

# 3. 将用户画的图输出成output.png
def convertImage(imgData1):
  imgstr = re.search(r'base64,(.*)', str(imgData1)).group(1)
  with open('output.png', 'wb') as output:
    output.write(base64.b64decode(imgstr))

# 4. 搭建前端框架
@app.route('/')
def index():
  return render_template("index.html")

# 5. 定义预测函数
@app.route('/predict/', methods=['GET', 'POST'])
def predict():
  # 这个函数会在用户点击‘predict’按钮时触发
  # 会将输出的output.png放入模型中进行预测
  # 同时在页面上输出预测结果
  imgData = request.get_data()
  convertImage(imgData)
  # 读取图片
  x = imread('output.png', mode='L')
  # 设置图片的规格
  x = imresize(x, (28, 28))/255
  # 可以保存最终处理好的图片
  imsave('final_image.jpg', x)
  x = x.reshape(1, 28, 28, 1)

  # 调用训练好的模型和并进行预测
  global graph
  global sess
  with graph.as_default():
    set_session(sess)
    model = load_model('model.h5')
    out = model.predict(x)
    response = np.argmax(out, axis=1)
    return str(response[0])

# 6. 返回本地访问地址
if __name__ == "__main__":
    # 让app在本地运行，定义了host和port
    app.run(host='0.0.0.0', port=5000)

STEP 6：运行keras_flask.py文件后

复制终端的http地址到chrome浏览器，即可看到整个预测界面。

STEP 7：模型部署成功，进行预测

预测的时候服务器会反应2-3秒，属于正常现象。

至此，手把手展示了从创建深度学习模型到部署深度学习模型的全过程，该教程能够帮助大家理解深度学习在实际生产环境中的应用，同时大家简单易懂并且能够立马上手。

赶紧收藏点赞关注吧！

笔芯

致力于用最简单的方式讲懂最复杂的知识