Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28468

Can't add tflite model to React Native project

$
0
0

I have created a React Native project using Expo and have a fully functional converted tflite model from keras. I am trying to use the react-native-tensorflow-lite package API to recognize my model a JPEG picture.

NPM package for React Native Tensorflow lite I used the exact same template in my expo project, but for some reason the API cannot recognize the model.tflite file path. (See error message in image attachment). Red Error Screen

Below is a copy of how I tried to implement this API using the Expo-Assets library:

import {TFLiteImageRecognition} from 'react-native-tensorflow-lite';
import React, {Component} from "react";
import {Text, View, StyleSheet} from "react-native";
import {Asset} from "expo-asset";

//Assets
import Anna from '../../assets/images/anna.jpg';
import Model from '../../android/app/src/main/assets/converted_model.tflite';
import Labels from '../../android/app/src/main/assets/labels.txt';

class MyImageClassifier extends Component {

    constructor() {
        super();
        this.state = {};

        try {
            // Initialize TensorFlow Lite Image Recognizer
            this.tfLiteImageRecognition = new TFLiteImageRecognition({
                labels: Asset.fromModule(Labels).downloadAsync(),// Your label file in assets folder
                model: Asset.fromModule(Model).downloadAsync()  // Your tflite model in assets folder.
            })
        } catch (err) {
            alert(err)
        }
    }

    /*init (callback) {
        // do something async and call the callback:
        callback.bind(this)();
    }*/

    componentWillMount() {
        let imagePath = Asset.fromModule(require("../../assets/images/anna.jpg"));
        console.warn(imagePath);
        this.classifyImage().then(console.log("Image Classified!"));
    }

    async classifyImage() {
        try {
            const results = await this.tfLiteImageRecognition.recognize({
                image: Asset.fromModule(Anna).downloadAsync(),  // Your image path.
                inputShape: (1, 100, 100, 1), // the input shape of your model. If none given, it will be default to 224.
            });

            const resultObj = {
                name: "Name: " + results[0].name,
                confidence: "Confidence: " + results[0].confidence,
                inference: "Inference: " + results[0].inference + "ms"
            };
            this.setState(resultObj)

        } catch (err) {
            alert(err)
        }
    }

    componentWillUnmount() {
        this.tfLiteImageRecognition.close() // Must close the classifier when destroying or unmounting component to release object.
    }

    render() {
        return (
            <View style={styles.container}>
                <View>
                    <Text style={styles.results}>
                        {this.state.name}
                    </Text>
                    <Text style={styles.results}>
                        {this.state.confidence}
                    </Text>
                    <Text style={styles.results}>
                        {this.state.inference}
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 15,
        backgroundColor: '#fff',
    },
    results: {
        fontSize: 22,
        fontFamily: "serif",
        textAlign: 'center'
    }
});

export default MyImageClassifier;

I have tested that the file paths accurately point towards the relevant files, so that is definitely not the issue here. I have also validated that my TFLite model can make predictions when passed in input data of the correct shape.

Here is the video I used as a reference to aid me implment the API Geeky Ants Tensorflow lite into React Native.

Any help would be much appreciated.


Viewing all articles
Browse latest Browse all 28468

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>