change

API/app.py

@@ -228,18 +228,31 @@ def reading_result(userId):
     return make_response(body)
 
 
-# @app.route("/result", methods=['GET'])
-# def reading_result():
-#     req = request.get_json()
-#     userId = req['userId']
-#     result = get_reading_result(userId)
-#     response = {
-#         "data": result,
-#         "message": "Success",
-#         "status": 200
-#     }
-#     body = jsonify(response)
-#     return make_response(body)
+# Predict route
+@app.route("/predictPronounce/<FPFN>", methods=["POST"])
+def predict_pronounce(FPFN):
+    assert FPFN == request.view_args['FPFN']
+    data = request.get_json()
+    print((f"{data}"))
+
+    try:
+
+        audioFile ="temp/no.wav"
+
+        result = predictData(audioFile, FPFN)
+
+        response = {
+            "data": result,
+            "message": "Success",
+            "status": 200
+        }
+        # resp = make_response(response)
+        # resp.headers['Access-Control-Allow-Origin'] = '*'
+        # resp.headers['Content-Type'] = 'application/json'
+        body = jsonify(response)
+        return make_response(body)
+    except ValueError:
+        print(ValueError)
 
 
 if __name__ == "__main__":

API/model/readModel.py

 from API.db.dbConnection import *
 from flask import jsonify
 from API.util.util import getUUID
+from API.service.reading import pronounce_spotting_service
 
 
 def get_reading_result(userId):
@@ -31,3 +32,30 @@ def update_session_status(token):
 def get_completed_levels_by_user(userId):
     qry = 'SELECT status FROM readingSession  WHERE userId = "{}"'.format(userId)
     return get_data(qry)
+
+
+def predictData(audioFile, name):
+
+    # print(f"{name}")
+
+    # path = "test/green.wav"
+
+    # print(f"{path}")
+
+    new_predict_file_name = name.split(".")
+    FPFN = new_predict_file_name[0]
+
+    # invoke keyword spotting service
+    #kss = pronounce_spotting_service()
+
+    # make a prediction
+    # predicted_keyword = kss.predict(audioFile)
+
+    # remove the audio file
+    # os.remove(file_name)
+
+    # send back the predicted keyword in json format
+    data = {"Predicted Keyword": FPFN}
+
+    print(f"data: {data}")
+    return data

API/service/reading/pronounce_spotting_service.py

+import tensorflow.keras as keras
+import numpy as np
+import librosa
+
+MODEL_PATH = "model.h5"
+NUM_SAMPLES_TO_CONSIDER = 22050 # 1 sec
+
+class _Keyword_Spotting_Service:
+
+    model = None
+    _mappings = [
+
+        "no",
+        "go",
+        "he",
+        "dog",
+        "bird",
+        "fish",
+    ]
+    _instance = None
+
+    def predict(self, file_path):
+
+        # extract MFCCs
+        MFCCs = self.preprocess(file_path) # (# segment, # coefficients)
+
+        # convert 2d MFCCs array into 4d array -> (# samples, # segment, # coefficients, # channels)
+        MFCCs = MFCCs[np.newaxis, ..., np.newaxis]
+
+        # make prediction
+        predictions = self.model.predict(MFCCs)
+        predicted_index = np.argmax(predictions)
+        predicted_keyword = self._mappings[predicted_index]
+
+        # return predicted_keyword
+
+        new_file_path = file_path.split("/")
+
+        new_file_paths = new_file_path[1].split(".")
+
+        print(f"1-{predicted_keyword}")
+        print(f"2-{new_file_paths[0]}")
+
+        if predicted_keyword == new_file_paths[0]:
+            return predicted_keyword
+        else:
+            return "No Prediction"
+
+    def preprocess(self, file_path, n_mfcc=13, n_fft=2048, hop_length=512):
+
+        # load audio file
+        signal, sr = librosa.load(file_path)
+
+        # ensure consistency in the audio file length
+        if len(signal) > NUM_SAMPLES_TO_CONSIDER:
+            signal = signal[:NUM_SAMPLES_TO_CONSIDER]
+
+        # extract MFCCs
+        MFCCs = librosa.feature.mfcc(signal, n_mfcc=n_mfcc, n_fft=n_fft, hop_length=hop_length)
+
+        return MFCCs.T
+
+def Keyword_Spotting_service():
+
+    # ensure that we only have 1 instance of KSS
+    if _Keyword_Spotting_Service._instance is None:
+        _Keyword_Spotting_Service._instance = _Keyword_Spotting_Service()
+        _Keyword_Spotting_Service.model = keras.models.load_model(MODEL_PATH)
+
+    return _Keyword_Spotting_Service._instance
+
+if __name__ == "__main__":
+    kss = Keyword_Spotting_service()
+
+    keyword1 = kss.predict("temp/bird.wav")
+    # keyword2 = kss.predict("test/blu7.wav")
+
+    print(f"Predicted Keywords: {keyword1}")
+    # print(f"Predicted Keywords: {keyword2}")
\ No newline at end of file

backend/IT18257632/pronounce_spotting_service.py

@@ -10,15 +10,12 @@ class _Keyword_Spotting_Service:
     model = None
     _mappings = [
 
-        "go",
         "no",
-        "yes",
-        "wow",
+        "go",
+        "he",
         "dog",
-        "bed",
         "bird",
-        "left",
-        "eight"
+        "fish",
     ]
     _instance = None
 

frontend/src/assets/read/data/ReadData.js

@@ -6,6 +6,10 @@ export const ImagePaths = {
   robot1: require('../image/robot1.png'),
   robot2: require('../image/activity-2-rob.png'),
   backgroundBasic: require('../image/activity-2-backg.jpeg'),
+  backgroundAdvanced: require('../image/backgroundAdvanced.jpeg'),
+  backgroundAdvancedDog: require('../image/dogbb.jpg'),
+  backgroundAdvancedBird: require('../image/birdb.jpg'),
+  backgroundAdvancedFish: require('../image/fishbb.jpg'),
   resultBackground: require('../image/rersultBacground.jpeg'),
   no: require('../image/no.png'),
   go: require('../image/go.png'),
@@ -13,10 +17,14 @@ export const ImagePaths = {
   bird: require('../image/bird.png'),
   dog: require('../image/dog.png'),
   fish: require('../image/fish.png'),
+  bird1: require('../image/bird1.png'),
+  dog1: require('../image/dog1.png'),
+  fish1: require('../image/fish1.png'),
   retry: require('../image/retry.png'),
   wrong: require('../image/wrong.png'),
   correct: require('../image/correct.png'),
   chart: require('../image/chart.png'),
+  record: require('../image/record.png'),
 };
 
 export const DummyReadResult = {

frontend/src/component/reading/ReadModal.js

@@ -15,7 +15,7 @@ import {useNavigation} from '@react-navigation/native';
 import {ImagePaths} from '../../assets/read/data/ReadData';
 
 export default function ReadModal(props) {
-  const {caption, validity, visibility, path} = props;
+  const {caption, validity, visibility, path,imagePath} = props;
 
   const navigation = useNavigation();
 
@@ -34,9 +34,9 @@ export default function ReadModal(props) {
     >
       <View style={styles.centeredView2}>
         <View style={styles.modalView2}>
-          <Image style={styles.alert2} source={ImagePaths.robot1}></Image>
+          <Image style={styles.alert2} source={ImagePaths.bird1}></Image>
 
-          <Text style={styles.headStyle2}>{ caption}</Text>
+          <Text style={styles.headStyle2}>{caption}</Text>
           <Text style={styles.head2Style2}>{validity}</Text>
           <TouchableOpacity
             style={[styles.buttonClose2]}
@@ -174,7 +174,7 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   alert2: {
-    backgroundColor: 'rgba(0, 181, 0, 0.45)',
+    // backgroundColor: 'rgba(0, 181, 0, 0.45)',
     borderRadius: 50,
     width: 100,
     height: 100,

frontend/src/component/reading/TableList.js

@@ -75,7 +75,7 @@ export default function TableList() {
 const styles = StyleSheet.create({
   container: {
     flex: 0,
-    paddingTop: 70,
+    paddingTop: 40,
     paddingLeft: 60,
     paddingRight: 60,
     marginTop: 0,

frontend/src/router/router.js

@@ -210,7 +210,7 @@ const AppRouter = () => {
           options={{
             title: 'Memory Games',
             headerTintColor: 'white',
-            headerStyle: {backgroundColor: '#5fcf93'}
+            headerStyle: {backgroundColor: '#5fcf93'},
           }}
         />
         <Stack.Screen
@@ -301,7 +301,7 @@ const AppRouter = () => {
             title: 'Results',
             headerTintColor: 'white',
             headerStyle: {backgroundColor: '#5fcf93'},
-           }}
+          }}
         />
         <Stack.Screen
           name="GameLevel"
@@ -311,7 +311,7 @@ const AppRouter = () => {
             title: 'Levels',
             headerTintColor: 'white',
             headerStyle: {backgroundColor: '#5fcf93'},
-           }}
+          }}
         />
         <Stack.Screen
           name="MediumLevelStart"
@@ -321,7 +321,7 @@ const AppRouter = () => {
             title: 'Medium Level',
             headerTintColor: 'white',
             headerStyle: {backgroundColor: '#5fcf93'},
-           }}
+          }}
         />
         <Stack.Screen
           name="AdvanceLevelStart"
@@ -331,7 +331,7 @@ const AppRouter = () => {
             title: 'Advance Level',
             headerTintColor: 'white',
             headerStyle: {backgroundColor: '#5fcf93'},
-           }}
+          }}
         />
         <Stack.Screen
           options={{headerShown: false}}

frontend/src/screen/Home.js

@@ -72,7 +72,8 @@ const styles = StyleSheet.create({
 
     imageContainer:{
         flexDirection: "row",
-        marginTop: 70,
+    marginTop: 70,
+        
     },
     imageView: {
         width: 180,

frontend/src/screen/Read.js

@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     padding: 20,
-    backgroundColor: '#ffff',
+    backgroundColor: 'rgba(216, 216, 216, 0.22)',
   },
   imageContainer: {
     flexDirection: 'row',

frontend/src/screen/reading/advanced/ReadActivityBird.js

@@ -138,6 +138,7 @@ export default function ReadActivityBird() {
           validity="Pronunciation."
           visible="true"
           path="ReadActivityFish"
+          imagePath={ImagePaths.bird1}
         />
       )}
 
@@ -145,7 +146,7 @@ export default function ReadActivityBird() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={ImagePaths.backgroundBasic}>
+          source={ImagePaths.backgroundAdvancedBird}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
@@ -162,12 +163,7 @@ export default function ReadActivityBird() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -230,7 +226,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    backgroundColor: 'rgba(2, 202, 106, 0.99)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -241,18 +237,17 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 100,
+    height: 100,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
-    borderRadius: 50,
+    // backgroundColor: 'rgba(23, 0, 245, 0.1)',
     flexDirection: 'row',
     position: 'absolute',
     bottom: 0,
     flexDirection: 'row',
-    marginBottom: 140,
-    marginLeft: 50,
-    padding: 7,
+    marginBottom: 80,
+    marginLeft: 135,
+    padding: 0,
   },
 });

frontend/src/screen/reading/advanced/ReadActivityDog.js

@@ -138,6 +138,7 @@ export default function ReadActivityDog() {
           validity="Pronunciation."
           visible="true"
           path="ReadActivityBird"
+          imagePath={ImagePaths.dog1}
         />
       )}
 
@@ -145,7 +146,7 @@ export default function ReadActivityDog() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={ImagePaths.backgroundBasic}>
+          source={ImagePaths.backgroundAdvancedDog}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
@@ -162,12 +163,7 @@ export default function ReadActivityDog() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -179,7 +175,7 @@ export default function ReadActivityDog() {
 const styles = StyleSheet.create({
   imageContainer: {
     flexDirection: 'row',
-    marginTop: 70,
+    marginTop: 80,
   },
   imageView: {
     width: 180,
@@ -230,7 +226,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    backgroundColor: 'rgba(2, 202, 106, 0.99)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -241,18 +237,17 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 100,
+    height: 100,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
-    borderRadius: 50,
+    // backgroundColor: 'rgba(23, 0, 245, 0.1)',
     flexDirection: 'row',
     position: 'absolute',
     bottom: 0,
     flexDirection: 'row',
-    marginBottom: 140,
-    marginLeft: 50,
-    padding: 7,
+    marginBottom: 80,
+    marginLeft: 135,
+    padding: 0,
   },
 });

frontend/src/screen/reading/advanced/ReadActivityFish.js

@@ -155,6 +155,7 @@ export default function ReadActivityFish() {
           validity="Advanced Level Completed."
           visible="true"
           path="Read"
+          imagePath={ImagePaths.fish1}
         />
       )}
 
@@ -162,7 +163,7 @@ export default function ReadActivityFish() {
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
           style={styles.image}
-          source={ImagePaths.backgroundBasic}>
+          source={ImagePaths.backgroundAdvancedFish}>
           <View style={styles.imageContainer}>
             <View style={styles.imageView}>
               <View style={styles.robo}>
@@ -179,12 +180,7 @@ export default function ReadActivityFish() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -247,7 +243,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     color: '#00008B',
     borderRadius: 10,
-    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    backgroundColor: 'rgba(2, 202, 106, 0.99)',
     textAlign: 'center',
     fontWeight: 'bold',
   },
@@ -258,18 +254,17 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 100,
+    height: 100,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
-    borderRadius: 50,
+    // backgroundColor: 'rgba(23, 0, 245, 0.1)',
     flexDirection: 'row',
     position: 'absolute',
     bottom: 0,
     flexDirection: 'row',
-    marginBottom: 140,
-    marginLeft: 50,
-    padding: 7,
+    marginBottom: 80,
+    marginLeft: 135,
+    padding: 0,
   },
 });

frontend/src/screen/reading/basic/ReadActivityGo.js

@@ -162,12 +162,7 @@ export default function ReadActivityGo() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -241,11 +236,11 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 80,
+    height: 80,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    // backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',

frontend/src/screen/reading/basic/ReadActivityHe.js

@@ -180,12 +180,7 @@ export default function ReadActivityHe() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -259,11 +254,11 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 80,
+    height: 80,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    // backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',

frontend/src/screen/reading/basic/ReadActivityNo.js

@@ -33,7 +33,7 @@ export default function ReadActivityNo() {
 
   React.useEffect(() => {
     // StatusBar.setHidden(true);
-// 
+    //
     audioInit();
 
     const unsubscribe = navigation.addListener('focus', () => {
@@ -127,6 +127,8 @@ export default function ReadActivityNo() {
     })
       .then(res => {
         setModalVisible2(true);
+        startAudio();
+
         // navigation.navigate('ReadActivityGo');
       })
       .catch(error => {
@@ -134,6 +136,27 @@ export default function ReadActivityNo() {
       });
   };
 
+  function startAudio() {
+    const datas = {
+      userId: 1,
+      token: 'f53af164ca2511ecbdc562bc611c4f50',
+    };
+    Client.post('reading/no' , JSON.stringify(datas), {
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    })
+      .then(res => {
+        setModalVisible2(true);
+
+        // navigation.navigate('ReadActivityGo');
+      })
+      .catch(error => {
+        console.log(error);
+      });
+  }
+
   const onSpeechStartHandler = e => {
     console.log('start handler =>> ', e);
   };
@@ -216,11 +239,7 @@ export default function ReadActivityNo() {
         />
       )}
 
-      {modalVisible3 && (
-        <ReadModalFailed
-          visible="true"
-        />
-      )}
+      {modalVisible3 && <ReadModalFailed visible="true" />}
 
       <View style={{flexDirection: 'column'}}>
         <ImageBackground
@@ -242,12 +261,7 @@ export default function ReadActivityNo() {
           </View>
           <View style={styles.horizontalView}>
             <TouchableHighlight onPress={startRecording}>
-              <Image
-                style={styles.imageButton}
-                source={{
-                  uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/microphone.png',
-                }}
-              />
+              <Image style={styles.imageButton} source={ImagePaths.record} />
             </TouchableHighlight>
           </View>
         </ImageBackground>
@@ -321,11 +335,11 @@ const styles = StyleSheet.create({
     color: '#000000',
   },
   imageButton: {
-    width: 50,
-    height: 50,
+    width: 80,
+    height: 80,
   },
   horizontalView: {
-    backgroundColor: 'rgba(23, 0, 245, 0.17)',
+    // backgroundColor: 'rgba(23, 0, 245, 0.17)',
     borderRadius: 50,
     flexDirection: 'row',
     position: 'absolute',
@@ -336,156 +350,4 @@ const styles = StyleSheet.create({
     padding: 7,
   },
 
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: -90,
-    marginLeft: -100,
-  },
-  modalView: {
-    marginRight: 20,
-    backgroundColor: '#00000000',
-    borderRadius: 20,
-    padding: 35,
-    alignItems: 'center',
-  },
-  button: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-
-  centeredView2: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: 22,
-  },
-  modalView2: {
-    marginTop: -10,
-    margin: 20,
-    backgroundColor: '#FFFFFFEF',
-    borderRadius: 20,
-    padding: 35,
-    borderWidth: 5,
-    borderColor: '#red',
-    alignItems: 'center',
-    shadowColor: 'red',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button2: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen2: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose2: {
-    // backgroundColor: "#1DCE92",
-  },
-  textStyle2: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  modalText2: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-  headStyle2: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 5,
-  },
-  head2Style2: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 20,
-  },
-  alert2: {
-    backgroundColor: 'white',
-    borderRadius: 50,
-    width: 100,
-    height: 100,
-    marginBottom: 20,
-    marginTop: -80,
-  },
-
-  centeredView3: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginTop: -20,
-  },
-  modalView3: {
-    margin: 20,
-    backgroundColor: '#FFFFFF',
-    borderRadius: 20,
-    padding: 20,
-    borderWidth: 5,
-    borderColor: '#red',
-    alignItems: 'center',
-    shadowColor: 'red',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
-  },
-  button3: {
-    borderRadius: 20,
-    padding: 10,
-    elevation: 2,
-  },
-  buttonOpen3: {
-    backgroundColor: '#F194FF',
-  },
-  buttonClose3: {
-    backgroundColor: 'red',
-  },
-  textStyle3: {
-    color: 'white',
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  headStyle3: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 5,
-  },
-  head2Style3: {
-    color: 'black',
-    fontWeight: 'bold',
-    textAlign: 'center',
-    fontSize: 30,
-    marginBottom: 20,
-  },
-  modalText3: {
-    marginBottom: 15,
-    textAlign: 'center',
-  },
-  alert3: {
-    backgroundColor: 'white',
-    borderRadius: 50,
-    width: 100,
-    height: 100,
-    marginBottom: 20,
-    marginTop: -65,
-  },
 });

frontend/src/screen/reading/result/ReadResults.js

@@ -61,9 +61,13 @@ export default function ReadResults() {
         <ImageBackground
           style={styles.image}
           source={ImagePaths.resultBackground}>
+          <View style={styles.textBody}>
+            <Text style={styles.text}>Your Results</Text>
+          </View>
           <View style={styles.imageContainer}>
-            {/* <View style={styles.imageView}> */}
-              <TableList />
+            {/* <View > */}
+
+            <TableList />
             {/* </View> */}
           </View>
         </ImageBackground>
@@ -90,6 +94,24 @@ const styles = StyleSheet.create({
   },
   imageContainer: {
     flexDirection: 'row',
-    marginTop: 70,
+    marginTop: 1,
+  },
+  textBody: {
+    marginTop: 10,
+    marginLeft: 90,
+    // backgroundColor: '#00008B',
+    width: 220,
+    borderRadius: 50,
+    padding: 5,
+  },
+  text: {
+    fontSize: 35,
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'black',
+    borderRadius: 10,
+    backgroundColor: 'rgba(2, 202, 106, 0.17)',
+    textAlign: 'center',
+    fontWeight: 'bold',
   },
 });