function MainComponent() { const [conversationTexts, setConversationTexts] = React.useState([]); const [currentTextIndex, setCurrentTextIndex] = React.useState(0); const [transcription, setTranscription] = React.useState(""); const [pronunciationScore, setPronunciationScore] = React.useState("発音を採点します"); const [celebrationVisibility, setCelebrationVisibility] = React.useState(false); React.useEffect(()=>{ updateConversation(); }, []); const calculateScore = (originalText, transcribedText)=>{ const originalWords = originalText.toLowerCase().match(/[\w']+/g) || []; const transcribedWords = transcribedText.toLowerCase().match(/[\w']+/g) || []; const matchedWords = transcribedWords.filter((word)=>originalWords.includes(word)); const score = Math.round(matchedWords.length / originalWords.length * 100); if (score === 100) { setCelebrationVisibility(true); setTimeout(()=>setCelebrationVisibility(false), 3000); } return score; }; const handleTextToSpeech = async ()=>{ const speechResponse = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(conversationTexts[currentTextIndex])}`, { method: 'GET' }); const blob = await speechResponse.blob(); const url = URL.createObjectURL(blob); const audio = new Audio(url); audio.play(); }; const handleAudioTranscription = async ()=>{ const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); let audioChunks = []; mediaRecorder.ondataavailable = (event)=>{ audioChunks.push(event.data); }; mediaRecorder.onstop = async ()=>{ const audioBlob = new Blob(audioChunks); const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': 'audio/mp3' }, body: audioBlob }); const data = await response.json(); const transcribedText = data.results.channels[0].alternatives[0].transcript; setTranscription(transcribedText); const pronunciationScoreCalculated = calculateScore(conversationTexts[currentTextIndex], transcribedText); setPronunciationScore(`${pronunciationScoreCalculated === 100 ? pronunciationScoreCalculated : `発音スコア: ${pronunciationScoreCalculated !== "発音を採点します" ? `${pronunciationScoreCalculated}/100` : "発音を採点します"}`}`); if (pronunciationScoreCalculated === 100) { setCelebrationVisibility(true); setTimeout(()=>setCelebrationVisibility(false), 3000); } stream.getTracks().forEach((track)=>track.stop()); }; mediaRecorder.start(); setTimeout(()=>{ mediaRecorder.stop(); }, 5000); }; const updateConversation = async ()=>{ const response = await fetch('/integrations/google-gemini/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": "映画Matrixで使われている有名なセリフを英語で10個教えてインデックスの番号、アスタリスク、数字は表示しないでセリフだけ表示して" } ] }) }); const data = await response.json(); const lines = data.choices[0].message.content.split("\n").map((line)=>line.replace(/[*.0-9]/g, '')).filter((line)=>line.trim() !== ""); setConversationTexts(lines); setCurrentTextIndex(0); }; const getCurrentConversationText = ()=>{ return conversationTexts[currentTextIndex] || ""; }; const handleUpdateText = ()=>{ setCurrentTextIndex((prevIndex)=>(prevIndex + 1) % conversationTexts.length); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F2F5] p-4", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 w-full max-w-lg", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto text-center mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, "ネイティブ発音アプリ"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-center mb-5", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "あなたの英語の発音をチェックしましょう"), /*#__PURE__*/ React.createElement("button", { onClick: handleUpdateText, className: "mb-4 bg-[#4CAF50] hover:bg-[#43A047] text-white font-bold py-2 px-4 rounded-3xl shadow-md", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "更新する"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "英会話: ", getCurrentConversationText()), /*#__PURE__*/ React.createElement("button", { onClick: handleTextToSpeech, className: "mb-4 bg-[#2196F3] hover:bg-[#1E88E5] text-white font-bold py-2 px-4 rounded-3xl shadow-md", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "発音を聞く"), /*#__PURE__*/ React.createElement("button", { onClick: handleAudioTranscription, className: "bg-[#F44336] hover:bg-[#E53935] text-white font-bold py-2 px-4 rounded-3xl shadow-md", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "発音する"), /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mt-4", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "あなたの英会話: ", /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 105, columnNumber: 58 }, __self: this }, transcription)), pronunciationScore && /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 32 }, __self: this }, pronunciationScore), /*#__PURE__*/ React.createElement("div", { className: `${celebrationVisibility ? 'block' : 'hidden'} absolute top-0 left-0 w-full h-full flex items-center justify-center bg-[rgba(255,255,255,.8)]`, __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold text-[#FFD700] animate-bounce", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Congratulations! 🎉"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } `)); }