整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
自IT Next，作者：Vincent Mühler，机器之心编译，参与：Geek AI、张倩。
本文将为大家介绍一个建立在「tensorflow.js」内核上的 javascript API——「face-api.js」，它实现了三种卷积神经网络架构，用于完成人脸检测、识别和特征点检测任务，可以在浏览器中进行人脸识别。
号外！号外！现在人们终于可以在浏览器中进行人脸识别了！本文将为大家介绍「face-api.js」，这是一个建立在「tensorflow.js」内核上的 javascript 模块，它实现了三种卷积神经网络（CNN）架构，用于完成人脸检测、识别和特征点检测任务。
像往常一样，我们将查看一个简单的代码示例，这将使你能立即通过短短几行代码中的程序包开始了解这个 API。让我们开始吧！
我们已经有了「face-recognition.js」，现在又来了另一个同样的程序包？
如果你阅读过本文作者另一篇关于「node.js」环境下进行人脸识别的文章《Node.js + face-recognition.js : Simple and Robust Face Recognition using Deep Learning》（Node.js + face-recognition.js：通过深度学习实现简单而鲁棒的人脸识别）（https://medium.com/@muehler.v/node-js-face-recognition-js-simple-and-robust-face-recognition-using-deep-learning-ea5ba8e852），你就会知道他在之前组装过一个类似的程序包，例如「face-recgnition.js」，从而为「node.js」引入了人脸识别功能。
起初，作者并没有预见到 JavaScript 社区对与人脸识别程序包的需求程度如此之高。对许多人而言，「face-recognition.js」似乎是一个不错的、能够免费试用的开源选项，它可以替代由微软或亚马逊等公司提供的付费人脸识别服务。但是作者曾多次被问道：是否有可能在浏览器中运行完整的人脸识别的工作流水线？
多亏了「tensorflow.js」，这种设想最终变为了现实！作者设法使用「tf.js
」内核实现了部分类似的工具，它们能得到和「face-recognition.js」几乎相同的结果，但是作者是在浏览器中完成的这项工作！而且最棒的是，这套工具不需要建立任何的外部依赖，使用它非常方便。并且这套工具还能通过 GPU 进行加速，相关操作可以使用 WebGL 运行。
这足以让我相信，JavaScript 社区需要这样的一个为浏览器环境而编写的程序包！可以设想一下你能通过它构建何种应用程序。
如何利用深度学习解决人脸识别问题
如果想要尽快开始实战部分，那么你可以跳过这一章，直接跳到代码分析部分去。但是为了更好地理解「face-api.js」中为了实现人脸识别所使用的方法，我强烈建议你顺着这个章节阅读下去，因为我常常被人们问到这个问题。
为简单起见，我们实际想要实现的目标是在给定一张人脸的图像时，识别出图像中的人。为了实现这个目标，我们需要为每一个我们想要识别的人提供一张（或更多）他们的人脸图像，并且给这些图像打上人脸主人姓名的标签作为参考数据。现在，我们将输入图像和参考数据进行对比，找到与输入图像最相似的参考图像。如果有两张图像都与输入足够相似，那么我们输出人名，否则输出「unknown」（未知）。
听起来确实是个好主意！然而，这个方案仍然存在两个问题。首先，如果我们有一张显示了多人的图像，并且我们需要识别出其中所有的人，将会怎样呢？其次，我们需要建立一种相似度度量手段，用来比较两张人脸图像。
人脸检测
我们可以从人脸检测技术中找到第一个问题的答案。简单地说，我们将首先定位输入图像中的所有人脸。「face-api.js」针对人脸检测工作实现了一个 SSD（Single Shot Multibox Detector）算法，它本质上是一个基于 MobileNetV1 的卷积神经网络（CNN），在网络的顶层加入了一些人脸边框预测层。
该网络将返回每张人脸的边界框，并返回每个边框相应的分数，即每个边界框表示一张人脸的概率。这些分数被用于过滤边界框，因为可能存在一张图片并不包含任何一张人脸的情况。请注意，为了对边界框进行检索，即使图像中仅仅只有一个人，也应该执行人脸检测过程。
人脸特征点检测及人脸对齐
在上文中，我们已经解决了第一个问题！然而，我想要指出的是，我们需要对齐边界框，从而抽取出每个边界框中的人脸居中的图像，接着将其作为输入传给人脸识别网络，因为这样可以使人脸识别更加准确！
为了实现这个目标，「face-api.js」实现了一个简单的卷积神经网络（CNN），它将返回给定图像的 68 个人脸特征点：
从特征点位置上看，边界框可以将人脸居中。你可以从下图中看到人脸检测结果（左图）与对齐后的人脸图像（右图）的对比：
人脸识别
现在，我们可以将提取出的对齐后的人脸图像输入到人脸识别网络中，该网络基于一个类似于 ResNet-34 的架构，基本上与 dlib（https://github.com/davisking/dlib/blob/master/examples/dnn_face_recognition_ex.cpp）中实现的架构一致。该网络已经被训练去学习出人脸特征到人脸描述符的映射（一个包含 128 个值的特征向量），这个过程通常也被称为人脸嵌入。
现在让我们回到最初对比两张人脸图像的问题：我们将使用每张抽取出的人脸图像的人脸描述符，并且将它们与参考数据的人脸描述符进行对比。更确切地说，我们可以计算两个人脸描述符之间的欧氏距离，并根据阈值判断两张人脸图像是否相似（对于 150*150 的图像来说，0.6 是一个很好的阈值）。使用欧氏距离的效果惊人的好，当然，你也可以选用任何一种分类器。下面的 gif 动图可视化了通过欧氏距离比较两张人脸图像的过程：
至此，我们已经对人脸识别的理论有所了解。接下来让我们开始编写一个代码示例。
是时候开始编程了！
在这个简短的示例中，我们将看到如何一步步地运行人脸识别程序，识别出如下所示的输入图像中的多个人物：
导入脚本
首先，从 dist/face-api.js 获得最新的版本（https://github.com/justadudewhohacks/face-api.js/tree/master/dist），或者从 dist/face-api.min.js 获得缩减版，并且导入脚本：
<script src="face-api.js"></script>
如果你使用 npm 包管理工具，可以输入如下指令：
npm i face-api.js
加载模型数据
你可以根据应用程序的要求加载你需要的特定模型。但是如果要运行一个完整的端到端的示例，我们还需要加载人脸检测、人脸特征点检测和人脸识别模型。相关的模型文件可以在代码仓库中找到，链接如下：https://github.com/justadudewhohacks/face-api.js/tree/master/weights。
其中，模型的权重已经被量化，文件大小相对于初始模型减小了 75%，使你的客户端仅仅需要加载所需的最少的数据。此外，模型的权重被分到了最大为 4 MB 的数据块中，使浏览器能够缓存这些文件，这样它们就只需要被加载一次。
模型文件可以直接作为你的 web 应用中的静态资源被使用，或者你可以将它们存放在另外的主机上，通过指定的路径或文件的 url 链接来加载。假如你将它们与你在 public/models 文件夹下的资产共同存放在一个 models 目录中：
const MODEL_URL = '/models'
await faceapi.loadModels(MODEL_URL)
或者，如果你仅仅想要加载特定的模型：
const MODEL_URL = '/models'
await faceapi.loadFaceDetectionModel(MODEL_URL)
await faceapi.loadFaceLandmarkModel(MODEL_URL)
await faceapi.loadFaceRecognitionModel(MODEL_URL)
从输入图像中得到对所有人脸的完整描述
该神经网络可以接收 HTML 图像、画布、视频元素或张量（tensor）作为输入。为了检测出输入图像中分数（score）大于最小阈值（minScore）的人脸边界框，我们可以使用下面的简单操作：
const minConfidence = 0.8
const fullFaceDescriptions = await faceapi.allFaces(input, minConfidence)
一个完整的人脸描述符包含了检测结果（边界框+分数），人脸特征点以及计算出的描述符。正如你所看到的，「faceapi.allFaces」在底层完成了本文前面的章节所讨论的所有工作。然而，你也可以手动地获取人脸定位和特征点。如果这是你的目的，你可以参考 github repo 中的几个示例。
请注意，边界框和特征点的位置与原始图像/媒体文件的尺寸有关。当显示出的图像尺寸与原始图像的尺寸不相符时，你可以简单地通过下面的方法重新调整它们的大小：
const resized = fullFaceDescriptions.map(fd => fd.forSize(width, height))
我们可以通过将边界框在画布上绘制出来对检测结果进行可视化：
fullFaceDescription.forEach((fd, i) => {
faceapi.drawDetection(canvas, fd.detection, { withScore: true })
})
可以通过下面的方法将人脸特征点显示出来：
fullFaceDescription.forEach((fd, i) => {
faceapi.drawLandmarks(canvas, fd.landmarks, { drawLines: true })
})
通常，我会在 img 元素的顶层覆盖一个具有相同宽度和高度的绝对定位的画布（想获取更多信息，请参阅 github 上的示例）。
人脸识别
当我们知道了如何得到给定的图像中所有人脸的位置和描述符后，我们将得到一些每张图片显示一个人的图像，并且计算出它们的人脸描述符。这些描述符将作为我们的参考数据。
假设我们有一些可以用的示例图片，我们首先从一个 url 链接处获取图片，然后使用「faceapi.bufferToImage」从它们的数据缓存中创建 HTML 图像元素：
// fetch images from url as blobs
const blobs = await Promise.all(
['sheldon.png' 'raj.png', 'leonard.png', 'howard.png'].map(
uri => (await fetch(uri)).blob()
)
)
// convert blobs (buffers) to HTMLImage elements
const images = await Promise.all(blobs.map(
blob => await faceapi.bufferToImage(blob)
))
接下来，在每张图像中，正如我们之前对输入图像所做的那样，我们对人脸进行定位、计算人脸描述符：
const refDescriptions = await Promsie.all(images.map(
img => (await faceapi.allFaces(img))[0]
))
const refDescriptors = refDescriptions.map(fd => fd.descriptor)
现在，我们还需要做的就是遍历我们输入图像的人脸描述符，并且找到参考数据中与输入图像距离最小的描述符：
const sortAsc = (a, b) => a - b
const labels = ['sheldon', 'raj', 'leonard', 'howard']
const results = fullFaceDescription.map((fd, i) => {
const bestMatch = refDescriptors.map(
refDesc => ({
label: labels[i],
distance: faceapi.euclideanDistance(fd.descriptor, refDesc)
})
).sort(sortAsc)[0]
return {
detection: fd.detection,
label: bestMatch.label,
distance: bestMatch.distance
}
})
正如前面提到的，我们在这里使用欧氏距离作为一种相似度度量，这样做的效果非常好。我们在输入图像中检测出的每一张人脸都是匹配程度最高的。
最后，我们可以将边界框和它们的标签一起绘制在画布上，显示检测结果：
// 0.6 is a good distance threshold value to judge
// whether the descriptors match or not
const maxDistance = 0.6
results.forEach(result => {
faceapi.drawDetection(canvas, result.detection, { withScore: false })
const text = `${result.distance < maxDistance ? result.className : 'unkown'} (${result.distance})`
const { x, y, height: boxHeight } = detection.getBox()
faceapi.drawText(
canvas.getContext('2d'),
x,
y + boxHeight,
text
)
})
至此，我希望你对如何使用这个 API 有了一个初步的认识。同时，我也建议你看看文中给出的代码仓库中的其它示例。好好地把这个程序包玩个痛快吧！
ava进阶架构师”，选择右上角“置顶公众号”
20大进阶架构专题每日送达
在设计接口时，有很多因素要考虑：
接口的业务定位
接口的安全性
接口的可扩展性
接口的稳定性
接口的跨域性
接口的协议规则
接口的路径规则
接口单一原则
接口过滤及接口组合
本篇文章将简要分析这些因素。
一 规范性建议
1.职责原则
在设计接口时，必须明确接口的职责，即接口类型，接口应解决什么业务问题等
2.单一性原则
在明确接口职责的条件下，尽量做到接口单一，即一个接口只做一件事，而非两件以上。
很多非资深接口设计者，在设计接口时，总认为接口所做的事越多，越牛叉，这是非常严重的错误认识。
3.协议规范
在设计接口时，应明确接口协议，是采用HTTP协议,HTTPS协议还是FTP协议，要根据具体情况来定。
(1)FTP协议(File Transfer Protocol，简称FTP)，是一套标准的文件传输协议，用于传输文件，如.txt，.csv等，一般文件传输，采用FTP协议
(2)HTTP协议，适用一般对安全性要求比较低或没要求的业务情景
(3)HTTPS=HTTP+SSL,适用于对安全性要求较高的业务情景
4.路径规则
由于api获取的是一种资源，所以网址中尽量为名词，而非动词
/api/v1.0/Product/2019
/api/v1.0/Users/2019
5.http请求方式
接口基本访问协议：get(获取)，post(新增)，put(修改)和delete(删除)
get /users：列出所有用户
get /users/id：根据id获取用户
post /user：新增用户
put /user/id：根据用户id更新用户
delete /user/id：根据用户id删除用户
6.域名
一般地，域名分为主域名和专有域名，主域名适合api长期不变或变化较少的业务，专有域名是解决具体的专有业务的
以百度举例：
(1)主域名:www.baidu.com
(2)产品服务类
百度文库：https://wenku.baidu.com/
百度知道：https://zhidao.baidu.com/
百度资讯：https://zhidao.baidu.com/
(3)市场活动类
百度公益：http://gongyi.baidu.com
百度logo：http://logo.baidu.com/
百度世界：https://baiduworld.baidu.com
7.跨域考虑
在明确域名的情况下，一定要考虑接口是否跨域，以及跨域应采用的技术手段等
8.api版本
对于接口的url，应加版本号http://api.demo.com/v{d}/，如 ，其中d表示版本号,如v1.0,v2.0
例子：获取产品号为2019,版本号为v1.0的版本号的产品信息
/api/v1.0/Pruducts/2019
9.适度过滤信息
当记录数比较多时(如 SELECT * FROM TBName)，应适当添加一些条件对数据进行过滤，如TOP,分页,分组，排序和WHERE条件等
下面是一些常见的参数。
?limit=100：返回100条数据
?offset=101：从第101条数据开始返回
?page=10：指第10页
per_page=100：每页100条数据
?sortby=name：排序字段
?order=desc：降序
？group=groupName:分组
?producy_type=1：筛选条件
10.返回数据格式
返回数据格式，一般包括三个字段：
(1)失败情况(状态码、错误码和错误描述)
{
“status”:0,//状态码 0-表示失败，1-表示成功
“error_code”:“2003”,//错误码，一般在设计时定义
“error_des”:“身份验证失败”//错误描述，一般在设计时定义
}(2)成功情况(标识id,数据对象,状态码)
{
“sid“:“sh20190111”,//token id
“users”:{
“id”:“al201901111341”,//用户id
“name”:“Alan_beijing”,//用户名
“addr”:“用户地址”
},
“status”:1//状态码 0-表示失败，1-表示成功
}11.安全性原则
接口暴露的考虑，接口并发量的考虑，接口防攻击的考虑，接口跨域的考虑等
12.可扩展性原则
在设计接口时，充分考虑接口的可扩展性。
13.定义api界限
任何api，从权限上，可归结为匿名api和非匿名api，前者不需要验证，后者需要验证
14.定义api返回码
在api设计时，要定好api返回码，如
1 --授权过期
404--未找到资源
500--内部服务器错误
600--账号被锁
二 反规范性建议
存在这样一种业务场景：某个接口需要返回多个api接口组合的结果 ，在类似的业务场景下，所设计的接口，具有一定的反规范性。
1.Request
data:[
{url:'api1',type:'get',data:{...}},
{url:'api2',type:'get',data:{...}},
]2.Responce
{
status:0,
msg:'',
data:[
{status:1,msg:'',data:[]},
{status:1,msg:'',data:{}}
]
}三 实例
假设存在这样一个一个业务：一个ERP系统，需要提供两个接口，一个是用户访问接口(需要验证)，另一个是用户注册接口(不需要验证)。
根据本篇文章一，二部分的建议，我们来设计满足该业务需求的接口
（一）定义统一参数
1.定义统一输入参数
2.定义统一输出参数
3.定义统一错误码
（二）定义接口授权类别
如下为定义接口授权类别
（三）用户接口
1.用户注册
2.Request
3.Responce
4.code示例
Request:
{
"mobile":13636595499,
"verify_code":"987654",
"pwd":"123456"
}
Responce:
(1)error
{
"status":0,
"error_code":1001，
"error_desc":"手机验证码已失效"
}
(2)succed
{
"sid":"sh201901141529",
"uid":1,
"status":1
}（四）用户登录
1.登录接口概述
2.Request
3.Responce
4.Code
Responce:
1.error
{
"status":0,
"error_code":1002,
"error_desc":"密码错误"
}
2.succeed
{
"sid":"sh201901141529",
"user":{
"id":1,
"username":"",
age:0,
gender:0
},
"status":1
}作者：Alan
本文来源：
https://www.cnblogs.com/wangjiming/p/10256546.html
———— e n d ————
微服务、高并发、JVM调优、面试专栏等20 大进阶架构师专题请关注公众号【Java进阶架构师】后在菜单栏查看。
看到这里，说明你喜欢本文
对于前端来说，HTML 都是最基础的内容。
今天，我们来了解一下 HTML 和网页有什么关系，以及与 DOM 有什么不同。通过本讲内容，你将掌握浏览器是怎么处理 HTML 内容的，以及在这个过程中我们可以进行怎样的处理来提升网页的性能，从而提升用户的体验。
不知你是否有过这样的体验：当打开某个浏览器的时候，发现一直在转圈，或者等了好长时间才打开页面……
此时的你，会选择关掉页面还是耐心等待呢？
这一现象，除了网络不稳定、网速过慢等原因，大多数都是由于页面设计不合理导致加载时间过长导致的。
我们都知道，页面是用 HTML/CSS/JavaScript 来编写的。
HTML由一系列的元素组成，通常称为HTML元素。HTML 元素通常被用来定义一个网页结构，基本上所有网页都是这样的 HTML 结构：
<html>
<head></head>
<body></body>
</html>其中：
HTML 中的元素特别多，其中还包括可用于 Web Components 的自定义元素。
前面我们提到页面 HTML 结构不合理可能会导致页面响应慢，这个过程很多时候体现在<script>和<style>元素的设计上，它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。
因此，如果想要提升页面的加载速度，就需要了解浏览器页面的加载过程是怎样的，从根本上来解决问题。
浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程（更详细的浏览器加载和渲染机制将在第 7 讲中介绍）。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。
由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起。
以网易云课堂官网为例，我们来看看网页加载流程。
（1）当我们打开官网的时候，浏览器会从服务器中获取到 HTML 内容。
（2）浏览器获取到 HTML 内容后，就开始从上到下解析 HTML 的元素。
（3）<head>元素内容会先被解析，此时浏览器还没开始渲染页面。
我们看到<head>元素里有用于描述页面元数据的<meta>元素，还有一些<link>元素涉及外部资源（如图片、CSS 样式等），此时浏览器会去获取这些外部资源。除此之外，我们还能看到<head>元素中还包含着不少的<script>元素，这些<script>元素通过src属性指向外部资源。
（4）当浏览器解析到这里时（步骤 3），会暂停解析并下载 JavaScript 脚本。
（5）当 JavaScript 脚本下载完成后，浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后，控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML 页面。
（6）此时<body>元素内容开始被解析，浏览器开始渲染页面。
在这个过程中，我们看到<head>中放置的<script>元素会阻塞页面的渲染过程：把 JavaScript 放在<head>里，意味着必须把所有 JavaScript 代码都下载、解析和解释完成后，才能开始渲染页面。
到这里，我们就明白了：如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，用户体验会变得很糟糕。
因此，对于对性能要求较高、需要快速将内容呈现给用户的网页，常常会将 JavaScript 脚本放在<body>的最后面。这样可以避免资源阻塞，页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记<script>标签，来控制 JavaScript 的加载顺序。
百度首页
对于百度这样的搜索引擎来说，必须要在最短的时间内提供到可用的服务给用户，其中就包括搜索框的显示及可交互，除此之外的内容优先级会相对较低。
浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树，它们结合后才生成最终的渲染树并渲染。因此，我们还常常将 CSS 放在<head>里，可用来避免浏览器渲染的重复计算。
我们知道<p>是 HTML 元素，但又常常将<p>这样一个元素称为 DOM 节点，那么 HTML 和 DOM 到底有什么不一样呢？
根据 MDN 官方描述：文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。
也就是说，DOM 是用来操作和描述 HTML 文档的接口。如果说浏览器用 HTML 来描述网页的结构并渲染，那么使用 DOM 则可以获取网页的结构并进行操作。一般来说，我们使用 JavaScript 来操作 DOM 接口，从而实现页面的动态变化，以及用户的交互操作。
在开发过程中，常常用对象的方式来描述某一类事物，用特定的结构集合来描述某些事物的集合。DOM 也一样，它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。
我们常见的 HTML 元素，在浏览器中会被解析成节点。比如下面这样的 HTML 内容：
<html>
<head>
<title>标题</title>
</head>
<body>
<a href='xx.com'>我的超链接</a>
<h1>页面第一标题</h1>
</body>
</html>打开控制台 Elements 面板，可以看到这样的 HTML 结构，如下图所示：
在浏览器中，上面的 HTML 会被解析成这样的 DOM 树，如下图所示：
我们都知道，对于树状结构来说，常常使用parent/child/sibling等方式来描述各个节点之间的关系，对于 DOM 树也不例外。
举个例子，我们常常会对页面功能进行抽象，并封装成组件。但不管怎么进行整理，页面最终依然是基于 DOM 的树状结构，因此组件也是呈树状结构，组件间的关系也同样可以使用parent/child/sibling这样的方式来描述。同时，现在大多数应用程序同样以root为根节点展开，我们进行状态管理、数据管理也常常会呈现出树状结构。
我们知道，浏览器中各个元素从页面中接收事件的顺序包括事件捕获阶段、目标阶段、事件冒泡阶段。其中，基于事件冒泡机制，我们可以实现将子元素的事件委托给父级元素来进行处理，这便是事件委托。
如果我们在每个元素上都进行监听的话，则需要绑定三个事件;(假设页面上有a,b,c三个兄弟节点)
function clickEventFunction(e) {
console.log(e.target === this); // logs `true`
// 这里可以用 this 获取当前元素
}
// 元素a,b,c绑定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);使用事件委托，可以通过将事件添加到它们的父节点，而将事件委托给父节点来触发处理函数：
function clickEventFunction(event) {
console.log(e.target === this); // logs `false`
// 获取被点击的元素
const eventTarget = event.target;
// 检查源元素`event.target`是否符合预期
// 此处控制广告面板的展示内容
}
// 元素1绑定
element1.addEventListener("click", clickEventFunction, false);这样能解决什么问题呢？
常见的使用方式主要是上述这种列表结构，每个选项都可以进行编辑、删除、添加标签等功能，而把事件委托给父元素，不管我们新增、删除、更新选项，都不需要手动去绑定和移除事件。
如果在列表数量内容较大的时候，对成千上万节点进行事件监听，也是不小的性能消耗。使用事件委托的方式，我们可以大量减少浏览器对元素的监听，也是在前端性能优化中比较简单和基础的一个做法。
注意:
我们了解了 HTML 的作用，以及它是如何影响浏览器中页面的加载过程的，同时还介绍了使用 DOM 接口来控制 HTML 的展示和功能逻辑。我们了解了DOM解析事件委托等相关概念。
*请认真填写需求信息，我们会在24小时内与您取得联系。
