准实时CPU深度学习人脸检测，（hcplatform）前端使用的是vue.js,(hcbackstage)后端是flask轻量级框架,faced作为第三方库。使用Axios请求接口，flask_cors解决跨域问题，google浏览器调试。总体功能上实现了对人脸图片的上传和检测功能，并实现了简单的登录功能和拦截功能。
一、总体需求分析
登录功能：
用户输入账号和密码，经过后端验证后，密码账号正确方可登录，并且将登录状态永久保存在浏览器中。


拦截功能：
用户未经登录，无法访问项目主页，会自动跳转到登录界面。
图片上传功能：
点击上传和拖入上传都可以实现，并有相应的提示信息。


检测功能：
点击绿色按钮跳转到相应的人脸识别结果，跳转页面后，只有简单的img标签展示。

二、人工智能原理分析
使用的是faced，这是一个在GPU昂贵以及单个类的对象检测情况下的在CPU上运行的专用网络，与计算机传统面部识别Haar Cascades相比具有较少的可学习特征以及相同速度性能下较高的准确率。Facede的架构主要是两个神经网络的集合，都是使用tensorflow实现的。
主要网络-faced的主要架构主要基于YOLO的架构。基本上，它是一个全卷积网络（FCN），通过一系列卷积层和池化层运行288×288输入图像（不涉及其他层类型）。
卷积层负责提取空间感知特征。汇集层增加了随后的卷积层的感知域。
架构的输出是9×9网格（与YOLO中的13×13网格相比）。每个网格单元负责预测面部是否在该单元内（相对于YOLO，每个单元可以检测多达5个不同的对象）。
每个网格单元具有5个关联值。第一个是包含面部中心的单元的概率p。其他4个值是检测到的面部（相对于单元）的（x_center，y_center，width，height）。
辅助网络-x_center，y_center，width，height）主网的输出不如预期的那么准确。因此，实现了一个小型卷积神经网络(CNN)，以将包含面部的小图像（用主体系结构输出裁剪）作为输入，并在面部的真实边界框上输出回归。
网络采用包含面部的裁剪并预测正确的边界框
它的唯一任务是补充和改进主体系结构的输出坐标。
该网络的特定体系结构不相关
训练-是在Nvidia Titan XP GPU上完成的。训练时间约需20小时。批量归一化技术用于帮助收敛和丢失（以40％的速率）作为正则化方法以避免过度拟合。
推理和非最大抑制
当使用faced推理时，首先将图像大小调整为288×288以便馈入网络。图像位于FCN下方，提供上述9×9网格输出。
每个单元具有包含图像的概率p。通过可配置的阈值过滤单元（仅保留p>t的单元）。对于那些保留的单元格，使用单元格（x_center，y_center，width，height）定位人脸。
在某些情况下，多个单元可以竞争同一个面部。假设面部中心位于4个单元格相交的确切位置。这4个单元可能具有更高的p（在单元内包含面部中心的概率）。如果我们保留所有单元格并投影每个单元格的面部坐标，那么我们将看到相同的面部周围有4个类似的边界框。这个问题通过一种称为非最大抑制的技术得以解决。
三、界面设计分析
登录界面：
以底色为黑色的朋克风图片作为背景，配上白色发光框的登录表单，灰色登录按钮以及黑色标题，黑白对比鲜明让人注意力集中在登录这个操作上。

人脸检测界面：
延续登录界面的黑白对比风格，将文件上传组件设为白色，并放在正中间，让人一目了然。查看人脸识别按钮则为绿色，让人眼睛舒服自然，容易查看结果。再配上对应的小提示，让整个界面色调统一，较为和谐。朋克风图片和黑色背景遵守黄金分割比例，符合人体工程学。

查看结果界面：仅仅只有imag标签，但能迅速让用户查看到对应的人脸检测图片，设计简洁。

四、技术要点
前端关键部分：
实现了前端的路由拦截，让主页不会轻易被未登录的人所访问；上传组件的接口请求；前端的路由设计；vscode的项目环境搭建；
前端难点：
界面设计的配色和布局；界面互相传值的方法；跨域问题的解决；用户体验感的设计和考虑；
后端关键部分：
Flask框架虚拟环境的搭建；Flask跨域问题的解决；运行环境文件launch.json的配置；
后端难点：
Faced第三方库的导入和调用；第一次接触pythonFlask接口请求的相关API；经过faced处理后的图片无法通过二进制文件形式传到前端显示，另辟蹊径解决了；
五、主要实现代码和运行界面
前端项目代码目录：
主要实现代码在src文件夹中，其中包括了vue界面，js路由，单页面App.vue（其他所有的vue界面都在App.vue中展示），静态资源文件程序主要运行入口Main.js；上传组件代码的实现；


前端运行终端界面：

后端项目代码目录：
主要实现代码在app.py中，flask文件夹是项目运行框架，包括Lib第三方库（faced作为第三方库安装在lib里）和相应的脚本。Config.py主要存相应的全局变量。Launch.json是运行环境的配置。AcceptImage和responseimage都是相应的静态资源文件夹。

上传组件发来的路由处理代码：

Faced第三方库的调用代码：

后端启动运行终端界面：