Day 03

作者：第五组 邓佳阳

水平很菜，内容基本全部来自于官方书籍

打卡截图

学习笔记

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

项目简介

（不废话，先看东西...）

本次算法进行了表情识别和场景识别
第一部分多张图片拖拽上传，第二部分实现一个轮播图，可以看到对这个图片分类利用了

两类的视觉的算法，一个是表情识别，然后另外一个是场景识别。

项目实现

喜闻乐见的Java项目

可以获取图片、获取分类，通过分类以及标签获取图片，通过分类获取图片列表

以及上传文件。
在上传文件函数需要完成一个上传，把上传的文件保存到文件当中，需要调用两
个识别的函数，表情识别，场景识别。
通过 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+Elementui

Ant Design设计风格大胜利

前端页是通过 vue，然后加上 element-ui 这个两个组件来实现我们的前

端的逻辑。我们大概可以看一下整个的结构，它可以分成三部分。

vue-gallery, 实现自定义的标签名，之后定义了一个属性：photos。photos 从

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

总结

做完昨天的训练营项目还在思考，按照阿里的技术栈明天会不会上模板，嘿！果然，Vue这个老伙计出现了。Vue+ElementUI+SSM整体前后端分离果然还是生产力，牛！