第四节课——【图像识别项目及使用说明】(二)|学习笔记

本文涉及的产品
视觉智能开放平台,视频资源包5000点
视觉智能开放平台,图像资源包5000点
视觉智能开放平台,分割抠图1万点
简介: 快速学习第四节课——【图像识别项目及使用说明】

开发者学堂课程【达摩院视觉 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,

}

});

相关文章
|
2月前
|
机器学习/深度学习 算法 TensorFlow
动物识别系统Python+卷积神经网络算法+TensorFlow+人工智能+图像识别+计算机毕业设计项目
动物识别系统。本项目以Python作为主要编程语言,并基于TensorFlow搭建ResNet50卷积神经网络算法模型,通过收集4种常见的动物图像数据集(猫、狗、鸡、马)然后进行模型训练,得到一个识别精度较高的模型文件,然后保存为本地格式的H5格式文件。再基于Django开发Web网页端操作界面,实现用户上传一张动物图片,识别其名称。
83 1
动物识别系统Python+卷积神经网络算法+TensorFlow+人工智能+图像识别+计算机毕业设计项目
|
2月前
|
机器学习/深度学习 人工智能 算法
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面
植物病害识别系统。本系统使用Python作为主要编程语言,通过收集水稻常见的四种叶片病害图片('细菌性叶枯病', '稻瘟病', '褐斑病', '稻瘟条纹病毒病')作为后面模型训练用到的数据集。然后使用TensorFlow搭建卷积神经网络算法模型,并进行多轮迭代训练,最后得到一个识别精度较高的算法模型,然后将其保存为h5格式的本地模型文件。再使用Django搭建Web网页平台操作界面,实现用户上传一张测试图片识别其名称。
107 22
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面
|
XML 机器学习/深度学习 编解码
基于darknet开发了一系列的快速启动脚本,旨在让图像识别新手或者开发人员能够快速的启动一个目标检测(定位)的项目
基于darknet开发了一系列的快速启动脚本,旨在让图像识别新手或者开发人员能够快速的启动一个目标检测(定位)的项目
333 0
基于darknet开发了一系列的快速启动脚本,旨在让图像识别新手或者开发人员能够快速的启动一个目标检测(定位)的项目
|
存储 人工智能 JSON
图像识别项目讲解及使用说明 | 学习笔记
快速学习图像识别项目讲解及使用说明
图像识别项目讲解及使用说明 | 学习笔记
|
IDE 测试技术 Shell
基于图像识别框架Airtest的Windows项目自动化测试实践
1、Airtest框架介绍:Airtest适用项目、Airtest特点、Airtest的优势;2、Airtest框架组成、原理;Airtest环境搭建及IDE的简单使用;3、Airtest开展Windows应用自动化测试实践:连接Windows应用Windows、常用API编写、测试代码设计、测试用例运行效果、查看测试报告
基于图像识别框架Airtest的Windows项目自动化测试实践
|
机器学习/深度学习 XML 编解码
|
人工智能 数据处理
阿里云高校计划视觉AI五天训练营教程 Day 5 - 创意日-你的图像识别项目
图像识别技术是基于阿里云深度学习技术,可实现精准识别图像中的视觉内容,包括上千种物体标签、数十种常见场景等,为您提供图像打标、场景分类、颜色识别、风格识别以及元素识别等能力。图像识别技术可广泛应用于数字营销、新零售、广告设计等行业场景。
649 0
|
3天前
|
机器学习/深度学习 算法 计算机视觉
深度学习在图像识别中的应用与挑战
【10月更文挑战第22天】 本文深入探讨了深度学习在图像识别领域的应用,分析了其技术原理、优势以及面临的挑战。通过实例展示了深度学习如何推动图像识别技术的发展,并对未来趋势进行了展望。
15 5