本章内容出自《5天入门视觉AI》电子书，点击下载完整版。

电子相册搭建（人脸、表情识别）

一、项目简介

我们首先来看一下项目运行出来的效果：访问程序运营端口：127.0.0.1.8080/index.html

所以我们看到是三块空白，然后这边的话是我们可以通过点击上传，也可以通过拖拽去上传图片。下面我们来看一下效果，

本次算法进行了表情识别和场景识别：

第一部分我们多张图片拖拽上传，第二部分实现一个轮播图，这时候可以看到有吃惊的表情，生气的表情以及露营户外或者是人物，可以看到对这个图片分类利用了两类的视觉的算法，一个是表情识别，然后另外一个是场景识别。然后我们可以去查看图片。

二、项目实现

然后现在来看一下代码，先讲解一下它的整个结构：

• Application：启动的入口函数
• common：一般就是存放公共的类或者常量，或者枚举值
• config：装载或者是数据库的配置，我们都会放在config下面， webAPPconfig是对我们的静态资源，比如说css、js还有一些图片，做了一个映射，比如说static，然后我们把它映射到classpath:/static目录下。
• Controller：我们接收外部的请求，比如参数校验，之后通过接口调用或得到的数据返回给前端
• Service:把不同的请求,不同的服务把它抽象成一个service，本项目有两个service，也可以认为是两个模块。
• Utils:存放公共的类或者工具函数。

接下来看一下具体的实现：
先从Controller来，看一下实现了哪些功能。

可以获取图片、获取分类，通过分类以及标签获取图片，通过分类获取图片列表以及上传文件。
在上传文件函数需要完成一个上传，把上传的文件保存到文件当中，需要调用两个识别的函数，表情识别，场景识别。
另外需要注意一下，通过multipartFile获取的是一个文件的输入流，输入流的话它只能读取一次，然后如果要重复读的话就会是空。 所以我们把它转化成一个ByteArrayInputStream流，然后我们在每次用完之后，我们可以把它进行一个reset()，之后可以把流保存在我们的内存当中，一般不推荐使用这种方式，因为如果图片的比较大的话，可能会占用太多的内存空间。此外由于我们上传的图片可能会有重名，为了避免重名，我们对这个图片的input的流，我们给它求一个md5值作为文件名。

接着来看一下ResourceService:

ResourceService是一个资源的管理器，先来看两个函数，Postconstruct注解，我们会先去执行这个函数，取出保存在本地的数组并且加载到内存中去。 PreDestroy注解，在销毁对象的时候，把这些数据保存到本地文件，也就是说保存在这个data上面，有一个 data.json数据，来看一下整个的数据存储的结构。

allImg将所有上传的图片，放在数组里面。
cateMap之后又分成两个场景expression、scene，可以看到不同的分类，表情识别，场景识别，里面存放所有识别出来的表情，比如说惊讶、生气、开心，场景识别，存放运动、户外，这样存储是为了我们能够快速的进行查询，比如说可以通过分类，快速的找到某一个分类下面的所有的识别，这个是 map的作用。
expressionMap是表示某类标签下面都包括哪些图片，senceMap也是同样的意思。
imgLabels是一个反向的查找的过程，即通过一个图片，识别出来了哪些场景，比如说我们可以看到它可能这张图片它可能直接识别出来了，它是属于人物场景，属于运动场景，然后属于生气的表情，属于演出等场景。

接着来看一下VisionService

VisionService，识别场景，表情。我们上传图片流，我们把整个图片流传到接口里面，然后从服务端去识别这个场景。
我们是有两种方式，早期的版本我们是通过url这种方式去上传的，但是有一个限制就是说我们必须是利用这种oss的对象才能够识别，新的版本的SDK我们就是开始支持通过本地上传图片来进行识别。

以上这个是后端的这些功能。下面来看一下前端页面的实现：

我们前端页面是通过vue，然后加上element-ui这个两个组件来实现我们的前端的逻辑。我们大概可以看一下整个的结构，它可以分成三部分。

一部分就是我们通过一个上传的组建来去实现我们刚才拖拽上传，以及点选。

找到一个图片，我们可以看到两种方式，一种拖拽，一种是点击上传，这是通过一个组件来实现的。我们大概来介绍组件的实现，这是有不同的功能区分的。action是在上传图片要去访问后端的upload接口，之后有一个事件，是在成功之后应该做哪些事情，也就是对应的要执行的函数。 比如UploadSuccess指上传成功之后，我们要刷新页面，添加下面的标签分类等。

第二部分就是实现轮播图的部分：

然后以及下面列表，通过是vue的一个组件。

vue-gallery,实现自定义的标签名，之后定义了一个属性：photos。photos从后台去取回数据，之后把它渲染到前端的html页面当中。由于我们这是一个组件，它会有对应的自己一个模板，这个就是我们整个的模板部分，之后对它进行背景图片的处理，然后以及一些事件的定义。
vue，它的整个是一个事件的数据流，通过数据的不同的变化，然后我们就可以去触发它的渲染，比如上传一张图片，它是可以对应不同的组件进行交互，利用不同的标签，事件来驱动数据的变化。

mounted是会定义一些事件，比如图片变化，怎么调用，以及我们会监听按下不同的键，应该做哪些操作？然后是前张图片还是后一张图片等。
methods定义的就是一些方法，比如点击一个 next photo，我们就会去访问下一张图片。这些变化是对应的。
vue有自己的模板语言。

el是一个ID的绑定，比如#app,在这个标签上层父级，定义了一个ID叫app，这时候可以把组件放在父级div下面，然后在这个里面去根据模板进行渲染。

第三部分是自定义标签的组件。

V-tag对应的是这块，我们把它分成不同的分类，下面有不同的标签是组件来实现的。

Data是指在初始化的时候，需要进行哪些渲染。这里面自定义了不同的颜色。 cateMap，将返回的英文转化成汉字去显示出来。
它实现了几个方法：

去取一个不同的ID，然后给它选成不同的颜色，通过取一个随机的下标，然后去把它选成不同的颜色。
Tag是一个两层map结构。就是第一层这里面某比每层结构，表情，下面有几种表情，场景下面有几种场景，这是一个两层的map结构。

所以在渲染的时候，会对两层的map进行渲染，第一层完成之后，再渲染第二层数据。
实现不同的触发，上传文件，成功之后要进行不同的事件操作：

因为要实现不同的组件之间进行通信，自定义了一个虚拟的Event的vue的实例，然后通过Event将所有的不同的vue实例串联起来。比如uploadSuccess去发送一个事件。通过upload vue实例去给其他的实例去发事件，在上传成功之后，加载到轮播图里面。

on就对应去接收 emit传过来的事件。如果我们得到了uploadSuccess事件,那么就会通过从后端去获取数据，对这个页面进行一个刷新操作。

refresh也是同样的道理，上传成功之后，要对整个的tag进行一个刷新，把新识别出来的不同的场景，不同标签，进行一个刷新。

前端的实现逻辑就是这样的。