基于HarmonyOS的AI图像识别应用开发(ETS)

系统 OpenHarmony
本案例是通过网络请求连接到百度云,调用百度云AI图像识别的API,再将结果返回至应用显示。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

前言

原本打算在九联开发板上搭配摄像头开发,去实现拍照并对图片进行AI识别的应用开发,但是遇到了点问题。

不过基于HarmonyOS的AI图像识别案例可以正常运作,于是作此文章作为小分享O(∩_∩)O。

概述

本案例是通过网络请求连接到百度云,调用百度云AI图像识别的API,再将结果返回至应用显示。​​百度云文档​​。

举例效果图:

正文

一、创建项目

项目选择HarmonyOS的Empty Ability模板,API选择8,语言选择ets。

二、添加权限及导入模块

1、在config.json文件中添加权限。

"reqPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]

2、在index.ets文件中导入模块,第一个是资源管理模块,第二个是网络模块。

import resourceManager from '@ohos.resourceManager';
import http from '@ohos.net.http';

三、创建网络请求并根据百度云API传参

【木棉花】:基于HarmonyOS的AI图像识别应用开发(ETS)-开源基础软件社区

该API调用前需要获取access_token,具体方法见其​​文档​​(注意的是创建应用后要去开启图像识别的服务)。

【木棉花】:基于HarmonyOS的AI图像识别应用开发(ETS)-开源基础软件社区

定义变量

@State access_token: string = 'Hello World'
@State Base64Str: string = 'Hello World'
@State result_description: string = 'description'
@State result_keyword: string = 'keyword'
@State result_root: string = 'root'
@State result_image: string = 'image'

并上传要识别的图片到项目中,此案例中使用的是一张莲藕的图片。

编写函数获取access_token

GetAccessToken() {
let httpRequest = http.createHttp();
httpRequest.request(
//自行替换AK和SK
"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】",
{
method: http.RequestMethod.POST,
connectTimeout: 60000,
readTimeout: 60000,
}, (err, data) => {
if (!err) {
let obj = JSON.parse(data.result.toString());
this.access_token=obj.access_token
console.info('Result1:' + data.result);
console.info('Result1_token:' + this.access_token);
} else {
console.info('Result1_error:' + JSON.stringify(err));
httpRequest.destroy();
}
})
}

编写函数编码图片并去掉编码头

resourceManager.getResourceManager 此API只适用于FA模型,stage模型不适用。(所以在标准系统相机开发模型为stage时,不能用此方法对图片编码)。

//base64编码
GetBase64(){
let that = this
resourceManager.getResourceManager((error, mgr) => {
if (error != null) {
console.log("ResourceManager error is " + error)
} else {
mgr.getMediaBase64($r('app.media.lianou').id, (error, value) => {
if (error != null) {
console.log("base64_error is " + error)
} else {
console.info('base64_result:' + value)
that.Base64Str = that.getCaption(value)
console.info('base64Str:' + this.Base64Str)
}
});
}
});
}
//去掉编码头
getCaption(obj) {
var index = obj.lastIndexOf("\,");
obj = obj.substring(index + 1, obj.length);
return obj;
}

编写函数调用图像识别API

注:这里 header:{‘Content-Type’: ‘application/x-www-form-urlencoded’} 才能传image参数到百度云。HTTP请求头字段,默认{‘Content-Type’: ‘application/json’} 。笔者将能在harmonyOS模拟器上跑起来的同样代码复制到一个新建的openHarmony项目中,但是会报错:缺参。通过后台调试发现能接收url的参数access_token和header参数,当header为默认类型时能接收到extraData里的参数,但当header为’application/x-www-form-urlencoded’时,无法收到extraData里的参数,所以初步认为是笔者所用OH系统版本的网络请求库不支持application/x-www-form-urlencoded传参。

AI_request() {
let httpRequest = http.createHttp();
httpRequest.request(
"https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token="+ this.access_token,
{
method: http.RequestMethod.POST,
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
extraData: {
'image': this.Base64Str,
'baike_num': 1
},
connectTimeout: 60000,
readTimeout: 60000,
}, (err, data) => {
if (!err) {
let obj = JSON.parse(data.result.toString());
this.result_description = obj.result[0].baike_info.description;
this.result_keyword = obj.result[0].keyword;
this.result_image = obj.result[0].baike_info.image_url;
this.result_root = obj.result[0].root;

console.info('Result_description:' + this.result_description)
console.info('Result_keyword:' + this.result_keyword)
console.info('Result_root:' + this.result_root)
console.info('Result_image:' + this.result_image)
} else {
console.info('Result2_error:' + JSON.stringify(err));
httpRequest.destroy();
}
})
}

四、编写UI界面调用函数

因为图片编码需要点时间,为了避免传参时出现错误,于是添加了一个延迟函数。

build() {
Column({ space: 10 }) {
Button('AI识别')
.onClick(() => {
this.GetBase64()
this.GetAccessToken()
setTimeout(()=>{
this.AI_request()
},1400)
})
Image(this.result_image)
.width(150)
.height(150)

Row({ space: 20 }) {
Text(this.result_keyword)
.fontSize(20)
.width(150)
.height(35)
.textAlign(TextAlign.Start)
.margin(15)
Text(this.result_root)
.fontSize(20)
.textAlign(TextAlign.Start)
.width(150)
.height(35)
.margin(15)
}.width('100%')
.height(35)

Text(this.result_description)
.fontSize(20)
.textAlign(TextAlign.Start)
.width('90%')
.height(250)
}
.width('100%')
.height('100%')

}
}

结语

以上就是本次的小分享啦!

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

责任编辑:jianghua 来源: ​​51CTO开源基础软件社区
相关推荐

2024-06-18 08:16:49

2022-10-20 09:33:35

2023-11-30 09:55:27

鸿蒙邻分类器

2016-12-01 14:23:32

iosandroid

2016-05-11 10:06:05

谷歌图像识别web开发

2022-04-13 11:24:18

ETS开发HarmonyOS鸿蒙

2021-04-09 20:49:44

PythonOCR图像

2022-10-11 23:35:28

神经网络VGGNetAlexNet

2019-07-21 22:22:37

图像识别AI机器视觉

2023-11-24 09:26:29

Java图像

2017-03-28 08:47:33

图像识别技术

2017-07-20 17:27:01

互联网

2022-10-19 07:42:41

图像识别神经网络

2020-09-21 07:00:00

语音识别AI人工智能

2021-02-03 17:15:35

图像识别AI人工智能

2022-08-19 14:14:13

人工智能人脸识别安全

2018-04-24 10:45:00

Python人工智能图像识别

2022-05-07 15:34:16

ETS低代码应用

2017-05-02 15:23:23

2017-11-06 16:50:38

人工智能图像识别数据逻辑
点赞
收藏

51CTO技术栈公众号