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

简介: 阿里云高校计划视觉AI五天训练营教程

功能:项目分为前端和后端两个部分,调用阿里云人脸识别、表情识别的功能,对电子相册里面的照片进行自动标签和分类。

API地址
阿里达摩院视觉识别平台(https://vision.aliyun.com/)

一、后端

代码是Java的srping-boot项目
项目代码下载地址:https://github.com/aliyun/alibabacloud-viapi-demo/tree/master

  • Application:启动的入口函数,
  • common:一般就是存放公共的类或者常量,或者枚举值,
  • config:装载或者是数据库的配置。
  • Controller:用于接收外部的请求,通过接口调用或得到的数据返回给前端
  • Service: 把不同的请求 , 不同的服务抽象成一个 service。
  • Utils: 用于存放公共的类或者工具函数。

1.controller

获取图片、分类等,上传文件。

2.ResourceService

存储数据,资源管理

3.VisionService

上传图片,识别图片中的表情和场景

VisionService,识别场景,表情。我们上传图片流,我们把整个图片流传到接口里面,然后从服务端去识别这个场景。新的版本的 SDK支持通过本地上传图片来进行识别

4.在控制台开通相应功能

图片文件需要上传到对象存储oss中
新的版本的 SDK支持通过本地上传图片来进行识别

5.ResourceService 是一个资源的管理器

6.allImg 将所有上传的图片,放在数组里面。

7.json文件

cateMap 之后又分成两个场景 expression、scene,可以看到不同的分类,表情识别,场景识别,里面存放所有识别出来的表情,比如说惊讶、生气、开心,场景识别,存放运动、户外,这样存储是为了我们能够快速的进行查询,比如说可以通过分类,快速的找到某一个分类下面的所有的识别。

expressionMap 是表示某类标签下面都包括哪些图片,senceMap 也是同样的意思。

imgLabels 是一个反向的查找的过程,即通过一个图片,识别出来了哪些场景,比如说我们可以看到它可能这张图片它可能直接识别出来了,它是属于人物场景,属于运动场景,然后属于生气的表情,属于演出等场景。

二、前端

1.利用上传的组件实现图片上传

2.实现轮播图、列表

3.实现自定义的标签

前端采用视频所述方法

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

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

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

mounted定义一些事件,比如图片变化,怎么调用,以及监听按下不同的键,应该做哪些操作,然后是前张图片还是后一张图片等。
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 进行一个刷新,把新识别出来的不同的场景,不同标签,进行一个刷新。

相关文章
|
Java C++ 算法
带你读《JVM G1源码分析和调优》之二:G1的基本概念
本书尝试从G1的原理出发,系统地介绍新生代回收、混合回收、Full GC、并发标记、Refine线程等内容;同时依托于jdk8u的源代码介绍Hotspot如何实现G1,通过对源代码的分析来了解G1提供了哪些参数、这些参数的具体意义;最后本书还设计了一些示例代码,给出了G1在运行这些示例代码时的日志,通过日志分析来尝试调整参数并达到性能优化,还分析了参数调整可能带来的负面影响。
|
8月前
|
人工智能 算法 前端开发
AI 应用软件的外包开发
2026年国内AI英语类APP外包开发市场成熟但陷阱多:价格分三档(5万起MVP、20–50万专业级、80万+专家级),核心看TTFT<400ms、Token成本优化、数据安全及备案支持。避坑关键:验Agent编排能力、音视频工程经验、Prompt资产归属,慎防黑盒交付与算力转嫁。(239字)
|
机器学习/深度学习 自然语言处理 安全
ACL 2025 | GALLa:用图结构增强代码大模型,让代码理解更精准!
通过级联多模态架构将代码结构图对齐到大模型表征中
1131 69
|
8月前
|
存储 安全 编译器
C语言指针深度全解析:从硬件本质到安全编码的终极指南
指针是C语言的灵魂,本质是CPU内存寻址的原生抽象。本文从硬件底层出发,系统解析指针的类型系统、语法细节、算术规则、多级与函数指针,并深入剖析野指针、空解引用、非法强转等致命陷阱,提供9条安全编码实践,助你彻底掌握指针核心逻辑。(239字)
1021 7
|
10月前
|
存储 缓存 弹性计算
阿里云新老用户新购/续费/升级云服务器配置价格明细
在阿里云经济型e实例的规格中,4核16G(ecs.e-c1m4.xlarge)是兼顾“内存容量与成本”的实用配置——4核CPU能应对多任务并行处理,16G大内存可支撑中小型数据库、缓存服务等内存敏感场景,既不像2核8G那样局限于轻量应用,也不似8核32G那般成本偏高,因此成为个人开发者、小微企业部署多应用或轻量数据服务的优选。下面从价格构成、性能表现、适用场景三方面,用通俗语言拆解这款实例,帮助判断是否契合需求。
346 0
|
网络安全
IP地址SSL证书怎么申请?
本文介绍如何申请浏览器及系统可信的SSL证书,而非自签名证书。申请IP地址SSL证书需满足:1. 使用公网IP;2. 确保外网可访问;3. 认证时必须使用80或443端口。流程包括提交申请、建立临时站点验证URL内容,认证通过后即可获取证书文件,适用于各种服务器环境。若申请多个IP地址,建议一次性提交以避免串站问题。
817 6
|
架构师 Devops 测试技术
DevOps 进阶实践课,连续 4 期,看看有你想听的吗?
探索DevOps进阶实践?加入阿里云专家的直播课!了解企业研发规范新思路、云效YAML流水线详解、微服务灰度发布最佳实践和规模化项目管理。资深专家分享实战经验,解答疑问,带你提升DevOps效率。
1868 3
|
SQL Java 数据库连接
idea中配置mybatis 映射文件模版及 mybatis plus 自定义sql
idea中配置mybatis 映射文件模版及 mybatis plus 自定义sql
814 3
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
1130 1
|
SQL 缓存 网络协议
网络信息安全实验 — 网络攻击技术实验(Kali系统,John、lc7、arpspoof、ettercap、SQL注入...)
本人深感网络安全实验有点麻烦,花了一个晚上弄了部分,特此将笔记贡献造福后人,个人能力有限,还会继续更新。。。 汇报题目:**15分钟教你用 Python 写一个 arpspoof**(课件准备ing,如果弄完后续补上) 第一次网络安全实验(密码学)也是我做的,这里先放个自制工具:[Java实现密码学工具,集成了对称加密算法DES,AES,IDEA,公开加密算法RSA,ECC,散列算法MD5,SHA1,CRC32,以及RSA,DSA,ECDSA数字签名验证示例。](https://blog.csdn.net/weixin_43734095/article/details/105303562)
2382 0
网络信息安全实验 — 网络攻击技术实验(Kali系统,John、lc7、arpspoof、ettercap、SQL注入...)