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

点击上方蓝色字体，关注我们

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

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

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

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

1

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

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

这里再插播一些题外话，我们在 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。（关于这位大佬有多牛，大家可以感受一下，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，只需要如下操作：

// python3python -m http.server// python2python -m SimpleHTTPServer

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

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

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

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

好了，本文到这里就介绍完了。

下面是我们的开源代码链接，欢迎大家使用，以及赠送一个 star。

https://github.com/AIZOOTech/flask-object-detection

号外，我们新版本的网站 AIZOO.com  已经上线了，欢迎算法工程师将您的代码展示到 AIZOO 平台，我们致力于打造需求方和 AI 工程师的桥梁，也欢迎对人工智能算法有需求的朋友向我们提需求。

我们最近也在寻求融资，如果您是投资人，欢迎添加下方元峰的微信联系我们，感激不尽。

精彩推荐

2020年代，中国AI创业公司将走向何方

都2020年了，在校学生还值得继续转行搞AI吗

AIZOO开源人脸口罩检测数据+模型+代码+在线网页体验，通通都开源了

新手也能彻底搞懂的目标检测Anchor是什么？怎么科学设置？[附代码]

我是元峰，互联网+AI领域的创业者，欢迎扫描下方二维码，或者直接在微信搜索“AIZOO”关注我们的公众号AIZOO。您也可以访问我们的网站 AIZOO.com 了解我们。

如果您是有算法需求，例如目标检测、人脸识别、缺陷检测、行人检测的算法需求，欢迎添加我们的微信号AIZOOTech与我们交流，我们团队是一群算法工程师的创业团队，会以高效、稳定、高性价比的产品满足您的需求。

如果您是算法或者开发工程师，也可以添加我们的微信号AIXZOOTech，请备注学校or公司名称-研究方向-昵称，例如“西电-图像算法-元峰”，元峰会拉您进我们的算法交流群，一起交流算法和开发的知识，以及对接项目。

公众号“AIZOO”

扫描二维码

关注我们

AIZOO

作者元峰微信号“AIZOOTech”

扫描二维码

添加二维码

AIZOOTech