Skip to content

2
2022-073
Commit 0c80c53d authored by Nilan Meegoda's avatar Nilan Meegoda
Browse files
Options

attention_new_screen

parent 38ec133f
Hide whitespace changes
Inline Side-by-side
Showing with 400 additions and 40 deletions
web-app/backend/server.py
View file @ 0c80c53d
......@@ -46,11 +46,17 @@ def predictAttention():
if not os.path.isdir(target):
os.mkdir(target)
file = request.files['file']
testNo = request.form.get('questionIndex')
filename = secure_filename("Testing_vid")
destination = "/".join([target, filename])
file.save(destination)
session['uploadFilePath'] = destination
scoreLst = captureImage(destination, 10)
db.db['attentionlevelScore'].insert_one({
"activityName": "Manual_Attention_Test",
"questionIndex": testNo,
"attentionLevelScore": scoreLst,
})
print("Prediction", scoreLst)
return scoreLst
......
web-app/frontend/src/pages/attention_demo/attentionspan.css
View file @ 0c80c53d
html,
.container {
padding-top: 2%;
}
.img3 {
height: 59vh;
}
body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
......
web-app/frontend/src/pages/attention_demo/attentionspan.jsx
View file @ 0c80c53d
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import axios from "axios";
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 = {
filename: "test-filename",
......@@ -17,7 +21,13 @@ const OPTIONS: RecordWebcamOptions = {
const AttentionSpan_screen = () => {
//attention prediction scores
const navigate = useNavigate();
const [attention, setattention] = useState([0, 0, 0]);
const [videoLink, setVideoLink] = useState("");
const [teststate, setTestState] = useState(false);
const [teststate2, setTestState2] = useState(false);
const [teststate3, setTestState3] = useState(false);
const vidRef = useRef();
// object for storing and using data
const recordWebcam: RecordWebcamHook = useRecordWebcam(OPTIONS);
......@@ -30,11 +40,36 @@ const AttentionSpan_screen = () => {
ev.preventDefault();
};
const saveFile = async () => {
const changeTestStates = (id) => {
switch (id) {
case 1:
setTestState(true);
setTestState2(false);
setTestState3(false);
break;
case 2:
setTestState(false);
setTestState2(true);
setTestState3(false);
break;
case 3:
setTestState(false);
setTestState2(false);
setTestState3(true);
break;
default:
setTestState(false);
setTestState2(false);
setTestState3(false);
}
};
const saveFile = async (id) => {
const blob = await recordWebcam.getRecording();
console.log("testing", blob);
const data = new FormData();
data.append("file", blob);
data.append("questionIndex", id);
await API.post("upload", data, {
headers: {
"Access-Control-Allow-Origin": "*",
......@@ -48,39 +83,359 @@ const AttentionSpan_screen = () => {
});
};
useEffect(() => {
recordWebcam.open();
switch (2) {
case 1:
setVideoLink("/Videos/attentionTest.mp4");
break;
case 2:
setVideoLink("/Videos/vid1.mp4");
break;
case 3:
setVideoLink("/Videos/vid2.mp4");
break;
case 4:
setVideoLink("/Videos/attentionTest4.mp4");
break;
default:
}
}, []);
useEffect(() => {
if (teststate || teststate2 || teststate3) {
onVideoStarted();
const timer = setTimeout(() => {
vidRef.current.play();
}, 2000);
return () => clearTimeout(timer);
}
}, [teststate, teststate2, teststate3]);
const onVideoStarted = async () => {
await console.log("Recording getting start");
await recordWebcam.start();
};
const onVideoEnded = async (id) => {
await console.log("Recording getting stop");
await recordWebcam.stop();
await console.log("Recording getting predicted");
await saveFile(id);
};
return (
<>
<div>
<div>
<div className="p-8 pb-2">
{" "}
<h1 className="text-4xl font-medium text-white text-center mt-2">
{" "}
Attention level evaluation{" "}
</h1>{" "}
<h1 className="text-4xl font-large text-white text-center m-2">
Attention level evaluation
</h1>
</div>
{!teststate ? (
<section className="p-2 text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-2 md:flex-row flex-col items-center">
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img
className="object-cover object-center rounded"
alt="hero"
src={img1}
/>
</div>
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
Test 1
<br className="hidden lg:inline-block" />
</h1>
<p className="mb-8 leading-relaxed text-white">
Copper mug try-hard pitchfork pour-over freegan heirloom neutra
air plant cold-pressed tacos poke beard tote bag. Heirloom echo
park mlkshk tote bag selvage hot chicken authentic tumeric
truffaut hexagon try-hard chambray.
</p>
<div className="flex justify-center">
<button
className="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
onClick={() => setTestState(true)}
>
Start Test
</button>
</div>
</div>
</div>
</section>
) : (
<section className="p-2 text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-2 mx-auto">
<div className="flex flex-wrap -m-12">
<div className="p-1 md:w-3/4 flex flex-col items-start">
<div className="flex items-center">
{videoLink && teststate && (
<>
<video
ref={vidRef}
className="w-full h-full p-2"
controls
onEnded={() => onVideoEnded(1)}
>
<source src="/Videos/vid1.mp4" type="video/mp4" />
</video>
</>
)}
</div>
</div>
<div className="p-4 md:w-1/4 flex flex-col items-start">
<div className="flex items-center">
<div className="p-2 pb-2">
<p className="m-2">
Camera status:{" "}
{
<span className="inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current mr-1.5 text-white"
viewBox="0 0 16 16"
width="10"
height="10"
>
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
<path
fillRule="evenodd"
d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
></path>
</svg>
{recordWebcam.status}
</span>
}
</p>
<div className="m-2 mt-6">
<header className="App-header text-white">
{/* Calling a data from setdata for showing */}
<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>
</div>
<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)}
>
Get Back
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)}
{!teststate2 ? (
<section className="p-2 text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-2 md:flex-row flex-col items-center">
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img
className="object-cover object-center rounded"
alt="hero"
src={img2}
/>
</div>
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
Test 2
<br className="hidden lg:inline-block" />
</h1>
<p className="mb-8 text-white leading-relaxed">
Copper mug try-hard pitchfork pour-over freegan heirloom neutra
air plant cold-pressed tacos poke beard tote bag. Heirloom echo
park mlkshk tote bag selvage hot chicken authentic tumeric
truffaut hexagon try-hard chambray.
</p>
<div className="flex justify-center">
<button
className="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
onClick={() => setTestState2(true)}
>
Start Test
</button>
</div>
</div>
</div>
</section>
) : (
<section className="p-2 text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-2 mx-auto">
<div className="flex flex-wrap -m-12">
<div className="p-1 md:w-3/4 flex flex-col items-start">
<div className="flex items-center">
{videoLink && teststate2 && (
<>
<video
ref={vidRef}
className="w-full h-full p-2"
controls
onEnded={() => onVideoEnded(2)}
>
<source
src="/Videos/attentionTest.mp4"
type="video/mp4"
/>
</video>
</>
)}
</div>
</div>
<div className="p-4 md:w-1/4 flex flex-col items-start">
<div className="flex items-center">
<div className="p-2 pb-2">
<p className="m-2">
Camera status:{" "}
{
<span className="inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current mr-1.5 text-white"
viewBox="0 0 16 16"
width="10"
height="10"
>
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
<path
fillRule="evenodd"
d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
></path>
</svg>
{recordWebcam.status}
</span>
}
</p>
<div className="m-2 mt-6">
<header className="App-header text-white">
{/* Calling a data from setdata for showing */}
<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>
</div>
<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)}
>
Get Back
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)}
{!teststate3 ? (
<section className="p-2 text-gray-600 body-font">
<div className="container mx-auto flex px-5 py-2 md:flex-row flex-col items-center">
<div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img
className="img3 object-cover object-center rounded"
alt="hero"
src={img3}
/>
</div>
<div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
Test 3
<br className="hidden lg:inline-block" />
</h1>
<p className="mb-8 text-white leading-relaxed">
Copper mug try-hard pitchfork pour-over freegan heirloom neutra
air plant cold-pressed tacos poke beard tote bag. Heirloom echo
park mlkshk tote bag selvage hot chicken authentic tumeric
truffaut hexagon try-hard chambray.
</p>
<div className="flex justify-center">
<button
className="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
onClick={() => setTestState3(true)}
>
Start Test
</button>
</div>
</div>
</div>
</section>
) : (
<section className="p-2 text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-2 mx-auto">
<div className="flex flex-wrap -m-12">
<div className="p-1 md:w-3/4 flex flex-col items-start">
<div className="flex items-center">
{videoLink && teststate3 && (
<>
<video
ref={vidRef}
className="w-full h-full p-2"
controls
onEnded={() => onVideoEnded(3)}
>
<source src="/Videos/vid3.mp4" type="video/mp4" />
</video>
</>
)}
</div>
</div>
<div className="p-4 md:w-1/4 flex flex-col items-start">
<div className="flex items-center">
<div className="p-2 pb-2">
<p className="m-2">
Camera status:{" "}
{
<span className="inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current mr-1.5 text-white"
viewBox="0 0 16 16"
width="10"
height="10"
>
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
<path
fillRule="evenodd"
d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
></path>
</svg>
{recordWebcam.status}
</span>
}
</p>
<div className="m-2 mt-6">
<header className="App-header text-white">
{/* Calling a data from setdata for showing */}
<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>
</div>
<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)}
>
Get Back
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)}
{/* <div>
<div>
<div className="demo-section px-4">
<p className="m-2">
Camera status:{" "}
{
<span className="inline-flex items-center bg-green-600 rounded-full px-2 text-sm text-white py-1 font-medium">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current mr-1.5 text-white"
viewBox="0 0 16 16"
width="10"
height="10"
>
<path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
<path
fillRule="evenodd"
d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"
></path>
</svg>
{recordWebcam.status}
</span>
}
</p>
<div className="m-3">
<div className="bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x">
{" "}
......@@ -158,7 +513,7 @@ const AttentionSpan_screen = () => {
}`,
}}
autoPlay
muted
/>
</div>
<div className="mx-4">
......@@ -172,20 +527,13 @@ const AttentionSpan_screen = () => {
}`,
}}
autoPlay
muted
loop
/>
</div>
</div>
</div>
<div className="m-8">
<header className="App-header text-white">
{/* Calling a data from setdata for showing */}
<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>
</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