实验概述

本实验要做的是一个能识别猫狗的AI应用

模型基于以下数据集和算法训练而来：

• 数据集：二分类猫狗图片分类小数据集
• 算法：图像分类ResNet50-EI-Backbone

模型的预测结果格式是：

{
    "predicted_label": "dog",
    "scores": [
        [
            "dog",
            "0.821"
        ],
        [
            "cat",
            "0.179"
        ]
    ]
}

服务端

订阅 Model Arts 模型

首先要做的是订阅 Model Arts 中对应的模型，我们访问其首页：https://www.huaweicloud.cn/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.cn/appcube/?region=cn-north-4#/home

然后点击“管理运行环境”按钮，进入AppCube主页（第一次进入，会出现引导教程，点击ESC键可以退出教程）

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

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

导入完成后如下图（这里我已经导入过了）

获取 ApigCode 和 ModelId

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

复制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文件中）

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

选择类型：图片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上的模型有如下几个规律

1. 所有模型的返回报文格式都是一致的

{
    "predicted_label": "<预测结果>",
    "scores": [
        [
            "<可能是什么>",
            "<概率(0-1)>"
        ],
        ...
    ]
}

2. AppCode的示例安装包，对于所有模型均通用，其下载地址如下
   https://appcube-ai-temp.obs.cn-north-4.myhuaweicloud.com/CNAMEO__EI-0.0.1-beta.zip
   
3. 通用的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]},
    }

4. 所有模型用的AK和SK均相同，Apig-Code页相同，不同的只有 ModelId
5. 免费的CPU只能部署一个应用，如果想尝试其它应用，必须删除之前的部署，才能继续免费部署下一个应用

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