在React Native中使用Firebase ML进行图像标注

图像标签让你深入了解图像的内容。在本教程中，我们将构建一个非Expo的React Native应用，使用Firebase的机器学习工具包对提供的图像进行标注。

Firebase

Firebase是一个由谷歌开发的用于创建移动和网络应用的平台。它最初是一家成立于2011年的独立公司。2014年，谷歌收购了该平台，现在它是他们的[应用开发旗舰产品]。

[Firebase的ML工具包]是一个移动SDK，它将谷歌的机器学习专业知识带到了安卓和iOS应用程序中。不需要对神经网络或模型优化有很深的了解就可以开始使用ML工具包。

另一方面，如果你是一个有经验的ML开发者，它还提供了API，帮助你在移动应用中使用自定义的[TensorFlow Lite模型]。

前提条件

要继续学习本教程。

• 你需要有React和React Native的基本知识。

• 你需要一个启用了Blaze计划的Firebase项目来访问Cloud Vision APIs。

概述

我们将在本文中讨论这些步骤。

1. 开发环境。
2. 安装依赖项。
3. 设置Firebase项目。
4. 设置Cloud Vision API。
5. 构建用户界面。
6. 添加媒体选择器。
7. 使用Firebase ML给图片加标签。
8. 其他配置。
9. 回顾一下。

开发环境

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

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

安装依赖项

你可以提前安装这些包，或者在浏览文章的时候安装。

"@react-native-firebase/app": "^10.4.0",
"@react-native-firebase/ml": "^10.4.0",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-image-picker": "^3.1.3"

要安装一个依赖项，请运行。

npm i --save <package-name>

安装完包后，对于iOS，进入你的ios/ 目录，然后运行。

pod install

对安卓来说很重要

当你在你的项目中添加更多的本地依赖，它可能会使你超过Android构建系统的64k方法限制。一旦你达到这个限制，你就会在试图构建你的Android应用程序时开始看到以下错误。

Execution failed for task ':app:mergeDexDebug'.

设置Firebase项目

前往Firebase控制台并登录到你的账户。

创建一个新的项目。

一旦你创建了一个新的项目，你就会看到仪表板。把你的项目升级到Blaze计划。

现在，点击Android图标，向Firebase项目中添加一个Android应用。

你将需要应用程序的包名来注册该应用程序。你可以在位于android/app/src/main/ 的AndroidManifest.xml 中找到包的名称。

一旦你输入包名并进入下一步，你可以下载google-services.json 文件。你应该把这个文件放到android/app 目录中。

添加该文件后，继续进行下一步。它将要求你在build.gradle 文件中添加一些配置。

首先，在你的android/build.gradle 文件中添加google-services 插件作为一个依赖项。

buildscript {
  dependencies {
    // ... other dependencies

    classpath 'com.google.gms:google-services:4.3.3'
  }
}

然后，通过在你的android/app/build.gradle 文件中添加以下内容来执行该插件。

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

你需要执行一些额外的步骤，为iOS 配置Firebase 。

我们应该在我们的应用程序中安装@react-native-firebase/app 包，以完成Firebase的设置。

npm install @react-native-firebase/app

设置Cloud Vision API

云端视觉API允许开发者在应用中集成视觉检测功能，如人脸和地标检测、图像标签、光学字符识别（OCR）和明确内容的标签。

ML工具包使用云视觉API来标记图像。

前往谷歌云控制台，选择你正在进行的谷歌项目。转到API和服务选项卡。

在API和服务标签中，前往图书馆部分。

搜索Cloud Vision API。

一旦你打开API页面，点击启用按钮。

一旦你启用了API，你会看到Cloud Vision API概述页面。

通过这个，你已经为你的Firebase项目设置了Cloud Vision API。这将使我们能够使用ML工具包来给图片贴标签。

构建用户界面

我们将在App.js文件中编写所有的代码。

让我们先在屏幕上添加2个按钮：take a photo 和pick a photo 。

import { StyleSheet, Text, ScrollView, View, TouchableOpacity } from 'react-native';

export default function App() {
  return (
    <ScrollView contentContainerStyle={styles.screen}>
      <Text style={styles.title}>Image Labeling</Text>
      <View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Take Photo</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.buttonText}>Pick a Photo</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

样式。

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontSize: 35,
    marginVertical: 40,
  },
  button: {
    backgroundColor: '#47477b',
    color: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 50,
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
  },
});

添加媒体选择器

让我们安装react-native-image-picker 来添加这些功能。

npm install react-native-image-picker

React Native Image Picker的最小目标SDK是21。如果你的项目的目标SDK低于21，在android/build.gradle 中提高minSDK目标。

安装完软件包后，从软件包中导入launchCamera 和launchImageLibrary 函数。

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

这两个函数都接受2个参数。第一个参数是相机或画廊的options ，第二个参数是一个回调函数。这个回调函数在用户选取图片或取消操作时被调用。

现在让我们添加2个函数，每个按钮一个。

const onTakePhoto = () => launchCamera({ mediaType: 'image' }, onImageSelect);

const onSelectImagePress = () => launchImageLibrary({ mediaType: 'image' }, onImageSelect);

让我们创建一个名为onImageSelect 的函数。这是我们要传递给launchCamera 和launchImageLibrary 函数的回调函数。我们将在这个回调函数中获得用户挑选的图片的细节。

我们应该只在用户不取消媒体采撷器的情况下启动图片标签。如果用户取消了操作，采摘器将在响应对象中发送一个didCancel 属性。

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    // Image Labeling Process
  }
};

现在，将这些函数传递给各自按钮的TouchableOpacity 的道具onPress 。

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
<View>

让我们创建一个状态，在用户界面上显示所选的图片。

import { useState } from 'react';

const [image, setImage] = useState();

现在，让我们在按钮下面添加一个图片组件来显示所选的图片。

<View>
  <TouchableOpacity style={styles.button} onPress={onTakePhoto}>
    <Text style={styles.buttonText}>Take Photo</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.button} onPress={onSelectImagePress}>
    <Text style={styles.buttonText}>Pick a Photo</Text>
  </TouchableOpacity>
  <Image source={{ uri: image }} style={styles.image} />
</View>

图像的样式。

image: {
  height: 300,
  width: 300,
  marginTop: 20,
  borderRadius: 10,
},

如果用户没有取消操作，我们应该用所选图片的URI通过onImageSelect 函数来设置图片状态。

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

使用Firebase ML给图片贴标签

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

npm install @react-native-firebase/ml

一旦软件包安装完毕，让我们导入该软件包。

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

我们应该使用ml 包中的cloudImageLabelerProcessImage 方法来处理图像并给图像贴标签。

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

const labels = await ml().cloudImageLabelerProcessImage(media.uri);

该函数将处理图像，并返回标签列表，以及机器学习服务对该标签的信心。

让我们设置一个状态来存储结果，并在用户界面中呈现它们。由于结果将是一个标签数组，让我们将初始状态设置为一个空数组。

const [labels, setLabels] = useState([]);

让我们把状态设置为cloudImageLabelerProcessImage 函数的响应。

const onImageSelect = async (media) => {
  if (!media.didCancel) {
    setImage(media.uri);
    const label = await ml().cloudImageLabelerProcessImage(media.uri);
    setLabels(label);
  }
};

我们将使用这个状态来在用户界面中呈现细节。

{labels.map((item, i) => (
  <View style={{ marginTop: 20, width: 300 }} key={i}>
    <Text>Label: {item.text}</Text>
    <Text>Confidence: {item.confidence}</Text>
  </View>
))}

额外的配置

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

• confidenceThreshold。设置检测到的标签在[0.0 - 1.0]范围内的信心阈值。只有检测到的置信度高于该阈值的标签才会被返回。

• apiKeyOverride。这是要用于ML API的API密钥。如果不设置，将使用来自firebase.app() 的默认 API 密钥。

• enforceCertFingerprintMatch。只允许具有匹配证书指纹的注册应用程序实例使用ML API。

例子。

await ml().cloudImageLabelerProcessImage(imagePath, {
  confidenceThreshold: 0.8, // undefined | number
  apiKeyOverride: "<-- API KEY -->",  undefined | string,
  enforceCertFingerprintMatch: true, // undefined | false | true,
});

让我们回顾一下

1. 我们建立了我们的开发环境并创建了一个React Native应用。

2. 我们创建了一个Firebase项目。

3. 我们设置了Cloud Vision API来使用Firebase ML Kit中的图像标签器。

4. 我们为这个应用建立了一个简单的用户界面。

5. 我们添加了react-native-image-picker 包，以使用图库挑选图片或使用相机捕捉图片。

6. 我们安装了Firebase ML包。

7. 我们使用ml 包中的cloudImageLabelerProcessImage 方法来标记图像。

8. 我们在用户界面中显示了结果。

9. 我们了解了可以传递给cloudImageLabelerProcessImage 函数的额外配置。