-
Notifications
You must be signed in to change notification settings - Fork 3
Description
import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import { TFLiteImageRecognition } from 'react-native-tensorflow-lite'
export default class App extends Component {
constructor() {
super()
this.state = {}
try {
// Initialize Tensorflow Lite Image Recognizer
this.classifier = new TFLiteImageRecognition({
// Your tflite model in assets folder.
// Currently only non-quant files
model: 'file://mobilenet_v1_1.0_224.tflite',
labels: 'file://labels.txt'
})
} catch (err) {
alert(err)
}
}
async classifyImage(imagePath) {
try {
const results = await this.classifier.recognize({
// Your image path.
image: imagePath,
// the input shape of your model. If none given, it will be default to 224.
inputShape: 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() {
// Must close the classifier when destroying or unmounting component to release object.
this.classifier.close()
}
render() {
return (
<TouchableOpacity
style={styles.imageContainer}
onPress={() => this.classifyImage('apple_224.jpg')}
>
<Image
style={styles.image}
source={require('./images/apple_224.jpg')}
/>
<TouchableOpacity
style={styles.imageContainer}
onPress={() => this.classifyImage('coffee_224.jpg')}
>
<Image
style={styles.image}
source={require('./images/coffee_224.jpg')}
/>
<TouchableOpacity
style={styles.imageContainer}
onPress={() => this.classifyImage('taco_224.jpg')}
>
<Image
style={styles.image}
source={require('./images/taco_224.jpg')}
/>
RESULTS:
{this.state.name}
{this.state.confidence}
{this.state.inference}
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
results: {
textAlign: 'center',
fontSize: 24
},
images: {
flexDirection: 'row'
},
imageContainer: {
flex: 1,
justifyContent: 'center',
overflow: 'hidden'
},
image: {
resizeMode: 'contain'
}
})