function MainComponent() { const [isRecording, setIsRecording] = React.useState(false); const [audioBlob, setAudioBlob] = React.useState(null); const [transcription, setTranscription] = React.useState(''); const [summary, setSummary] = React.useState(''); const [isSummarizing, setIsSummarizing] = React.useState(false); const startRecording = ()=>{ navigator.mediaDevices.getUserMedia({ audio: true }).then((stream)=>{ const mediaRecorder1 = new MediaRecorder(stream); mediaRecorder1.start(); setIsRecording(true); const audioChunks = []; mediaRecorder1.addEventListener("dataavailable", (event)=>{ audioChunks.push(event.data); }); mediaRecorder1.addEventListener("stop", ()=>{ const audioBlob = new Blob(audioChunks); setAudioBlob(audioBlob); transcribeAudio(audioBlob); }); setMediaRecorder(mediaRecorder1); }); }; const stopRecording = ()=>{ mediaRecorder.stop(); setIsRecording(false); }; const transcribeAudio = async (audioBlob)=>{ const formData = new FormData(); formData.append("audio", audioBlob); try { const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', body: audioBlob, headers: { 'Content-Type': 'audio/wav' } }); const data = await response.json(); setTranscription(data.results.channels[0].alternatives[0].transcript); generateSummary(data.results.channels[0].alternatives[0].transcript); } catch (error) { console.error('Error transcribing audio:', error); } }; const generateSummary = async (text)=>{ setIsSummarizing(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: text } ], system_prompt: 'Provide a summary of this text' }) }); const data = await response.json(); setSummary(data.choices[0].message.content); } catch (error) { console.error('Error generating summary:', error); } finally{ setIsSummarizing(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-[#F0F0F0]", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-3xl font-bold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "音声録音 & 要約アプリ"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full max-w-md", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex w-full mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center justify-center w-1/2 px-4 py-2 mr-2 text-white bg-blue-600 rounded hover:bg-blue-700 transition duration-150 ease-in-out", onClick: !isRecording ? startRecording : undefined, disabled: isRecording, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "録音開始")), /*#__PURE__*/ React.createElement("button", { className: "flex items-center justify-center w-1/2 px-4 py-2 text-white bg-red-600 rounded hover:bg-red-700 transition duration-150 ease-in-out", onClick: stopRecording, disabled: !isRecording, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "録音停止"))), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-4 mb-4 text-gray-700 bg-white border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline", name: "transcription", placeholder: "音声書き起こしの結果", value: transcription, readOnly: true, __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "w-full h-40 p-4 mb-4 text-gray-700 bg-white border border-gray-300 rounded shadow-sm focus:outline-none focus:shadow-outline", name: "summary", placeholder: "要約の結果", value: summary, readOnly: true, __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }), isSummarizing && /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm font-semibold text-gray-500", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "要約を生成中..."))); }