开发者学堂课程【达摩院视觉 AI 精品课:第四节课——【图像识别项目及使用说明】】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/912/detail/14421
第四节课——【图像识别项目及使用说明】(二)
五、VisionService
VisionService 是为了不停的识别场景、表情,通过上传的图片流传到接口里,然后通过服务端去识别场景。(部分代码)public List<String> recognizeScene(InputStream inputStream)throws Exception {
RecognizeSceneAdvanceRequest request = new RecognizeSceneAdvanceRequest();
request.imageURLObject =inputtream;
List<String labels = new ArrayLists<>();
try {
com.aliyun.imagerecog.Client client = getImageRecogClient(imageRecogEndpoint);
RecognizeSceneResponse resp = client.recognizeSceneAdvance(request,new RuntimeObject());
for(RecognizeSceneResponse.RecognizeSceneResponseDataTags tag: resp.data.tags) {
labels.add(tag.value);
}
} catch (ClientException e) {
log.error("ErrCode:{}, ErnNsg:{},RequestId:{}", e.getErrCode(),e.getErrMsg(),e.getRequestId());
}
return labels;
}
六、前端页面
接下来看一下前端页面怎么做的:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>智能电子相册</title>
<meta name="viewport" content="width=device-width. initial-scale=1">
<link rel='stylesheet' href='css/bootstrap.min.css'>
<!--图标库-->
<link rel=’stylesheet' href=' https: //cdnjs.cloudflare.com/
ajax/Libs/font-awesome/5.8.2/css/all.min.css’>
<!--核心样式-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https ://unpkg.com/element-ui/lb/theme-chalk/index.css">
<script src="https: //unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg. com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="appEvent">
</div>
<div class="heading" >
<h1>智能电子相册</h1>
</div>
<div class="container">
<div class="upload" id="upload">
<el-upload>
class="upload-demo"
dragaction=
http://127.0.0.1:8080/album/v1/upload
:on-success="uploadSuccess"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload_text">
将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload_tip" slot="tip">
只能上传 jpg/png文件,且不超过500kb
</div>
</el-upload>
</div>
</div>
<div class="container" id="app">
<vue-gallery :photos="photos"></vue-gallery>
</div>
<div class="container" id="my-custom-tags">
<y-tag : tags="tags"></v-tag>
</div>
<script src="js/script.js"></script>
</body>
</html>
vue 实现的组件放在了 script.js里面,’vue-gallery’就是实现自定义的标签名,可以在 index.html 里看到;script.js里定义了一个属性叫’photos’,就是从后台取到的数据,然后渲染到前端的 html 页面当中。
vue 整个是一个事件的数据流,通过数据普通的变化可以去触发渲染。
七、mounted
mounted 定义了一些事件,如图片的变化应该怎么去调用,以及监听按下不同的键应该做什么操作,是前一张图片还是后一张图片:
mounted() {
this.changePhoto( index: 0)
document.addEventListener( type:"keydown",listener: (event :KeyboardEvent ) =>{
if (event.which == 37)
this.priviousPhoto()
if (event.which == 39)
this.nextPhoto()
})
},
八、控制器部分
下面这一部分可以认为是一个 control,也就是控制器部分。data里面的数据定义的是在模板中要用到的数据;e 是id 的绑定,如’#app’在标签中的上从负极会定义 id 为 app,这时候可以把组件放在负的低位下面,然后在这里面根据模板渲染。
let albumIns = new Vue({
el: ‘#app',
data() {
return {
photos:[ ]
}
},
created() {
this.getData()
},
mounted() {
customEvent.$on( e: ' uploadSuccess', n: success => {
this.getData();
//箭头函数内部不会产生新的this,这边如果不用=>, this指代 Event
customEvent.$on( e: “getPhotosByCateAndLabel",n: (cate,tag)=> i
hotosByCateAndLabel(cate,tag)
然后如果刷新页面就会请求接口,这个就是把所有的图片都获取过来,放到 photos属性里面,相当于是把属性放在 photos 变量上,可以使用 photos 变量,做了 vue 模板语言的 for 循环,当它发现了属性有值了,它就会渲染模板,这个就是通过数据去触发渲染的流程。
九、识别实现的方法
识别实现的方法:
methods: {
getBgcNo: function() {
return Math.ceil( x: Math. random( ) * 10) – 1
},
getPhotosByTag(cate,tag) {
customEvent.$emit( e: 'getPhotosByCateAndLabel', cate,tag);
},
getCate(cate) {
customEvent.$emit( e: 'getPhotosByCate', cate);
}
}
uploadSuccess:
let uplandIns =new Vue({
el: '#upload ' ,
methods: {
uploadSuccess: function(esponse, file, fileList) {
customEvent.$emit( e: ' uploadSuccess', true);
customEvent.$emit( e: 'refreshTag ', true)
}
}
});
let vm=new Vue({
el: ‘#appEvent',
components: {
upload': uplandIns,
album' :albumIns,
"custom-tags": tagIns,
}
});