Skip to content

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

attention span new ui redesign

parent c82cb6a9
Expand all 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/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/`,
}); });
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