Skip to content

2
2022-073
Commit 2970f966 authored by Nilan Meegoda's avatar Nilan Meegoda
Browse files
Options

attention_demo_intergration_i

parent 7d363434
Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 1 deletion
web-app/frontend/package.json
View file @ 2970f966
......@@ -21,6 +21,7 @@
"react-circular-progressbar": "^2.0.4",
"react-countdown-circle-timer": "^3.0.9",
"react-dom": "^18.2.0",
"react-record-webcam": "^0.0.14",
"react-image-crop": "^10.0.7",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
......
web-app/frontend/src/App.js
View file @ 2970f966
import React from "react";
import "./App.css";
import { BrowserRouter as BRouter, Routes, Route } from "react-router-dom";
import { Home, Admin, Student, Welcome_screen, Features_screen, StdReg_screen } from "./pages/index";
import { Home, Admin, Student, Welcome_screen, Features_screen, StdReg_screen, AttentionSpan_screen } from "./pages/index";
const App = () => {
return (
......@@ -13,6 +13,7 @@ const App = () => {
<Route path="/welcome" element={<Welcome_screen />} />
<Route path="/features" element={<Features_screen />} />
<Route path="/stdReg" element={<StdReg_screen />} />
<Route path="/attentionDemo" element={<AttentionSpan_screen />} />
</Routes>
</BRouter>
);
......
web-app/frontend/src/pages/attention_demo/attentionspan.css 0 → 100644
View file @ 2970f966
html,
body {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
/* ff 3.6+ */
background: -moz-radial-gradient(
circle at 5% 5%,
rgb(255, 255, 255) 33%,
rgb(255, 255, 255) 33%,
rgb(255, 255, 255) 33%,
);
/* safari 5.1+,chrome 10+ */
background: -webkit-radial-gradient(
circle at 5% 5%,
rgb(255, 255, 255) 33%,
rgb(255, 255, 255) 33%,
rgb(255, 255, 255) 33%,
);
/* global 92%+ browsers support */
background: radial-gradient(
circle at 5% 5%,
rgb(255, 255, 255) 33%,
rgb(255, 255, 255) 33%,
rgb(255, 255, 255) 33%,
);
}
.demo-section {
padding-bottom: 2rem;
border-bottom: 2px solid;
}
.demo-section:last-child {
border: none;
}
video {
width: 60%;
height: 40%;
}
web-app/frontend/src/pages/attention_demo/attentionspan.jsx 0 → 100644
View file @ 2970f966
import React, { useState, useEffect } from "react";
import axios from "axios";
import "./attentionspan.css";
import { useRecordWebcam, CAMERA_STATUS } from "react-record-webcam";
import type {
RecordWebcamOptions,
RecordWebcamHook,
} from "react-record-webcam";
const OPTIONS: RecordWebcamOptions = {
filename: "test-filename",
fileType: "mp4",
width: 1920,
height: 1080,
};
const AttentionSpan_screen = () => {
//attention prediction scores
const [attention, setattention] = useState([0, 0, 0]);
// object for storing and using data
const recordWebcam: RecordWebcamHook = useRecordWebcam(OPTIONS);
const getRecordingFileHooks = async () => {
const blob = await recordWebcam.getRecording();
console.log({ blob });
};
const handleUploadImage = (ev) => {
ev.preventDefault();
};
const saveFile = async () => {
const blob = await recordWebcam.getRecording();
console.log("testing", blob);
const data = new FormData();
data.append("file", blob);
// fetch("/upload", {
// method: "POST",
// body: data,
// }).then((res) => {
// res.json().then((data) => {
// console.log("Test", data);
// setattention(data);
// });
// });
await axios
.post(
"http://127.0.0.1:5000/upload",
data
)
.then((res) => {
setattention(res.data)
})
.catch((err) => {
console.log(err);
});
};
return (
<>
<div>
<div>
<div class="p-8 pb-2">
{" "}
<h1 class="text-4xl font-medium text-white text-center mt-2">
{" "}
Attention level evaluation{" "}
</h1>{" "}
</div>
<div className="demo-section px-4">
<p class="m-2">
Camera status:{" "}
{
<span class="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"
class="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
fill-rule="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 class="m-3">
<div class="bg-gray-50 inline-flex border border-gray-200 rounded-lg text-gray-900 select-none divide-x">
{" "}
<button
class="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
class="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
class="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
class="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
class="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
class="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
class="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 class="mx-4">
<video
ref={recordWebcam.webcamRef}
style={{
display: `${
recordWebcam.status === CAMERA_STATUS.OPEN ||
recordWebcam.status === CAMERA_STATUS.RECORDING
? "block"
: "none"
}`,
}}
autoPlay
muted
/>
</div>
<div class="mx-4">
<video
ref={recordWebcam.previewRef}
style={{
display: `${
recordWebcam.status === CAMERA_STATUS.PREVIEW
? "block"
: "none"
}`,
}}
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>
</>
);
};
export default AttentionSpan_screen;
web-app/frontend/src/pages/index.js
View file @ 2970f966
......@@ -4,3 +4,4 @@ export { default as Student } from "./student/Student";
export { default as Welcome_screen } from "./student/welcome_screen";
export { default as Features_screen } from "./student/features";
export { default as StdReg_screen} from "./student/student_reg";
export { default as AttentionSpan_screen } from "./attention_demo/attentionspan";
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