几十行python代码构建一个前后端分离的目标检测演示网站，代码开源，

几十行python代码构建一个前后端分离的目标检测演示网站，代码开源，

在深度学习更讲究实用和落地的今天，构建一个简单的，可以利用浏览器和后端交互的演示性 Demo 可以说非常重要且实用了。本文我们将简单的介绍如何用几十行核心代码构建一个好用的、前后端分离的Demo。

2020年，可以说真的是流年不利。对于人工智能行业来说，本来就面临着落地考验，再加上疫情打击，很多 AI 企业甚至面临现金流压力。今天元峰得知，“CV四小龙”中两家，竟然以疫情和集中入职为借口，阻止4月份毕业的硕士应届生入职，让他们推迟到6月份入职，变相让应届生主动毁约。或许，他们真的是面临很大现金流压力了。

唇亡齿寒，整个行业不好，瞬间让笔者也打了个冷战。作为 AI 领域的一个小小创业者，衷心希望中国所有的人工智能公司都能走过黎明前的黑暗，走向产品大规模落地的美好明天。

我们这篇文章还是要介绍技术的，我们开始言归正传吧。

1. 为什么要做前后端分离的演示Demo

话说，在2020年，深度学习必须要非常讲究落地了。在 AIZOO 成立后这段时间，也有不少客户联系我们合作事宜，其中一个重要的环节就是效果演示。在各种演示方式中，最便捷的就是让用户在浏览器访问一个网页，用户可以自如上的上传图片，服务器返回结果，这是最简单的。

这里再插播一些题外话，我们在 http://AIZOO.com 部署了一些利用TensorFlow.js 库（以下简称 TF.js ）做的 Demo，但是使用 TF.js 部署，需要把模型下载到用户的浏览器里面运算，对于一些可能要保密的模型，这种方法就无法使用了。我们在开源口罩的 基于TF.js 演示页面后，笔者在网站后台看到很多网友把我们的网站扒的一丝不挂，甚至不少开发者去掉我们的 Logo，部署到了他们的网站上。

对于将模型部署到服务端，一个最简单的例子就是使用 Flask 框架。Flask 是一个极其简单的，使用 Python编写的轻量级 Web 框架， 该框架的使用方法极为简单，这点，对于后端开发不太熟悉的算法工程师，可以说是非常友好了。

这里有一个图像分类的简单例子，大家可以感受一下 Flask 后端接受一张图片请求，然后返回结果的方法有多么简单。

 from flask import Flask, jsonify, request
​
app = Flask(__name__)
​
@app.route('/predict', methods=['POST'])
def predict():
    if request.method == 'POST':
        file = request.files['file']
        print("the file is :", file)
        img_bytes = file.read()  # 读取文件
        print("file content is:", img_bytes)
        class_id, class_name = get_prediction(image_bytes=img_bytes) # 进行前传预测
        return jsonify({'class_id': class_id, 'class_name': class_name}) # 返回结果

可以说这样一个处理逻辑，一目了然，与我们写的 Python 前传的代码差异很小，学习起来很容易。

当然，这只是一个纯后端的简单 Demo，为了方便演示，我们需要有一个前端的页面。笔者在 Github 上发现了很多基于 Flask的深度学习演示 Demo，不管是用PyTorch、TF、MXNet还是什么推理框架，他们有一个共同点，那就是基本都是用的Flask的模板页面做的。

关于模板页面这种方法，也就是比较典型的前后端不分离的方法，在后端渲染好前端的 HTML 页面，把结果作为参数传给模板的占位符，大家可以感受一下，下面的代码，就是将分类的额 class_id 和 class_name 传给 HTML 页面，渲染一个新的页面。

 if request.method == 'POST':
     # some inference code.
     return render_template('result.html', class_id=class_id,
                               class_name=class_name)
 return render_template('index.html')

笔者基本不怎么会前端开发，但是总感觉这种方式非常不优雅，主要是前后端是绑定的。虽然这种方法很简单，我们 AIZOO 的合伙人，大概五分钟就做出来了一个使用这种模板的目标检测演示 Demo。（关于这位大佬有多牛，大家可以感受一下，http://AIZOO.com 是他一个人利用28天的下班空闲时间开发出来的，前端、后端、管理端三端一个人搞定， 等我们后面成功了，可以介绍一下元峰的这位朋友，也是我们的合伙人，有多硬核！）

这种前后端绑定的样子，笔者不太喜欢，所以笔者就自己学习了一下前后端交互，才发现其实挺简单的，几十行搞定。

下面，我们介绍一下如何做到前后端分离的一个简单 Demo， 真的非常简单。

2. 后端代码

这里的后端还是使用 Flask 框架， 后端的逻辑非常简单，与刚才的例子基本无异，只需要将前端发过来的 base64 编码的图片解码，转成 PIL 的图像对象，再使用 numpy 转为矩阵，进行目标检测的前传，可以说是非常简单了。核心代码如下：

@app.route('/api/', methods=["POST"])
def main_interface():
    # 获取前端传送的编码图片，去掉无用的字符，例如："data:image/jpeg;base64,"
    response = request.get_json()
    data_str = response['image']
    point = data_str.find(',')
    base64_str = data_str[point:]  
    
    # 将前端发过来的base64图片进行解码，并转为 numpy 矩阵 
    image = base64.b64decode(base64_str)       
    img = Image.open(io.BytesIO(image))
    if(img.mode!='RGB'):
        img = img.convert("RGB")
    # convert to numpy array.
    img_arr = np.array(img)
​
    # 进行目标检测
    results = inference(sess, detection_graph, img_arr, conf_thresh=0.5)
    # 返回结果
    return jsonify(results)

其中inference() 函数就是进行目标检测的一个函数，我们使用TensorFlow进行推理，您可以将其替换为PyTorch、MXNet等任意你喜欢的框架。限于篇幅，目标检测代码就不展示了，我们将其开源在 Github 上，大家可以去下载查看。

这里，返回给前端的是一个 JSON 字典，如下所示，前端只需在接收这个以后，将 Bounding Box 画在网页的 Canvas 控件即可。

{'results': [
     {'name': 'person',
      'conf': '0.7848635', 
      'bbox': [96, 186, 591, 1140]}, 
      {'name': 'person', 
      'conf': '0.6310116', 
      'bbox': [540, 147, 746, 1135]}, 
      {'name': 'handbag',
       'conf': '0.5156933', 
       'bbox': [382, 459, 635, 1125]}]
  }

 

3. 前端怎么做？

对于网页的前端，只需要设置一个 Button 按钮控件，用户点击上传图片以后，将其发送到后端，等接收到结果以后，将结果画到 Canvas 上即可。

对于前后端交互，我们使用了 jQuery 中的 ajax 技术。ajax 是一种简单的进行前后端交互式技术，而 jQuery 库封装了很多常用的 JavaScript 方法， 使用起来非常简单。大家不要被这两个术语吓住了，我们的代码中，用到他们的地方也就十几行，请看下面代码：

function communicate(img_base64_url) {
  $.ajax({
    url: "http://localhost:5000/api/",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({"image": img_base64_url}),
    dataType: "json"
  }).done(function(response_data) {
      drawResult(response_data.results);
  });
}

我们只需要将接收到的 base64 编码的图片，使用 ajax发送到 指定的 URL， 这里是本地的 5000 端口。然后在done函数中添加回调，也即是处理返回结果的函数，这里的drawResult()函数，也就是将返回的 JSON 结果，画到canvas控件上。其实，整个前端的核心代码，也就是前后端交互的核心，就在这 11 行代码中。

关于怎么画结果，以及 HTML 如何写，也都是十几行代码搞定的事情。这里就不展示了。大家可以去Github上下载我们的代码，简单查看一下就可以了。真的代码很少、很简单。

4. 如何运行

大家将代码从 Github 下载后，在本地只需要运行后端和前端就可以了。

app.py是后端的代码入口，大家只需要python app.py就可以运行起来了。注意这里大家要先装好 Flask 和 TensorFlow 1.x版本（1.8 ～1.15应该都可以），没有的话，只需要用 pip 安装一下就可以了。

pip install flask 
pip install  tensorflow==1.12 # 1.8 ~ 1.15 理论上都可以，2.x需要修改少量代码

对于前端部分，index.html 是入口文件，运行也很简单，如果你使用Python，只需要如下操作：

// python3
python -m http.server
// python2
python -m SimpleHTTPServer

如果你使用 node.js ，只要如下操作：

npm install serve -g // install serve
serve // this will open a mini web serve
// or http-serve
npm install http-server -g
http-server

然后在浏览器打开终端显示的 ip:port 就可以了。页面长这个样子：

你可以点击按钮上传，也可以将图片直接拖到页面，下面是一个简单的小动画。