PlantDiseasePredictionScreen.js

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, Image, Alert, StyleSheet, PermissionsAndroid } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';
import axios from 'axios';

const PlantDiseasePredictionScreen = () => {
  const [imageUri, setImageUri] = useState(null);
  const [prediction, setPrediction] = useState('');

  // Request permission for Android
  const requestPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
        {
          title: 'Permission to access photos',
          message: 'We need access to your photos to pick an image.',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        }
      );
      if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
        Alert.alert('Permission denied', 'We need permission to access your photos.');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  const pickImage = () => {
    requestPermission().then(() => {
      launchImageLibrary({ mediaType: 'photo' }, (response) => {
        if (response.assets && response.assets[0].uri) {
          setImageUri(response.assets[0].uri);
        }
      });
    });
  };

  const predictDisease = async () => {
    if (!imageUri) {
      Alert.alert('Error', 'Please select an image');
      return;
    }

    const formData = new FormData();
    formData.append('file', {
      uri: imageUri,
      type: 'image/jpeg',
      name: 'plant.jpg',
    });

    try {
      const response = await axios.post('https://2795-2405-201-c00e-6140-5155-6ca9-28db-86ab.ngrok-free.app/predict/disease', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      setPrediction(response.data.predicted_class);
    } catch (error) {
      Alert.alert('Error', 'Unable to predict disease.');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Plant Disease Prediction</Text>

      <TouchableOpacity style={styles.button} onPress={pickImage}>
        <Text style={styles.buttonText}>Pick an Image</Text>
      </TouchableOpacity>

      {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}

      <TouchableOpacity style={styles.button} onPress={predictDisease}>
        <Text style={styles.buttonText}>Predict Disease</Text>
      </TouchableOpacity>

      {prediction && <Text style={styles.predictionText}>Predicted Disease: {prediction}</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: 'rgba(0, 0, 0, 0.7)', // Dark overlay for consistency
  },
  title: {
    fontSize: 28,
    color: '#ffffff',
    fontWeight: 'bold',
    marginBottom: 30,
    textAlign: 'center',
    textShadowColor: '#000',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
  },
  button: {
    backgroundColor: '#4CAF50',
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 5 },
    shadowOpacity: 0.8,
    shadowRadius: 10,
    elevation: 5,
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 15,
    marginTop: 20,
    borderWidth: 2,
    borderColor: '#4CAF50',
  },
  predictionText: {
    marginTop: 30,
    fontSize: 20,
    color: '#ffffff',
    textAlign: 'center',
    fontStyle: 'italic',
  },
});

export default PlantDiseasePredictionScreen;