Merge branch 'it18218640' into 'master'

It18218640

See merge request !175

API/app.py

 # import MySQLdb
+<<<<<<< HEAD
+from flask import Flask, render_template, request, jsonify, make_response
+from API.model.color.colorModel import save_color_session_details, sendPredictData
+from API.model.readModel import save_activity_details, save_session_details
+from API.model.userModel import getUser, saveUserSession, logoutUser
+from API.model.color.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result, storeResult
+=======
 from flask import Flask, redirect, url_for, render_template, request, jsonify, make_response
 import random
 import os
@@ -9,6 +16,7 @@ from API.model.userModel import *
 from API.model.colorModel import get_color_activities1, get_color_activities2, get_color_activity_result, storeResult
 from API.model.readModel import get_reading_activities
 from API.routers.router import funtion_one
+>>>>>>> 6ba28c5f30fd429a3ed34216b55a685d5b3615f0
 
 # from backend.IT18218640.keyword_spotting_service import Keyword_Spotting_service
 
@@ -57,59 +65,19 @@ def predict():
     try:
         data = request.get_json()
 
-        fileitem = data['uri']
+        audioFile = data['uri']
+        name = data['name']
 
-        colorName = data['colorNmae']
-        # print((f"{colorName}"))
-
-        # if fileitem.filename:
-        #     # strip the leading path from the file name
-        fn = os.path.basename(fileitem)
-        #
-        #     # open read and write the file into the server
-        # open(fn, 'wb').write(fileitem.file.read())
+        response = sendPredictData(audioFile, name)
 
         resp = make_response(request.get_json())
         resp.headers['Access-Control-Allow-Origin'] = '*'
         resp.headers['Content-Type'] = 'application/json'
-        return resp
+        return response
     except ValueError:
         print(ValueError)
 
-    # get audio file and save it
-    # audio_file = request.files["file"]
-    # audio_file = request.files["name"]
-
-    # print((f"{request.data}"))
-    # print((f"{request.form}"))
-    # print((f"{request.values}"))
-    # print((f"{request.json}"))
-    # print(f"{request.form['name']}")
-    # file_name = str(random.randint(0, 100000))
-    # audio_file.save((file_name))
-    #
-    # # get file name
-    # predict_file_name = audio_file.filename
-    # predict_file_name = predict_file_name.split("/")
-    # new_predict_file_name = predict_file_name[1]
-    # new_predict_file_name = new_predict_file_name.split(".")
-    # FPFN = new_predict_file_name[0]
-    # # print(f"{FPFN}")
-    #
-    # # invoke keyword spotting service
-    # kss = Keyword_Spotting_service()
-    #
-    #
-    # # make a prediction
-    # predicted_keyword = kss.predict(file_name, FPFN)
-    #
-    # # remove the audio file
-    # os.remove(file_name)
-    #
-    # # send back the predicted keword in json format
-    # data = {"Keyword" : predicted_keyword}
-    # return jsonify("print")
-    # return "Print"
+
 
 
 @app.route("/colorSession", methods=['POST'])

API/db/dbConnection.py

@@ -141,7 +141,7 @@ def insert(sql_query, args):
     db = create_con()
     cursor = db.cursor()
     try:
-        cursor.execute(sql_query, args)
+        # cursor.execute(sql_query, args)
         db.commit()
         db.close()
         return 1

API/model/colorModel.py → API/model/color/colorModel.py

-from flask import jsonify
+import os
+import random
+from flask import jsonify, Flask, request
 from API.db.dbConnection import get_all_data, insert_data_json, insert_data, insert, get_data
+from API.model.color.keyword_spotting_service import Keyword_Spotting_service
 from API.util.util import getUUID
 
 # get color activity 1 fun
@@ -87,3 +90,42 @@ def save_color_session_details(userId, status):
     args = (userId, token, status)
     insert(qry, args)
     return token
+
+#predict audio file
+def sendPredictData(audioFile, name):
+
+    # print(f"{name}")
+
+    # path = "test/green.wav"
+
+    # print(f"{path}")
+
+    # audio_file = open(path, "rb")
+
+    # values = {
+    #     "file": (path, audio_file, "audio/wav")
+    # }
+    # audio_file = values["file"]
+    # file_name = str(random.randint(0, 100000))
+    # audio_file.save((file_name))
+    # print(f"{path}")
+
+    # get file name
+    # predict_file_name = audio_file.filename
+    new_predict_file_name = name.split(".")
+    FPFN = new_predict_file_name[0]
+
+    # invoke keyword spotting service
+    kss = Keyword_Spotting_service()
+
+    # make a prediction
+    # predicted_keyword = kss.predict(file_name, FPFN)
+
+    # 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 jsonify(data)
\ No newline at end of file

API/model/color/keyword_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 = [
+        "black",
+        "blue",
+        "green",
+        "red",
+        "white",
+        "yellow"
+    ]
+    _instance = None
+    # 78293
+    def predict(self, file_path, FPFN):
+
+        print(f"{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
+
+        if predicted_keyword == FPFN:
+            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("test/black.wav")
+    keyword2 = kss.predict("test/blue.wav")
+    keyword3 = kss.predict("test/green.wav")
+    keyword4 = kss.predict("test/red.wav")
+    keyword5 = kss.predict("test/white.wav")
+    keyword6 = kss.predict("test/yellow.wav")
+    keyword7 = kss.predict("test/other.wav")
+
+    print(f"Predicted Keywords: {keyword1}")
+    print(f"Predicted Keywords: {keyword2}")
+    print(f"Predicted Keywords: {keyword3}")
+    print(f"Predicted Keywords: {keyword4}")
+    print(f"Predicted Keywords: {keyword5}")
+    print(f"Predicted Keywords: {keyword6}")
+    print(f"Predicted Keywords: {keyword7}")
\ No newline at end of file

frontend/src/screen/activity/Black.js

@@ -9,6 +9,7 @@ import CountDown from 'react-native-countdown-component';
 import client from "../client/Client";
 import Voice from '@react-native-voice/voice';
 import Tts from 'react-native-tts';
+import AudioRecord from 'react-native-audio-record';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import BackButton from "../../component/BackButton"
@@ -28,6 +29,8 @@ export default function Black() {
 
         StatusBar.setHidden(true);
 
+        audioInit();
+
         const unsubscribe = navigation.addListener("focus", () => {
 
             Orientation.unlockAllOrientations();
@@ -51,6 +54,76 @@ export default function Black() {
         };
     }, []);
 
+    function audioInit() {
+        // console.log('audioInit');
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    async function audioStart() {
+
+        // console.log('audioStart');
+        // checkPermission();
+        AudioRecord.start();
+        setTimeout(() => {
+            audioStop();
+        }, 2000);
+    }
+
+    async function audioStop() {
+
+        // console.log('audioStop');
+
+        let audioFile = await AudioRecord.stop();
+        // console.log('userFile', audioFile);
+
+        sendAudio(audioFile);
+
+    }
+
+    function sendAudio(audioFile) {
+
+        var obj = {
+            uri: `file:${audioFile}`,
+            type: 'audio/wav',
+            name: secondColor[2]+'.wav',
+        }
+
+        var data = JSON.stringify(obj)
+        // console.log(data);
+
+        client.post("predict", data, {
+
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+
+        })
+            .then((response) => {
+                // setNames(response.data);
+                console.log('Success part : ', response.data);
+            })
+            .catch(function (error) {
+                if (error.response) {
+                    console.log('Error data : ', error.response.data);
+                    console.log('Error status : ', error.response.status);
+                    console.log('Error headers : ', error.response.headers);
+                } else if (error.request) {
+                    console.log('Error request : ', error.request);
+                } else {
+                    console.log('Error message : ', error.message);
+                }
+                console.log('Error else part : ', error.config);
+            });
+    }
+
     const onSpeechStartHandler = e => {
         // console.log('start handler =>> ', e);
     };
@@ -75,12 +148,7 @@ export default function Black() {
 
             sendData(mainColor[2])
 
-            // showAlert = () => {
-            //     this.setState({
-            //         showAlert: true
-            //     });
-            // };
-
+            audioStart();
 
         } else {
 

frontend/src/screen/activity/Blue2.js

@@ -8,6 +8,7 @@ import { secondColor } from '../../assets/color/color';
 import CountDown from 'react-native-countdown-component';
 import client from "../client/Client";
 import Voice from '@react-native-voice/voice';
+import AudioRecord from 'react-native-audio-record';
 import Tts from 'react-native-tts';
 import BackButton from "../../component/BackButton"
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -26,6 +27,8 @@ export default function Blue2() {
         Voice.destroy().then(Voice.removeAllListeners);
         StatusBar.setHidden(true);
 
+        audioInit();
+
         const unsubscribe = navigation.addListener("focus", () => {
 
             Orientation.unlockAllOrientations();
@@ -49,6 +52,76 @@ export default function Blue2() {
         };
     }, []);
 
+    function audioInit() {
+        // console.log('audioInit');
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    async function audioStart() {
+
+        // console.log('audioStart');
+        // checkPermission();
+        AudioRecord.start();
+        setTimeout(() => {
+            audioStop();
+        }, 2000);
+    }
+
+    async function audioStop() {
+
+        // console.log('audioStop');
+
+        let audioFile = await AudioRecord.stop();
+        // console.log('userFile', audioFile);
+
+        sendAudio(audioFile);
+
+    }
+
+    function sendAudio(audioFile) {
+
+        var obj = {
+            uri: `file:${audioFile}`,
+            type: 'audio/wav',
+            name: secondColor[4]+'.wav',
+        }
+
+        var data = JSON.stringify(obj)
+        // console.log(data);
+
+        client.post("predict", data, {
+
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+
+        })
+            .then((response) => {
+                // setNames(response.data);
+                console.log('Success part : ', response.data);
+            })
+            .catch(function (error) {
+                if (error.response) {
+                    console.log('Error data : ', error.response.data);
+                    console.log('Error status : ', error.response.status);
+                    console.log('Error headers : ', error.response.headers);
+                } else if (error.request) {
+                    console.log('Error request : ', error.request);
+                } else {
+                    console.log('Error message : ', error.message);
+                }
+                console.log('Error else part : ', error.config);
+            });
+    }
+
     const onSpeechStartHandler = e => {
         // console.log('start handler =>> ', e);
     };
@@ -73,11 +146,7 @@ export default function Blue2() {
 
             sendData(mainColor[4]);
 
-            showAlert = () => {
-                this.setState({
-                    showAlert: true
-                });
-            };
+            audioStart();
 
         } else {
 

frontend/src/screen/activity/Green.js

@@ -9,8 +9,7 @@ import { secondColor } from '../../assets/color/color';
 import client from "../client/Client";
 import Voice from '@react-native-voice/voice';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-
-
+import AudioRecord from 'react-native-audio-record';
 
 import BackButton from "../../component/BackButton"
 
@@ -29,6 +28,8 @@ export default function Green({ navigation }) {
 
         StatusBar.setHidden(true);
 
+        audioInit();
+
         const unsubscribe = navigation.addListener("focus", () => {
 
             Orientation.unlockAllOrientations();
@@ -50,6 +51,77 @@ export default function Green({ navigation }) {
         };
     }, []);
 
+    function audioInit() {
+        // console.log('audioInit');
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    async function audioStart() {
+
+        // console.log('audioStart');
+        // checkPermission();
+        AudioRecord.start();
+        setTimeout(() => {
+            audioStop();
+        }, 2000);
+    }
+
+    async function audioStop() {
+
+        // console.log('audioStop');
+
+        let audioFile = await AudioRecord.stop();
+        // console.log('userFile', audioFile);
+
+        sendAudio(audioFile);
+
+    }
+
+    function sendAudio(audioFile) {
+
+        var obj = {
+            uri: `file:${audioFile}`,
+            type: 'audio/wav',
+            name: secondColor[1]+'.wav',
+        }
+
+        var data = JSON.stringify(obj)
+        // console.log(data);
+
+        client.post("predict", data, {
+
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+
+        })
+            .then((response) => {
+                // setNames(response.data);
+                console.log('Success part : ', response.data);
+            })
+            .catch(function (error) {
+                if (error.response) {
+                    console.log('Error data : ', error.response.data);
+                    console.log('Error status : ', error.response.status);
+                    console.log('Error headers : ', error.response.headers);
+                } else if (error.request) {
+                    console.log('Error request : ', error.request);
+                } else {
+                    console.log('Error message : ', error.message);
+                }
+                console.log('Error else part : ', error.config);
+            });
+    }
+
+
     const onSpeechStartHandler = e => {
         // console.log('start handler =>> ', e);
     };
@@ -70,17 +142,11 @@ export default function Green({ navigation }) {
 
         if (value.includes(secondColor[1]) == true) {
 
-            const value = e.value;
-
             console.log('Your Answer is Correct');
 
             sendData(mainColor[1])
 
-            // showAlert = () => {
-            //     this.setState({
-            //         showAlert: true
-            //     });
-            // };
+            audioStart();
 
         } else {
 

frontend/src/screen/activity/Red.js

@@ -7,7 +7,9 @@ import axios from "axios";
 import { secondColor } from '../../assets/color/color';
 import CountDown from 'react-native-countdown-component';
 import client from "../client/Client";
+import Tts from 'react-native-tts';
 import Voice from '@react-native-voice/voice';
+import AudioRecord from 'react-native-audio-record';
 import BackButton from "../../component/BackButton"
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
@@ -26,6 +28,10 @@ export default function Red({ navigation }) {
 
         StatusBar.setHidden(true);
 
+        audioInit();
+
+        
+
         const unsubscribe = navigation.addListener("focus", () => {
 
             Orientation.unlockAllOrientations();
@@ -48,6 +54,76 @@ export default function Red({ navigation }) {
         };
     }, []);
 
+    function audioInit() {
+        // console.log('audioInit');
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    async function audioStart() {
+
+        // console.log('audioStart');
+        // checkPermission();
+        AudioRecord.start();
+        setTimeout(() => {
+            audioStop();
+        }, 2000);
+    }
+
+    async function audioStop() {
+
+        // console.log('audioStop');
+
+        let audioFile = await AudioRecord.stop();
+        // console.log('userFile', audioFile);
+
+        sendAudio(audioFile);
+
+    }
+
+    function sendAudio(audioFile) {
+
+        var obj = {
+            uri: `file:${audioFile}`,
+            type: 'audio/wav',
+            name: secondColor[0]+'.wav',
+        }
+
+        var data = JSON.stringify(obj)
+        // console.log(data);
+
+        client.post("predict", data, {
+
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+
+        })
+            .then((response) => {
+                // setNames(response.data);
+                console.log('Success part : ', response.data);
+            })
+            .catch(function (error) {
+                if (error.response) {
+                    console.log('Error data : ', error.response.data);
+                    console.log('Error status : ', error.response.status);
+                    console.log('Error headers : ', error.response.headers);
+                } else if (error.request) {
+                    console.log('Error request : ', error.request);
+                } else {
+                    console.log('Error message : ', error.message);
+                }
+                console.log('Error else part : ', error.config);
+            });
+    }
+
     const onSpeechStartHandler = e => {
         // console.log('start handler =>> ', e);
     };
@@ -70,17 +146,14 @@ export default function Red({ navigation }) {
 
             console.log('Your Answer is Correct');
             
-            sendData(mainColor[0])
+            sendData(mainColor[0]);
 
-            // showAlert = () => {
-            //     this.setState({
-            //         showAlert: true
-            //     });
-            // };
+            audioStart();
 
         } else {
 
             console.log('Your Answer is Incorrect', value);
+            
             setModalVisible3(true);
 
         }
@@ -242,7 +315,7 @@ export default function Red({ navigation }) {
                                 style={[styles.buttonClose2]}
                                 onPress={() => navigation.navigate("Green")}
                             >
-                                <Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-10}} />
+                                <Image source={require('../../assets/game/next.png')} resizeMode='contain' style={{ width: 100, height: 70, marginBottom: -10 }} />
                             </TouchableOpacity>
                         </View>
                     </View>
@@ -272,7 +345,7 @@ export default function Red({ navigation }) {
                                 style={[]}
                                 onPress={() => setModalVisible3(!modalVisible3)}
                             >
-                                <Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100,height: 70, marginBottom:-1}} />
+                                <Image source={require('../../assets/alert/tryagain.png')} resizeMode='contain' style={{ width: 100, height: 70, marginBottom: -1 }} />
                             </TouchableOpacity>
                         </View>
                     </View>
@@ -455,7 +528,7 @@ const styles = StyleSheet.create({
         textAlign: "center",
         fontSize: 30,
         marginBottom: 20,
-    },alert2: {
+    }, alert2: {
         backgroundColor: "white",
         borderRadius: 50,
         width: 100,

frontend/src/screen/activity/White.js

@@ -7,6 +7,7 @@ import axios from "axios";
 import { secondColor } from '../../assets/color/color';
 import CountDown from 'react-native-countdown-component';
 import client from "../client/Client";
+import AudioRecord from 'react-native-audio-record';
 import Voice from '@react-native-voice/voice';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import BackButton from "../../component/BackButton"
@@ -26,6 +27,8 @@ export default function White() {
 
         StatusBar.setHidden(true);
 
+        audioInit();
+
         const unsubscribe = navigation.addListener("focus", () => {
 
             Orientation.unlockAllOrientations();
@@ -49,6 +52,76 @@ export default function White() {
         };
     }, []);
 
+    function audioInit() {
+        // console.log('audioInit');
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    async function audioStart() {
+
+        // console.log('audioStart');
+        // checkPermission();
+        AudioRecord.start();
+        setTimeout(() => {
+            audioStop();
+        }, 2000);
+    }
+
+    async function audioStop() {
+
+        // console.log('audioStop');
+
+        let audioFile = await AudioRecord.stop();
+        // console.log('userFile', audioFile);
+
+        sendAudio(audioFile);
+
+    }
+
+    function sendAudio(audioFile) {
+
+        var obj = {
+            uri: `file:${audioFile}`,
+            type: 'audio/wav',
+            name: secondColor[5]+'.wav',
+        }
+
+        var data = JSON.stringify(obj)
+        // console.log(data);
+
+        client.post("predict", data, {
+
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+
+        })
+            .then((response) => {
+                // setNames(response.data);
+                console.log('Success part : ', response.data);
+            })
+            .catch(function (error) {
+                if (error.response) {
+                    console.log('Error data : ', error.response.data);
+                    console.log('Error status : ', error.response.status);
+                    console.log('Error headers : ', error.response.headers);
+                } else if (error.request) {
+                    console.log('Error request : ', error.request);
+                } else {
+                    console.log('Error message : ', error.message);
+                }
+                console.log('Error else part : ', error.config);
+            });
+    }
+
     const onSpeechStartHandler = e => {
         // console.log('start handler =>> ', e);
     };
@@ -73,11 +146,7 @@ export default function White() {
 
             sendData(mainColor[5])
 
-            showAlert = () => {
-                this.setState({
-                    showAlert: true
-                });
-            };
+            audioStart();
 
         } else {
 
@@ -141,14 +210,6 @@ export default function White() {
         // setPartialResults(e.value);
     };
 
-    const onFinishCD = () => {
-        Alert.alert('Countdown Finished...');
-    }
-
-    const onPressCD = () => {
-        Alert.alert('Countdown Component Pressed...');
-    }
-
     const startRecording = async () => {
 
         setModalVisible(true);

frontend/src/screen/activity/Yellow.js

@@ -8,6 +8,7 @@ import CountDown from 'react-native-countdown-component';
 import { mainColor } from '../../assets/color/color';
 import client from "../client/Client";
 import Voice from '@react-native-voice/voice';
+import AudioRecord from 'react-native-audio-record';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import BackButton from "../../component/BackButton"
 
@@ -25,6 +26,8 @@ export default function Yellow() {
         Voice.destroy().then(Voice.removeAllListeners);
         StatusBar.setHidden(true);
 
+        audioInit();
+
         const unsubscribe = navigation.addListener("focus", () => {
 
             Orientation.unlockAllOrientations();
@@ -48,6 +51,76 @@ export default function Yellow() {
         };
     }, []);
 
+    function audioInit() {
+        // console.log('audioInit');
+        const colorAudio = {
+            sampleRate: 16000,
+            channels: 1,
+            bitsPerSample: 16,
+            wavFile: 'color.wav', // thise wave file name
+        };
+
+        AudioRecord.init(colorAudio);
+    }
+
+    async function audioStart() {
+
+        // console.log('audioStart');
+        // checkPermission();
+        AudioRecord.start();
+        setTimeout(() => {
+            audioStop();
+        }, 2000);
+    }
+
+    async function audioStop() {
+
+        // console.log('audioStop');
+
+        let audioFile = await AudioRecord.stop();
+        // console.log('userFile', audioFile);
+
+        sendAudio(audioFile);
+
+    }
+
+    function sendAudio(audioFile) {
+
+        var obj = {
+            uri: `file:${audioFile}`,
+            type: 'audio/wav',
+            name: secondColor[3]+'.wav',
+        }
+
+        var data = JSON.stringify(obj)
+        // console.log(data);
+
+        client.post("predict", data, {
+
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+
+        })
+            .then((response) => {
+                // setNames(response.data);
+                console.log('Success part : ', response.data);
+            })
+            .catch(function (error) {
+                if (error.response) {
+                    console.log('Error data : ', error.response.data);
+                    console.log('Error status : ', error.response.status);
+                    console.log('Error headers : ', error.response.headers);
+                } else if (error.request) {
+                    console.log('Error request : ', error.request);
+                } else {
+                    console.log('Error message : ', error.message);
+                }
+                console.log('Error else part : ', error.config);
+            });
+    }
+
     const onSpeechStartHandler = e => {
         // console.log('start handler =>> ', e);
     };
@@ -72,11 +145,7 @@ export default function Yellow() {
 
             sendData(mainColor[3])
 
-            showAlert = () => {
-                this.setState({
-                    showAlert: true
-                });
-            };
+            audioStart();
 
         } else {