微信小程序应用开发 课件 第8章 小程序AI

第8章小程序AI电子工业出版社微信小程序提供了AI推理和视觉能力等人工智能相关的技术支持。通过小程序的AI推理API，小程序开发者无需关注内部实现和模型转换，只需提供训练好的ONNX模型，小程序内部会将用户的ONNX模型自动转换为小程序推理引擎可以识别的模型格式并完成推理。通过视觉能力API，小程序开发者可以完成目前较为流行的包括OSD单样本检测、人脸检测、人体检测、人手检测、OCR检测、身份证检测、深度估计等一系列与视觉相关的任务。本章对小程序的视觉能力API进行介绍。目录8.1VisionKit视觉库简介8.2创建视觉会话8.3人脸检测8.4人体检测8.5手势/人手检测8.6OCR检测8.7案例：基于手势的图像显示控制8.8练习：从图像中检测人脸8.1VisionKit视觉库简介微信小程序的视觉能力是通过称为VisionKit的一组视觉库API提供的。VisionKit的核心是VKSession，即VisionKit会话对象。VisionKit会话对象实例在页面上是单例，且页面间的VKSeesion实例运行周期互斥，这就确保了一个小程序在一个确定的时刻最多只会有一个VKSession实例。通过VisionKit会话对象提供的各种不能功能函数，小程序即可完成常见的视觉识别和检测功能。8.2创建视觉会话在可以使用微信小程序的视觉能力各种功能之前，必须首先获得一个VisionKit会话对象。可以通过VKSessionwx.createVKSession(Objectobject)创建VKSession实例。这个函数接受一个Object对象参数，这个对象参数的属性及其含义如表：序号属性名类型默认值必填说明1versionstringv1否visionkit版本。可选值：v1，适用于用户在平面场景下；v2，提供真实物理距离的ar定位功能。2trackObject无是跟踪能力配置。跟踪能力如表8-2所示。目前不同的跟踪能力之间是互斥的，不同的视觉能力，需要使用互斥的属性进行配置。各种不同的跟踪功能配置属性及其含义如表8-2所示。track对象属性及其含义序号属性名类型默认值必填说明1planeObject无是平面跟踪配置。该对象只包含mode属性，number类型，可能值及其含义：1，检测横向平面

；2，检测纵向平面；3，检测横向和纵向平面，只有v2版本支持。2markerboolean无否marker跟踪配置3OSDboolean无否OSD跟踪配置4depthObject无否深度识别配置。该对象只包含mode属性，number类型，可能值及其含义：1，通过摄像头实时检测；2，静态图片检测。5faceObject无否人脸检测配置。该对象只包含mode属性，number类型，可能值及其含义：1，通过摄像头实时检测；2，静态图片检测。6OCRObject无否OCR检测配置。该对象只包含mode属性，number类型，可能值及其含义：1，通过摄像头实时检测；2，静态图片检测。7IDCardObject无否身份证检测配置。该对象只包含mode属性，number类型，可能值及其含义：2，静态图片检测。8bodyObject无否人体检测配置。该对象只包含mode属性，number类型，可能值及其含义：1，通过摄像头实时检测；2，静态图片检测。9handObject无否手势检测配置。该对象只包含mode属性，number类型，可能值及其含义：1，通过摄像头实时检测；2，静态图片检测。10shoeObject无否鞋部检测配置。该对象只包含mode属性，number类型，可能值及其含义：1，通过摄像头实时检测。11threeDofboolean无否提供基础AR功能，输出相机旋转的3个自由度的位姿，利用手机陀螺仪传感器，实现快速稳定的AR定位能力，适用于简单AR场景。8.3人脸检测要进行人脸检测，首先需要使用函数VKSessionwx.createVKSession(Objectobject)创建一个VKSession实例，在其参数对象的track属性中指定face属性，注意，face属性也是一个Object对象，在face对象的mode属性中指定要识别的数据源：当设置为数字“1”时，指定数据源来自摄像头；当设置为数字“2”时，指定数据源来自图像。创建了VKSession对象后，再调用VKSession对象的VKSession.on(stringeventName,functionfn)函数设置事件处理函数，其中的eventName参数所指代的事件名称及其含义如表：序号事件名称含义1resize相机尺寸变化事件，回调参数为相机尺寸2addAnchors增加anchor事件，回调参数为VKPlaneAnchor/VKMarkerAnchor/VKOSDAnchor列表（只有v2版本支持）。具体的回调参数类型取决于检测类型。3updateAnchors更新anchor事件，回调参数为VKPlaneAnchor/VKMarkerAnchor/VKOSDAnchor列表（只有v2版本支持）或VKFaceAnchor/VKOCRAnchor/VKHandAnchor/VKBodyAnchor列表（v1、v2都支持）。具体的回调参数类型取决于检测类型。对于人脸检测而言，回调参数为VKFaceAnchor类型。4removeAnchors 删除anchor事件，回调参数为VKPlaneAnchor/VKMarkerAnchor/VKOSDAnchor列表（只有v2版本支持）或VKFaceAnchor/VKOCRAnchor/VKHandAnchor/VKBodyAnchor列表（v1、v2都支持）。具体的回调参数类型取决于检测类型。对于人脸检测而言，回调参数为VKFaceAnchor类型。设置了VKSession的监听事件函数后，还需要调用VKSession.start(functioncallback)函数启动会话，其中的callback参数时回调函数，该回调函数接受一个数字类型的表示启动会话是否成功的参数，该参数的取值及其含义如下：0表示启动会话成功，非0则表示出现某种类型的错误。一旦成功启动VKSession会话，对于静态图像，需要调用VKSession.detectFace(Objectobject)函数检测人脸，该函数接受一个Object对象参数，该参数的属性及其含义如表：序号属性名类型默认值必填说明1frameBufferArrayBuffer无是人脸图像像素点数据，每四项表示一个像素点的RGBA2widthnumber无是图像宽度3heightnumber无是图像高度4scoreThresholdnumber0.8否评分阈值。正常情况传入0.8即可。5sourceTypenumber1否图像源类型。正常情况传入1即可。当输入的图片是来自一个连续视频的每一帧图像时，sourceType传入0会得到更优的效果。可选值及其含义：1，表示输入的图片是随机的图片；0，表示输入的图片是来自一个连续视频的每一帧图像。6modelModelnumber1否算法模型类型。正常情况传入1即可。0、1、2分别表示小、中、大模型，模型越大识别准确率越高，但资源占用也越高。建议根据用户设备性能进行选择。可选值及其含义：0，小模型；1，中模型；2，大模型。在使用VKSession.on(stringeventName,functionfn)函数设置回调函数时，设置的回调函数会接受一个VKFaceAnchor类型的对象参数，这个对象参数所包含的属性及其含义如表：序号属性名类型含义1idnumber唯一标识2typenumber类型，只有一个合法值数字“3”3detectIdnumber识别序号4originObject相对视窗的位置信息，取值范围为[0,1]，0为左/上边缘，1为右/下边缘。该对象包含的属性及其类型：x，number，横坐标；y，number，纵坐标。5sizeObject相对视窗的尺寸，取值范围为[0,1]，0为左/上边缘，1为右/下边缘。该对象包含的属性及其类型：width，number，宽度；height，number，高度。6pointsArray.<Object>人脸106个关键点的坐标。每个坐标点包括如下属性：x，number，横坐标；y，number，纵坐标。7angleArray.<number>人脸角度信息。8confidenceArray.<number>关键点的置信度举一个例子介绍如何进行人脸检测。这个例子从摄像机中获取一张图像，然后检测所获取的图像中是否存在人脸，如果存在人脸，则显示人脸的位置和大小尺寸。为此，首先创建名称为mini-ch08-01的小程序工程，并修改index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><cameradevice-position="{{camera}}"flash="off"binderror="error"style="width:100%;height:300px;"></camera><buttonbindtap="detect"style="width:100%;">启动人脸检测</button><textstyle="width:100%;">{{message}}</text>修改index.js文件为如下内容：//index.jsPage({data:{message:'',},detect(){letthat=this;that.setData({message:''});that.session=wx.createVKSession({track:{face:{mode:2}//mode:1-使用摄像头；2-手动传入图像},version:'v2'});//静态图片检测模式下，每调一次detectFace接口就会触发一次updateAnchors事件that.session.on('updateAnchors',anchors=>{anchors.forEach(anchor=>{//console.log('anchor.points',anchor.points);console.log('anchor.origin',anchor.origin);console.log('anchor.size',anchor.size);//console.log('anchor.angle',anchor.angle);that.setData({message:'检测到人脸:x='+anchor.origin.x.toFixed(3)+",y="+anchor.origin.y.toFixed(3)+",w="+anchor.size.width.toFixed(3)+",h="+anchor.size.height.toFixed(3)});});that.listener.stop();that.session.stop();});

//需要调用一次start以启动that.session.start(errno=>{if(errno){//如果失败，将返回errno}else{//否则，返回null，表示成功that.ctx=wx.createCameraContext();that.listener=this.ctx.onCameraFrame((frame)=>{that.session.detectFace({frameBuffer:frame.data,//图片ArrayBuffer数据。RGBA格式width:frame.width,height:frame.height,scoreThreshold:0.3,//评分阈值sourceType:1,modelMode:1,});});that.listener.start();}});}})由于微信开发工具所自带的模拟器不支持VI视觉相关API，因此，需要使用物理手机来测试这个例子程序。为此，在微信开发工具中点击“预览”按钮，然后使用微信扫描生成的二维码进而将程序在微信客户端进行运行测试。在检测到人脸的情况下，测试结果如图：坐标点及尺寸大小时相对于图像的宽度和高度均为整数“1”这个相对值进行计算的8.4人体检测VKSession也可以进行人体检测。类似于人脸检测，人体检测也包括如下四个步骤：步骤一，使用函数VKSessionwx.createVKSession(Objectobject)创建一个VKSession实例；步骤二，调用VKSession对象的VKSession.on(stringeventName,functionfn)函数设置事件处理函数；步骤三，调用VKSession.start(functioncallback)函数启动会话；步骤四，一旦成功启动VKSession会话，对于静态图像，需要调用VKSession.detectBody(Objectobject)函数检测人体。VKSession.detectBody(Objectobject)函数接受一个Object对象参数，该参数的属性及其含义如表：序号属性名类型含义1idnumber唯一标识2typenumber类型，只有一个合法值数字“5”3detectIdnumber识别序号4originObject相对视窗的位置信息，取值范围为[0,1]，0为左/上边缘，1为右/下边缘。该对象包含的属性及其类型：x，number，横坐标；y，number，纵坐标。5sizeObject相对视窗的尺寸，取值范围为[0,1]，0为左/上边缘，1为右/下边缘。该对象包含的属性及其类型：width，number，宽度；height，number，高度。6pointsArray.<Object>关键点的坐标。每个坐标点包括如下属性：x，number，横坐标；y，number，纵坐标。7confidenceArray.<number>关键点的置信度8scorenumber总体置信值8.5手势/人手检测VKSession也可以进行手势检测。类似于人脸检测，手势检测也包括如下四个步骤：步骤一，使用函数VKSessionwx.createVKSession(Objectobject)创建一个VKSession实例；步骤二，调用VKSession对象的VKSession.on(stringeventName,functionfn)函数设置事件处理函数；步骤三，调用VKSession.start(functioncallback)函数启动会话；步骤四，一旦成功启动VKSession会话，对于静态图像，需要调用VKSession.detectHand(Objectobject)函数检测手势/人手。VKSession.detectHand(Objectobject)函数接受一个Object对象参数，该参数的属性及其含义如表：序号属性名类型默认值必填说明1frameBufferArrayBuffer无是图像像素点数据，每四项表示一个像素点的RGBA2widthnumber无是图像宽度3heightnumber无是图像高度4scoreThresholdnumber0.8否评分阈值。正常情况传入0.8即可。5algoModenumber无否算法检测模式。可选值及其含义：0，检测模式，输出框和点；1，手势模式，输出框和手势分类；2，结合0和1模式，输出框、点、手势分类。在使用VKSession.on(stringeventName,functionfn)函数设置回调函数时，设置的回调函数会接受一个VKHandAnchor类型的对象参数，这个对象参数所包含的属性及其含义如表：序号属性名类型含义1idnumber唯一标识2typenumber类型，只有一个合法值数字“7”3detectIdnumber识别序号4originObject相对视窗的位置信息，取值范围为[0,1]，0为左/上边缘，1为右/下边缘。该对象包含的属性及其类型：x，number，横坐标；y，number，纵坐标。5sizeObject相对视窗的尺寸，取值范围为[0,1]，0为左/上边缘，1为右/下边缘。该对象包含的属性及其类型：width，number，宽度；height，number，高度。6pointsArray.<Object>关键点的坐标。每个坐标点包括如下属性：x，number，横坐标；y，number，纵坐标。7confidenceArray.<number>关键点的置信度8scorenumber总体置信值9gesturenumber手势分类,返回整数-1到18,-1表示无效手势。合法值及其含义：0，单手比心；1，布（数字5）；2，剪刀（数字2）；3，握拳；4，数字1；5，热爱；6，点赞；7，数字3；8，摇滚；9，数字6；10，数字8；11，双手抱拳（恭喜发财）；12，数字4；13，比ok；14，不喜欢（踩）；15，双手比心；16，祈祷（双手合十）；17 ，双手抱拳；18，无手势动作；-1，无效手势。下面举例说明进行手势检测。这个例子从摄像机中获取一张图像，然后检测所获取的图像中是否存在手势，如果存在，则显示手势检测结果。为此，首先创建名称为mini-ch08-01工程中新建名为hand的页面，并修改hand.json文件为如下内容：修改hand.wxml为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}<!s/hand/hand.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><cameradevice-position="{{camera}}"flash="off"binderror="error"style="width:100%;height:300px;"></camera><buttonbindtap="detect"style="width:100%;">启动手势检测</button><textstyle="width:100%;">{{message}}</text><textstyle="width:100%;">{{gestrue}}</text>修改hand.js为如下代码：//pages/hand/hand.jsPage({gmap:newMap(),data:{message:'',camera:'front',//frontorbackgestrue:''},

onReady(ops){this.gmap.set(0,'单手比心');this.gmap.set(1,'布（数字5）');this.gmap.set(2,'剪刀（数字2）');this.gmap.set(3,'握拳');this.gmap.set(4,'数字1');this.gmap.set(5,'热爱');this.gmap.set(6,'点赞');this.gmap.set(7,'数字3');this.gmap.set(8,'摇滚');this.gmap.set(9,'数字6');this.gmap.set(10,'数字8');this.gmap.set(11,'双手抱拳（恭喜发财）');this.gmap.set(12,'数字4');this.gmap.set(13,'比ok');this.gmap.set(14,'不喜欢（踩）');this.gmap.set(15,'双手比心');this.gmap.set(16,'祈祷（双手合十）');this.gmap.set(17,'双手抱拳');this.gmap.set(18,'无手势动作');this.gmap.set(-1,'无效手势');},

detect(){letthat=this;that.setData({message:''});that.session=wx.createVKSession({track:{hand:{mode:2}//mode:1-使用摄像头；2-手动传入图像},version:'v2'})//静态图片检测模式下，每调一次接口就会触发一次updateAnchors事件that.session.on('updateAnchors',anchors=>{anchors.forEach(anchor=>{//console.log('anchor.points',anchor.points);console.log('anchor.origin',anchor.origin);console.log('anchor.size',anchor.size);console.log('anchor.gesture',anchor.gesture);that.setData({message:'检测到手势:x='+anchor.origin.x.toFixed(3)+",y="+anchor.origin.y.toFixed(3)+",w="+anchor.size.width.toFixed(3)+",h="+anchor.size.height.toFixed(3),gestrue:that.gmap.get(anchor.gesture)});});//that.listener.stop();//that.session.stop();});//需要调用一次start以启动that.session.start(errno=>{if(errno){//如果失败，将返回errno}else{//否则，返回null，表示成功that.ctx=wx.createCameraContext();that.listener=this.ctx.onCameraFrame((frame)=>{that.session.detectHand({frameBuffer:frame.data,//图片ArrayBuffer数据。RGBA格式width:frame.width,height:frame.height,scoreThreshold:0.3,//评分阈值algoMode:2});});that.listener.start();}});}})在物理手机上预览这个程序，运行结果如图所示：8.6OCR检测在介绍OCR检测之前，首先介绍什么是OCR。OCR，是“OpticalCharacterRecognition”的首字母缩写，也就是“光学字符识别”。所谓OCR检测技术，是指通过计算机视觉技术检查纸上打印的字符，通过检测暗、亮的模式确定其形状，然后用字符识别方法将形状翻译成计算机文字的过程；即，针对印刷体字符，采用光学的方式将纸质文档中的文字转换成为黑白点阵的图像文件，并通过识别软件将图像中的文字转换成文本格式，供文字处理软件进一步编辑加工的技术。微信小程序提供了完善的OCR检测API：VKSession也可以进行手势检测。类似于人脸检测，OCR检测也包括如下四个步骤：步骤一，使用函数VKSessionwx.createVKSession(Objectobject)创建一个VKSession实例；步骤二，调用VKSession对象的VKSession.on(stringeventName,functionfn)函数设置事件处理函数；步骤三，调用VKSession.start(functioncallback)函数启动会话；步骤四，一旦成功启动VKSession会话，对于静态图像，需要调用VKSession.runOCR(Objectobject)函数检测OCR字符。VKSession.runOCR(Objectobject)函数接受一个Object对象参数，该参数的属性及其含义如表：序号属性名类型默认值必填说明1frameBufferArrayBuffer无是图像像素点数据，每四项表示一个像素点的RGBA2widthnumber无是图像宽度3heightnumber无是图像高度在使用VKSession.on(stringeventName,functionfn)函数设置回调函数时，设置的回调函数会接受一个VKOCRAnchor类型的对象参数，这个对象参数所包含的属性及其含义如表：序号属性名类型含义1idnumber唯一标识2typenumber类型，只有一个合法值数字“6”3textstring识别得到的字符下面举例说明进行手势检测。这个例子从摄像机中获取一张图像，然后检测所获取的图像中是否存在手势，如果存在，则显示手势检测结果。为此，首先创建名称为mini-ch08-01工程中新建名为ocr的页面，并修改ocr.json文件为如下内容：修改ocr.wxml文件为如下内容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}<!s/ocr/ocr.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><cameradevice-position="{{camera}}"flash="off"binderror="error"style="width:100%;height:300px;"></camera><buttonbindtap="detect"style="width:100%;">启动OCR检测</button><textstyle="width:100%;">{{message}}</text>修改ocr.js为如下内容：//pages/ocr/ocr.jsPage({gmap:newMap(),data:{message:'',camera:'back',//frontorback},detect(){letthat=this;that.setData({message:''});that.session=wx.createVKSession({track:{OCR:{mode:2}//mode:1-使用摄像头；2-手动传入图像},version:'v2'})//静态图片检测模式下，每调一次runOCR接口就会触发一次updateAnchors事件that.session.on('updateAnchors',anchors=>{lett="".concat(anchors.map(anchor=>anchor.text));that.setData({message:t});//that.listener.stop();//that.session.stop();});

//需要调用一次start以启动that.session.start(errno=>{if(errno){//如果失败，将返回errno}else{//否则，返回null，表示成功that.ctx=wx.createCameraContext();that.listener=this.ctx.onCameraFrame((frame)=>{that.session.runOCR({frameBuffer:frame.data,//图片ArrayBuffer数据。RGBA格式width:frame.width,height:frame.height});});that.listener.start();}});}})在物理手机上运行这个程序，点击“启动OCR检测”按钮，然后对某个文字进行拍摄，将显示如图:8.7案例：基于手势的图像显示控制通过AI检测手势并根据手势进行不同的操作是一项很有意思的应用。下面编写一个简单的使用微信AI智能手势检测API接口的例子，以对本章的有关内容进行综合性应用。8.7.1案例目标编写一个简单的微信小程序，该程序可以通过相机检测用户的手势，并根据不同的手势显示不同的图像。8.7.2案例分析首先对界面设计进行分析：界面上应该改包含一个相机组件，用以显示视频流信息；还应该包括一个按钮，以启动手势检测；最后，还应该包括一个image组件，用以根据不同的手势检测结果显示不同的图像。再次，对页面的JS代码设计进行分析：在data中设置一个src属性用以指定界面中的image组件要显示的图像。参考本章中手势/人手检测的过程描述，首先创建VKSession对象，并通过该对象对手势进行检测，根据检测结果修改src属性值进而使image显示不同的图像。8.7.3案例实施首先新建一个名称为mini-ch08-02的微信小程序，在工程中新建名为images的目录，并在其中国放置一些图像。修改index.wxml文件为如下内容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><cameradevice-position="{{camera}}"flash="off"binderror="error"style="width:100%;height:200px;"></camera><buttonbindtap="detect"style="width:100%;">启动手势检测</button><imagesrc="{{src}}"style="width:100%;"mode="widthFix"></image>修改index.js为如下内容：//index.jsPage({gmap:newMap(),data:{src:'',camera:'back',//frontorback},on