30분 이내에 React Native에서 이미지 인식 응용 프로그램을 구축하는 방법

몇 달 동안 저는 React Native에 푹 빠졌습니다. Ionic 프레임워크에서 개발을 한 후에 웹뷰가 아닌 본 컴퓨터의 구성 요소를 통해 보여준 응용 프로그램의 성능에 흥분했습니다.
간단한 응용 프로그램을 구축하여 React Native의 카메라 구성 요소 (https://github.com/react-native-community/react-native-camera 를 사용하여 사진을 찍은 다음 이 이미지의 Base64 표시를 무료 Clarifai Predict image API (https://clarifai.com/ 에 전달하여 이미지의 내용을 설명할 것입니다.
Clarifai API는 무료이며 설치와 사용이 매우 간단하여 그림에서 설명을 얻을 수 있습니다.

이 강좌는 NodeJS 및 React Native가 이미 설치되어 있다고 가정합니다.만약 네가 이렇게 하지 않는다면, https://facebook.github.io/react-native/docs/getting-started.html로 가서 시작해라.또한 React 및 NodeJS에 대해 기본적으로 알고 있다고 가정합니다.
https://clarifai.com/developer/account/signup로부터 무료 Clarifai API 키를 받아야 합니다.

뭐 공부 해요?

React 구성 요소 2개를 직접 만듭니다.

내장된 React 기본 카메라 구성 요소를 렌더링하는 카메라 미리 보기 구성 요소입니다.이것은 카메라의 미리보기를 처리하고 이미지의 내용을 식별하는 모든 논리를 포함한다

사용자가 버튼을 눌러 사진을 찍고 버튼을 사용하지 않는 상태를 처리하는 촬영 단추 구성 요소입니다.

갑시다

우선, 새로운 React 원본 프로그램을 초기화해야 합니다.

react-native init imageRecogitionReactNativeDemo

그리고 CD를 새 React Native projects 디렉터리에 넣고 다음 명령을 실행하여 iOS 시뮬레이터를 시작합니다.

cd imageRecogitionReactNativeDemo
react-native run-ios

다음은 우리가 사용할 내장 React 로컬 카메라 구성 요소를 설치할 것이다

npm install react-native-camera --save~

그리고 우리는 우리의 새 도서관을 연결하고 싶다

react-native link react-native-camera

Clarifai를 설치해야 합니다. 이것이 바로 우리가 이미지를 통해 신분을 얻는 이유입니다.

npm install clarifai

정보에 NSCameraUsageDescription을 추가해야 합니다.plist 파일, 그렇지 않으면 프로그램이 붕괴됩니다.이것은 아주 작은 설명일 뿐, 응용 프로그램이 어떻게 카메라를 사용할 것인지를 설명할 수 있다.따라서 다음 내용을 귀하의 정보에 추가합니다.프로젝트의 iOS 폴더에 있는plist 파일입니다.

<key>NSCameraUsageDescription</key>
<string>This app requires the camera to take an image to be identified</string>

현재 거의 모든 설정을 마쳤기 때문에 두 개의 구성 요소를 구축할 준비가 되어 있습니다.
우선, 우리는 우리의 카메라 부품을 세우고 싶다. 모든 다른 것을 거행할 것이다.
"components"라는 폴더를 만들고 이 폴더에 카메라를 만듭니다.js 파일.
페이지 맨 위에서, 우리는 React와 차원, 경보, 스타일시트, Activity Indicator 모듈을 React Native에서use로 가져오기를 희망합니다.

import React from 'react';
import { Dimensions, Alert, StyleSheet, ActivityIndicator } from 'react-native';

그리고 NPM을 통해 설치된 React 본체 카메라 모듈을 실제로 가져옵니다.

import { RNCamera } from 'react-native-camera';

포획 단추 구성 요소도 가져오지만, 잠시 후에 토론할 것입니다.
카메라 클래스 설정

export default class Camera extends React.Component {

}

다음에 우리는 카메라 구성 요소의 상태를 설정해야 하기 때문에 카메라 종류를 위한 구조 함수를 만들어야 한다.우리는 두 개의 상태 변수를 설정해야 한다

경고에 표시할 텍스트, 이미지에서 식별된 내용을 포함하는 단어 (identifiedAs라고 함)

카메라가 마운트 상태인지 확인하는 부울 값(이미지의 내용을 식별할 때 활동 표시기와 함께 사용).

그래서 너의 구조 함수는 이렇게 될 거야.

constructor(props){
    super(props);

    this.state = { 
        identifedAs: '',
        loading: false
    }
}

Camera 클래스의render 함수에서 React Native Camera 구성 요소 문서에 다음 코드를 추가하고자 합니다.이것은 React Native에서만 내장 카메라 구성 요소를 불러옵니다.

<RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}></RNCamera>

이제 버튼을 추가해서 사진을 찍도록 하겠습니다. 이를 위해 새로운 구성 요소를 만들 것입니다.
CaptureButton을 계속 생성합니다.구성 요소 폴더의 js 구성 요소입니다.
여기서 React Native에서 버튼과 Touchable Highlight 구성 요소를 가져오려고 합니다.기본 스타일시트 모듈 및 React

import React  from 'react';
import { StyleSheet, Button, TouchableHighlight } from 'react-native';

그리고 이 클래스의 렌더링 함수에 Touchable Highlight 구성 요소 https://facebook.github.io/react-native/docs/touchablehighlight 와 단추 구성 요소를 추가하여 기본 iOS와 Android 스타일을 얻을 것입니다.우리는 또한 기본 스타일 도구를 통해 자신의 스타일을 추가할 것이다.비활성화된 도구를 사용해야 합니다. 아버지 카메라 상태에서 전달된 도구를 받아들여야 합니다.js 구성 요소.

<TouchableHighlight style={styles.captureButton} disabled={this.props.buttonDisabled}>
    <Button onPress={this.props.onClick} disabled={this.props.buttonDisabled} title="Capture" accessibilityLabel="Learn more about this button"/>
</TouchableHighlight>

사용자가 눌렀을 때 무엇을 해야 하는지 알 수 있도록 이 단추에 누르는 이벤트를 추가하고 싶습니다.이를 위해, 우리는 onPress 이벤트를 추가하고, 이를 위해 아버지 카메라에서 온 도구를 제공할 것입니다.우리는 이전에 js 구성 요소가 하나 있었는데, 그것은 카메라 내부의 함수였다.js.
우리는 버튼을 눌렀을 때 이 버튼을 사용하지 않기를 희망하기 때문에 카메라에서 내려온 일부 도구를 다시 사용할 것이다.js 구성 요소, 단추가 아니라 사진 촬영 여부를 결정하는 카메라 구성 요소이기 때문입니다.
단추를 위로 밀어 배경과 원각을 만드는 스타일을 추가합시다.

const styles = StyleSheet.create({
    captureButton: {
        marginBottom:30,
        width:160,
        borderRadius:10,
        backgroundColor: "white",
    }
});

그리고 이 스타일을 TouchableHighlight 구성 요소의 스타일 속성에 추가하기만 하면 됩니다.

style={styles.captureButton}

그러니까 전반적으로 너의 버튼.js는 그럴 거예요.

import React  from 'react';
import { StyleSheet, Button, TouchableHighlight } from 'react-native';

export default class CaptureButton extends React.Component {
    render() {
        return (
            <TouchableHighlight style={styles.captureButton} disabled {this.props.buttonDisabled}>
                <Button onPress={this.props.onClick} disabled={this.props.buttonDisabled} title="Capture" accessibilityLabel="Learn more about this button"/>
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    captureButton: {
        marginBottom:30,
        width:160,
        borderRadius:10,
        backgroundColor: "white"
    }
});

이제 니 카메라로 돌아와.js 구성 요소, 렌더링 함수는 이렇습니다.우리는 스타일 도구를 통해 미리 보기 영역에 스타일을 추가하고 자신의 단추 비활성화 도구를 추가하여 카메라의 불러오는 상태를 하위 단추 구성 요소로 보냅니다.또한 onClick 도구를 추가하여 takePicture () 함수에 바인딩합니다.

render() {
    return (
        <RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}>
            <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
        </RNCamera>
    );
}

식별 중인 이미지를 사용자에게 표시하기 위해 활동 표시기(https://facebook.github.io/react-native/docs/activityindicator를 추가하고자 합니다.
따라서 이전에 가져온 React Native의 활동 표시기 구성 요소를 사용합니다.

<ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>

이를 위해 기본 애니메이션 도구를 사용하고 클래스의 불러오는 상태로 설정하여 상태가 업데이트될 때 Activity Indicator가 상응하는 표시/숨기기를 원합니다.
전반적으로 말하자면, 우리의 Activity Indicator와 우리의 포획 단추 구성 요소, 즉 카메라의 렌더링 기능을 추가했다.js 구성 요소는 다음과 같습니다.

render() {
    return (
        <RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}>
            <ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>
            <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
        </RNCamera>
    );
}

또한 스타일시트 모듈을 통해 일부 스타일을 추가하여 카메라 미리보기와 마운트 표시기를 중앙에 배치하고, 사이즈 가져오기 동적으로 카메라 미리보기가 휴대전화 화면의 전체 폭과 높이를 차지하도록 합니다.

const styles = StyleSheet.create({
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
    },
    loadingIndicator: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

이제 UI를 다 정리해야 해요. 사진 찍는 기능을 추가하고 싶어요.우선 단추의 클릭 이벤트를 연결해야 합니다.우리가 만든 js 구성 요소입니다.이 코드는 대부분 React Native Camera components 문서에서 나왔지만 요약하겠습니다.
이것은 비동기 함수이다

takePicture = async function(){

}

그리고 카메라가 초기화되었는지 확인하고 사진을 찍은 후에 우리는 카메라의 미리보기를 멈추고 우리가 찍은 사진에

// Pause the camera's preview
this.camera.pausePreview();

그리고 우리는 이미지의 라벨을 계산하기 위해 카메라의 상태를 간단하게 업데이트할 수 있다.

// Update the state to indicate loading
this.setState((previousState, props) => ({
    loading: true
}));

그리고 우리는 이 사진을 실제로 촬영하고 이 사진을 얻으려고 한다.

//Set the options for the camera
const options = {
    base64: true
};

// Get the base64 version of the image
const data = await this.camera.takePictureAsync(options)

그리고 새 함수를 호출합니다. 이 함수는 이미지의 Base64 표현 형식으로 Clarifai API에 전달됩니다.

this.identifyImage(data.base64);

마찬가지로 Clarafai 문서를 사용하면 API 키를 사용하여 Clarafai를 초기화하고 Base64를 Predict API에 전달할 수 있습니다.그런 다음 JSON 응답에 최고 수준의 이미지 태그가 포함된 부분을 새 함수에 전달합니다.

identifyImage(imageData){

    // Initialise the Clarifai api
    const Clarifai = require('clarifai');

    const app = new Clarifai.App({
        apiKey: 'YOUR KEY HERE'
    });

    // Identify the image
    app.models.predict(Clarifai.GENERAL_MODEL, {base64: imageData})
        .then((response) =>  this.displayAnswer(response.outputs[0].data.concepts[0].name)
        .catch((err) => alert(err))
    );
}

displayAnswer 함수에서 응용 프로그램의 상태를 업데이트해야 합니다.이것은 경고 메시지의 상태를 설정하고 활동 표시기를 사용하지 않으며 모든 단추를 다시 사용합니다.

// Dismiss the acitivty indicator
this.setState((prevState, props) => ({
    identifedAs:identifiedImage,
    loading:false
}));

이제 답을 얻었습니다. React Native의 경고 모듈https://facebook.github.io/react-native/docs/alert을 사용하여 경고에 표시합니다.

Alert.alert(this.state.identifedAs,'',{ cancelable: false });

그리고 우리는 새 사진을 찍을 수 있도록 카메라의 미리보기를 회복할 것이다.

// Resume the camera's preview
this.camera.resumePreview();

일반적으로 displayAnswer() 함수는 다음과 같습니다.

displayAnswer(identifiedImage){

    // Dismiss the acitivty indicator
    this.setState((prevState, props) => ({
        identifedAs:identifiedImage,
        loading:false
    }));

    // Show an alert with the answer on
    Alert.alert(this.state.identifedAs,'',{ cancelable: false });

    // Resume the preview
    this.camera.resumePreview();
}

그리고 니 카메라 전체.js 구성 요소

import React from 'react';
import { Dimensions, Alert, StyleSheet, ActivityIndicator } from 'react-native';
import { RNCamera } from 'react-native-camera';
import CaptureButton from './CaptureButton.js'

export default class Camera extends React.Component {

    constructor(props){
        super(props);
        this.state = { 
            identifedAs: '',
            loading: false
        }
    }

    takePicture = async function(){

        if (this.camera) {

            // Pause the camera's preview
            this.camera.pausePreview();

            // Set the activity indicator
            this.setState((previousState, props) => ({
                loading: true
            }));

            // Set options
            const options = {
                base64: true
            };

            // Get the base64 version of the image
            const data = await this.camera.takePictureAsync(options)

            // Get the identified image
            this.identifyImage(data.base64);
        }
    }

    identifyImage(imageData){

        // Initialise Clarifai api
        const Clarifai = require('clarifai');

        const app = new Clarifai.App({
            apiKey: 'YOUR KEY HERE'
        });

        // Identify the image
        app.models.predict(Clarifai.GENERAL_MODEL, {base64: imageData})
        .then((response) => this.displayAnswer(response.outputs[0].data.concepts[0].name)
        .catch((err) => alert(err))
        );
    }

    displayAnswer(identifiedImage){

        // Dismiss the acitivty indicator
        this.setState((prevState, props) => ({
            identifedAs:identifiedImage,
            loading:false
        }));

    // Show an alert with the answer on
    Alert.alert(
            this.state.identifedAs,
            '',
            { cancelable: false }
        )

        // Resume the preview
        this.camera.resumePreview();
    }

    render() {
        return (
            <RNCamera ref={ref => {this.camera = ref;}} style={styles.preview}>
            <ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>
            <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
            </RNCamera>
        );
    }
}

const styles = StyleSheet.create({
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
    },
    loadingIndicator: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});

이제 최상위 구성 요소 앱으로 돌아갑니다.js, 방금 만든 새 카메라 구성 요소를 가져옵니다.

import Camera from './components/Camera.js';

그런 다음 React 기본 뷰 사이에 추가합니다.
그러니까 니 앱.js는 그럴 거예요.

import React  from 'react';
import { StyleSheet, View } from 'react-native';
import Camera from './components/Camera.js';

export default class App extends React.Component {

    constructor(props){
        super(props);
        process.nextTick = setImmediate;
    }

    render() {
        return (
            <View style={styles.container}>
                <Camera />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',   
    }
});

따라서 전체적으로 말하자면 우리의 간단한 응용 프로그램은 응용 프로그램 자체, 우리의 카메라 구성 요소와 단추 구성 요소로 세 개의 구성 요소로 나뉜다.그리고 이 기초 위에서 우리는 내장된 React 원본 카메라 구성 요소를 사용한다.
경고, 활동 표시기, 스타일시트, 터치 하이라이트, 단추 등 많은 표준 React 로컬 구성 요소를 사용했습니다.
따라서 휴대전화를 연결하고 Xcode에서 Xcode 프로젝트를 열어 장치에 설치하여 테스트하기만 하면 된다.
이 프로그램의 원본 코드는 Github에서 찾을 수 있습니다https://github.com/andrewsmith1996/Image-Recogition-React-Native. 제 작품집에서도 찾을 수 있습니다https://andrewsmithdeveloper.com.
나는 네가 이 게시물을 좋아하길 바란다. 만약 네가 나의 게시물, 코드 또는 어떤 것에 대해 어떤 문제나 피드백이 있다면 나에게 알려줘!