function MainComponent() { const [isRecording, setIsRecording] = React.useState(false); const [remainingTime, setRemainingTime] = React.useState(180); const [transcribedText, setTranscribedText] = React.useState(''); const [evaluation, setEvaluation] = React.useState(''); const [submissionCount, setSubmissionCount] = React.useState(0); const [errorMessage, setErrorMessage] = React.useState(''); const [audioBlob, setAudioBlob] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); const startRecording = async ()=>{ setIsRecording(true); setRemainingTime(180); setErrorMessage(''); setTranscribedText(''); setEvaluation(''); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); const audioChunks = []; mediaRecorder.addEventListener('dataavailable', (event)=>{ audioChunks.push(event.data); }); mediaRecorder.addEventListener('stop', ()=>{ const audioBlob = new Blob(audioChunks); setAudioBlob(audioBlob); transcribeAudio(audioBlob); }); mediaRecorder.start(); const timer = setInterval(()=>{ setRemainingTime((prevTime)=>{ if (prevTime <= 1) { clearInterval(timer); mediaRecorder.stop(); stream.getTracks().forEach((track)=>track.stop()); setIsRecording(false); return 0; } return prevTime - 1; }); }, 1000); setTimeout(()=>{ if (mediaRecorder.state === 'recording') { clearInterval(timer); mediaRecorder.stop(); stream.getTracks().forEach((track)=>track.stop()); setIsRecording(false); setErrorMessage('Recording time exceeded 3 minutes. Recording stopped.'); } }, 180000); }; const stopRecording = ()=>{ setIsRecording(false); setRemainingTime(0); }; const transcribeAudio = async (audioBlob)=>{ setIsLoading(true); try { const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', body: audioBlob, headers: { 'Content-Type': 'audio/wav' } }); const data = await response.json(); setTranscribedText(data.results.channels[0].alternatives[0].transcript); } catch (error) { console.error('Error transcribing audio:', error); setErrorMessage('Error transcribing audio. Please try again.'); } finally{ setIsLoading(false); } }; const submitForEvaluation = async ()=>{ if (submissionCount >= 3) { setErrorMessage('Maximum submission limit reached. Process terminated.'); return; } setSubmissionCount((prevCount)=>prevCount + 1); setIsLoading(true); const prompt = `Please score the text based on the TOEFL Integrated Speaking section rubric using a 5-point scale. Include words of encouragement. Format: Rating: (score). (Overall) (List five areas for improvement with specific explanations. Do not use bold text.)`; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `${prompt}\n\nTranscribed text: ${transcribedText}` } ] }) }); const data = await response.json(); setEvaluation(data.choices[0].message.content); } catch (error) { console.error('Error evaluating response:', error); setErrorMessage('Error evaluating response. Please try again.'); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 117, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8 font-roboto text-center", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, "Integrated Speaking Evaluation Tool"), !isRecording && !transcribedText && /*#__PURE__*/ React.createElement("button", { onClick: startRecording, className: "bg-blue-500 text-white px-6 py-3 rounded-lg text-xl font-semibold hover:bg-blue-600 transition duration-300 font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, "Start Recording"), isRecording && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: stopRecording, className: "bg-red-500 text-white px-6 py-3 rounded-lg text-xl font-semibold hover:bg-red-600 transition duration-300 font-roboto mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "Recording"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "Time Remaining: ", remainingTime, " seconds")), transcribedText && !evaluation && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "Transcribed Text:"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-4 rounded-lg shadow-md mb-4 font-roboto resize-none", value: transcribedText, onChange: (e)=>setTranscribedText(e.target.value), __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: submitForEvaluation, className: "bg-green-500 text-white px-6 py-3 rounded-lg text-xl font-semibold hover:bg-green-600 transition duration-300 font-roboto", disabled: isLoading, __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, isLoading ? 'Submitting...' : 'Submit'), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, "Remaining submissions: ", 3 - submissionCount)), evaluation && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, "Evaluation Result:"), /*#__PURE__*/ React.createElement("p", { className: "text-3xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, evaluation.split('\n')[0]), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-line font-roboto", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, evaluation.split('\n').slice(1).join('\n')), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mt-6 mb-2 font-roboto", __source: { fileName: "", lineNumber: 165, columnNumber: 11 }, __self: this }, "Recorded Text:"), /*#__PURE__*/ React.createElement("p", { className: "bg-gray-100 p-4 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, transcribedText)), errorMessage && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 mt-4 font-roboto", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, errorMessage), isLoading && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-50 z-50", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-white", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }))); }