二、引入小程序插件

2024-09-14 09:36:53 浏览数 (1)

随着深度学习推理技术的不断发展,让小型设备运行深度学习成为可能,阿里体育等IT大厂,推出的“乐动力”、“天天跳绳”AI运动APP,让云上运动会、线上运动会、健身打卡、AI体育指导等概念空前火热。那么,能否将这些在APP成功应用的场景搬上微信小程序,分享这些概念的红利呢?本系列文章就带您一步一步从零开始开发一个AI运动小程序,本系列文章将使用“AI运动识别”小程序插件,插件详情可以前往微信服务市场搜索相应插件。

一、新建uni-app项目

新一个空白的uni-app项目。

二、配置项目引用插件。

编辑mmanifest.json文件(在HBuilderX编辑器无法编译此文件内容,请使用计事本、VSCode等其它编辑器编辑),在mp-weixin节中增加下面的下面插件引用内容:

代码语言:javascript复制
 "mp-weixin": {
      "appid": "xxxx",
      ...
      "plugins": {
          "aiSport": {
              "version": "1.0.12",
              "provider": "wx6130e578c4a26a1a"
           }
      }
}

三、部署模型

插件会提供一个识别模型文件,将解压的文件夹上传至一个可访问Web站点,并保证目录下的所有文件可访问下载。

四、安装npm依赖包

代码语言:powershell复制
# 若未初始化npm包,请先执行npm init
npm install fetch-wechat --save

五、插件全局初始

在小程序的入口App.vue执行全局初始化:

代码语言:html复制
<script>
	
	import * as fetchWechat from "fetch-wechat";
	
	export default {
		onLaunch: function() {
			
			const plugin = requirePlugin('aiSport');
			plugin.initialize({
				modelUrl: 'http://xx.xx.xx.xx/model.json', //刚刚部署的模型下载地址
				fetchFunc: fetchWechat.fetchFunc(),
				humanPointThreshold: 0.45,
				debugEnabled: true
			});
			
		},
		onShow: function() {
			
		},
		onHide: function() {
			
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

六、调用插件内对象

代码语言:javascript复制
const AiSports = requirePlugin("aiSport");//获取插件对象
const PoseGraphs = AiSports.PoseGraphs; //获取人体骨骼图绘制器
const humanDetection = AiSports.humanDetection;  //获取人体识别对象

//实例化一个人体绘制对象
const graphs = new PoseGraphs();

好了本篇为就您分享到这,下篇我们将为您介绍基本的AI运动处理流程。

0 人点赞