反応ネイティブにおけるFirebase MLを用いた画像ラベリング

画像ラベリングは、画像の内容に洞察力を与える.このチュートリアルでは、FireBaseからのマシンの学習キットを使用して提供されるイメージにラベルを付けるために、非EXPO反応ネイティブアプリケーションを構築します.

火の粉

FireBaseプラットフォームは、GoogleのモバイルおよびWebアプリケーションを作成するために開発されます.元々は2011年創業の独立会社.2014年に、Googleはプラットフォームを買収しましたflagship offering for app development .
Firebase's ML kit AndroidのとIOSのアプリにGoogleのマシンの学習の専門知識をもたらすモバイルSDKです.MLキットから始めるためにニューラルネットワークまたはモデル最適化の深い知識を持つ必要はありません.
一方、経験豊富なML開発者であれば、カスタムを使用するためのAPIも提供しますTensorFlow Lite models あなたの携帯アプリで.

必要条件

このチュートリアルを続行するには、次の手順に従います.

あなたは反応＆基本的な反応の基本的な知識が必要になります.

を使用してFireBaseプロジェクトが必要になりますBlaze plan クラウドビジョンAPIにアクセスできます.

概要

この記事ではこれらの手順を実行します.

開発環境.

依存関係のインストール

FireBaseプロジェクトの設定

クラウドビジョンAPIの設定

UIのビルド.

メディアピッカーの追加.

FireBase MLを使用した画像のラベル付け

追加の設定.

要約

最後のコードを見てくださいGitHub Repository .

開発環境

IMPORTANT - We will not be using Expo in our project.

あなたは次のことができますthis documentation 環境を設定し、新しい反応アプリを作成します.
あなたがExpert CLI QuickStartでなく、反応するネイティブの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

IMPORTANT FOR ANDROID

As you add more native dependencies to your project, it may bump you over the 64k method limit on the Android build system. Once you reach this limit, you will start to see the following error while attempting to build your Android application.

Execution failed for task ':app:mergeDexDebug'.

Use this documentation to enable multidexing.
To learn more about multidex, view the official Android documentation.

FireBaseプロジェクトの設定

ヘッドトゥーザFirebase console そして、あなたの口座にサインしてください.
新しいプロジェクトを作成します.

新しいプロジェクトを作成すると、ダッシュボードが表示されます.プロジェクトをブレーズ計画にアップグレードします.

AndroidのアプリをFireBaseプロジェクトに追加するには、Androidのアイコンをクリックします.

アプリケーションを登録するアプリケーションのパッケージ名が必要です.パッケージ名はAndroidManifest.xml それはandroid/app/src/main/ .

パッケージ名を入力し、次のステップに進むと、ダウンロードできますgoogle-services.json ファイル.このファイルをandroid/app ディレクトリ.

ファイルを追加したあと、次の手順に進みます.それはあなたにいくつかの設定を追加するよう求めますbuild.gradle ファイル.
まず、google-services プラグインの中の依存関係android/build.gradle ファイル

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'

いくつかの追加手順を実行する必要がありますFirebase for iOS . フォローthis documentation 設定する.
インストールする必要があります@react-native-firebase/app 我々のアプリのパッケージFireBaseの設定を完了します.

npm install @react-native-firebase/app

クラウドビジョンAPIの設定

The Cloud Vision API 開発者は、顔やランドマークの検出、画像のラベリング、光学式文字認識(OCR)、明示的なコンテンツのタグ付けのようなアプリケーション内のビジョン検出機能を統合することができます.
MLキットは、画像をラベルするために、クラウドビジョンAPIを使用します.
ヘッドトゥGoogle Cloud Console そして、あなたが取り組んでいるGoogleプロジェクトを選択します.タブに移動します.

タブで、ライブラリのセクションに頭を入れます.

クラウドビジョンAPIの検索.

APIページを開くと、Enabledボタンをクリックします.

APIを有効にすると、クラウドビジョンAPIの概要ページが表示されます.

これにより、FireBaseプロジェクトのクラウドビジョンAPIを設定しました.これは、MLのキットを使用して画像をラベル付けすることができます.

UIのビルド

我々は、アプリケーション内のすべてのコードを書くことでしょう.jsファイル.
画面に2ボタンを追加することから始めましょうtake a photo and 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

The minimum target SDK for the React Native Image Picker is 21. If your project targets an SDK below 21, bump up the minSDK target in android/build.gradle.

パッケージがインストールされた後、launchCamera and launchImageLibrary パッケージからの関数.

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

両方の関数は2つの引数を受け付けます.最初の引数はoptions カメラやギャラリーでは、2番目の引数はコールバック関数です.このコールバック関数は、ユーザーがイメージを選択したり、操作をキャンセルしたときに呼び出されます.
チェックアウトAPI Reference これらの関数の詳細については.
今、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
  }
};

あなたは私たちがから得た応答オブジェクトについてもっと知ることができますlaunchCamera とlaunchImageLibrary 関数here .
さて、これらの関数をonPress の柱TouchableOpacity それぞれのボタンに対して.

<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>

選択したイメージをUIに表示する状態を作成します.

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';

我々はcloudImageLabelerProcessImage メソッドml 画像を処理し、画像にラベルを付けるパッケージ.
選択した画像のURIをこの関数に渡します.

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

この関数はイメージを処理し、ラベルのリストを返します.
結果を保存し、UIにそれらをレンダリングする状態を設定しましょう.結果はラベルの配列になりますので、空の配列に初期状態を設定しましょう.

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

の応答に状態を設定しましょうcloudImageLabelerProcessImage 関数.

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

この状態を使用してUIの詳細を表示します.

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

追加設定

The cloudImageLabelerProcessImage メソッドは、任意の構成オブジェクトを受け入れます.

ConfidCirThreshold :検出されたラベルの[ 0.0 - 1.0 ]の範囲で信頼しきい値を設定します.この閾値より高い信頼性で検出されるラベルだけが返されます.

ApakeyoVerride :これはML API用APIキーです.設定されていない場合は、デフォルトのAPIキーfirebase.app() が使用されます.

EnforceCertFingerPrintMatch :一致する証明書指紋を使用して登録されたアプリケーションインスタンスのみを使用して、ML APIを使用します.

例:

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

再生しましょう

我々は開発環境を設定し、反応ネイティブアプリケーションを作成しました.

FireBaseプロジェクトを作成しました.

FireBase MLキットでイメージラベラーを使用するには、クラウドビジョンAPIを設定します.

我々は、アプリケーションのためのシンプルなUIを構築しました.

我々はreact-native-image-picker パッケージは、ギャラリーを使用して画像を選択するか、カメラを使用して画像をキャプチャします.

Firebase MLパッケージをインストールしました.

我々はcloudImageLabelerProcessImage メソッドml 画像をラベルするパッケージ.

UIで結果を表示しました.

私たちは、私たちがcloudImageLabelerProcessImage 関数.

おめでとう.🥳 あなたはそれをした.
読書ありがとう!