import { Platform, Button, View,Image} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import React, { useEffect, useState }from 'react';
import * as ImagePicker from 'expo-image-picker';
import { Constants } from 'expo-constants';
import * as jpeg from 'jpeg-js'
import * as tf from '@tensorflow/tfjs';
import { fetch, bundleResourceIO } from '@tensorflow/tfjs-react-native';
const CaptureImage=()=>{
const [image,setImage]=useState(null);
useEffect(async()=>{
if(Platform.OS!=='web'){
const{status}=await ImagePicker.requestMediaLibraryPermissionsAsync();
if(status!=='granted'){
alert('Permission denied')
}
}
},[]);
const PickImage=async()=> {
let result=await ImagePicker.launchImageLibraryAsync({
mediaTypes:ImagePicker.MediaTypeOptions.All,
allowsEditing:true,
aspects:[4,3],
quality:1
})
console.log(result)
if(!result.cancelled){
setImage(result.uri)
}
};
// Load the model from the models folder
const loadModel = async () => {
const modelJSON = require("./assets/model/model.json");
const modelWeights = require("./assets/model/group1-shard.bin");
const mod = await tf.ready()
const model=await tf.loadLayersModel(bundleResourceIO(modelJSON, modelWeights))
.catch(e => alert(e));
alert("Model loaded!");
//return model;
const image = require('......'); //Here how i will be able to get url of local phone storage
const imageAssetPath = Image.resolveAssetSource(image);
const response = await fetch(imageAssetPath.uri, {}, { isBinary: true });
const rawImageData = await response.arrayBuffer();
const imageTensor = decodeJpeg(rawImageData);
let result = await model.predict(imageTensor).data()
alert(result)
};
function decodeJpeg(rawImageData){
//Function to convert jpeg image to tensors
const TO_UINT8ARRAY = true;
const { width, height, data } = jpeg.decode(rawImageData, TO_UINT8ARRAY);
// Drop the alpha channel info for mobilenet
const buffer = new Uint8Array(width * height * 3);
let offset = 0; // offset into original data
for (let i = 0; i < buffer.length; i += 3) {
buffer[i] = data[offset];
buffer[i + 1] = data[offset + 1];
buffer[i + 2] = data[offset + 2];
offset += 4;
}
return tf.tensor3d(buffer, [height, width, 3]);
}
const Prediction = async () => {
loadModel()
};
return (
<View>
<Button title="Choose Image" onPress={PickImage}/>
{image&& <Image source={{uri:image}} style={{
width:200,
height:200,
justifyContent: 'center',
alignItems: 'center'
}}/>}
<Button title="Predict" onPress={Prediction}/>
<StatusBar style="auto"/>
</View>
)
}
export default CaptureImage;
How will i get url of image from gallery ? I am following this but the url is hardcoded. what i wanted to do is to to get url of any image i upload and convert it to tensor and also everytime i upload an image it's url is definitely going to be changed? since i am new, i am not able to figure this out that how to get that url although it is maintaining uri in the state.
const image = require('path/to/img.jpg');
const imageAssetPath = Image.resolveAssetSource(image);
const response = await fetch(imageAssetPath.uri, {}, { isBinary: true });
const rawImageData = await response.arrayBuffer();
const imageTensor = decodeJpeg(rawImageData);