function MainComponent() { const [isRecording, setIsRecording] = React.useState(false); const [elapsedTime, setElapsedTime] = React.useState(0); const [transcript, setTranscript] = React.useState(''); const [interimTranscript, setInterimTranscript] = React.useState(''); const [letterCount, setLetterCount] = React.useState(0); const [speakingDuration, setSpeakingDuration] = React.useState(0); const recognition = React.useRef(null); const timerRef = React.useRef(null); const lastSpeechRef = React.useRef(Date.now()); const speakingTimerRef = React.useRef(null); React.useEffect(()=>{ const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; recognition.current = new SpeechRecognition(); recognition.current.lang = 'ja-JP'; recognition.current.interimResults = true; recognition.current.continuous = true; recognition.current.onresult = (event)=>{ let interimTranscript = ''; let finalTranscript = ''; for(let i = event.resultIndex; i < event.results.length; i++){ const transcript = event.results[i][0].transcript; if (event.results[i].isFinal) { finalTranscript += transcript; } else { interimTranscript = transcript; } } setTranscript(finalTranscript); setInterimTranscript(interimTranscript); setLetterCount(finalTranscript.length); lastSpeechRef.current = Date.now(); }; return ()=>{ if (recognition.current) { recognition.current.stop(); } if (timerRef.current) { clearInterval(timerRef.current); } if (speakingTimerRef.current) { clearInterval(speakingTimerRef.current); } }; }, []); const startRecognition = ()=>{ setIsRecording(true); setElapsedTime(0); setTranscript(''); setInterimTranscript(''); setLetterCount(0); setSpeakingDuration(0); recognition.current.start(); lastSpeechRef.current = Date.now(); timerRef.current = setInterval(()=>{ setElapsedTime((prevTime)=>prevTime + 0.1); }, 100); speakingTimerRef.current = setInterval(()=>{ const timeSinceLastSpeech = (Date.now() - lastSpeechRef.current) / 1000; if (timeSinceLastSpeech > 1) { setSpeakingDuration((prevDuration)=>prevDuration + timeSinceLastSpeech); lastSpeechRef.current = Date.now(); } }, 1000); }; const stopRecognition = ()=>{ setIsRecording(false); recognition.current.stop(); clearInterval(timerRef.current); clearInterval(speakingTimerRef.current); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-indigo-500 to-purple-600 p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-2xl p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 font-roboto text-indigo-800", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "音声認識タイマー"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-6 mb-8", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startRecognition, disabled: isRecording, className: `${isRecording ? 'bg-gray-400 cursor-not-allowed' : 'bg-green-500 hover:bg-green-600'} text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:scale-105`, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone mr-2", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }), "開始"), /*#__PURE__*/ React.createElement("button", { onClick: stopRecognition, disabled: !isRecording, className: `${!isRecording ? 'bg-gray-400 cursor-not-allowed' : 'bg-red-500 hover:bg-red-600'} text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:scale-105`, __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop-circle mr-2", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }), "停止")), /*#__PURE__*/ React.createElement("div", { className: "bg-indigo-50 rounded-lg p-6 mb-6 shadow-inner", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto text-indigo-800", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "統計:"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-indigo-700", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2 text-indigo-500", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), "総時間:"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-2xl font-bold text-indigo-600", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, elapsedTime.toFixed(1), "秒")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-indigo-700", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comment mr-2 text-indigo-500", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }), "話した時間:"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-2xl font-bold text-indigo-600", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, speakingDuration.toFixed(1), "秒")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-indigo-700", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-font mr-2 text-indigo-500", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }), "文字数:"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-2xl font-bold text-indigo-600", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, letterCount))), /*#__PURE__*/ React.createElement("div", { className: "bg-purple-50 rounded-lg p-6 shadow-inner", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto text-purple-800", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "文字起こし:"), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-gray-800 min-h-[120px] max-h-[200px] overflow-y-auto whitespace-pre-wrap break-words bg-white p-4 rounded-lg border border-purple-200", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, transcript, /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 italic", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, interimTranscript))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center text-sm text-indigo-600 font-roboto", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "音声認識は日本語(ja-JP)に設定されています"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, "「開始」をクリックして録音を開始し、「停止」をクリックして終了します")))); }