Mood Detection UI

screens/MoodDetection.js

+/*
+import React, { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, Image, TextInput, Alert, StyleSheet ,ImageBackground,ScrollView} from 'react-native';
+import { Camera } from 'expo-camera';
+
+export default function MoodDetection() {
+  const [capturedImage, setCapturedImage] = useState(null);
+  const [userAnswer, setUserAnswer] = useState('');
+  const [cameraPermission, setCameraPermission] = useState(null);
+  const [camera, setCamera] = useState(null);
+
+  const questionBank = [
+    'How would you rate your overall mood today? (1-10)',
+    'On a scale of 1 to 10, how well are you managing stress during your pregnancy?',
+    'How would you rate your happiness level at this moment? (1-10)',
+    'On a scale of 1 to 10, how confident do you feel about your pregnancy?',
+    'On a scale of 1 to 10, how well are you sleeping during your pregnancy?',
+    'How would you rate your excitement about becoming a mother? (1-10)',
+    'How would you rate your energy level at this moment? (1-10)',
+    'How excited are you about the upcoming addition to your family? (Rate 1-10)',
+    'How are you feeling today?',
+    'What is your mood like right now?',
+    'Tell me about your emotions at this moment.',
+    // Add more questions as needed
+  ];
+
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      const { status } = await Camera.requestPermissionsAsync();
+      setCameraPermission(status === 'granted');
+    })();
+  }, []);
+
+  // Automatically change the question when the component is rendered
+  useEffect(() => {
+    // Generate a random question index
+    const randomIndex = Math.floor(Math.random() * questionBank.length);
+    setCurrentQuestionIndex(randomIndex);
+  }, []);
+
+  const captureImage = async () => {
+    if (!cameraPermission) {
+      Alert.alert('Permission Required', 'Please grant camera permission to capture an image.');
+      return;
+    }
+
+    try {
+      if (camera) {
+        const photo = await camera.takePictureAsync();
+        setCapturedImage(photo.uri);
+      } else {
+        Alert.alert('Error', 'Camera not available.');
+      }
+    } catch (error) {
+      Alert.alert('Error', 'Failed to capture an image. Please try again.');
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.scrollViewContent}>
+    <View style={styles.container}>
+        <ImageBackground source={require("../assets/Nutritionbackground.png")} resizeMode="cover" style={styles.image}>
+        <View style={styles.overlay}>
+     
+     
+      <Text style={styles.title}>Mood Detection</Text>
+      <Text style={styles.questionText}>{questionBank[currentQuestionIndex]}</Text>
+      <TextInput
+        style={styles.answerInput}
+        placeholder="Type your answer here"
+        value={userAnswer}
+        onChangeText={(text) => setUserAnswer(text)}
+      />
+    
+
+     <Camera
+        style={styles.camera}
+        type={Camera.Constants.Type.front}
+        ref={(ref) => setCamera(ref)}
+      />
+      {capturedImage && (
+        <Image source={{ uri: capturedImage }} style={styles.resultImage} />
+      )}
+
+         <TouchableOpacity style={styles.button} onPress={captureImage}>
+          <Text style={styles.buttonText} >Analyze Mood</Text>
+        </TouchableOpacity>
+        </View>
+        </ImageBackground>
+    </View>
+    </ScrollView>
+  );
+}
+
+
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+   
+  },
+
+  scrollViewContent: {
+    minHeight: '100%', // Set a minimum height to enable scrolling
+  },
+
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+   
+    alignItems: "center",
+    
+    
+  },
+  
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 95, // Adjusted margin to move the title to the top
+  },
+  questionText: {
+    fontSize: 18,
+    marginBottom: 20,
+    paddingRight:10,
+    paddingLeft:10,
+    marginTop: 10, 
+  },
+  camera: {
+    flex: 1,
+    marginTop: 150, 
+    width: '80%',
+    
+  },
+  answerInput: {
+    width: '80%',
+    borderWidth: 1,
+    borderColor: 'gray',
+    padding: 10,
+   
+  },
+  resultImage: {
+    width: 200,
+    height: 200,
+    marginTop: 170,
+  },
+
+  button: {
+  
+    borderRadius: 5,
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#FF9DD2', // Pink border color
+    paddingVertical: 20, // Increase button size by adjusting padding
+    paddingHorizontal: 40, // Increase button size by adjusting padding
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 40,
+    width: '70%',
+   
+  },
+
+  buttonText: {
+    color: 'black',
+    fontWeight: 'bold',
+  },
+});
+
+
+
+
+
+*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+import React, { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, Image, TextInput, Alert, StyleSheet,ImageBackground } from 'react-native';
+import { Camera } from 'expo-camera';
+
+export default function MoodDetection() {
+  const [capturedImage, setCapturedImage] = useState(null);
+  const [userAnswer, setUserAnswer] = useState('');
+  const [cameraPermission, setCameraPermission] = useState(null);
+  const [camera, setCamera] = useState(null);
+
+  const questionBank = [
+    'How would you rate your overall mood today? (1-10)',
+    'On a scale of 1 to 10, how well are you managing stress during your pregnancy?',
+    'How would you rate your happiness level at this moment? (1-10)',
+    'On a scale of 1 to 10, how confident do you feel about your pregnancy?',
+    'On a scale of 1 to 10, how well are you sleeping during your pregnancy?',
+    'How would you rate your excitement about becoming a mother? (1-10)',
+    'How would you rate your energy level at this moment? (1-10)',
+    'How excited are you about the upcoming addition to your family? (Rate 1-10)',
+    'How are you feeling today?',
+    'What is your mood like right now?',
+    'Tell me about your emotions at this moment.',
+    
+  ];
+
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      const { status } = await Camera.requestPermissionsAsync();
+      setCameraPermission(status === 'granted');
+    })();
+  }, []);
+
+  useEffect(() => {
+    
+    // Generate a random question index
+    const randomIndex = Math.floor(Math.random() * questionBank.length);
+    setCurrentQuestionIndex(randomIndex);
+  }, []);
+
+  const captureImage = async () => {
+    if (!cameraPermission) {
+      Alert.alert('Permission Required', 'Please grant camera permission to capture an image.');
+      return;
+    }
+
+    try {
+      if (camera) {
+        const photo = await camera.takePictureAsync();
+        setCapturedImage(photo.uri);
+      } else {
+        Alert.alert('Error', 'Camera not available.');
+      }
+    } catch (error) {
+      Alert.alert('Error', 'Failed to capture an image. Please try again.');
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+        <ImageBackground source={require("../assets/Nutritionbackground.png")} resizeMode="cover" style={styles.image}>
+        <View style={styles.overlay}>
+     
+     
+      <Text style={styles.title}>Mood Detection</Text>
+      <Text style={styles.questionText}>{questionBank[currentQuestionIndex]}</Text>
+      <TextInput
+        style={styles.answerInput}
+        placeholder="Type your answer here"
+        value={userAnswer}
+        onChangeText={(text) => setUserAnswer(text)}
+      />
+      <Camera
+        style={{ width: 1, height: 1, position: 'absolute' }}
+        type={Camera.Constants.Type.front}
+        ref={(ref) => setCamera(ref)}
+      />
+
+      {capturedImage && (
+        <Image source={{ uri: capturedImage }} style={styles.resultImage} />
+      )}
+
+         <TouchableOpacity style={styles.button} onPress={captureImage}>
+          <Text style={styles.buttonText} >Analyze Mood</Text>
+        </TouchableOpacity>
+        </View>
+        </ImageBackground>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+   
+  },
+
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    alignItems: "center",
+  },
+  
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginTop: 95, // Adjusted margin to move the title to the top
+  },
+  questionText: {
+    fontSize: 18,
+    marginBottom: 20,
+    paddingRight:10,
+    paddingLeft:10,
+    marginTop: 10, 
+  },
+  camera: {
+    flex: 1,
+    width: '100%',
+  },
+  answerInput: {
+    width: '80%',
+    borderWidth: 1,
+    borderColor: 'gray',
+    padding: 10,
+   
+  },
+  resultImage: {
+    width: 200,
+    height: 200,
+    marginTop: 170,
+  },
+
+  button: {
+  
+    borderRadius: 5,
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#FF9DD2', // Pink border color
+    paddingVertical: 20, // Increase button size by adjusting padding
+    paddingHorizontal: 40, // Increase button size by adjusting padding
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 150,
+    marginTop: 90,
+    width: '70%',
+   
+  },
+
+  buttonText: {
+    color: 'black',
+    fontWeight: 'bold',
+  },
+});
+
+