ModelArts + AppCube 实现 “猫狗识别” 的AI应用【我的低代码AI体验】
实验概述
本实验要做的是一个能识别猫狗的AI应用
模型基于以下数据集和算法训练而来:
- 数据集:二分类猫狗图片分类小数据集
- 算法:图像分类ResNet50-EI-Backbone
模型的预测结果格式是:
{
"predicted_label": "dog",
"scores": [
[
"dog",
"0.821"
],
[
"cat",
"0.179"
]
]
}
服务端
订阅 Model Arts 模型
首先要做的是订阅 Model Arts 中对应的模型,我们访问其首页:https://www.huaweicloud.com/product/modelarts.html
进入管理控制台后,在左侧面板中,依次选取“AI应用管理”,“AI应用”,然后切换到“我的订阅”选项卡,点击“查找AI应用”按钮,开始查找相应的模型
AI Gallary是一个用来存储用户发布的AI模型的应用仓库,你可以在这里搜到你所需要的AI模型,并直接部署发布成API服务
本次实验选取的模型是“猫狗识别模型”。
进入模型详情页后,点击订阅,订阅该模型。
订阅后,即可前往控制台,云服务区域选择“华北-北京四”
部署应用
展开“猫狗识别模型”,点击“部署”按钮,然后选择在线服务
填入如下信息
- 名称:cat-dog-detect
- 描述:猫狗识别模型
然后提交部署
返回在线服务列表,可以查看到当前部署的进度 (部署需要比较长的时间,可以先做后续步骤)
测试服务
部署成功后,点击“预测”按钮,即可进入“在线服务”页面
这里使用一张银渐层的照片来测试,将其下载到本地,然后上传给服务
预测结果如下:是猫的概率100%(还挺准的)
返回数据报文如下
{
"predicted_label": "cat",
"scores": [
[
"cat",
"1.000"
],
[
"dog",
"0.000"
]
]
}
客户端
获取AK/SK
在右上角点击账户名,然后进入“我的凭证”,切换到“访问密钥”选项卡,创建并下载密钥
注意:如果访问密钥泄露,会带来数据泄露风险,且每个访问密钥仅能下载一次,为了帐号安全性,建议您定期更换并妥善保存访问密钥。
这里我已经下载过了,就不重新下载了。下载完后是一个credentials.csv,里面是如下格式的AK/SK
下载AppCube应用安装包
操作前请先下载示例安装包:https://appcube-ai-temp.obs.cn-north-4.myhuaweicloud.com/CNAMEO__EI-0.0.1-beta.zip
下载好的安装包只有19KB
导入项目
本次请求的服务端采用的是ModelArts的在线服务;而客户端则使用AppCube来搭建一个零代码应用
首先,来到AppCube首页:https://console.huaweicloud.com/appcube/?region=cn-north-4#/home
然后点击“管理运行环境”按钮,进入AppCube主页(第一次进入,会出现引导教程,点击ESC键可以退出教程)
切换到“应用开发”选项卡,左侧选择“应用”,然后“导入项目”
选择我们刚刚下载的 CNAMEO__EI-0.0.1-beta.zip
导入完成后如下图(这里我已经导入过了)
获取 ApigCode 和 ModelId
切换回刚刚ModelArts的部署后的测试页面,切换到“调用指南”选项卡
从API接口中,我们可以得到这两个参数 (所有模型的apigCode都是一致的)
apigCode = 55f8e16577f545a5a51a77db5399d75b
modelId = 5d6ec39f-dfc0-4d47-8d34-923b901820cd
测试连接器
点击“编辑”按钮,进入“设计器”。首次使用会要求你输入你自己的“名空间”(自由发挥即可)
左侧选择“集成”,然后“连接器实例”
接着在左侧列表选择“ModelArts”,然后修改“访问密钥AK”和“密钥SK”(这个在之前的“访问凭证”那边已经下载过了,在credentials.csv文件中)
修改好后,点击“测试”按钮,这次我们用一张“比熊”(狗)的图片来进行测试。
选择类型:图片URL
模型Apig-Code:55f8e16577f545a5a51a77db5399d75b
模型Id:5d6ec39f-dfc0-4d47-8d34-923b901820cd
URL:https://p3.ssl.qhimgs1.com/t01916685c39ac74703.jpg
测试成功!
返回数据如下,AI模型认为“比熊(一种小狗)”有55.4%的概率是狗,44.6%的概率是猫
{ "resCode": "0", "resMsg": "成功", "result": { "predicted_label": "dog", "scores": [ [ "dog", "0.554" ], [ "cat", "0.446" ] ] } }
修改代码
左侧选项卡选择“页面”,然后依次是“Page”,“demo”
编辑前,需要点击左上角的“锁定”按钮,获取页面锁
然后切换到底部的“事件视图”,事件名称选第三个“uploa_on-success_upload_0”,根据提示修改如下两个参数
apigCode:55f8e16577f545a5a51a77db5399d75b
modelId:5d6ec39f-dfc0-4d47-8d34-923b901820cd
修改完后点击“保存”按钮(切记,一定要保存修改才会生效)
预览代码
点击工具栏上的“预览”按钮,快捷键是 Alt+Shift+V,进入预览模式
点击“上传”图标,随便上传一张猫或狗的图片
发现没显示出来,按下F12,或者右键进入开发者模式,查看Console日志信息。发现遇到错误:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
at eval (eval at execJS (xcloud.js?16bcf8b3925949a4286e:1), <anonymous>:33:32)
这是由于获取数组越界导致的程序异常终止。之前的代码是
let postData = {
data1:{'name': scores[0][0],'num': scores[0][1]},
data2:{'name': scores[1][0],'num': scores[1][1]},
data3:{'name': scores[2][0],'num': scores[2][1]},
data4:{'name': scores[3][0],'num': scores[3][1]},
data5:{'name': scores[4][0],'num': scores[4][1]},
}
这是由于食品预测一共有5种可能性,因此这里直接写死5种,界面布局也是5种。而本次的猫狗预测,其结果只有两种,因此需要修改“事件视图”中的第三个事件“uploa_on-success_upload_0”中的postData变量,对数组中的元素是否存在做判断,如果不存在,则赋予默认值,具体修改为如下
let postData = {
data1:{'name': scores[0] === undefined ? '' : scores[0][0],'num': scores[0] === undefined ? '' : scores[0][1]},
data2:{'name': scores[1] === undefined ? '' : scores[1][0],'num': scores[1] === undefined ? '' : scores[1][1]},
data3:{'name': scores[2] === undefined ? '' : scores[2][0],'num': scores[2] === undefined ? '' : scores[2][1]},
data4:{'name': scores[3] === undefined ? '' : scores[3][0],'num': scores[3] === undefined ? '' : scores[3][1]},
data5:{'name': scores[4] === undefined ? '' : scores[4][0],'num': scores[4] === undefined ? '' : scores[4][1]},
}
修改代码后,再次预览,发现实验成功!
总结
做了两个项目了,我发现AI Gallary上的模型有如下几个规律
- 所有模型的返回报文格式都是一致的
{
"predicted_label": "<预测结果>",
"scores": [
[
"<可能是什么>",
"<概率(0-1)>"
],
...
]
}
- AppCode的示例安装包,对于所有模型均通用,其下载地址如下
https://appcube-ai-temp.obs.cn-north-4.myhuaweicloud.com/CNAMEO__EI-0.0.1-beta.zip
- 通用的AppCode示例安装包代码有些瑕疵,可能的情况写死了5种,不能兼容可能性更少的情况(遇到例如本例只有2种的,会报错,并且不显示结果)。因此需要对事件代码进行如下修改,才能更好的兼容可能性更少的情况,使其不报错,正常显示!
let postData = {
data1:{'name': scores[0] === undefined ? '' : scores[0][0],'num': scores[0] === undefined ? '' : scores[0][1]},
data2:{'name': scores[1] === undefined ? '' : scores[1][0],'num': scores[1] === undefined ? '' : scores[1][1]},
data3:{'name': scores[2] === undefined ? '' : scores[2][0],'num': scores[2] === undefined ? '' : scores[2][1]},
data4:{'name': scores[3] === undefined ? '' : scores[3][0],'num': scores[3] === undefined ? '' : scores[3][1]},
data5:{'name': scores[4] === undefined ? '' : scores[4][0],'num': scores[4] === undefined ? '' : scores[4][1]},
}
- 所有模型用的AK和SK均相同,Apig-Code页相同,不同的只有 ModelId
- 免费的CPU只能部署一个应用,如果想尝试其它应用,必须删除之前的部署,才能继续免费部署下一个应用
【万众瞩目的低代码AI应用开发实战营来啦!开启实战营之旅(免费体验),写体验文章,赢开发者大礼包!】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/384262
- 点赞
- 收藏
- 关注作者
评论(0)