attention span new ui redesign

web-app/backend/server.py

@@ -45,6 +45,8 @@ def predictAttention():
     file = request.files['file']
     testNo = request.form.get('questionIndex')
     filename = request.form.get('filename')
+    activity = request.form.get('attentionttype')
+    candidateID = request.form.get('candidateID')
     if file is None or filename == "":
         return jsonify({'error: no file'})
     file.save("./uploads/"+filename)
@@ -58,10 +60,11 @@ def predictAttention():
     dataJson.append(dataDict)
     dt_string = datetime.now().strftime("%d/%m/%Y %H:%M:%S")
     db.db['attentionlevelScore'].insert_one({
-                "activityName": "Manual_Attention_Test",
+        "candidateID": candidateID,
+        "activityName": activity,
         "questionIndex": testNo,
         "attentionLevelScore": dataDict,
-                "createdAt":dt_string,
+        "createdAt": dt_string,
     })
     print("Prediction02", scoreLst)
     print("Prediction", dataDict)
@@ -154,15 +157,16 @@ def data():
                 'age': age,
                 'residence': residence,
                 'disorders': disorders,
-                'email' : email,
-                'contactNo' : contactNo,
-                'institute' : institute,
-                'status' : status,
-                'parent' : parent
+                'email': email,
+                'contactNo': contactNo,
+                'institute': institute,
+                'status': status,
+                'parent': parent
             }
             dataJson.append(dataDict)
         return jsonify(dataJson)
 
+
 @app.route('/institutes/', methods=['GET'])
 @cross_origin()
 def data3():
@@ -371,7 +375,7 @@ def predictShapePattern():
 
 
 # Reasoning IQ evaluation
-@app.route('/predictPictureConcept', methods = ['POST','GET'])
+@app.route('/predictPictureConcept', methods=['POST', 'GET'])
 @cross_origin()
 def predictPictureConcept():
     if request.method == 'POST':
@@ -386,14 +390,15 @@ def predictPictureConcept():
             file.save("./"+file.filename)
             prediction = transform_audio(file.filename)
             activityName = "Picture Concept"
-            analysis = reasoningIQScoreCalculator(activityName,questionIndex,prediction)
+            analysis = reasoningIQScoreCalculator(
+                activityName, questionIndex, prediction)
             db.db['reasoningIQScore'].insert_one({
                 "activityName": activityName,
                 "candidateID": candidateID,
                 "questionIndex": questionIndex,
                 "transcription": prediction,
-                "score":analysis[0],
-                "expectedAnswer":analysis[1]
+                "score": analysis[0],
+                "expectedAnswer": analysis[1]
             })
             return jsonify({"msg": "Prediction completed"})
         except:
@@ -499,6 +504,7 @@ def predictKnowledgeIq():
 # Running app
 if __name__ == "__main__":
     app.secret_key = os.urandom(24)
-    app.run(host="192.168.43.120",ssl_context='adhoc',debug=True, use_reloader=False)
+    app.run(host="172.20.10.7", ssl_context='adhoc',
+            debug=True, use_reloader=False)
 
 flask_cors.CORS(app, expose_headers='Authorization')

web-app/frontend/package.json

@@ -28,6 +28,7 @@
         "react-scripts": "5.0.1",
         "react-signature-canvas": "^1.0.6",
         "react-spinners": "^0.13.4",
+        "react-webcam": "^7.0.1",
         "recordrtc": "^5.6.2",
         "validator": "^13.7.0",
         "web-vitals": "^2.1.4",

web-app/frontend/src/components/activities/ActivityContainer.css

@@ -32,7 +32,7 @@
 
   border: solid gainsboro;
   border-radius: 5px;
-  padding: 5px;
+  /* padding: 5px; */
 }
 
 .activity-container-navigator-item {

web-app/frontend/src/components/activities/ActivityContainer.jsx

-import React, { useState, useEffect } from "react";
-import "./ActivityContainer.css";
+import React, { useState, useEffect } from 'react';
+import './ActivityContainer.css';
 import {
     PictureConcept,
     Arithmetic,
@@ -8,13 +8,13 @@ import {
     DigitSpan,
     DigitSpanController,
     VideoPlayerScreen,
-} from "../index";
-import LetterPattern from "./mentalChronometryEval/letterPattern/LetterPattern";
-import Coding from "./mentalChronometryEval/coding/Coding";
-import PairCancerlation from "./mentalChronometryEval/pairCancerlation/PairCancerlation";
-import CreativeAttention from "./attentionEval/creativeSide/CreativeContainer";
-import AnalyticalAttention from "./attentionEval/analyticalSide/AnalyticalContainer";
-import { useNavigate } from "react-router-dom";
+} from '../index';
+import LetterPattern from './mentalChronometryEval/letterPattern/LetterPattern';
+import Coding from './mentalChronometryEval/coding/Coding';
+import PairCancerlation from './mentalChronometryEval/pairCancerlation/PairCancerlation';
+import CreativeAttention from './attentionEval/creativeSide/CreativeContainer';
+import AnalyticalAttention from './attentionEval/analyticalSide/AnalyticalContainer';
+import { useNavigate } from 'react-router-dom';
 
 const ActivityContainer = () => {
     const navigate = useNavigate();
@@ -39,9 +39,11 @@ const ActivityContainer = () => {
                     <div
                         id="1"
                         style={{
-              backgroundColor: currentActivityNo === 1 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 1 ? 'white' : 'teal',
                             color: currentActivityNo === 1 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 1 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 1 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -54,9 +56,11 @@ const ActivityContainer = () => {
                     <div
                         id="2"
                         style={{
-              backgroundColor: currentActivityNo === 2 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 2 ? 'white' : 'teal',
                             color: currentActivityNo === 2 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 2 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 2 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -69,9 +73,11 @@ const ActivityContainer = () => {
                     <div
                         id="3"
                         style={{
-              backgroundColor: currentActivityNo === 3 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 3 ? 'white' : 'teal',
                             color: currentActivityNo === 3 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 3 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 3 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -84,9 +90,11 @@ const ActivityContainer = () => {
                     <div
                         id="4"
                         style={{
-              backgroundColor: currentActivityNo === 4 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 4 ? 'white' : 'teal',
                             color: currentActivityNo === 4 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 4 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 4 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -99,9 +107,11 @@ const ActivityContainer = () => {
                     <div
                         id="5"
                         style={{
-              backgroundColor: currentActivityNo === 5 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 5 ? 'white' : 'teal',
                             color: currentActivityNo === 5 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 5 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 5 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -114,9 +124,11 @@ const ActivityContainer = () => {
                     <div
                         id="6"
                         style={{
-              backgroundColor: currentActivityNo === 6 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 6 ? 'white' : 'teal',
                             color: currentActivityNo === 6 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 6 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 6 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -129,9 +141,11 @@ const ActivityContainer = () => {
                     <div
                         id="7"
                         style={{
-              backgroundColor: currentActivityNo === 7 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 7 ? 'white' : 'teal',
                             color: currentActivityNo === 7 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 7 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 7 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -153,9 +167,11 @@ const ActivityContainer = () => {
                     <div
                         id="9"
                         style={{
-              backgroundColor: currentActivityNo === 9 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 9 ? 'white' : 'teal',
                             color: currentActivityNo === 9 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 9 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 9 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -163,14 +179,16 @@ const ActivityContainer = () => {
                             setIsGuideVideoClicked(true);
                         }}
                     >
-            9 WIP
+                        9
                     </div>
                     <div
                         id="10"
                         style={{
-              backgroundColor: currentActivityNo === 10 ? 'white' : 'teal',
+                            backgroundColor:
+                                currentActivityNo === 10 ? 'white' : 'teal',
                             color: currentActivityNo === 10 ? 'teal' : 'white',
-              fontWeight: currentActivityNo === 10 ? 'bold' : 'normal'
+                            fontWeight:
+                                currentActivityNo === 10 ? 'bold' : 'normal',
                         }}
                         className="activity-container-navigator-item"
                         onClick={() => {
@@ -178,7 +196,7 @@ const ActivityContainer = () => {
                             setIsGuideVideoClicked(true);
                         }}
                     >
-            10 WIP
+                        10
                     </div>
                 </div>
                 <div id="activity-container-item-1">
@@ -190,31 +208,47 @@ const ActivityContainer = () => {
                     ) : (
                         <>
                             {currentActivityNo === 1 && (
-                <PictureConcept nextActivity={nextActivityHandler} />
+                                <PictureConcept
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                             {currentActivityNo === 2 && (
-                <Arithmetic nextActivity={nextActivityHandler} />
+                                <Arithmetic
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                             {currentActivityNo === 3 && (
-                <LetterPattern nextActivity={nextActivityHandler} />
+                                <LetterPattern
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                             {currentActivityNo === 4 && (
                                 <Coding nextActivity={nextActivityHandler} />
                             )}
                             {currentActivityNo === 5 && (
-                <PairCancerlation nextActivity={nextActivityHandler} />
+                                <PairCancerlation
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                             {currentActivityNo === 6 && (
-                <ColourNumbersController nextActivity={nextActivityHandler} />
+                                <ColourNumbersController
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                             {currentActivityNo === 7 && (
-                <DigitSpanController nextActivity={nextActivityHandler} />
+                                <DigitSpanController
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                             {currentActivityNo === 9 && (
-                <CreativeAttention nextActivity={nextActivityHandler} />
+                                <CreativeAttention
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                             {currentActivityNo === 10 && (
-                <AnalyticalAttention nextActivity={nextActivityHandler} />
+                                <AnalyticalAttention
+                                    nextActivity={nextActivityHandler}
+                                />
                             )}
                         </>
                     )}

web-app/frontend/src/components/activities/attentionEval/analyticalSide/AnalyticalContainer.jsx

 import React, { useState, useRef, useEffect } from "react";
+import VideoPlayerScreen2 from "../videoPlayer2";
 
 function AnalyticalAttention() {
+  const [currentLevel, setCurrentLevel] = useState(4);
+  const [attention, setattention] = useState([]);
+
+  useEffect(() => {
+    console.log("Checking currentLevel:", currentLevel);
+  }, [currentLevel]);
+
+  const changeActivityLevel = (state) => {
+    setTimeout(async () => {
+      await console.log("video has ended", state);
+      await setCurrentLevel(currentLevel + 1);
+      await console.log("Level is :", currentLevel);
+    }, 2000);
+  };
+
   return (
-        <p>Hello</p>
-    )
+    <>
+      <div className="overflow-hidden bg-white shadow sm:rounded-lg">
+        <div className="m-1 p-2">
+          {currentLevel === 4 && (
+            <VideoPlayerScreen2
+              currentActivtyIndex={4}
+              activityType={"AnalyticalAttention"}
+              changeLevel={changeActivityLevel}
+            />
+          )}
+          {currentLevel === 5 && (
+            <VideoPlayerScreen2
+              currentActivtyIndex={5}
+              activityType={"AnalyticalAttention"}
+              changeLevel={changeActivityLevel}
+            />
+          )}
+          {currentLevel === 6 && (
+            <VideoPlayerScreen2
+              currentActivtyIndex={6}
+              activityType={"AnalyticalAttention"}
+              changeLevel={changeActivityLevel}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
 }
 
-export default AnalyticalAttention
+export default AnalyticalAttention;
\ No newline at end of file

web-app/frontend/src/components/activities/attentionEval/creativeSide/CreativeContainer.jsx

-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useEffect } from "react";
+import "./creativeside.css";
+import VideoPlayerScreen2 from "../videoPlayer2";
+
+function CreativeAttention() {
+  const [currentLevel, setCurrentLevel] = useState(1);
+  const [attention, setattention] = useState([]);
+
+  useEffect(() => {
+    console.log("Checking currentLevel:", currentLevel);
+  }, [currentLevel]);
+
+  const changeActivityLevel = (state) => {
+    setTimeout(async () => {
+      await console.log("video has ended", state);
+      await setCurrentLevel(currentLevel + 1);
+      await console.log("Level is :", currentLevel);
+    }, 2000);
+  };
 
-function CreativeAttention () {
   return (
-        <p>Hello creative people</p>
-    )
+    <>
+      <div className="overflow-hidden bg-white shadow sm:rounded-lg">
+        <div className="m-1 p-2">
+          {currentLevel === 1 && (
+            <VideoPlayerScreen2
+              currentActivtyIndex={1}
+              activityType={"CreativeAttention"}
+              changeLevel={changeActivityLevel}
+            />
+          )}
+          {currentLevel === 2 && (
+            <VideoPlayerScreen2
+              currentActivtyIndex={2}
+              activityType={"CreativeAttention"}
+              changeLevel={changeActivityLevel}
+            />
+          )}
+          {currentLevel === 3 && (
+            <VideoPlayerScreen2
+              currentActivtyIndex={3}
+              activityType={"CreativeAttention"}
+              changeLevel={changeActivityLevel}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
 }
 
-export default CreativeAttention
+export default CreativeAttention;
\ No newline at end of file

web-app/frontend/src/components/activities/attentionEval/predictAttention.jsx

+import React, {useState,useEffect} from "react";
+import API from '../../../config/api';
+
+
+export const predictAttention = async (data) => {
+    let response;
+
+    await API.post("attentionPrediction", data, {
+        headers: {
+        "Access-Control-Allow-Origin": "*",
+        },
+    })
+        .then((res) => {
+        console.log(res.data[0])
+        response = res.data[0];
+        })
+        .catch((err) => {
+        console.log(err);
+        });
+    
+        return response
+}
\ No newline at end of file

web-app/frontend/src/components/activities/attentionEval/videoPlayer2.jsx

+import React, { useState, useEffect, useRef } from "react";
+import Webcam from "react-webcam";
+import { predictAttention } from "./predictAttention";
+
+const VideoPlayerScreen2 = ({ currentActivtyIndex, activityType, changeLevel }) => {
+  const webcamRef = React.useRef(null);
+  const mediaRecorderRef = React.useRef(null);
+  const [videoLink, setVideoLink] = useState("");
+  const vidRef = useRef();
+  const [capturing, setCapturing] = React.useState(false);
+  const [recordedChunks, setRecordedChunks] = React.useState([]);
+  const videoConstraints = {
+    facingMode: "user",
+  };
+
+  const handleStartCaptureClick = React.useCallback(() => {
+    console.log("Started recording");
+    setCapturing(true);
+    mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
+      mimeType: "video/webm",
+    });
+    mediaRecorderRef.current.addEventListener(
+      "dataavailable",
+      handleDataAvailable
+    );
+    mediaRecorderRef.current.start();
+  }, [webcamRef, setCapturing, mediaRecorderRef]);
+
+  const handleDataAvailable = React.useCallback(
+    ({ data }) => {
+      if (data.size > 0) {
+        setRecordedChunks((prev) => prev.concat(data));
+      }
+    },
+    [setRecordedChunks]
+  );
+
+  const handleStopCaptureClick = React.useCallback(() => {
+    mediaRecorderRef.current.stop();
+    setCapturing(false);
+    console.log("Stopped recording");
+  }, [mediaRecorderRef, webcamRef, setCapturing]);
+
+  const handlePredict = React.useCallback(() => {
+    let candidateID = null;
+    if (localStorage) {
+      candidateID = localStorage.getItem("candidateID");
+    }
+    console.log("Next level")
+    changeLevel(true);
+    if (recordedChunks.length) {
+        console.log("Prediction started");
+      const blob = new Blob(recordedChunks, {
+        type: "video/webm",
+      });
+      const data = new FormData();
+      data.append("file", blob);
+      data.append("filename", "att.mp4");
+      data.append("questionIndex", currentActivtyIndex);
+      data.append("attentionttype", activityType);
+      data.append("candidateID", candidateID);
+      predictAttention(data);
+      setRecordedChunks([]);
+    }
+  }, [recordedChunks]);
+
+  useEffect(() => {
+    switch (currentActivtyIndex) {
+      case 1:
+        setVideoLink("/Videos/drawafish.mp4");
+        break;
+      case 2:
+        setVideoLink("/Videos/singaSong.mp4");
+        break;
+      case 3:
+        setVideoLink("/Videos/makeflowers.mp4");
+        break;
+      case 4:
+        setVideoLink("/Videos/drawafish.mp4");
+        break;
+      case 5:
+        setVideoLink("/Videos/drawafish.mp4");
+        break;
+      case 6:
+        setVideoLink("/Videos/drawafish.mp4");
+        break;
+      default:
+    }
+    const timer = setTimeout(() => {
+      vidRef.current.play();
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [currentActivtyIndex]);
+
+  const myCallback = async () => {
+    await handleStopCaptureClick();
+  };
+
+  const myCallback2 = () => {
+    handleStartCaptureClick();
+  };
+
+  return (
+    <>
+      <div className="w-full m-4 p-4">
+        <div className="flex items-center">
+          {videoLink && (
+            <>
+              <video
+                ref={vidRef}
+                className="w-full h-full p-2"
+                controls
+                onEnded={() => myCallback()}
+                onPlay={() => myCallback2()}
+              >
+                <source src={videoLink} type="video/mp4" />
+              </video>
+            </>
+          )}
+        </div>
+        {recordedChunks.length > 0 && (
+          <button onClick={handlePredict}>Next</button>
+        )}
+        <div className="invisible h-0 w-0">
+          <Webcam
+            audio={false}
+            videoConstraints={videoConstraints}
+            ref={webcamRef}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default VideoPlayerScreen2;

web-app/frontend/src/config/api.js

 import axios from "axios";
 
 export default axios.create({
-  baseURL: `http://127.0.0.1:5000/`,
+  baseURL: `https://172.20.10.7:5000/`,
 });

web-app/frontend/src/pages/attention_demo/attentionspan.jsx

@@ -4,15 +4,11 @@ import "./attentionspan.css";
 import { useNavigate } from "react-router-dom";
 import API from "../../config/api";
 import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam";
-import type {
-  RecordWebcamOptions,
-  RecordWebcamHook,
-} from "react-record-webcam";
 import img1 from "../../assets/439.jpg";
 import img2 from "../../assets/dsd.jpg";
 import img3 from "../../assets/36006.jpg";
 
-const OPTIONS: RecordWebcamOptions = {
+const OPTIONS = {
   filename: "test-filename",
   fileType: "mp4",
   width: 1920,
@@ -30,7 +26,7 @@ const AttentionSpan_screen = () => {
   const [teststate3, setTestState3] = useState(false);
   const vidRef = useRef();
   // object for storing and using data
-  const recordWebcam: RecordWebcamHook = useRecordWebcam(OPTIONS);
+  const recordWebcam = useRecordWebcam(OPTIONS);
 
   const getRecordingFileHooks = async () => {
     const blob = await recordWebcam.getRecording();
@@ -70,7 +66,7 @@ const AttentionSpan_screen = () => {
     console.log("testing", blob);
     const data = new FormData();
     data.append("file", blob);
-    data.append("filename", "att.mp4")
+    data.append("filename", "att.mp4");
     data.append("questionIndex", id);
     await API.post("attentionPrediction", data, {
       headers: {
@@ -78,7 +74,7 @@ const AttentionSpan_screen = () => {
       },
     })
       .then((res) => {
-        console.log(res.data[0])
+        console.log(res.data[0]);
         setattention(res.data[0]);
         setisClicked(true);
       })
@@ -223,7 +219,7 @@ const AttentionSpan_screen = () => {
                           <>
                             <p>
                               Low level attention :{" "}
-                              {Math.round(attention.low_attention* 100)}%
+                              {Math.round(attention.low_attention * 100)}%
                             </p>
                             <p>
                               Mid level attention :{" "}
@@ -240,7 +236,10 @@ const AttentionSpan_screen = () => {
                     <div className="mt-4">
                       <button
                         className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
-                        onClick={() => {setTestState(false); setisClicked(false);}}
+                        onClick={() => {
+                          setTestState(false);
+                          setisClicked(false);
+                        }}
                       >
                         Get Back
                       </button>
@@ -335,18 +334,9 @@ const AttentionSpan_screen = () => {
                           <h2>Results are processing..</h2>
                         ) : (
                           <>
-                            <p>
-                              Low level attention :{" "}
-                              {attention[0] * 100}
-                            </p>
-                            <p>
-                              Mid level attention :{" "}
-                              {attention[1] * 100}
-                            </p>
-                            <p>
-                              High level attention :{" "}
-                              {attention[2] * 100}
-                            </p>
+                            <p>Low level attention : {attention[0] * 100}</p>
+                            <p>Mid level attention : {attention[1] * 100}</p>
+                            <p>High level attention : {attention[2] * 100}</p>
                           </>
                         )}
                       </header>
@@ -354,7 +344,10 @@ const AttentionSpan_screen = () => {
                     <div className="mt-4">
                       <button
                         className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
-                        onClick={() => {setTestState2(false); setisClicked(false);}}
+                        onClick={() => {
+                          setTestState2(false);
+                          setisClicked(false);
+                        }}
                       >
                         Get Back
                       </button>
@@ -449,18 +442,9 @@ const AttentionSpan_screen = () => {
                           <h2>Results are processing..</h2>
                         ) : (
                           <>
-                            <p>
-                              Low level attention :{" "}
-                              {attention[0] * 100}
-                            </p>
-                            <p>
-                              Mid level attention :{" "}
-                              {attention[1] * 100}
-                            </p>
-                            <p>
-                              High level attention :{" "}
-                              {attention[2] * 100}
-                            </p>
+                            <p>Low level attention : {attention[0] * 100}</p>
+                            <p>Mid level attention : {attention[1] * 100}</p>
+                            <p>High level attention : {attention[2] * 100}</p>
                           </>
                         )}
                       </header>
@@ -468,7 +452,10 @@ const AttentionSpan_screen = () => {
                     <div className="mt-4">
                       <button
                         className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
-                        onClick={() => {setTestState3(false); setisClicked(false);}}
+                        onClick={() => {
+                          setTestState3(false);
+                          setisClicked(false);
+                        }}
                       >
                         Get Back
                       </button>
@@ -480,107 +467,6 @@ const AttentionSpan_screen = () => {
           </div>
         </section>
       )}
-      {/* <div>
-        <div>
-          <div className="demo-section px-4">
-            <div className="m-3">
-              <div className="bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x">
-                {" "}
-                <button
-                  className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
-                  disabled={
-                    recordWebcam.status === CAMERA_STATUS.OPEN ||
-                    recordWebcam.status === CAMERA_STATUS.RECORDING ||
-                    recordWebcam.status === CAMERA_STATUS.PREVIEW
-                  }
-                  onClick={recordWebcam.open}
-                >
-                  Open camera
-                </button>{" "}
-                <button
-                  className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
-                  disabled={
-                    recordWebcam.status === CAMERA_STATUS.CLOSED ||
-                    recordWebcam.status === CAMERA_STATUS.PREVIEW
-                  }
-                  onClick={recordWebcam.close}
-                >
-                  Close camera
-                </button>{" "}
-                <button
-                  className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
-                  disabled={
-                    recordWebcam.status === CAMERA_STATUS.CLOSED ||
-                    recordWebcam.status === CAMERA_STATUS.RECORDING ||
-                    recordWebcam.status === CAMERA_STATUS.PREVIEW
-                  }
-                  onClick={recordWebcam.start}
-                >
-                  Start recording
-                </button>{" "}
-                <button
-                  className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
-                  disabled={recordWebcam.status !== CAMERA_STATUS.RECORDING}
-                  onClick={recordWebcam.stop}
-                >
-                  Stop recording
-                </button>{" "}
-                <button
-                  className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
-                  disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW}
-                  onClick={recordWebcam.retake}
-                >
-                  Retake
-                </button>{" "}
-                <button
-                  className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
-                  disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW}
-                  onClick={recordWebcam.download}
-                >
-                  Download
-                </button>{" "}
-                <button
-                  className="py-1.5 px-4 bg-gray-50 hover:bg-gray-100 active:bg-gray-200 first:rounded-l-lg last:rounded-r-lg"
-                  disabled={recordWebcam.status !== CAMERA_STATUS.PREVIEW}
-                  onClick={saveFile}
-                >
-                  Predict
-                </button>{" "}
-              </div>
-            </div>
-            <div className="mx-4">
-              <video
-                ref={recordWebcam.webcamRef}
-                style={{
-                  display: `${
-                    recordWebcam.status === CAMERA_STATUS.OPEN ||
-                    recordWebcam.status === CAMERA_STATUS.RECORDING
-                      ? "block"
-                      : "none"
-                  }`,
-                }}
-                autoPlay
-                muted
-              />
-            </div>
-            <div className="mx-4">
-              <video
-                ref={recordWebcam.previewRef}
-                style={{
-                  display: `${
-                    recordWebcam.status === CAMERA_STATUS.PREVIEW
-                      ? "block"
-                      : "none"
-                  }`,
-                }}
-                autoPlay
-                muted
-                loop
-              />
-            </div>
-          </div>
-        </div>
-      </div> */}
     </>
   );
 };