ModelArts + AppCube 实现 “猫狗识别” 的AI应用【我的低代码AI体验】

举报
林欣 发表于 2023/01/02 22:41:31 2023/01/02
【摘要】 本实验要做的是一个能识别猫狗的AI应用 模型基于以下数据集和算法训练而来: - 数据集:二分类猫狗图片分类小数据集 - 算法:图像分类ResNet50-EI-Backbone

实验概述

本实验要做的是一个能识别猫狗的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服务

本次实验选取的模型是“猫狗识别模型”。

image.png

进入模型详情页后,点击订阅,订阅该模型。

image.png

订阅后,即可前往控制台,云服务区域选择“华北-北京四”

image.png

部署应用

展开“猫狗识别模型”,点击“部署”按钮,然后选择在线服务

image.png

填入如下信息

  • 名称:cat-dog-detect
  • 描述:猫狗识别模型

image.png

然后提交部署

image.png

返回在线服务列表,可以查看到当前部署的进度 (部署需要比较长的时间,可以先做后续步骤)

image.png

测试服务

部署成功后,点击“预测”按钮,即可进入“在线服务”页面

image.png

image.png

这里使用一张银渐层的照片来测试,将其下载到本地,然后上传给服务

image.png

预测结果如下:是猫的概率100%(还挺准的)

image.png

返回数据报文如下

{
    "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键可以退出教程)

切换到“应用开发”选项卡,左侧选择“应用”,然后“导入项目”

image.png

选择我们刚刚下载的 CNAMEO__EI-0.0.1-beta.zip

导入完成后如下图(这里我已经导入过了)

获取 ApigCode 和 ModelId

切换回刚刚ModelArts的部署后的测试页面,切换到“调用指南”选项卡

image.png

复制API接口地址,如下:https://55f8e16577f545a5a51a77db5399d75b.apig.cn-north-4.huaweicloudapis.com/v1/infers/5d6ec39f-dfc0-4d47-8d34-923b901820cd

从API接口中,我们可以得到这两个参数 (所有模型的apigCode都是一致的)

apigCode = 55f8e16577f545a5a51a77db5399d75b
modelId = 5d6ec39f-dfc0-4d47-8d34-923b901820cd

测试连接器

点击“编辑”按钮,进入“设计器”。首次使用会要求你输入你自己的“名空间”(自由发挥即可)

左侧选择“集成”,然后“连接器实例”

接着在左侧列表选择“ModelArts”,然后修改“访问密钥AK”和“密钥SK”(这个在之前的“访问凭证”那边已经下载过了,在credentials.csv文件中)

修改好后,点击“测试”按钮,这次我们用一张“比熊”(狗)的图片来进行测试。

0a332f7d74ba22d7144e7a881e463418_2d69830679974578bbc7338b0db6410e.jpeg

选择类型:图片URL
模型Apig-Code:55f8e16577f545a5a51a77db5399d75b
模型Id:5d6ec39f-dfc0-4d47-8d34-923b901820cd
URL:https://p3.ssl.qhimgs1.com/t01916685c39ac74703.jpg

image.png

测试成功!

image.png

返回数据如下,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

image.png

修改完后点击“保存”按钮(切记,一定要保存修改才会生效)

image.png

预览代码

点击工具栏上的“预览”按钮,快捷键是 Alt+Shift+V,进入预览模式

image.png

点击“上传”图标,随便上传一张猫或狗的图片

image.png

发现没显示出来,按下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)

image.png

这是由于获取数组越界导致的程序异常终止。之前的代码是

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]},
    }

image.png

修改代码后,再次预览,发现实验成功!

image.png

总结

做了两个项目了,我发现AI Gallary上的模型有如下几个规律

  1. 所有模型的返回报文格式都是一致的
{
    "predicted_label": "<预测结果>",
    "scores": [
        [
            "<可能是什么>",
            "<概率(0-1)>"
        ],
        ...
    ]
}
  1. AppCode的示例安装包,对于所有模型均通用,其下载地址如下
    https://appcube-ai-temp.obs.cn-north-4.myhuaweicloud.com/CNAMEO__EI-0.0.1-beta.zip
  2. 通用的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]},
    }
  1. 所有模型用的AK和SK均相同,Apig-Code页相同,不同的只有 ModelId
  2. 免费的CPU只能部署一个应用,如果想尝试其它应用,必须删除之前的部署,才能继续免费部署下一个应用

【万众瞩目的低代码AI应用开发实战营来啦!开启实战营之旅(免费体验),写体验文章,赢开发者大礼包!】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/384262

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。