【一步步開發AI運動小程式】二、引入外掛

alphaair發表於2023-05-18
AI

隨著人工智慧技術的不斷髮展，阿里體育等IT大廠，推出的“樂動力”、“天天跳繩”AI運動APP，讓雲上運動會、線上運動會、健身打卡、AI體育指導等概念空前火熱。那麼，能否將這些在APP成功應用的場景搬上小程式，分享這些概念的紅利呢？本系列文章就帶您一步一步從零開始開發一個AI運動小程式，本系列文章將使用“雲智AI運動識別小程式外掛”，請先行在微信服務市場或官網瞭解詳情。

一、新建uni-app專案

新一個空的uni-app專案。

二、配置專案引用外掛。

編輯mmanifest.json檔案（在HBuilderX編輯器無法編譯此檔案內容，請使用計事本、VSCode等其它編輯器編輯），在mp-weixin節中增加下面的下面外掛引用內容：

 "mp-weixin": {
      "appid": "xxxx",
      ...
      "plugins": {
          "aiSport": {
              "version": "1.0.12",
              "provider": "wx6130e578c4a26a1a"
           }
      }
}

三、部署模型

外掛會提供一個深度學習模型，將解壓的資料夾上傳至一個可訪問Web站點，並保證目錄下的所有檔案可訪問下載。

四、安裝npm依賴包

# 若未初始化npm包，請先執行npm init
npm install fetch-wechat --save

五、外掛全域性初始

在小程式的入口App.vue執行全域性初始化：

<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>

六、呼叫外掛內物件

const AiSports = requirePlugin("aiSport");//獲取外掛物件
const PoseGraphs = AiSports.PoseGraphs; //獲取人體骨骼圖繪製器
const humanDetection = AiSports.humanDetection;  //獲取人體識別物件

//例項化一個人體繪製物件
const graphs = new PoseGraphs();

相關文章