在React Native中使用Firebase ML进行地标识别

在本教程中，我们将构建一个没有Expo的React Native应用，利用Firebase的机器学习套件从图像中识别地标。

Firebase

Firebase是谷歌的移动平台，可以帮助你快速开发高质量的应用程序并发展你的业务。

Firebase的ML工具包是一个移动SDK，它将谷歌的机器学习专长带到了安卓和iOS应用中。不需要有神经网络或模型优化的深厚知识就可以开始使用ML工具包。另一方面，如果你是一个有经验的ML开发者，本文将提供API，帮助你在移动应用中使用自定义的TensorFlow Lite模型。

前提条件

要继续学习本教程。

你需要有React和React Native的基本知识。
你需要一个启用了Blaze计划的Firebase项目来访问Cloud Vision APIs。

开发环境

重要的是--我们将不会在我们的项目中使用Expo。

确保你遵循的是React Native CLI Quickstart，而不是Expo CLI Quickstart。

Env Setup

前往Firebase控制台并创建一个新项目。

确保你为你的Firebase项目启用Cloud Vision API。

克隆启动代码

为了更专注于ML工具包，我准备了一个启动代码。

在启动代码中，我添加了两个按钮。一个用于从图片库中挑选照片，一个用于使用react-native-image-picker 库拍摄照片。当用户选择图片时，使用一个状态来存储图片的URI并在用户界面上显示。

With Image

从图片中识别地标

让我们来安装Firebase ML的软件包。

npm install @react-native-firebase/ml

在App.js中，导入Firebase ML包。

import ml from '@react-native-firebase/ml';

ml 包中的cloudLandmarkRecognizerProcessImage 方法是用来处理图像并获得图像中的地标的。

我们应该把所选图片的URI传给这个函数。

我已经设置了一个名为onImageSelect 的函数，当用户选择图像时，它将被调用。

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
    // Recognize Landmarks Here
  }
};

我们应该在这个函数中调用cloudLandmarkRecognizerProcessImage ，以识别所选图像中的地标。

const landmarks = await ml().cloudLandmarkRecognizerProcessImage(media.uri);

该函数将处理图像，并返回图像中被识别的地标列表以及。

图像上地标的4点坐标。
地标的纬度和经度。
机器学习服务对其结果的信心。
用于谷歌知识图谱搜索API的实体ID。

让我们设置一个状态来存储结果。由于结果将是一个地标数组，初始状态应该是一个空数组。

const [landmarks, setLandmarks] = useState([]);

让我们把这个状态设置为cloudLandmarkRecognizerProcessImage 函数的响应。

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
    const landmarks = await ml().cloudLandmarkRecognizerProcessImage(
      media.uri,
    );
    setLandmarks(landmarks);
  }
};

我们将使用我们设置的状态来渲染用户界面。

{landmarks.map((item, i) => (
  <View style={{ marginTop: 20, width: 300 }} key={i}>
    <Text>LandMark: {item.landmark}</Text>
    <Text>BoundingBox: {JSON.stringify(item.boundingBox)}</Text>
    <Text>Coordinates: {JSON.stringify(item.locations)}</Text>
    <Text>Confidence: {item.confidence}</Text>
    <Text>Confidence: {item.entityId}</Text>
  </View>
))}

Final Result

额外的配置

cloudLandmarkRecognizerProcessImage 方法接受一个可选的配置对象。

maxResults：设置这种类型的结果的最大数量。
modelType：设置用于检测的模型类型。默认情况下，该函数将使用STABLE_MODEL 。然而，如果你觉得结果不是最新的，你也可以使用LATEST_MODEL 。
apiKeyOverride：用于ML API的API密钥。如果没有设置，将使用来自firebase.app() 的默认 API 密钥。
enforceCertFingerprintMatch：只允许具有匹配证书指纹的注册应用实例使用ML API。

例子。

import ml, { MLCloudLandmarkRecognizerModelType } from '@react-native-firebase/ml';

await ml().cloudImageLabelerProcessImage(imagePath, {
  maxResults: 2, // undefined | number
  modelType: MLCloudLandmarkRecognizerModelType.LATEST_MODEL, // LATEST_MODEL | STABLE_MODEL
  apiKeyOverride: "<-- API KEY -->",  // undefined | string,
  enforceCertFingerprintMatch: true, // undefined | false | true,
});

结论

我们使用Firebase ML包从用户使用cloudLandmarkRecognizerProcessImage 方法选择的图像中识别出地标。我们还了解了我们可以传递给cloudLandmarkRecognizerProcessImage 方法的额外配置。

如何在React Native中使用Firebase ML进行地标识别