电子相册搭建(人脸、表情识别)-阿里云开发者社区

开发者社区> 阿里云高校学研支持计划> 正文

电子相册搭建(人脸、表情识别)

简介: 本节介绍了电子相册搭建(人脸、表情识别)的前后端实现逻辑,以及所包含的AI算法。

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

电子相册搭建(人脸、表情识别)

一、项目简介

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

image.png

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

image.png

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

image.png

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

二、项目实现

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

image.png

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

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

image.png

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

接着来看一下ResourceService:

image.png

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

image.png

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

接着来看一下VisionService

image.png

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

image.png

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

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

image.png

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

image.png

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

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

image.png

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

image.png

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

image.png

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

image.png
image.png
image.png

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

版权声明:本文中所有内容均属于阿里云开发者社区所有,任何媒体、网站或个人未经阿里云开发者社区协议授权不得转载、链接、转贴或以其他方式复制发布/发表。申请授权请邮件developerteam@list.alibaba-inc.com,已获得阿里云开发者社区协议授权的媒体、网站,在转载使用时必须注明"稿件来源:阿里云开发者社区,原文作者姓名",违者本社区将依法追究责任。 如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
阿里云高校学研支持计划
使用钉钉扫一扫加入圈子
+ 订阅

阿里云高校学研支持计划旨在为高等院校师生提供包括算力、培训、平台 等全方位支持,助推高校计算机学科建设、培养数字经济时代的前沿技术人才、为多学科跨 领域科研探索提速增效。目前,我们已经开启了学生成长计划、教学支持计划和科研加速 三大板块。精彩内容,先睹为快。

官方博客
申请加入高校学研支持计划
友情链接