目录

AI Image Recognition

Use Cases

AI image recognition provides scenario-based text recognition, subject segmentation, and image search functions by aggregating AI capabilities such as Optical Character Recognition (OCR), subject segmentation, entity recognition, and multi-object recognition. The main switch for AI image recognition is in the basic control API list. If you accept the default interaction and functions of AI image recognition, you only need to use the related enabling APIs provided by the basic controls to turn on the function switch. The APIs described in this document are used together with basic controls to meet your customization requirements, help you implement fine-grained control over the interaction of the AI image recognition function, and obtain analysis results such as text recognition and image segmentation for you to develop extended services. Currently, the supported basic controls include Image, Video, and XComponent. Your customization requires collaboration of the basic controls. For example, to recognize static images, use the Image control; to recognize frames displayed when videos are paused, use the Video control; to recognize images in scenarios such as customized rendering, use the XComponent control.

AI image recognition provides the following functions:

Here are some suggestions for using AI image recognition:

Figure 1 AI image recognition

Constraints

Development Procedure

  1. Add classes related to the AI image recognition control.

    import { visionImageAnalyzer } from '@kit.VisionKit';
import { BusinessError } from '@kit.BasicServicesKit';

  2. Initialize the VisionImageAnalyzerController object.

    private visionImageAnalyzerController: visionImageAnalyzer.VisionImageAnalyzerController = new visionImageAnalyzer.VisionImageAnalyzerController();
private isSupportImageAnalyzer: boolean = false;

  3. Check whether the device supports AI image recognition. If yes, subscribe to related events and add the event listener cancellation method.

    aboutToAppear(): void {
  let supportTypes = this.visionImageAnalyzerController.getImageAnalyzerSupportTypes();
  if (supportTypes.length > 0) {
    this.isSupportImageAnalyzer = true;
    this.registerListener();
  }
}

registerListener(){
  this.visionImageAnalyzerController.on('imageAnalyzerVisibilityChange', (visibility: visionImageAnalyzer.ImageAnalyzerVisibility) => {
    console.info('DEMO_TAG', `imageAnalyzerVisibilityChange result: ${JSON.stringify(visibility)}`)
  });
  this.visionImageAnalyzerController.on('textAnalysis', (text: string) => {
    console.info('DEMO_TAG', `textAnalysis result: ${JSON.stringify(text)}`);
  });
  this.visionImageAnalyzerController.on('selectedTextChange', (selectedText: string) => {
    console.info('DEMO_TAG', `selectedTextChange result: ${JSON.stringify(selectedText)}`);
  });
  this.visionImageAnalyzerController.on('subjectAnalysis', (subjects: visionImageAnalyzer.Subject[]) => {
    console.info('DEMO_TAG', `subjectAnalysis result: ${JSON.stringify(subjects)}`);
  });
  this.visionImageAnalyzerController.on('selectedSubjectsChange', (subjects: visionImageAnalyzer.Subject[]) => {
    console.info('DEMO_TAG', `selectedSubjectsChange result: ${JSON.stringify(subjects)}`);
  });
  this.visionImageAnalyzerController.on('analyzerFailed', (error: BusinessError) => {
    console.error('DEMO_TAG', `analyzerFailed result: ${JSON.stringify(error)}`);
  });
}

aboutToDisappear(): void {
  this.visionImageAnalyzerController.off('imageAnalyzerVisibilityChange');
  this.visionImageAnalyzerController.off('textAnalysis');
  this.visionImageAnalyzerController.off('selectedTextChange');
  this.visionImageAnalyzerController.off('subjectAnalysis');
  this.visionImageAnalyzerController.off('selectedSubjectsChange');
  this.visionImageAnalyzerController.off('analyzerFailed');
}

  4. Bind the VisionImageAnalyzerController object to control interactions related to image recognition.

    build() {
  Stack() {
    // Replace the image with your own one stored in the resources/base/media directory. The values of types must be a subset of supportTypes defined in the previous step.
    Image($r('app.media.img'), {
      types: [ImageAnalyzerType.TEXT, ImageAnalyzerType.SUBJECT, ImageAnalyzerType.OBJECT_LOOKUP],
      aiController: this.visionImageAnalyzerController
    })
      .width('100%')
      .height('100%')
      .enableAnalyzer(this.isSupportImageAnalyzer ? true: false)
      .objectFit(ImageFit.Contain)
  }.width('100%').height('100%')
}

Development Example

[h2]Index.ets

import { visionImageAnalyzer } from '@kit.VisionKit';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct ImageDemo {
  private visionImageAnalyzerController: visionImageAnalyzer.VisionImageAnalyzerController = new visionImageAnalyzer.VisionImageAnalyzerController();
  private isSupportImageAnalyzer: boolean = false;
  aboutToAppear(): void {
    let supportTypes = this.visionImageAnalyzerController.getImageAnalyzerSupportTypes();
    if (supportTypes.length > 0) {
      this.isSupportImageAnalyzer = true;
      this.registerListener();
    }
  }

  registerListener(){
    this.visionImageAnalyzerController.on('imageAnalyzerVisibilityChange', (visibility: visionImageAnalyzer.ImageAnalyzerVisibility) => {
      console.info('DEMO_TAG', `imageAnalyzerVisibilityChange result: ${JSON.stringify(visibility)}`)
    });
    this.visionImageAnalyzerController.on('textAnalysis', (text: string) => {
      console.info('DEMO_TAG', `textAnalysis result: ${JSON.stringify(text)}`);
    });
    this.visionImageAnalyzerController.on('selectedTextChange', (selectedText: string) => {
      console.info('DEMO_TAG', `selectedTextChange result: ${JSON.stringify(selectedText)}`);
    });
    this.visionImageAnalyzerController.on('subjectAnalysis', (subjects: visionImageAnalyzer.Subject[]) => {
      console.info('DEMO_TAG', `subjectAnalysis result: ${JSON.stringify(subjects)}`);
    });
    this.visionImageAnalyzerController.on('selectedSubjectsChange', (subjects: visionImageAnalyzer.Subject[]) => {
      console.info('DEMO_TAG', `selectedSubjectsChange result: ${JSON.stringify(subjects)}`);
    });
    this.visionImageAnalyzerController.on('analyzerFailed', (error: BusinessError) => {
      console.error('DEMO_TAG', `analyzerFailed result: ${JSON.stringify(error)}`);
    });
  }

  aboutToDisappear(): void {
    this.visionImageAnalyzerController.off('imageAnalyzerVisibilityChange');
    this.visionImageAnalyzerController.off('textAnalysis');
    this.visionImageAnalyzerController.off('selectedTextChange');
    this.visionImageAnalyzerController.off('subjectAnalysis');
    this.visionImageAnalyzerController.off('selectedSubjectsChange');
    this.visionImageAnalyzerController.off('analyzerFailed');
  }

  build() {
    Stack() {
      Image($r('app.media.img'), {
        types: [ImageAnalyzerType.TEXT, ImageAnalyzerType.SUBJECT, ImageAnalyzerType.OBJECT_LOOKUP],
        aiController: this.visionImageAnalyzerController
      })
        .width('100%')
        .height('100%')
        .enableAnalyzer(this.isSupportImageAnalyzer ? true : false)
        .objectFit(ImageFit.Contain)
    }.width('100%').height('100%')
  }
}