AI资产

描述

AI资产应用提供了AI识别组件，在开发前端页面（标准页面/高级页面）时，可以直接使用AI识别组件，快速实现AI识别功能。

开放能力

AI资产应用提供的能力如下：

标准页面的扩展组件：airecognition（PC端和APP端），高级页面的自定义组件：AIassets_PC（PC端）、AIassets_Mobile（APP端）。

标准页面和高级页面组件支持如下能力：

• 支持配置AI标签（AI标签值在下拉选项列表选择）。
• 支持配置获取ISDP+ OpenAPI token相关的系统参数（例如，ISDP+的域名、ISDP+获取token接口等）。
• 识别图片来源支持3种：
  • 通过下载图片接口获取，接口返回值为图片的base64编码。
  • 本地上传图片。
  • 动态消息接收图片base64数据。
• 支持配置是否展示识别结果。
• 支持根据资产的配置信息，调用ISDP+的AI识别OpenAPI接口（/ai-enable/v1.0/services/invoke）进行识别。
• 支持将识别结果通过消息的方式发送出来，消息格式为API接口返回的数据结构。

如何使用资产（标准页面）

标准页面使用扩展组件：airecognition，支持PC端和移动端，PC端与移动端操作类似，以PC端为例进行描述。

1. 订购并安装部署AI资产到对应的开发环境。

   相关操作请参见如何订购&部署资产。

2. 在开发环境首页的“项目”页签单击“行业应用”，再单击“创建行业应用”。
3. 如图1所示，输入标签和名称，选择分类，单击“创建”，创建后，页面跳转到应用开发页面。
   图1 创建行业应用
   

4. 在应用的开发页面，如图2所示，单击应用右侧的，选择“目录”。
   图2 创建目录
   

5. 在弹出的“添加目录”页面，如图3所示，输入目录名称（Page），单击“保存”。
   图3 添加目录
   

6. 如图4所示，单击规划存放页面目录Page右侧的，选择“标准页面”。
   图4 创建标准页面
   

7. 在弹出的“添加标准页面”页面，如图5所示，输入页面的“标签”为“test1234”，“名称”为“test1234”，单击“添加”。
   图5 添加标准页面
   

   页面创建完成后，自动进入编辑页面，如图6所示。

   图6 编辑页面
   

8. 如图7所示，选择组件“airecognition”，拖入到页面内容区域。
   图7 选择组件
   

9. 在开发的页面中，如图8所示，在页面内容区域，选中组件，右侧展示该组件的属性设置区域，在“属性”页签，设置相关属性，属性设置说明请参见表1。
   图8 配置自定义属性
   

   表1 属性参数配置说明

   参数	配置说明	示例
   基本属性
   标题	AI组件展示的标题	AI识图
   ISDP+域名系统参数名称	使用的ISDP+的域名在“系统参数”页面中配置的名称。	ISDP__AD_domain
   ISDP+获取token接口系统参数名称	ISDP+获取token接口在“系统参数”页面中配置的名称。	ISDP__rest_token_AD
   AppId系统参数名称	调用ISDP+ 的OpenAPI的AppId在“系统参数”页面中配置的名称。	ISDP__AD_client_id
   AppSecret系统参数名称	调用ISDP+的 OpenAPI的AppSecret在“系统参数”页面中配置的名称。	ISDP__AD_client_secret
   下载图片接口	可选，通过下载图片接口获取图片时，需要配置。 配置接口前，需要完成接口的创建。	-
   识别接口	配置ISDP智能AI识别接口。 配置接口前，需要完成接口的创建。	/service/ISDP__AssetDevelopment/1.0.0/AIIdentificationByISDP
   是否展示结果	配置是否展示识别结果。	是
   置信度	AI识别置信度。	0.6
   AI标签	配置AI识别的标签。	佩戴安全帽

   

   系统参数与脚本配置示例，可参见AI资产应用中的demo。

   • 下载图片接口脚本示例：DownloadPictureDemo
   • ISDP智能AI识别接口脚本示例：AIIdentificationByISDP

10. （可选）单击“事件”页签，可以配置识别完成事件，将识别结果通过消息的方式发送出来，消息格式为API接口返回的数据结构。
    图9 识别完成
    

11. 配置完成后，如图10所示，保存并预览，预览效果如图11所示。
    图10 保存并预览
    
    图11 预览效果
    

12. 上传图片，识别后，识别结果如图12所示。
    图12 识别结果
    

如何使用资产（高级页面）

高级页面的自定义组件：AIassets_PC（PC端）、AIassets_Mobile（APP端），分别支持PC端和移动端的AI识别功能，PC端与移动端操作类似，以PC端为例进行描述。

1. 订购并安装部署AI资产到对应的开发环境。

   相关操作请参见如何订购&部署资产。

2. 在开发环境首页的“项目”页签单击“行业应用”，再单击“创建行业应用”。
3. 如图13所示，输入标签和名称，选择分类，单击“创建”，创建后，页面跳转到应用开发页面。
   图13 创建行业应用
   

4. 在应用的开发页面，如图14所示，单击应用右侧的，选择“目录”。
   图14 创建目录
   

5. 在弹出的“添加目录”页面，如图15所示，输入目录名称（Page），单击“保存”。
   图15 添加目录
   

6. 如图16所示，单击规划存放页面目录Page右侧的，选择“高级页面”。
   图16 创建高级页面
   

7. 在弹出的“添加高级页面”页面，如图17所示，选择“空白”模板，输入页面的“标签”为“test”，“名称”为“test”，单击“添加”。
   图17 添加高级页面
   

   页面创建完成后，自动进入编辑页面，如图18所示。

   图18 编辑页面
   

8. 如图19所示，选择自定义组件“AIassets_PC”，拖入到页面内容区域。
   图19 选择组件
   

9. 在页面编辑态，进行页面的开发，在开发的页面中，如图20所示，在页面内容区域，选中组件，右侧展示该组件的属性设置区域，在“组件属性配置”的“属性”页签，设置自定义属性，配置说明请参见表2。
   图20 配置自定义属性
   

   表2 属性参数配置说明

   参数	配置说明	示例
   基本属性
   标题	AI组件展示的标题	AI识图
   AI标签	配置AI识别的标签。	佩戴安全帽
   ISDP+域名系统参数名称	使用的ISDP+的域名在“系统参数”页面中配置的名称。	ISDP__AD_domain
   ISDP+获取token接口后缀系统参数名称	ISDP+获取token接口后缀在“系统参数”页面中配置的名称。	ISDP__rest_token_AD
   AppId系统参数名称	调用ISDP+的 OpenAPI的AppId在“系统参数”页面中配置的名称。	ISDP__AD_client_id
   AppSecret系统参数名称	调用ISDP+ 的OpenAPI的AppSecret在“系统参数”页面中配置的名称。	ISDP__AD_client_secret
   置信度	AI识别置信度。	0.6
   下载图片接口	可选，通过下载图片接口获取图片时，需要配置。 配置接口前，需要完成接口的创建。	-
   结果是否展示	配置是否展示识别结果。	是

   

   系统参数与脚本配置示例，可参见AI资产应用中的demo。

   下载图片接口脚本示例：DownloadPictureDemo

10. 单击“数据”页签，进入“数据”页签，如图21所示。

    在“数据”页签中，如图21所示，设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据。

    AI资产组件提供配置项（ISDP+智能AI识别接口和通用OCR识别接口），其中，通用OCR识别接口暂未实现，无需配置。

    请参见AI资产应用中demo脚本AIIdentificationByISDP，进行脚本的开发。

    图21 “数据”页签
    
    脚本开发完成并封装成一个新的URL地址，在“数据”页签中，配置ISDP+智能AI识别接口下的数据，如图22所示。

    图22 配置数据
    

11. （可选）单击“事件”页签，可以将识别结果通过消息的方式发送出来，消息格式为API接口返回的数据结构。
    图23 识别完成
    

12. 配置完成后，如图24所示，单击页面上方保存按钮，保存配置，单击发布，发布页面，最后单击释放锁按钮，退出编辑状态。
    

    如果需要再次编辑，需要单击，获取锁在进行编辑。

    图24 保存，发布并释放锁
    

13. 如图25所示，单击页面上方预览按钮，即可看到页面配置效果，如图26所示。
    图25 预览
    
    图26 预览效果
    

14. 上传图片，识别后，识别结果如图27所示。
    图27 识别结果