function MainComponent() { const [taskText, setTaskText] = React.useState(''); const [recordedAudio, setRecordedAudio] = React.useState(null); const [transcribedText, setTranscribedText] = React.useState(''); const [score, setScore] = React.useState(null); const handleUpdate = ()=>{}; const handleListen = async ()=>{ const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(taskText)}&lang=ko`, { method: 'GET' }); const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); new Audio(audioUrl).play(); }; const handleRecord = ()=>{ const mediaRecorder = new MediaRecorder(navigator.mediaDevices.getUserMedia({ audio: true })); mediaRecorder.start(); setTimeout(()=>{ mediaRecorder.stop(); mediaRecorder.ondataavailable = (e)=>setRecordedAudio(e.data); }, 5000); }; const handleTranscribe = async ()=>{ if (recordedAudio) { const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': 'audio/wav' }, body: recordedAudio }); const result = await response.json(); setTranscribedText(result.results.channels[0].alternatives[0].transcript); calculateScore(); } }; const handlePlayRecording = ()=>{ if (recordedAudio) { const audioUrl = URL.createObjectURL(recordedAudio); new Audio(audioUrl).play(); } }; const calculateScore = ()=>{ const taskWords = taskText.split(' '); const transcribedWords = transcribedText.split(' '); const matchCount = taskWords.filter((word)=>transcribedWords.includes(word)).length; const calculatedScore = matchCount / taskWords.length * 100; setScore(calculatedScore); if (calculatedScore === 100) { alert("🎉 Congratulations! 🎉"); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-noto-sans", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "韓国語の発音確認アプリ"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "韓国語の課題文を入力しあなたの発音をチェックしましょう"), /*#__PURE__*/ React.createElement("textarea", { name: "taskText", value: taskText, onChange: (e)=>setTaskText(e.target.value), className: "w-full p-2 mb-2 border", rows: "4", placeholder: "韓国語の課題文を入力", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-green-500 text-white py-2 mb-2 rounded-md shadow-md", onClick: handleUpdate, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "更新する"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white py-2 mb-2 rounded-md shadow-md", onClick: handleListen, __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "発音を聞く"), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-red-500 text-white py-2 mb-2 rounded-md shadow-md", onClick: handleRecord, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, "発音する"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, "あなたの韓国語会話"), /*#__PURE__*/ React.createElement("textarea", { name: "transcribedText", value: transcribedText, readOnly: true, className: "w-full p-2 mb-2 border", rows: "4", placeholder: "ここにあなたの韓国語会話が表示されます", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-yellow-500 text-white py-2 mb-2 rounded-md shadow-md", onClick: handleTranscribe, __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, "自分の発音を聞く"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, "発音スコア"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, score !== null ? `${score.toFixed(2)}点` : '-')); /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 109, columnNumber: 5 }, __self: this }, ` .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } `)); }