鸿蒙(HarmonyOS)原生AI能力之文本识别

鸿蒙(HarmonyOS)原生AI能力之文本识别

原生智能介绍

• 在之前开发中，很多场景我们是通过调用云端的智能能力进行开发。例如文本识别、人脸识别等。

• 原生即指将一些能力直接集成在本地鸿蒙系统中，通过不同层次的AI能力开放，满足开发者的不同场景下的诉求，降低应用开发门槛，帮助开发者快速实现应用智能化

有哪些原生智能能力

• 基础视觉服务
• 基础语音服务
• 端侧模型部署
• 端侧推理
• 意图框架
• .........

基础视觉服务 - Core Vision Kit

• Core Vision Kit（基础视觉服务）是机器视觉相关的基础能力，接下来要导入的类，都在@kit.VisionKit中例如本篇要讲的文字识别即是如此。

文本识别介绍与使用

• 概念：将图片中的文字给识别出来

• 使用 textRecognition 实现文本识别

• 限制：

  • 仅能识别5种语言类型
    • 简体中文、繁体中文、英文、日文、韩文

• 使用步骤

  1. 导入textRecognition

     import { textRecognition } from '@kit.CoreVisionKit'
     

  2. 实例化visionInfo对象，用来准备待识别的图片（需PixelMap类型）

     let visionInfo: textRecognition.VisionInfo = {pixelMap: '待识别图片'
     };
     

  3. 实例化TextRecognitionConfiguration对象，设置识别配置（目前仅有是否开启朝向检测一项配置）

     let textConfiguration: textRecognition.TextRecognitionConfiguration = {// 是否开启朝向检测isDirectionDetectionSupported: false
     };
     

  4. 调用textRecognition的recognizeText接口传入以上两个对象，开启识别并对识别结果进行处理，得到的是TextRecognitionResult类型结果，这个对象的value属性即为识别结果

     textRecognition.recognizeText(visionInfo, textConfiguration)
     

• 这里解释一下这几步

  • 你需要用textRecognition，所以需要先找到它，也即导入，这没什么好说的

  • 你需要用它来帮你识别图片，那你是不是应该把需要识别的图片给它？所以第一个参数就是给他传递一个图片，只不过这个图片只能传PixelMap类型的（这就是为什么上篇我要写PixMap的原因），但是这个图片不能直接传，要包装成VisionInfo类型的对象（虽然目前为止，这个对象只有这一个属性，但保不齐未来会加）

    然后就是设置一下它识别的相关参数，它目前也只有一个参数，叫isDirectionDetectionSupported，设置是否开启朝向检测，因为有的图片可能是正的，有的图片可能是反的斜的。所以对于反的斜的图片如果这项开启为true，则会检测的更为准确。但是经过猫林老师肉测，其实开不开启扫描反的斜的图片，得到的结果都差不多了。所以可以看自己选择。顺便一提，这个参数可以不传，不传默认是true。然后猫林老师觉得：未来随着API发展，可能会多一些参数也说不准

  • 最后即为调用其进行识别的方法，也即recognizeText开始识别

  • 根据上面所说的，其实上面说的四步，也可以极简改为两步，代码如下

    import { textRecognition } from '@kit.CoreVisionKit'textRecognition.recognizeText({ pixelMap: '待识别图片' })
    

    • 解释：这里就相当于没传第二个参数，它默认值即为true，也即开启朝向检测。

  • 至于如何读取相册图片，以及把图片解码变成PixelMap，不是今天分享的主题，且之前猫林老师有两篇文章分别讲过不会的可以看之前文章，所以这里直接给代码（可看注释）

    // 1. 使用PhotoViewPicker选择相册图片
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    // 2. 使用select方法开始选择图片photoPicker.select({// 设置只选择图片MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,// 设置最大只能选择1张maxSelectNumber: 1
    })
    .then((res: photoAccessHelper.PhotoSelectResult) => {// res参数里的photoUris属性即为选择的图片结果数组（因为可以选择多张），每个元素得到的是临时路径// 用fs打开这个路径let fileSource = fileIo.openSync(res.photoUris[0], fileIo.OpenMode.READ_ONLY);// 使用createImageSource方法将图片文件流常见成图片源码let imageSource = image.createImageSource(fileSource.fd);// 再使用createPixelMap方法，将图片源码制作成PixelMap类型const pixelMap = imageSource.createPixelMapSync()// 后续使用textRecognition的recognizeText那一套代码进行识别即可
    })
    

文本识别展示案例

• 我们来实现如下图的效果

  

  • 界面上从上往下放:
    • Image：显示选择的待识别图片
    • Button：选择相册里的图片
    • Button：开始识别按钮
    • TextArea：显示识别后的结果，使用TextArea的原因是它对比Text会多一个滚动效果（防止内容过多显示不全）

• 结合上面说的使用方法，最终文本识别代码如下

  import { photoAccessHelper } from '@kit.MediaLibraryKit'
  import { fileIo } from '@kit.CoreFileKit'
  import { image } from '@kit.ImageKit'
  import { textRecognition } from '@kit.CoreVisionKit'@Entry
  @Component
  struct Index {@State text: string = '识别结果'@State imgPixelMap: PixelMap | null = nullbuild() {Column({ space: 20 }) {Button('打开图片').width('85%').onClick(async () => {const uri = await this.selectPhoto()if (uri) {const pixelMap = await this.getPixMap(uri)this.imgPixelMap = pixelMap}})Button('开始识别').width('85%').onClick(() => {this.recognize()})Image(this.imgPixelMap).objectFit(ImageFit.Contain).height('45%')Text(this.text).width('85%').layoutWeight(1).border({ style: BorderStyle.Dotted, width: 5, color: Color.Red })}.width('100%').height('100%')}async selectPhoto() {try {// 实例化照片选择器const picker = new photoAccessHelper.PhotoViewPicker()// 选择图片const uris = await picker.select({MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,maxSelectNumber: 1})return uris.photoUris[0]} catch {console.log('err')return null}}// 根据图片路径转PixelMapasync getPixMap(uri: string) {try {const imgSrc = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY)let source = image.createImageSource(imgSrc.fd)return source.createPixelMapSync()} catch {console.log('error' + uri)return null}}// 文字识别async recognize() {const info: textRecognition.VisionInfo = {pixelMap: this.imgPixelMap!}const res = await textRecognition.recognizeText(info, {isDirectionDetectionSupported: false})this.text = res.value}
  }
  

总结

• 今天猫林老师给大家分享了鸿蒙提供的原生AI能力。其实听起来名字很高大上，用起来非常简单。这是因为鸿蒙帮我们做了高度封装，我们无须再关注OCR的相关知识，只需要使用鸿蒙提供的接口即可。所以，华为为了推广鸿蒙，发展鸿蒙生态，真的为开发者想了好多。这样的华为，你爱了吗？
• 友情提醒：本篇内容只适合用真机测试，模拟器无法出效果。
• P.S：根据猫林老师肉测，在API12版本中的Mac模拟器成功出效果。其他版本都不行。所以建议有条件还是上真机。