How to give information about where the diseases and insects are in the crop by clicking the photo.

See more:

Javascript

react-native

I am developing an application for a project in React Native for which I need the following.

What I want to do in this code is that when a photo of a crop is clicked from the camera, by analyzing that photo, the information about where the insects and diseases are present in that crop is displayed in detail.

What I have tried:

//CameraScreen.js
import React, { useEffect, useRef, useState } from 'react';
import { Camera } from 'expo-camera';
import { shareAsync } from 'expo-sharing';
import * as MediaLibrary from 'expo-media-library';
import { SafeAreaView, View, Image, Button, StyleSheet,TouchableOpacity } from 'react-native';

export default function CameraScreen({ navigation }) {
  const cameraRef = useRef();
  const [hasCameraPermission, setHasCameraPermission] = useState();
  const [hasMediaLibraryPermission, 
         setHasMediaLibraryPermission] = useState();
  const [photo, setPhoto] = useState();

  useEffect(() => {
    (async () => {
      const cameraPermission = await Camera.requestCameraPermissionsAsync();
      const mediaLibraryPermission = 
              await MediaLibrary.requestPermissionsAsync();
      setHasCameraPermission(cameraPermission.status === "granted");
      setHasMediaLibraryPermission
         (mediaLibraryPermission.status === "granted");
    })();
  }, []);

  let takePic = async () => {
    let options = {
      quality: 1,
      base64: true,
      exif: false,
    };
    let newPhoto = await cameraRef.current.takePictureAsync(options);
    setPhoto(newPhoto);
  };

  if (photo) {
    let sharePic = () => {
      shareAsync(photo.uri).then(() => {
        setPhoto(undefined);
      });
    };
    let savePhoto = () => {
      MediaLibrary.saveToLibraryAsync(photo.uri).then(() => {
        setPhoto(undefined);
      });
    };
    return (
      <SafeAreaView style={styles.container}>
        <Image style={styles.preview} 
        source={{ uri: "data:image/jpg;base64," + photo.base64 }} />
        <Button title="Share" onPress={sharePic} />
        {hasMediaLibraryPermission ? <Button title="Save" 
         onPress={savePhoto} /> : undefined}
        <Button title="Discard" onPress={() => 
            setPhoto(undefined)} />
      </SafeAreaView>
    );
  }

  return (
    <Camera style={styles.container} ref={cameraRef}>
     
      {/* Add a circular button at the bottom */}
      <View style={styles.circleButtonContainer}>
        <TouchableOpacity style={styles.circleButton} 
            onPress={takePic}>
          <View style={styles.circleButtonBorder} />
        </TouchableOpacity>
      </View>
    </Camera>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonContainer: {
    backgroundColor: 'transparent',
    alignSelf: 'center',
    marginBottom: 20, // Adjust the margin as needed
  },
  circleButtonContainer: {
    position: 'absolute',
    bottom: 20, // Adjust the bottom value as needed
    alignSelf: 'center',
  },
  circleButton: {
    width: 60,        // Adjust the width to make it circular
    height: 60,       // Same as the width for a circle
    borderRadius: 30, // Half of the width to make it circular
    backgroundColor: 'white', // Change the color as desired
    alignItems: 'center',
    justifyContent: 'center',
  },
  circleButtonBorder: {
    width: 56,  // Adjust the width to make it slightly smaller 
                // than the button
    height: 56, // Same as the width
    borderRadius: 28, // Half of the width
    borderWidth: 2, // Border width
    borderColor: 'black', // Border color
    position: 'absolute',
  },
  preview: {
    alignSelf: 'stretch',
    flex: 1,
  },
});