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

鸿蒙原生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 = null
  
    build() {
      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
      }
    }
  
    // 根据图片路径转PixelMap
    async 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模拟器成功出效果。其他版本都不行。所以建议有条件还是上真机。