Skip to content

2
2022-073
Commit e19931e4 authored by NilanDMeegoda's avatar NilanDMeegoda
Browse files
Options

attention span new ui redesign

parent c82cb6a9
Hide whitespace changes
Inline Side-by-side
Showing with 615 additions and 445 deletions
web-app/backend/server.py
View file @ e19931e4
...@@ -45,24 +45,27 @@ def predictAttention(): ...@@ -45,24 +45,27 @@ def predictAttention():
file = request.files['file'] file = request.files['file']
testNo = request.form.get('questionIndex') testNo = request.form.get('questionIndex')
filename = request.form.get('filename') filename = request.form.get('filename')
activity = request.form.get('attentionttype')
candidateID = request.form.get('candidateID')
if file is None or filename == "": if file is None or filename == "":
return jsonify({'error: no file'}) return jsonify({'error: no file'})
file.save("./uploads/"+filename) file.save("./uploads/"+filename)
destination = directory + r"\uploads\att.mp4" destination = directory + r"\uploads\att.mp4"
scoreLst = captureImage(destination, 10) scoreLst = captureImage(destination, 10)
dataDict = { dataDict = {
'low_attention': scoreLst[0], 'low_attention': scoreLst[0],
'mid_attention': scoreLst[1], 'mid_attention': scoreLst[1],
'high_attention': scoreLst[2], 'high_attention': scoreLst[2],
} }
dataJson.append(dataDict) dataJson.append(dataDict)
dt_string = datetime.now().strftime("%d/%m/%Y %H:%M:%S") dt_string = datetime.now().strftime("%d/%m/%Y %H:%M:%S")
db.db['attentionlevelScore'].insert_one({ db.db['attentionlevelScore'].insert_one({
"activityName": "Manual_Attention_Test", "candidateID": candidateID,
"questionIndex": testNo, "activityName": activity,
"attentionLevelScore": dataDict, "questionIndex": testNo,
"createdAt":dt_string, "attentionLevelScore": dataDict,
}) "createdAt": dt_string,
})
print("Prediction02", scoreLst) print("Prediction02", scoreLst)
print("Prediction", dataDict) print("Prediction", dataDict)
return jsonify(dataJson) return jsonify(dataJson)
...@@ -108,7 +111,7 @@ def data(): ...@@ -108,7 +111,7 @@ def data():
institute = body['institute'] institute = body['institute']
status = body['status'] status = body['status']
parent = body['parent'] parent = body['parent']
db.db['users'].insert_one({ db.db['users'].insert_one({
"firstName": firstName, "firstName": firstName,
"lastName": lastName, "lastName": lastName,
...@@ -154,15 +157,16 @@ def data(): ...@@ -154,15 +157,16 @@ def data():
'age': age, 'age': age,
'residence': residence, 'residence': residence,
'disorders': disorders, 'disorders': disorders,
'email' : email, 'email': email,
'contactNo' : contactNo, 'contactNo': contactNo,
'institute' : institute, 'institute': institute,
'status' : status, 'status': status,
'parent' : parent 'parent': parent
} }
dataJson.append(dataDict) dataJson.append(dataDict)
return jsonify(dataJson) return jsonify(dataJson)
@app.route('/institutes/', methods=['GET']) @app.route('/institutes/', methods=['GET'])
@cross_origin() @cross_origin()
def data3(): def data3():
...@@ -371,7 +375,7 @@ def predictShapePattern(): ...@@ -371,7 +375,7 @@ def predictShapePattern():
# Reasoning IQ evaluation # Reasoning IQ evaluation
@app.route('/predictPictureConcept', methods = ['POST','GET']) @app.route('/predictPictureConcept', methods=['POST', 'GET'])
@cross_origin() @cross_origin()
def predictPictureConcept(): def predictPictureConcept():
if request.method == 'POST': if request.method == 'POST':
...@@ -386,19 +390,20 @@ def predictPictureConcept(): ...@@ -386,19 +390,20 @@ def predictPictureConcept():
file.save("./"+file.filename) file.save("./"+file.filename)
prediction = transform_audio(file.filename) prediction = transform_audio(file.filename)
activityName = "Picture Concept" activityName = "Picture Concept"
analysis = reasoningIQScoreCalculator(activityName,questionIndex,prediction) analysis = reasoningIQScoreCalculator(
activityName, questionIndex, prediction)
db.db['reasoningIQScore'].insert_one({ db.db['reasoningIQScore'].insert_one({
"activityName": activityName, "activityName": activityName,
"candidateID": candidateID, "candidateID": candidateID,
"questionIndex": questionIndex, "questionIndex": questionIndex,
"transcription": prediction, "transcription": prediction,
"score":analysis[0], "score": analysis[0],
"expectedAnswer":analysis[1] "expectedAnswer": analysis[1]
}) })
return jsonify({"msg": "Prediction completed"}) return jsonify({"msg": "Prediction completed"})
except: except:
return jsonify({"error": "Error during pipeline execution"}) return jsonify({"error": "Error during pipeline execution"})
@app.route('/predictArithmetic', methods=['POST', 'GET']) @app.route('/predictArithmetic', methods=['POST', 'GET'])
@cross_origin() @cross_origin()
...@@ -499,6 +504,7 @@ def predictKnowledgeIq(): ...@@ -499,6 +504,7 @@ def predictKnowledgeIq():
# Running app # Running app
if __name__ == "__main__": if __name__ == "__main__":
app.secret_key = os.urandom(24) 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') flask_cors.CORS(app, expose_headers='Authorization')
web-app/frontend/package.json
View file @ e19931e4
{ {
"name": "web-app-frontend", "name": "web-app-frontend",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.0", "@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0", "@emotion/styled": "^11.10.0",
"@headlessui/react": "^1.6.6", "@headlessui/react": "^1.6.6",
"@heroicons/react": "^1.0.6", "@heroicons/react": "^1.0.6",
"@mui/icons-material": "^5.8.4", "@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.3", "@mui/material": "^5.9.3",
"@mui/x-date-pickers": "^5.0.0-beta.3", "@mui/x-date-pickers": "^5.0.0-beta.3",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0", "@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2", "axios": "^0.27.2",
"date-fns": "^2.29.1", "date-fns": "^2.29.1",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"formik": "^2.2.9", "formik": "^2.2.9",
"react": "^18.2.0", "react": "^18.2.0",
"react-circular-progressbar": "^2.0.4", "react-circular-progressbar": "^2.0.4",
"react-countdown-circle-timer": "^3.0.9", "react-countdown-circle-timer": "^3.0.9",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0", "react-hot-toast": "^2.4.0",
"react-image-crop": "^10.0.7", "react-image-crop": "^10.0.7",
"react-record-webcam": "^0.0.14", "react-record-webcam": "^0.0.14",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"react-signature-canvas": "^1.0.6", "react-signature-canvas": "^1.0.6",
"react-spinners": "^0.13.4", "react-spinners": "^0.13.4",
"recordrtc": "^5.6.2", "react-webcam": "^7.0.1",
"validator": "^13.7.0", "recordrtc": "^5.6.2",
"web-vitals": "^2.1.4", "validator": "^13.7.0",
"yup": "^0.32.11" "web-vitals": "^2.1.4",
}, "yup": "^0.32.11"
"scripts": { },
"start": "react-scripts start", "scripts": {
"build": "react-scripts build", "start": "react-scripts start",
"test": "react-scripts test", "build": "react-scripts build",
"eject": "react-scripts eject" "test": "react-scripts test",
}, "eject": "react-scripts eject"
"eslintConfig": { },
"extends": [ "eslintConfig": {
"react-app", "extends": [
"react-app/jest" "react-app",
] "react-app/jest"
}, ]
"browserslist": { },
"production": [ "browserslist": {
">0.2%", "production": [
"not dead", ">0.2%",
"not op_mini all" "not dead",
], "not op_mini all"
"development": [ ],
"last 1 chrome version", "development": [
"last 1 firefox version", "last 1 chrome version",
"last 1 safari version" "last 1 firefox version",
] "last 1 safari version"
}, ]
"devDependencies": { },
"autoprefixer": "^10.4.8", "devDependencies": {
"postcss": "^8.4.14", "autoprefixer": "^10.4.8",
"tailwindcss": "^3.1.7" "postcss": "^8.4.14",
} "tailwindcss": "^3.1.7"
}
} }
web-app/frontend/src/components/activities/ActivityContainer.css
View file @ e19931e4
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
border: solid gainsboro; border: solid gainsboro;
border-radius: 5px; border-radius: 5px;
padding: 5px; /* padding: 5px; */
} }
.activity-container-navigator-item { .activity-container-navigator-item {
......
web-app/frontend/src/components/activities/ActivityContainer.jsx
View file @ e19931e4
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from 'react';
import "./ActivityContainer.css"; import './ActivityContainer.css';
import { import {
PictureConcept, PictureConcept,
Arithmetic, Arithmetic,
ColourNumbers, ColourNumbers,
ColourNumbersController, ColourNumbersController,
DigitSpan, DigitSpan,
DigitSpanController, DigitSpanController,
VideoPlayerScreen, VideoPlayerScreen,
} from "../index"; } from '../index';
import LetterPattern from "./mentalChronometryEval/letterPattern/LetterPattern"; import LetterPattern from './mentalChronometryEval/letterPattern/LetterPattern';
import Coding from "./mentalChronometryEval/coding/Coding"; import Coding from './mentalChronometryEval/coding/Coding';
import PairCancerlation from "./mentalChronometryEval/pairCancerlation/PairCancerlation"; import PairCancerlation from './mentalChronometryEval/pairCancerlation/PairCancerlation';
import CreativeAttention from "./attentionEval/creativeSide/CreativeContainer"; import CreativeAttention from './attentionEval/creativeSide/CreativeContainer';
import AnalyticalAttention from "./attentionEval/analyticalSide/AnalyticalContainer"; import AnalyticalAttention from './attentionEval/analyticalSide/AnalyticalContainer';
import { useNavigate } from "react-router-dom"; import { useNavigate } from 'react-router-dom';
const ActivityContainer = () => { const ActivityContainer = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [currentActivityNo, setCurrentActivityNo] = useState(1); const [currentActivityNo, setCurrentActivityNo] = useState(1);
const [isGuideVideoClicked, setIsGuideVideoClicked] = useState(true); const [isGuideVideoClicked, setIsGuideVideoClicked] = useState(true);
const nextActivityHandler = () => { const nextActivityHandler = () => {
setCurrentActivityNo(currentActivityNo + 1); setCurrentActivityNo(currentActivityNo + 1);
setIsGuideVideoClicked(true); setIsGuideVideoClicked(true);
}; };
const changeActivityScreen = (state) => { const changeActivityScreen = (state) => {
setTimeout(() => { setTimeout(() => {
setIsGuideVideoClicked(state); setIsGuideVideoClicked(state);
}, 2000); }, 2000);
}; };
return ( return (
<> <>
<div className="activity-container-angry-grid"> <div className="activity-container-angry-grid">
<div id="activity-container-item-0"> <div id="activity-container-item-0">
<div <div
id="1" id="1"
style={{ style={{
backgroundColor: currentActivityNo === 1 ? 'white' : 'teal', backgroundColor:
color: currentActivityNo === 1 ? 'teal' : 'white', currentActivityNo === 1 ? 'white' : 'teal',
fontWeight: currentActivityNo === 1 ? 'bold' : 'normal' color: currentActivityNo === 1 ? 'teal' : 'white',
}} fontWeight:
className="activity-container-navigator-item" currentActivityNo === 1 ? 'bold' : 'normal',
onClick={() => { }}
setCurrentActivityNo(1); className="activity-container-navigator-item"
setIsGuideVideoClicked(true); onClick={() => {
}} setCurrentActivityNo(1);
> setIsGuideVideoClicked(true);
1 }}
</div> >
<div 1
id="2" </div>
style={{ <div
backgroundColor: currentActivityNo === 2 ? 'white' : 'teal', id="2"
color: currentActivityNo === 2 ? 'teal' : 'white', style={{
fontWeight: currentActivityNo === 2 ? 'bold' : 'normal' backgroundColor:
}} currentActivityNo === 2 ? 'white' : 'teal',
className="activity-container-navigator-item" color: currentActivityNo === 2 ? 'teal' : 'white',
onClick={() => { fontWeight:
setCurrentActivityNo(2); currentActivityNo === 2 ? 'bold' : 'normal',
setIsGuideVideoClicked(true); }}
}} className="activity-container-navigator-item"
> onClick={() => {
2 setCurrentActivityNo(2);
</div> setIsGuideVideoClicked(true);
<div }}
id="3" >
style={{ 2
backgroundColor: currentActivityNo === 3 ? 'white' : 'teal', </div>
color: currentActivityNo === 3 ? 'teal' : 'white', <div
fontWeight: currentActivityNo === 3 ? 'bold' : 'normal' id="3"
}} style={{
className="activity-container-navigator-item" backgroundColor:
onClick={() => { currentActivityNo === 3 ? 'white' : 'teal',
setCurrentActivityNo(3); color: currentActivityNo === 3 ? 'teal' : 'white',
setIsGuideVideoClicked(true); fontWeight:
}} currentActivityNo === 3 ? 'bold' : 'normal',
> }}
3 className="activity-container-navigator-item"
</div> onClick={() => {
<div setCurrentActivityNo(3);
id="4" setIsGuideVideoClicked(true);
style={{ }}
backgroundColor: currentActivityNo === 4 ? 'white' : 'teal', >
color: currentActivityNo === 4 ? 'teal' : 'white', 3
fontWeight: currentActivityNo === 4 ? 'bold' : 'normal' </div>
}} <div
className="activity-container-navigator-item" id="4"
onClick={() => { style={{
setCurrentActivityNo(4); backgroundColor:
setIsGuideVideoClicked(true); currentActivityNo === 4 ? 'white' : 'teal',
}} color: currentActivityNo === 4 ? 'teal' : 'white',
> fontWeight:
4 currentActivityNo === 4 ? 'bold' : 'normal',
</div> }}
<div className="activity-container-navigator-item"
id="5" onClick={() => {
style={{ setCurrentActivityNo(4);
backgroundColor: currentActivityNo === 5 ? 'white' : 'teal', setIsGuideVideoClicked(true);
color: currentActivityNo === 5 ? 'teal' : 'white', }}
fontWeight: currentActivityNo === 5 ? 'bold' : 'normal' >
}} 4
className="activity-container-navigator-item" </div>
onClick={() => { <div
setCurrentActivityNo(5); id="5"
setIsGuideVideoClicked(true); style={{
}} backgroundColor:
> currentActivityNo === 5 ? 'white' : 'teal',
5 color: currentActivityNo === 5 ? 'teal' : 'white',
</div> fontWeight:
<div currentActivityNo === 5 ? 'bold' : 'normal',
id="6" }}
style={{ className="activity-container-navigator-item"
backgroundColor: currentActivityNo === 6 ? 'white' : 'teal', onClick={() => {
color: currentActivityNo === 6 ? 'teal' : 'white', setCurrentActivityNo(5);
fontWeight: currentActivityNo === 6 ? 'bold' : 'normal' setIsGuideVideoClicked(true);
}} }}
className="activity-container-navigator-item" >
onClick={() => { 5
setCurrentActivityNo(6); </div>
setIsGuideVideoClicked(true); <div
}} id="6"
> style={{
6 backgroundColor:
</div> currentActivityNo === 6 ? 'white' : 'teal',
<div color: currentActivityNo === 6 ? 'teal' : 'white',
id="7" fontWeight:
style={{ currentActivityNo === 6 ? 'bold' : 'normal',
backgroundColor: currentActivityNo === 7 ? 'white' : 'teal', }}
color: currentActivityNo === 7 ? 'teal' : 'white', className="activity-container-navigator-item"
fontWeight: currentActivityNo === 7 ? 'bold' : 'normal' onClick={() => {
}} setCurrentActivityNo(6);
className="activity-container-navigator-item" setIsGuideVideoClicked(true);
onClick={() => { }}
setCurrentActivityNo(7); >
setIsGuideVideoClicked(true); 6
}} </div>
> <div
7 id="7"
</div> style={{
{/* <div backgroundColor:
currentActivityNo === 7 ? 'white' : 'teal',
color: currentActivityNo === 7 ? 'teal' : 'white',
fontWeight:
currentActivityNo === 7 ? 'bold' : 'normal',
}}
className="activity-container-navigator-item"
onClick={() => {
setCurrentActivityNo(7);
setIsGuideVideoClicked(true);
}}
>
7
</div>
{/* <div
id="8" id="8"
className="activity-container-navigator-itemx" className="activity-container-navigator-itemx"
onClick={() => { onClick={() => {
...@@ -150,78 +164,98 @@ const ActivityContainer = () => { ...@@ -150,78 +164,98 @@ const ActivityContainer = () => {
> >
8 8
</div> */} </div> */}
<div <div
id="9" id="9"
style={{ style={{
backgroundColor: currentActivityNo === 9 ? 'white' : 'teal', backgroundColor:
color: currentActivityNo === 9 ? 'teal' : 'white', currentActivityNo === 9 ? 'white' : 'teal',
fontWeight: currentActivityNo === 9 ? 'bold' : 'normal' color: currentActivityNo === 9 ? 'teal' : 'white',
}} fontWeight:
className="activity-container-navigator-item" currentActivityNo === 9 ? 'bold' : 'normal',
onClick={() => { }}
setCurrentActivityNo(9); className="activity-container-navigator-item"
setIsGuideVideoClicked(true); onClick={() => {
}} setCurrentActivityNo(9);
> setIsGuideVideoClicked(true);
9 WIP }}
</div> >
<div 9
id="10" </div>
style={{ <div
backgroundColor: currentActivityNo === 10 ? 'white' : 'teal', id="10"
color: currentActivityNo === 10 ? 'teal' : 'white', style={{
fontWeight: currentActivityNo === 10 ? 'bold' : 'normal' backgroundColor:
}} currentActivityNo === 10 ? 'white' : 'teal',
className="activity-container-navigator-item" color: currentActivityNo === 10 ? 'teal' : 'white',
onClick={() => { fontWeight:
setCurrentActivityNo(10); currentActivityNo === 10 ? 'bold' : 'normal',
setIsGuideVideoClicked(true); }}
}} className="activity-container-navigator-item"
> onClick={() => {
10 WIP setCurrentActivityNo(10);
</div> setIsGuideVideoClicked(true);
</div> }}
<div id="activity-container-item-1"> >
{isGuideVideoClicked ? ( 10
<VideoPlayerScreen </div>
currentActivtyIndex={currentActivityNo} </div>
changeScreen={changeActivityScreen} <div id="activity-container-item-1">
/> {isGuideVideoClicked ? (
) : ( <VideoPlayerScreen
<> currentActivtyIndex={currentActivityNo}
{currentActivityNo === 1 && ( changeScreen={changeActivityScreen}
<PictureConcept nextActivity={nextActivityHandler} /> />
)} ) : (
{currentActivityNo === 2 && ( <>
<Arithmetic nextActivity={nextActivityHandler} /> {currentActivityNo === 1 && (
)} <PictureConcept
{currentActivityNo === 3 && ( nextActivity={nextActivityHandler}
<LetterPattern nextActivity={nextActivityHandler} /> />
)} )}
{currentActivityNo === 4 && ( {currentActivityNo === 2 && (
<Coding nextActivity={nextActivityHandler} /> <Arithmetic
)} nextActivity={nextActivityHandler}
{currentActivityNo === 5 && ( />
<PairCancerlation nextActivity={nextActivityHandler} /> )}
)} {currentActivityNo === 3 && (
{currentActivityNo === 6 && ( <LetterPattern
<ColourNumbersController nextActivity={nextActivityHandler} /> nextActivity={nextActivityHandler}
)} />
{currentActivityNo === 7 && ( )}
<DigitSpanController nextActivity={nextActivityHandler} /> {currentActivityNo === 4 && (
)} <Coding nextActivity={nextActivityHandler} />
{currentActivityNo === 9 && ( )}
<CreativeAttention nextActivity={nextActivityHandler} /> {currentActivityNo === 5 && (
)} <PairCancerlation
{currentActivityNo === 10 && ( nextActivity={nextActivityHandler}
<AnalyticalAttention nextActivity={nextActivityHandler} /> />
)} )}
</> {currentActivityNo === 6 && (
)} <ColourNumbersController
</div> nextActivity={nextActivityHandler}
</div> />
</> )}
); {currentActivityNo === 7 && (
<DigitSpanController
nextActivity={nextActivityHandler}
/>
)}
{currentActivityNo === 9 && (
<CreativeAttention
nextActivity={nextActivityHandler}
/>
)}
{currentActivityNo === 10 && (
<AnalyticalAttention
nextActivity={nextActivityHandler}
/>
)}
</>
)}
</div>
</div>
</>
);
}; };
export default ActivityContainer; export default ActivityContainer;
web-app/frontend/src/components/activities/attentionEval/analyticalSide/AnalyticalContainer.jsx
View file @ e19931e4
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import VideoPlayerScreen2 from "../videoPlayer2";
function AnalyticalAttention() { function AnalyticalAttention() {
return ( const [currentLevel, setCurrentLevel] = useState(4);
<p>Hello</p> 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 (
<>
<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
View file @ e19931e4
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useEffect } from "react";
import "./creativeside.css";
import VideoPlayerScreen2 from "../videoPlayer2";
function CreativeAttention () { function CreativeAttention() {
return ( const [currentLevel, setCurrentLevel] = useState(1);
<p>Hello creative people</p> 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 (
<>
<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 0 → 100644
View file @ e19931e4
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 0 → 100644
View file @ e19931e4
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
View file @ e19931e4
import axios from "axios"; import axios from "axios";
export default axios.create({ 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
View file @ e19931e4
...@@ -4,15 +4,11 @@ import "./attentionspan.css"; ...@@ -4,15 +4,11 @@ import "./attentionspan.css";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import API from "../../config/api"; import API from "../../config/api";
import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam"; import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam";
import type {
RecordWebcamOptions,
RecordWebcamHook,
} from "react-record-webcam";
import img1 from "../../assets/439.jpg"; import img1 from "../../assets/439.jpg";
import img2 from "../../assets/dsd.jpg"; import img2 from "../../assets/dsd.jpg";
import img3 from "../../assets/36006.jpg"; import img3 from "../../assets/36006.jpg";
const OPTIONS: RecordWebcamOptions = { const OPTIONS = {
filename: "test-filename", filename: "test-filename",
fileType: "mp4", fileType: "mp4",
width: 1920, width: 1920,
...@@ -30,7 +26,7 @@ const AttentionSpan_screen = () => { ...@@ -30,7 +26,7 @@ const AttentionSpan_screen = () => {
const [teststate3, setTestState3] = useState(false); const [teststate3, setTestState3] = useState(false);
const vidRef = useRef(); const vidRef = useRef();
// object for storing and using data // object for storing and using data
const recordWebcam: RecordWebcamHook = useRecordWebcam(OPTIONS); const recordWebcam = useRecordWebcam(OPTIONS);
const getRecordingFileHooks = async () => { const getRecordingFileHooks = async () => {
const blob = await recordWebcam.getRecording(); const blob = await recordWebcam.getRecording();
...@@ -70,7 +66,7 @@ const AttentionSpan_screen = () => { ...@@ -70,7 +66,7 @@ const AttentionSpan_screen = () => {
console.log("testing", blob); console.log("testing", blob);
const data = new FormData(); const data = new FormData();
data.append("file", blob); data.append("file", blob);
data.append("filename", "att.mp4") data.append("filename", "att.mp4");
data.append("questionIndex", id); data.append("questionIndex", id);
await API.post("attentionPrediction", data, { await API.post("attentionPrediction", data, {
headers: { headers: {
...@@ -78,7 +74,7 @@ const AttentionSpan_screen = () => { ...@@ -78,7 +74,7 @@ const AttentionSpan_screen = () => {
}, },
}) })
.then((res) => { .then((res) => {
console.log(res.data[0]) console.log(res.data[0]);
setattention(res.data[0]); setattention(res.data[0]);
setisClicked(true); setisClicked(true);
}) })
...@@ -223,7 +219,7 @@ const AttentionSpan_screen = () => { ...@@ -223,7 +219,7 @@ const AttentionSpan_screen = () => {
<> <>
<p> <p>
Low level attention :{" "} Low level attention :{" "}
{Math.round(attention.low_attention* 100)}% {Math.round(attention.low_attention * 100)}%
</p> </p>
<p> <p>
Mid level attention :{" "} Mid level attention :{" "}
...@@ -240,7 +236,10 @@ const AttentionSpan_screen = () => { ...@@ -240,7 +236,10 @@ const AttentionSpan_screen = () => {
<div className="mt-4"> <div className="mt-4">
<button <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" 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 Get Back
</button> </button>
...@@ -335,18 +334,9 @@ const AttentionSpan_screen = () => { ...@@ -335,18 +334,9 @@ const AttentionSpan_screen = () => {
<h2>Results are processing..</h2> <h2>Results are processing..</h2>
) : ( ) : (
<> <>
<p> <p>Low level attention : {attention[0] * 100}</p>
Low level attention :{" "} <p>Mid level attention : {attention[1] * 100}</p>
{attention[0] * 100} <p>High level attention : {attention[2] * 100}</p>
</p>
<p>
Mid level attention :{" "}
{attention[1] * 100}
</p>
<p>
High level attention :{" "}
{attention[2] * 100}
</p>
</> </>
)} )}
</header> </header>
...@@ -354,7 +344,10 @@ const AttentionSpan_screen = () => { ...@@ -354,7 +344,10 @@ const AttentionSpan_screen = () => {
<div className="mt-4"> <div className="mt-4">
<button <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" 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 Get Back
</button> </button>
...@@ -449,18 +442,9 @@ const AttentionSpan_screen = () => { ...@@ -449,18 +442,9 @@ const AttentionSpan_screen = () => {
<h2>Results are processing..</h2> <h2>Results are processing..</h2>
) : ( ) : (
<> <>
<p> <p>Low level attention : {attention[0] * 100}</p>
Low level attention :{" "} <p>Mid level attention : {attention[1] * 100}</p>
{attention[0] * 100} <p>High level attention : {attention[2] * 100}</p>
</p>
<p>
Mid level attention :{" "}
{attention[1] * 100}
</p>
<p>
High level attention :{" "}
{attention[2] * 100}
</p>
</> </>
)} )}
</header> </header>
...@@ -468,7 +452,10 @@ const AttentionSpan_screen = () => { ...@@ -468,7 +452,10 @@ const AttentionSpan_screen = () => {
<div className="mt-4"> <div className="mt-4">
<button <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" 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 Get Back
</button> </button>
...@@ -480,107 +467,6 @@ const AttentionSpan_screen = () => { ...@@ -480,107 +467,6 @@ const AttentionSpan_screen = () => {
</div> </div>
</section> </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> */}
</> </>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment