【阿里云高校计划】视觉Al训练营五天训练第三天

这是一个没做完的笔记。

Demo的github项目地址:link
电子教材:link
https://spring.io/guides/gs/rest-service/

代码结构

在这里插入图片描述

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

Controller

在这里插入图片描述
获取图片、获取分类,通过分类以及标签获取图片,通过分类获取图片列表以及上传文件。

在上传文件函数需要完成一个上传,把上传的文件保存到文件当中,需要调用两个识别的函数,表情识别,场景识别。

  • 通过 multipartFile 获取的是一个文件的输入流,它只能读取一次,如果要重复读的话就会是空。 所以我们把它转化成一个 ByteArrayInputStream 流,然后我们在每次用完之后,我们可以把它进行一个reset(),之后可以把流保存在我们的内存当中,一般不推荐使用这种方式,因为如果图片的比较大的话,可能会占用太多的内存空间。
  • 此外由于我们上传的图片可能会有重名,为了避免重名,我们对这个图片的 input 的流,我们给它求一个 md5 值作为文件名。

service

ResourceService

在这里插入图片描述
ResourceService 是一个资源的管理器,先来看两个函数,

  • Postconstruct注解,我们会先去执行这个函数,取出保存在本地的数组并且加载到内存中去。
  • PreDestroy 注解,在销毁对象的时候,把这些数据保存到本地文件,也就是说保存在这个 data 上面,有一个 data.json 数据,来看一下整个的数据存储的结构。json.cn
    在这里插入图片描述
  • allImg 将所有上传的图片,放在数组里面。
  • cateMap 之后又分成两个场景 expression、scene,可以看到不同的分类,表情识别,场景识别,里面存放所有识别出来的表情,比如说惊讶、生气、开心,场景识别,存放运动、户外,这样存储是为了我们能够快速的进行查询,比如说可以通过分类,快速的找到某一个分类下面的所有的识别,这个是 map 的作用。
  • expressionMap 是表示某类标签下面都包括哪些图片,senceMap 也是同样的意思。
  • imgLabels 是一个反向的查找的过程,即通过一个图片,识别出来了哪些场景,比如说我们可以看到它可能这张图片它可能直接识别出来了,它是属于人物场景,属于运动场景,然后属于生气的表情,属于演出等场景。

在这里插入图片描述
如果要删除图片,可以试着补全上图的代码。

VisionService

在这里插入图片描述
VisionService,识别场景,表情。我们上传图片流,我们把整个图片流传到接口里面,然后从服务端去识别这个场景。

我们是有两种方式,早期的版本我们是通过 url 这种方式去上传的,但是我们必须是利用这种 oss 的对象才能够识别,新的版本的 SDK 我们就是开始支持通过本地上传图片来进行识别。
在这里插入图片描述

前端

前端可以分为三部分
在这里插入图片描述

一、实现拖拽上传、点选

在这里插入图片描述

拖拽、点击上传是通过一个组件来实现的。

  • 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,将返回的英文转化成汉字去显示出来。

遇到的问题

关于127.0.0.1:8080/ index.html:link
如果上传图片失败,可以刷新网页,重启项目,我没学过IntelliJ IDEA,看文档头疼,就去b站找了视频教程link

这个idea中,自动保存,右键菜单里有run,

还是上传图片失败,只运行源码的话,上传图片没反应, F12看一下控制台的 Console,实际上是有报错的,在IDEA里面看不到;
在这里插入图片描述
需要安装web server,更改网络字体,安装tomcat就行了。
等有时间了再做吧。

可以尝试把本地存储改为数据库存储
可以扩充更多的算法,课程里实现了表情、场景,可以去文档里学习更多的识别 link

2

阿里云开发者“藏经阁”
海量免费电子书扫码下载
在这里插入图片描述

欢迎扫码加入阿里云高校计划——为了无法计算的价值[-]
在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值