ReactNative library to allow realtime image recognition through CoreML Machine Learning
npm install react-native-core-ml-imageFor full details on how to use it, see the documentation below, but essentially the steps are:
1. Create & train or download an existing machine learning model
2. Drop the .mlmodelc file into your project
3. Add this component to one of your views
``javascript`
npm install react-native-core-ml-image --save
Once that has completed, run the following command to link it to your project:
`javascript`
react-native link
1. In XCode, right click on your project, then on New File...
2. Choose a Swift file, click next
3. You'll then be asked if you want to create a bridging header - click yes to this
4. The module is written in Swift 4, so if you get errors compiling, go to your project's Build Settings in XCode, find Swift Language Version and make sure it is set to Swift 4.0
We're in the process of writing a tutorial on how to create your own model using TuriCreate. Stay tuned for that.
Once you've downloaded, or created, a CoreML Model, rename it from .mlmodel to .mlmodelc and drop it into your XCode project (ensure that you add it to your main project target if offered the choice).
Go to the Build Phases tab of your project in XCode, and check that the model file you added is listed under the Copy Bundle Resources section. If not, add it.
`javascript`
import CoreMLImage from "react-native-core-ml-image";
... then, add the component wherever you want it...
`javascript`
onClassification={(evt) => this.onClassification(evt)}/>
You must provide a modelFile. This should be the name of the model file you added to your project without any suffix. E.g. if your model file was called MyModelFile.mlmodelc then you should set modelFile as MyModelFile.
Remember - the model file must have the file ending .mlmodelc to work.
`javascript`
[{
identifier: "cat",
confidence: 0.87
},
{
identifier: "dog",
confidence: 0.4
}]
`javascript`
onClassification={(evt) => this.onClassification(evt)}>
`javascript``
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
},
info: {
fontSize: 20,
color: "#ffffff",
textAlign: 'center',
fontWeight: "900",
margin: 10,
}
});