final

API/app.py

@@ -256,4 +256,4 @@ def predict_pronounce(FPFN):
 
 
 if __name__ == "__main__":
-    app.run(host='192.168.8.100')
+    app.run(host='192.168.8.102')

frontend/src/screen/Progress.js

-import React, {Component} from 'react';
+import React, { Component, useState } from 'react';
 import {
   StyleSheet,
   TouchableOpacity,
@@ -14,23 +14,59 @@ import {
   Easing,
   NativeModules,
   Button,
+  Modal
 } from 'react-native';
-import {useNavigation} from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 
 export default function Progress() {
+
+  const [modalVisible2, setModalVisible2] = useState(false);
+
   const Separator = () => <View style={styles.separator} />;
   const navigation = useNavigation();
   return (
     <SafeAreaView style={styles.container}>
+
+      <View>
+        <Modal
+          animationType="fade"
+          transparent={true}
+          hidden={true}
+          visible={modalVisible2}
+          onRequestClose={() => {
+            setModalVisible2(!modalVisible2);
+          }}
+        >
+          <View style={styles.centeredView2}>
+            <View style={styles.modalView2}>
+
+              <Text style={styles.headStyle2}>Color Activity Progress</Text>
+              <TouchableOpacity>
+                <Text style={{ borderColor: "black", borderWidth: 2, padding: 10, marginTop: 10, marginBottom: 5, fontSize: 20, borderRadius: 5 }}>Accuracy</Text>
+
+              </TouchableOpacity>
+
+              <TouchableOpacity>
+                <Text style={{ borderColor: "black", borderWidth: 2, padding: 10, marginBottom: 5, fontSize: 20, borderRadius: 5 }}>Time</Text>
+
+              </TouchableOpacity>
+
+              <TouchableOpacity>
+                <Text style={{ borderColor: "black", borderWidth: 2, padding: 10, fontSize: 20, borderRadius: 5 }}>Count</Text>
+
+              </TouchableOpacity>
+            </View>
+          </View>
+
+        </Modal>
+
+      </View>
+
+
       <View>
         <Button
           title="Color Activity"
-          onPress={() =>
-            navigation.navigate('PrimaryType', {
-              title: 'Primary Activities',
-              id: 1,
-            })
-          }></Button>
+          onPress={() => setModalVisible2(true)}></Button>
       </View>
       <Separator />
 
@@ -53,4 +89,70 @@ const styles = StyleSheet.create({
   separator: {
     marginVertical: 10,
   },
+  centeredView2: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22
+  },
+  modalView2: {
+    marginTop: -10,
+    margin: 20,
+    backgroundColor: "#FFFFFF",
+    borderRadius: 20,
+    padding: 35,
+    borderWidth: 5,
+    borderColor: "#1DCE92",
+    alignItems: "center",
+    shadowColor: "green",
+    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
+  },
+
 });

frontend/src/screen/client/Client.js

@@ -2,6 +2,6 @@ import axios from 'axios';
 
 // export default axios.create({ baseURL: 'http://192.168.8.102:5000/', timeout: 15000, });
 export default axios.create({
-  baseURL: 'http://192.168.8.100:5000/',
+  baseURL: 'http://192.168.8.102:5000/',
   timeout: 15000,
 });

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

@@ -24,7 +24,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 export default function ReadActivityGo() {
   const navigation = useNavigation();
 
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(1);
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);

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

@@ -24,7 +24,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 export default function ReadActivityHe() {
   const navigation = useNavigation();
 
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(1);
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);

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

@@ -26,7 +26,7 @@ import ReadModalFailed from '../../../component/reading/ReadModalFailed';
 export default function ReadActivityNo() {
   const navigation = useNavigation();
 
-  const [count, setCount] = useState(0);
+  const [count, setCount] = useState(1);
   const [modalVisible, setModalVisible] = useState(false);
   const [modalVisible2, setModalVisible2] = useState(false);
   const [modalVisible3, setModalVisible3] = useState(false);