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

ENCOA-277, ENCOA-276, ENCOA-282, ENCOA-283

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-12-21 19:23:53 +00:00
parent f6d387ce2d
commit 98a1636d0c
31 changed files with 2513 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ExamEditor/ExercisePicker/index.tsx
View File

@@ -9,7 +9,6 @@ import { Module } from "@/interfaces";
import useExamEditorStore from "@/stores/examEditor";
import { LevelPart, ListeningPart, Message, ReadingPart } from "@/interfaces/exam";
import { BsArrowRepeat } from "react-icons/bs";
import { writingTask } from "@/stores/examEditor/sections";
interface ExercisePickerProps {
module: string;

15
src/components/ExamEditor/Exercises/Script/index.tsx
View File

@@ -6,6 +6,7 @@ import { Card, CardContent } from '@/components/ui/card';
import Input from '@/components/Low/Input';
import { FaFemale, FaMale, FaPlus } from 'react-icons/fa';
import clsx from 'clsx';
import { toast } from 'react-toastify';
export interface Speaker {
id: number;
@@ -65,7 +66,7 @@ const ScriptEditor: React.FC<Props> = ({ section, editing = false, local, setLoc
position: index % 2 === 0 ? 'left' : 'right'
}));
}
const existingScript = local as ScriptLine[];
const existingSpeakers = new Set<string>();
const speakerGenders = new Map<string, 'male' | 'female'>();
@@ -217,6 +218,12 @@ const ScriptEditor: React.FC<Props> = ({ section, editing = false, local, setLoc
}, [local]);
if (!isConversation) {
if (typeof local !== 'string') {
toast.error(`Section ${section} is monologue based, but the import contained a conversation!`);
setLocal('');
return null;
}
return (
<Card>
<CardContent className="py-10">
@@ -238,6 +245,12 @@ const ScriptEditor: React.FC<Props> = ({ section, editing = false, local, setLoc
);
}
if (typeof local === 'string') {
toast.error(`Section ${section} is conversation based, but the import contained a monologue!`);
setLocal([]);
return null;
}
return (
<Card>
<CardContent className="py-10">

5
src/components/ExamEditor/SectionRenderer/SectionContext/index.tsx
View File

@@ -16,11 +16,10 @@ interface Props {
onDiscard: () => void;
onEdit?: () => void;
module: Module;
listeningSection?: number;
context: Generating;
}
const SectionContext: React.FC<Props> = ({ sectionId, title, description, renderContent, editing, onSave, onDiscard, onEdit, mode = "edit", module, context, listeningSection }) => {
const SectionContext: React.FC<Props> = ({ sectionId, title, description, renderContent, editing, onSave, onDiscard, onEdit, mode = "edit", module, context }) => {
const { currentModule } = useExamEditorStore();
const { generating, levelGenerating } = useExamEditorStore(
(state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
@@ -54,7 +53,7 @@ const SectionContext: React.FC<Props> = ({ sectionId, title, description, render
{loading ? (
<GenLoader module={module} />
) : (
renderContent(editing, listeningSection)
renderContent(editing)
)}
</div>
</div>

60
src/components/ExamEditor/SectionRenderer/SectionContext/listening.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { LevelPart, ListeningPart } from "@/interfaces/exam";
import { useCallback, useEffect, useState } from "react";
import { LevelPart, ListeningPart, Script } from "@/interfaces/exam";
import SectionContext from ".";
import useExamEditorStore from "@/stores/examEditor";
import useSectionEdit from "../../Hooks/useSectionEdit";
@@ -22,9 +22,10 @@ interface Props {
const ListeningContext: React.FC<Props> = ({ sectionId, module, listeningSection, level = false }) => {
const { dispatch } = useExamEditorStore();
const { genResult, state, generating, levelGenResults, levelGenerating } = useExamEditorStore(
const { genResult, state, generating, levelGenResults, levelGenerating, scriptLoading } = useExamEditorStore(
(state) => state.modules[module].sections.find((section) => section.sectionId === sectionId)!
);
const listeningPart = state as ListeningPart | LevelPart;
const [isDialogDropdownOpen, setIsDialogDropdownOpen] = useState(false);
@@ -51,9 +52,11 @@ const ListeningContext: React.FC<Props> = ({ sectionId, module, listeningSection
},
});
useEffect(()=> {
useEffect(() => {
if (listeningPart.script == undefined) {
setScriptLocal(undefined);
setScriptLocal(undefined);
} else {
setScriptLocal(listeningPart.script);
}
}, [listeningPart])
@@ -93,8 +96,8 @@ const ListeningContext: React.FC<Props> = ({ sectionId, module, listeningSection
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [levelGenResults]);
const renderContent = (editing: boolean, listeningSection?: number) => {
if (scriptLocal === undefined && !editing) {
const memoizedRenderContent = useCallback(() => {
if (scriptLocal === undefined && !editing && !scriptLoading) {
return (
<Card>
<CardContent className="py-10">
@@ -105,18 +108,23 @@ const ListeningContext: React.FC<Props> = ({ sectionId, module, listeningSection
}
return (
<>
{generating === "audio" ? (<GenLoader module="listening" custom="Generating audio ..." />) : (
{(generating === "audio" || scriptLoading) ? (
<GenLoader
module="listening"
custom={scriptLoading ? 'Transcribing Audio ...' : 'Generating audio ...'}
/>
) : (
<>
{listeningPart.audio?.source && (
{listeningPart.audio?.source !== undefined && (
<AudioPlayer
key={sectionId}
key={`${sectionId}-${scriptLocal?.length}`}
src={listeningPart.audio?.source ?? ''}
color="listening"
/>
)}
</>
)}
<Dropdown
{!scriptLoading && <Dropdown
className="mt-8 w-full flex items-center justify-between p-4 bg-white hover:bg-gray-50 transition-colors border rounded-xl border-gray-200"
contentWrapperClassName="rounded-xl mt-2"
customTitle={
@@ -125,10 +133,10 @@ const ListeningContext: React.FC<Props> = ({ sectionId, module, listeningSection
"h-5 w-5",
`text-ielts-${module}`
)} />
<span className="font-medium text-gray-900">{
listeningSection === undefined ?
([1, 3].includes(sectionId) ? "Conversation" : "Monologue") :
([1, 3].includes(listeningSection) ? "Conversation" : "Monologue")}
<span className="font-medium text-gray-900">
{listeningSection === undefined
? ([1, 3].includes(sectionId) ? "Conversation" : "Monologue")
: ([1, 3].includes(listeningSection) ? "Conversation" : "Monologue")}
</span>
</div>
}
@@ -136,15 +144,32 @@ const ListeningContext: React.FC<Props> = ({ sectionId, module, listeningSection
setIsOpen={setIsDialogDropdownOpen}
>
<ScriptRender
key={scriptLocal?.length}
local={scriptLocal}
setLocal={setScriptLocal}
section={level ? listeningSection! : sectionId}
editing={editing}
/>
</Dropdown>
}
</>
);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
scriptLoading,
generating,
listeningPart.audio?.source,
listeningPart.script,
sectionId,
module,
isDialogDropdownOpen,
setIsDialogDropdownOpen,
setScriptLocal,
level,
scriptLocal,
editing,
listeningSection
]);
return (
<SectionContext
@@ -155,14 +180,13 @@ const ListeningContext: React.FC<Props> = ({ sectionId, module, listeningSection
([1, 3].includes(listeningSection) ? "Conversation" : "Monologue")
}
description={`Enter the section's ${(sectionId === 1 || sectionId === 3) ? "conversation" : "monologue"} or import your own`}
renderContent={renderContent}
renderContent={memoizedRenderContent}
editing={editing}
onSave={handleSave}
onEdit={handleEdit}
onDiscard={handleDiscard}
module={module}
context="listeningScript"
listeningSection={listeningSection}
/>
);
};

1
src/components/ExamEditor/SettingsEditor/Shared/Generate.ts
View File

@@ -68,7 +68,6 @@ export function generate(
const url = `/api/exam/generate/${module}/${sectionId}${queryString ? `?${queryString}` : ''}`;
let body = null;
console.log(config.files);
if (config.files && Object.keys(config.files).length > 0 && config.method === 'POST') {
const formData = new FormData();

9
src/components/ExamEditor/SettingsEditor/Shared/GenerateBtn.tsx
View File

@@ -13,9 +13,10 @@ interface Props {
generateFnc: (sectionId: number) => void
className?: string;
level?: boolean;
disabled?: boolean;
}
const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc, className, level = false }) => {
const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc, className, level = false, disabled = false }) => {
const section = useExamEditorStore((store) => store.modules[level ? "level" : module].sections.find((s) => s.sectionId == sectionId));
const [loading, setLoading] = useState(false);
@@ -24,7 +25,7 @@ const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc,
const levelGenerating = section?.levelGenerating;
const levelGenResults = section?.levelGenResults;
useEffect(()=> {
useEffect(() => {
const gen = level ? levelGenerating?.find(g => g === genType) !== undefined : (generating !== undefined && generating === genType);
if (loading !== gen) {
setLoading(gen);
@@ -42,8 +43,8 @@ const GenerateBtn: React.FC<Props> = ({ module, sectionId, genType, generateFnc,
`bg-ielts-${module}/70 border border-ielts-${module} hover:bg-ielts-${module} disabled:bg-ielts-${module}/40`,
className
)}
disabled={loading}
onClick={loading ? () => { } : () => generateFnc(sectionId)}
disabled={loading || disabled}
onClick={(loading || disabled) ? () => { } : () => generateFnc(sectionId)}
>
{loading ? (
<div key={`section-${sectionId}`} className="flex items-center justify-center">

148
src/components/ExamEditor/SettingsEditor/listening/AudioUpload.tsx Normal file
View File

@@ -0,0 +1,148 @@
import Button from '@/components/Low/Button';
import Modal from '@/components/Modal';
import dynamic from 'next/dynamic';
import React, { useCallback, useState } from 'react';
import { MdAudioFile, MdCloudUpload, MdDelete } from 'react-icons/md';
const Waveform = dynamic(() => import("@/components/Waveform"), { ssr: false });
interface AudioUploadProps {
isOpen: boolean;
audioFile: string | undefined;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
onFileSelect: (file: File | null) => void;
transcribeAudio: () => void;
setAudioUrl: React.Dispatch<React.SetStateAction<string | undefined>>;
}
const AudioUpload: React.FC<AudioUploadProps> = ({ isOpen, audioFile, setIsOpen, onFileSelect, transcribeAudio, setAudioUrl }) => {
const [isDragging, setIsDragging] = useState(false);
const [error, setError] = useState<string | null>(null);
const handleDrag = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
}, []);
const handleDragIn = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
}, []);
const handleDragOut = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
}, []);
const validateFile = (file: File): boolean => {
if (!file.type.startsWith('audio/')) {
setError('Please upload an audio file');
return false;
}
setError(null);
return true;
};
const handleDrop = useCallback((e: React.DragEvent) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
setError(null);
const file = e.dataTransfer.files?.[0];
if (file && validateFile(file)) {
onFileSelect(file);
}
}, [onFileSelect]);
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
if (file && validateFile(file)) {
onFileSelect(file);
}
};
const handleRemoveAudio = () => {
onFileSelect(null);
};
return (
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
<div className="w-full space-y-4">
{!audioFile && (
<div
className={`relative border-2 border-dashed rounded-lg p-8 text-center
${isDragging
? 'border-blue-500 bg-blue-50'
: 'border-gray-300 hover:border-gray-400'
}
transition-all duration-200 ease-in-out`}
onDragEnter={handleDragIn}
onDragLeave={handleDragOut}
onDragOver={handleDrag}
onDrop={handleDrop}
>
<input
type="file"
accept="audio/*"
onChange={handleFileUpload}
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
title="Choose audio file"
/>
<div className="space-y-4">
<div className="flex justify-center">
{error ? (
<MdAudioFile className="w-16 h-16 text-red-500" />
) : (
<MdCloudUpload className="w-16 h-16 text-gray-400" />
)}
</div>
<div className="space-y-2">
<h3 className="text-lg font-medium text-gray-700">
{error ? error : 'Upload Audio File'}
</h3>
<p className="text-sm text-gray-500">
Drag and drop your audio file here, or click to select
</p>
</div>
</div>
</div>
)}
{audioFile && (
<div className="space-y-4">
<div className="flex justify-between items-center">
<h3 className="text-lg font-medium text-gray-700">Audio Upload</h3>
<button
onClick={handleRemoveAudio}
className="flex items-center gap-2 px-3 py-1.5 text-sm text-white bg-red-500 hover:bg-red-600 rounded-md transition-colors duration-200 w-36"
>
<MdDelete className="w-4 h-4" />
Remove Audio
</button>
</div>
<Waveform
variant='edit'
audio={audioFile}
waveColor="#ddd"
progressColor="#4a90e2"
setAudioUrl={setAudioUrl}
/>
<div className="flex w-full justify-between pt-8">
<Button color="purple" onClick={() => setIsOpen(false)} variant="outline" className="max-w-[200px] self-end w-full">
Cancel
</Button>
<Button color="purple" onClick={()=> { transcribeAudio(); setIsOpen(false);}} className="max-w-[200px] self-end w-full">
Upload
</Button>
</div>
</div>
)}
</div>
</Modal>
);
};
export default AudioUpload;

139
src/components/ExamEditor/SettingsEditor/listening/components.tsx
View File

@@ -1,15 +1,20 @@
import Dropdown from "../Shared/SettingsDropdown";
import ExercisePicker from "../../ExercisePicker";
import GenerateBtn from "../Shared/GenerateBtn";
import { useCallback } from "react";
import { useCallback, useState } from "react";
import { generate } from "../Shared/Generate";
import { LevelSectionSettings, ListeningSectionSettings } from "@/stores/examEditor/types";
import useExamEditorStore from "@/stores/examEditor";
import { LevelPart, ListeningPart } from "@/interfaces/exam";
import { LevelPart, ListeningPart, Script } from "@/interfaces/exam";
import Input from "@/components/Low/Input";
import axios from "axios";
import { toast } from "react-toastify";
import { playSound } from "@/utils/sound";
import { FaFileUpload } from "react-icons/fa";
import clsx from "clsx";
import AudioUpload from "./AudioUpload";
import { downloadBlob } from "@/utils/evaluation";
import { BsArrowRepeat } from "react-icons/bs";
interface Props {
localSettings: ListeningSectionSettings | LevelSectionSettings;
@@ -25,9 +30,29 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
const {
focusedSection,
difficulty,
sections
} = useExamEditorStore(state => state.modules[currentModule]);
const [originalAudioUrl, setOriginalAudioUrl] = useState<string | undefined>();
const [audioUrl, setAudioUrl] = useState<string | undefined>();
const [isUploaderOpen, setIsUploaderOpen] = useState(false);
const [isUploading, setIsUploading] = useState(false);
const generateScript = useCallback(() => {
if (audioUrl) {
URL.revokeObjectURL(audioUrl);
setAudioUrl(undefined);
dispatch({
type: "UPDATE_SECTION_STATE",
payload: {
sectionId: focusedSection,
module: "listening",
update: {
audio: undefined
}
}
});
}
generate(
levelId ? levelId : focusedSection,
"listening",
@@ -124,8 +149,83 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentSection?.script, dispatch, level, levelId]);
const handleFileSelect = (file: File | null) => {
if (file) {
const url = URL.createObjectURL(file);
setOriginalAudioUrl(url);
setAudioUrl(url);
dispatch({
type: "UPDATE_SECTION_STATE",
payload: {
sectionId: focusedSection,
module: "listening",
update: {
audio: {
source: url,
repeatableTimes: 3
}
}
}
});
} else {
if (audioUrl) {
URL.revokeObjectURL(audioUrl);
URL.revokeObjectURL(originalAudioUrl!);
dispatch({
type: "UPDATE_SECTION_STATE",
payload: {
sectionId: focusedSection,
module: "listening",
update: { audio: undefined }
}
});
}
setAudioUrl(undefined);
setOriginalAudioUrl(undefined);
}
};
const transcribeAudio = async () => {
try {
setIsUploading(true);
dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {module: "listening", sectionId: focusedSection, field: "scriptLoading", value: true}})
const formData = new FormData();
const audioBlob = await downloadBlob(audioUrl!);
const audioFile = new File([audioBlob], "audio");
formData.append("audio", audioFile);
const config = {
headers: {
"Content-Type": "multipart/form-data",
},
};
const response = await axios.post(`/api/transcribe`, formData, config);
dispatch({
type: "UPDATE_SECTION_STATE",
payload: {
sectionId: focusedSection,
module: "listening",
update: {
script: (response.data as any).dialog as Script,
audio: { source: audioUrl!, repeatableTimes: 3 }
}
}
});
} catch (error) {
toast.error("An unexpected error has occurred, try again later!");
} finally {
setIsUploading(false);
dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {module: "listening", sectionId: focusedSection, field: "scriptLoading", value: false}})
}
};
return (
<>
<AudioUpload isOpen={isUploaderOpen} setIsOpen={setIsUploaderOpen} audioFile={originalAudioUrl} onFileSelect={handleFileSelect} transcribeAudio={transcribeAudio} setAudioUrl={setAudioUrl} />
<Dropdown
title="Audio Context"
module="listening"
@@ -154,10 +254,39 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
sectionId={focusedSection}
generateFnc={generateScript}
level={level}
disabled={isUploading}
/>
</div>
</div>
</Dropdown>
<div className="flex justify-center text-mti-gray-dim font-semibold">Or</div>
<div className="flex flex-col w-full gap-2 px-2 pb-4">
<div className="flex flex-row items-center text-mti-gray-dim justify-between w-full gap-4 py-2 pl-2">
<div className="flex-1 bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300">
Import your own audio file
</div>
<div className="flex self-end h-16 mb-1 flex-shrink-0">
<button
className={clsx(
"flex items-center w-[140px] justify-center px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
"bg-ielts-listening/70 border border-ielts-listening hover:bg-ielts-listening disabled:bg-ielts-listening/40"
)}
onClick={() => setIsUploaderOpen(true)}
>
<div className="flex flex-row">
{isUploading ? (
<BsArrowRepeat className="mr-2 text-white animate-spin" size={25} />
) : (
<>
<FaFileUpload className="mr-2" size={24} />
<span>Upload</span>
</>
)}
</div>
</button>
</div>
</div>
</div >
</Dropdown >
<Dropdown
title="Add Exercises"
module="listening"
@@ -181,10 +310,10 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
module="listening"
open={localSettings.isAudioGenerationOpen}
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isAudioGenerationOpen: isOpen }, false)}
disabled={currentSection === undefined || currentSection.script === undefined && currentSection.audio === undefined || currentSection.exercises.length === 0}
disabled={currentSection === undefined || currentSection.script === undefined || currentSection.exercises.length === 0 || audioUrl !== undefined}
contentWrapperClassName={level ? `border border-ielts-listening` : ''}
>
<div className="flex flex-row items-center text-mti-gray-dim justify-center mb-4 gap-2 p-2">
<div className="flex flex-row items-center text-mti-gray-dim justify-center mb-4 gap-4 p-2">
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300">
Generate audio recording for this section
</span>

1
src/components/ExamEditor/SettingsEditor/writing/index.tsx
View File

@@ -61,7 +61,6 @@ const WritingSettings: React.FC = () => {
exercises: sections.map((s, index) => {
const exercise = s.state as WritingExercise;
if (type === "academic" && index == 0 && academic_url) {
console.log("Added the URL");
exercise["attachment"] = {
url: academic_url,
description: "Visual Information"

2
src/components/ExamEditor/index.tsx
View File

@@ -20,7 +20,7 @@ import { defaultSectionSettings } from "@/stores/examEditor/defaults";
import Button from "../Low/Button";
import ResetModule from "./ResetModule";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const DIFFICULTIES: Difficulty[] = ["A1", "A2", "B1", "B2", "C1", "C2"];
const ExamEditor: React.FC<{ levelParts?: number }> = ({ levelParts = 0 }) => {
const { currentModule, dispatch } = useExamEditorStore();