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

Added correction visualizers for the Speaking transcript correction

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-17 23:40:46 +00:00
parent 74dcccf089
commit 68069d118f
4 changed files with 129 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Solutions/InteractiveSpeaking.tsx
View File

@@ -8,6 +8,8 @@ import axios from "axios";
import {speakingReverseMarking} from "@/utils/score";
import {Tab} from "@headlessui/react";
import clsx from "clsx";
import Modal from "../Modal";
import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
@@ -22,6 +24,7 @@ export default function InteractiveSpeaking({
onBack,
}: InteractiveSpeakingExercise & CommonProps) {
const [solutionsURL, setSolutionsURL] = useState<string[]>([]);
const [diffNumber, setDiffNumber] = useState<0 | 1 | 2 | 3>(0);
useEffect(() => {
if (userSolutions && userSolutions.length > 0) {
@@ -42,6 +45,44 @@ export default function InteractiveSpeaking({
return (
<>
<Modal title={`Correction (Prompt ${diffNumber})`} isOpen={diffNumber !== 0} onClose={() => setDiffNumber(0)}>
<>
{userSolutions &&
userSolutions.length > 0 &&
diffNumber !== 0 &&
userSolutions[0].evaluation &&
userSolutions[0].evaluation[`transcript_${diffNumber}`] &&
userSolutions[0].evaluation[`fixed_text_${diffNumber}`] && (
<div className="w-full h-full rounded-xl overflow-hidden flex flex-col mt-4">
<div className="w-full grid grid-cols-2 bg-neutral-100">
<span className="p-3 font-medium text-lg border-r border-r-neutral-200">Transcript</span>
<span className="p-3 font-medium text-lg border-l border-l-neutral-200">Recommended Improvements</span>
</div>
<ReactDiffViewer
styles={{
contentText: {
fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
padding: "32px 28px",
},
marker: {display: "none"},
diffRemoved: {padding: "32px 28px"},
diffAdded: {padding: "32px 28px"},
wordRemoved: {padding: "0px", display: "initial"},
wordAdded: {padding: "0px", display: "initial"},
wordDiff: {padding: "0px", display: "initial"},
}}
oldValue={userSolutions[0].evaluation[`transcript_${diffNumber}`]?.replaceAll("\\n", "\n")}
newValue={userSolutions[0].evaluation[`fixed_text_${diffNumber}`]?.replaceAll("\\n", "\n")}
splitView
hideLineNumbers
showDiffOnly={false}
/>
</div>
)}
</>
</Modal>
<div className="flex flex-col h-full w-full gap-8 mb-20">
<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
<div className="flex flex-col gap-3">
@@ -67,10 +108,23 @@ export default function InteractiveSpeaking({
{solutionsURL.map((x, index) => (
<div
key={index}
className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex flex-col gap-4">
<div className="flex gap-8 items-center justify-center py-8">
<Waveform audio={x} waveColor="#FCDDEC" progressColor="#EF5DA8" />
</div>
{userSolutions &&
userSolutions.length > 0 &&
userSolutions[0].evaluation &&
userSolutions[0].evaluation[`transcript_${(index + 1) as 1 | 2 | 3}`] &&
userSolutions[0].evaluation[`fixed_text_${(index + 1) as 1 | 2 | 3}`] && (
<Button
className="w-full max-w-[180px] !py-2 self-center"
color="pink"
variant="outline"
onClick={() => setDiffNumber((index + 1) as 1 | 2 | 3)}>
View Correction
</Button>
)}
</div>
))}
</div>