Fetching url of image from gallery and convert image from device to tensor3d

Viewed 290
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);
0 Answers
Related