devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored evaluation process for improved efficiency:

Browse Source 
- Initial response set to null; Frontend now generates a list of anticipated stats;
- Background evaluation dynamically updates DB upon completion;
- Frontend actively monitors and finalizes upon stat evaluation completion.
This commit is contained in:
Tiago Ribeiro
2024-01-08 17:02:46 +00:00
parent 957400cb82
commit 9ceb71ae2f
13 changed files with 189 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Exercises/Writing.tsx
View File

@@ -26,6 +26,8 @@ export default function Writing({
const hasExamEnded = useExamStore((state) => state.hasExamEnded);
useEffect(() => {
if (localStorage.getItem("enable_paste")) return;
const listener = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === "v") {
e.preventDefault();

16
src/exams/Finish.tsx
View File

@@ -78,13 +78,11 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
<span className="text-xl font-bold">{levelStr}</span>
<span className="text-xl">{grade}</span>
</div>
)
);
}
return <span className="text-3xl font-bold">{level}</span>;
}
};
return (
<>
@@ -156,14 +154,16 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
{isLoading && (
<div className="w-fit h-fit absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 animate-pulse flex flex-col gap-12 items-center">
<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
<span className={clsx("font-bold text-2xl", moduleColors[selectedModule].progress)}>Evaluating your answers...</span>
<span className={clsx("font-bold text-2xl text-center", moduleColors[selectedModule].progress)}>
Evaluating your answers, please be patient...
<br />
You can also check it later on your records page!
</span>
</div>
)}
{!isLoading && (
<div className="w-full flex gap-9 mt-32 items-center justify-between mb-20">
<span className="max-w-3xl">
{moduleResultText(selectedModule, bandScore)}
</span>
<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
<div className="flex gap-9 px-16">
<div
className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}

2
src/hooks/useStats.tsx
View File

@@ -10,7 +10,7 @@ export default function useStats(id?: string) {
useEffect(() => {
setIsLoading(true);
axios
.get<Stat[]>(!id ? "/api/stats" : `/api/stats/${id}`)
.get<Stat[]>(!id ? "/api/stats" : `/api/stats/user/${id}`)
.then((response) => setStats(response.data))
.finally(() => setIsLoading(false));
}, [id]);

1
src/interfaces/exam.ts
View File

@@ -44,6 +44,7 @@ export interface ListeningPart {
}
export interface UserSolution {
id?: string;
solutions: any[];
module?: Module;
exam?: string;

1
src/interfaces/user.ts
View File

@@ -98,6 +98,7 @@ export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [
];
export interface Stat {
id: string;
user: string;
exam: string;
exercise: string;

50
src/pages/(exam)/ExamPage.tsx
View File

@@ -37,6 +37,7 @@ export default function ExamPage({page}: Props) {
const [showAbandonPopup, setShowAbandonPopup] = useState(false);
const [avoidRepeated, setAvoidRepeated] = useState(false);
const [timeSpent, setTimeSpent] = useState(0);
const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
const [exams, setExams] = useExamStore((state) => [state.exams, state.setExams]);
const [userSolutions, setUserSolutions] = useExamStore((state) => [state.userSolutions, state.setUserSolutions]);
@@ -94,6 +95,7 @@ export default function ExamPage({page}: Props) {
if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
const newStats: Stat[] = userSolutions.map((solution) => ({
...solution,
id: solution.id || uuidv4(),
timeSpent,
session: sessionId,
exam: solution.exam!,
@@ -111,6 +113,41 @@ export default function ExamPage({page}: Props) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedModules, moduleIndex, hasBeenUploaded]);
useEffect(() => {
if (statsAwaitingEvaluation.length === 0) return setIsEvaluationLoading(false);
return setIsEvaluationLoading(true);
}, [statsAwaitingEvaluation]);
useEffect(() => {
if (statsAwaitingEvaluation.length > 0) {
statsAwaitingEvaluation.forEach(checkIfStatHasBeenEvaluated);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [statsAwaitingEvaluation]);
const checkIfStatHasBeenEvaluated = (id: string) => {
setTimeout(async () => {
const statRequest = await axios.get<Stat>(`/api/stats/${id}`);
const stat = statRequest.data;
if (stat.solutions.every((x) => x.evaluation !== null)) {
const userSolution: UserSolution = {
id,
exercise: stat.exercise,
score: stat.score,
solutions: stat.solutions,
type: stat.type,
exam: stat.exam,
module: stat.module,
};
setUserSolutions(userSolutions.map((x) => (x.exercise === userSolution.exercise ? userSolution : x)));
return setStatsAwaitingEvaluation((prev) => prev.filter((x) => x !== id));
}
return checkIfStatHasBeenEvaluated(id);
}, 5 * 1000);
};
const updateExamWithUserSolutions = (exam: Exam): Exam => {
if (exam.module === "reading" || exam.module === "listening") {
const parts = exam.parts.map((p) =>
@@ -137,20 +174,19 @@ export default function ExamPage({page}: Props) {
Promise.all(
exam.exercises.map(async (exercise) => {
if (exercise.type === "writing") {
return await evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!);
}
const evaluationID = uuidv4();
if (exercise.type === "writing")
return await evaluateWritingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!);
}
if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
return await evaluateSpeakingAnswer(exercise, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
}),
)
.then((responses) => {
setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
setUserSolutions([...userSolutions, ...responses.filter((x) => !!x)] as any);
})
.finally(() => {
setIsEvaluationLoading(false);
setHasBeenUploaded(false);
});
}

43
src/pages/api/evaluate/interactiveSpeaking.ts
View File

@@ -2,12 +2,16 @@
import type {NextApiRequest, NextApiResponse} from "next";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import axios from "axios";
import axios, {AxiosResponse} from "axios";
import formidable from "formidable-serverless";
import {ref, uploadBytes} from "firebase/storage";
import fs from "fs";
import {storage} from "@/firebase";
import {app, storage} from "@/firebase";
import {doc, getDoc, getFirestore, setDoc} from "firebase/firestore";
import {Stat} from "@/interfaces/user";
import {speakingReverseMarking} from "@/utils/score";
const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -36,18 +40,39 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
}),
);
const backendRequest = await axios.post(
`${process.env.BACKEND_URL}/speaking_task_3`,
{answers: uploadingAudios},
res.status(200).json(null);
console.log("🌱 - Still processing");
const backendRequest = await evaluate({answers: uploadingAudios});
console.log("🌱 - Process complete");
const correspondingStat = (await getDoc(doc(db, "stats", fields.id))).data() as Stat;
const solutions = correspondingStat.solutions.map((x) => ({...x, evaluation: backendRequest.data, solution: uploadingAudios}));
await setDoc(
doc(db, "stats", fields.id),
{
solutions,
score: {
correct: speakingReverseMarking[backendRequest.data.overall],
missing: 0,
total: 100,
},
},
{merge: true},
);
console.log("🌱 - Updated the DB");
});
}
async function evaluate(body: {answers: object[]}): Promise<AxiosResponse> {
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_3`, body, {
headers: {
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
},
},
);
res.status(200).json({...backendRequest.data, answer: uploadingAudios});
});
if (typeof backendRequest.data === "string") return evaluate(body);
return backendRequest;
}
export const config = {

32
src/pages/api/evaluate/speaking.ts
View File

@@ -6,8 +6,12 @@ import axios, {AxiosResponse} from "axios";
import formidable from "formidable-serverless";
import {ref, uploadBytes} from "firebase/storage";
import fs from "fs";
import {storage} from "@/firebase";
import {app, storage} from "@/firebase";
import {doc, getDoc, getFirestore, setDoc} from "firebase/firestore";
import {Stat} from "@/interfaces/user";
import {speakingReverseMarking} from "@/utils/score";
const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -26,10 +30,32 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const binary = fs.readFileSync((audioFile as any).path).buffer;
const snapshot = await uploadBytes(audioFileRef, binary);
const backendRequest = await evaluate({answers: [{question: fields.question, answer: snapshot.metadata.fullPath}]});
res.status(200).json(null);
console.log("🌱 - Still processing");
const backendRequest = await evaluate({answers: [{question: fields.question, answer: snapshot.metadata.fullPath}]});
fs.rmSync((audioFile as any).path);
res.status(200).json({...backendRequest.data, fullPath: snapshot.metadata.fullPath});
console.log("🌱 - Process complete");
const correspondingStat = (await getDoc(doc(db, "stats", fields.id))).data() as Stat;
const solutions = correspondingStat.solutions.map((x) => ({
...x,
evaluation: backendRequest.data,
solution: snapshot.metadata.fullPath,
}));
await setDoc(
doc(db, "stats", fields.id),
{
solutions,
score: {
correct: speakingReverseMarking[backendRequest.data.overall],
total: 100,
missing: 0,
},
},
{merge: true},
);
console.log("🌱 - Updated the DB");
});
}

29
src/pages/api/evaluate/writing.ts
View File

@@ -1,15 +1,20 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type {NextApiRequest, NextApiResponse} from "next";
import {getFirestore, doc, getDoc} from "firebase/firestore";
import {getFirestore, doc, getDoc, setDoc} from "firebase/firestore";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import axios, {AxiosResponse} from "axios";
import {app} from "@/firebase";
import {Stat} from "@/interfaces/user";
import {writingReverseMarking} from "@/utils/score";
interface Body {
question: string;
answer: string;
id: string;
}
const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -18,9 +23,27 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
return;
}
const backendRequest = await evaluate(req.body as Body);
res.status(200).json(null);
res.status(backendRequest.status).json(backendRequest.data);
console.log("🌱 - Still processing");
const backendRequest = await evaluate(req.body as Body);
console.log("🌱 - Process complete");
const correspondingStat = (await getDoc(doc(db, "stats", req.body.id))).data() as Stat;
const solutions = correspondingStat.solutions.map((x) => ({...x, evaluation: backendRequest.data}));
await setDoc(
doc(db, "stats", (req.body as Body).id),
{
solutions,
score: {
correct: writingReverseMarking[backendRequest.data.overall],
total: 100,
missing: 0,
},
},
{merge: true},
);
console.log("🌱 - Updated the DB");
}
async function evaluate(body: Body): Promise<AxiosResponse> {

23
src/pages/api/stats/[id].ts Normal file
View File

@@ -0,0 +1,23 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type {NextApiRequest, NextApiResponse} from "next";
import {app} from "@/firebase";
import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc, deleteDoc} from "firebase/firestore";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {uuidv4} from "@firebase/util";
const db = getFirestore(app);
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "GET") return GET(req, res);
res.status(404).json({ok: false});
}
async function GET(req: NextApiRequest, res: NextApiResponse) {
const {id} = req.query;
const snapshot = await getDoc(doc(db, "stats", id as string));
res.status(200).json({...snapshot.data(), id: snapshot.id});
}

2
src/pages/api/stats/index.ts
View File

@@ -42,7 +42,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
}
const stats = req.body as Stat[];
await stats.forEach(async (stat) => await addDoc(collection(db, "stats"), stat));
await stats.forEach(async (stat) => await setDoc(doc(db, "stats", stat.id), stat));
const groupedStatsByAssignment = groupBy(
stats.filter((x) => !!x.assignment),

0
src/pages/api/stats/[user].ts → src/pages/api/stats/user/[user].ts
View File

26
src/utils/evaluation.ts
View File

@@ -11,17 +11,19 @@ import {
import axios from "axios";
import {speakingReverseMarking, writingReverseMarking} from "./score";
export const evaluateWritingAnswer = async (exercise: WritingExercise, solution: UserSolution): Promise<object | undefined> => {
export const evaluateWritingAnswer = async (exercise: WritingExercise, solution: UserSolution, id: string): Promise<object | undefined> => {
const response = await axios.post<Evaluation>("/api/evaluate/writing", {
question: `${exercise.prompt} ${exercise.attachment ? exercise.attachment.description : ""}`.replaceAll("\n", ""),
answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
id,
});
if (response.status === 200) {
return {
...solution,
id,
score: {
correct: writingReverseMarking[response.data.overall] || 0,
correct: response.data ? writingReverseMarking[response.data.overall] : 0,
missing: 0,
total: 100,
},
@@ -32,12 +34,12 @@ export const evaluateWritingAnswer = async (exercise: WritingExercise, solution:
return undefined;
};
export const evaluateSpeakingAnswer = async (exercise: SpeakingExercise | InteractiveSpeakingExercise, solution: UserSolution) => {
export const evaluateSpeakingAnswer = async (exercise: SpeakingExercise | InteractiveSpeakingExercise, solution: UserSolution, id: string) => {
switch (exercise?.type) {
case "speaking":
return await evaluateSpeakingExercise(exercise, exercise.id, solution);
return {...(await evaluateSpeakingExercise(exercise, exercise.id, solution, id)), id};
case "interactiveSpeaking":
return await evaluateInteractiveSpeakingExercise(exercise.id, solution);
return {...(await evaluateInteractiveSpeakingExercise(exercise.id, solution, id)), id};
default:
return undefined;
}
@@ -48,7 +50,7 @@ const downloadBlob = async (url: string): Promise<Buffer> => {
return Buffer.from(blobResponse.data, "binary");
};
const evaluateSpeakingExercise = async (exercise: SpeakingExercise, exerciseId: string, solution: UserSolution) => {
const evaluateSpeakingExercise = async (exercise: SpeakingExercise, exerciseId: string, solution: UserSolution, id: string) => {
const audioBlob = await downloadBlob(solution.solutions[0].solution.trim());
const audioFile = new File([audioBlob], "audio.wav", {type: "audio/wav"});
@@ -58,6 +60,7 @@ const evaluateSpeakingExercise = async (exercise: SpeakingExercise, exerciseId:
const evaluationQuestion =
`${exercise.text.replaceAll("\n", "")}` + (exercise.prompts.length > 0 ? `You should talk about: ${exercise.prompts.join(", ")}` : "");
formData.append("question", evaluationQuestion);
formData.append("id", id);
const config = {
headers: {
@@ -71,18 +74,18 @@ const evaluateSpeakingExercise = async (exercise: SpeakingExercise, exerciseId:
return {
...solution,
score: {
correct: speakingReverseMarking[response.data.overall] || 0,
correct: response.data ? speakingReverseMarking[response.data.overall] : 0,
missing: 0,
total: 100,
},
solutions: [{id: exerciseId, solution: response.data.fullPath, evaluation: response.data}],
solutions: [{id: exerciseId, solution: response.data ? response.data.fullPath : null, evaluation: response.data}],
};
}
return undefined;
};
const evaluateInteractiveSpeakingExercise = async (exerciseId: string, solution: UserSolution) => {
const evaluateInteractiveSpeakingExercise = async (exerciseId: string, solution: UserSolution, id: string) => {
const promiseParts = solution.solutions.map(async (x: {prompt: string; blob: string}) => ({
question: x.prompt,
answer: await downloadBlob(x.blob),
@@ -98,6 +101,7 @@ const evaluateInteractiveSpeakingExercise = async (exerciseId: string, solution:
formData.append(`question_${seed}`, question);
formData.append(`answer_${seed}`, audioFile, `${seed}.wav`);
});
formData.append("id", id);
const config = {
headers: {
@@ -111,11 +115,11 @@ const evaluateInteractiveSpeakingExercise = async (exerciseId: string, solution:
return {
...solution,
score: {
correct: speakingReverseMarking[response.data.overall] || 0,
correct: response.data ? speakingReverseMarking[response.data.overall] : 0,
missing: 0,
total: 100,
},
solutions: [{id: exerciseId, solution: response.data.answer, evaluation: response.data}],
solutions: [{id: exerciseId, solution: response.data ? response.data.answer : null, evaluation: response.data}],
};
}