阿里云高校计划视觉AI五天训练营教程 Day 3 - 电子相册搭建(人脸、表情识别)

127.0.0.1.8080/index.html

  1. 阿里云高校计划视觉AI五天训练营教程 Day 3 - 电子相册搭建(人脸、表情识别)

两个算法,图片识别,表情识别
阿里云高校计划视觉AI五天训练营教程 Day 3 - 电子相册搭建(人脸、表情识别)

项目实现的代码结构
阿里云高校计划视觉AI五天训练营教程 Day 3 - 电子相册搭建(人脸、表情识别)

Application:启动的入口函数,
common:一般就是存放公共的类或者常量,或者枚举值
config:装载或者是数据库的配置,我们都会放在config 下面, webAPPconfig是对我们的静态资源,比如说css、js 还有一些图片,做了一个映射,比如说static,然后我们把它映射到classpath:/static 目录下。
Controller:我们接收外部的请求,比如参数校验,之后通过接口调用或得到的数据返回给前端
阿里云高校计划视觉AI五天训练营教程 Day 3 - 电子相册搭建(人脸、表情识别)

Service: 把不同的请求 , 不同的服务把它抽象成一个service,本项目有两个service,也可以认为是两个模块。
Utils:存放公共的类或者工具函数。
Controller获取图片、获取分类,通过分类以及标签获取图片,通过分类获取图片列表以及上传文件
ResourceService资源的管理器

VisionService,识别场景,表情。我们上传
图片流,我们把整个图片流传到接口里面,然后从服务端去识别这个场景
阿里云高校计划视觉AI五天训练营教程 Day 3 - 电子相册搭建(人脸、表情识别)

前端实现过程:
上传图片:一个是拖拽,一个点击上传。
通过一个组件来实现。action是在上传图片要去访问后端的upload 接口,之后有一个事件,是在成功之后应该做哪些事情,也就是对应的要执行的函数。 比如UploadSuccess 指上传成功之后,我们要刷新页面,添加下面的标签分类等

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

mounted 是会定义一些事件,比如图片变化,怎么调用,

methods 定义的就是一些方法,比如点击一个 next photo,我们就会去访问下一张图片。这些变化是对应的

自定义标签的组件
阿里云高校计划视觉AI五天训练营教程 Day 3 - 电子相册搭建(人脸、表情识别)

V-tag 对应的是标签分类,我们把它分成不同的分类,下面有不同的标签是组件来实现的
Data 是指在初始化的时候,需要进行哪些渲染。这里面自定义了不同的颜色。cateMap,将返回的英文转化成汉字去显示出来。
方法实现;去取一个不同的ID,然后给它选成不同的颜色,通过取一个随机的下标,然后
去把它选成不同的颜色。
Tag 是一个两层map 结构。就是第一层这里面某比每层结构,表情,下面有几种表情,场景下面有几种场景,这是一个两层的map 结构,以在渲染的时候,会对两层的map 进行渲染,第一层完成之后,再渲染第二
层数据。

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

on :去接收 emit 传过来的事件

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

反思:把本地存储逻辑换成数据库存储,扩充更多的识别算法,图片美妆,美颜等等

上一篇:***阿里云ECS实战配置虚拟主机 + Apache 配置虚拟主机三种方式


下一篇:AI五天训练营教程 Day 1-视觉生产技术的探索和应用