function MainComponent() { const [transcript, setTranscript] = React.useState(""); const handleTranscriptUpdate = (newTranscript)=>{ setTranscript(newTranscript); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-8", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AudioTranscriber, { onTranscriptUpdate: handleTranscriptUpdate, __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(GoogleTranslateIntegration, { inputText: transcript, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "./butterfly-image.jpg", alt: "Two butterflies near white flowers", className: "w-full h-auto max-w-md", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function AudioTranscriber({ onTranscriptUpdate }) { const [isRecording, setIsRecording] = React.useState(false); const [transcript, setTranscript] = React.useState(""); const [isConverting, setIsConverting] = React.useState(false); const [mediaRecorder, setMediaRecorder] = React.useState(null); const startRecording = async ()=>{ setTranscript(""); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const newMediaRecorder = new MediaRecorder(stream); setMediaRecorder(newMediaRecorder); newMediaRecorder.start(); setIsRecording(true); }; const stopRecording = ()=>{ if (mediaRecorder) { mediaRecorder.stop(); mediaRecorder.ondataavailable = async (e)=>{ const audioFile = new Blob([ e.data ], { type: "audio/wav" }); setIsConverting(true); const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': audioFile.type }, body: audioFile }); const data = await response.json(); const transcriptText = data.results.channels[0].alternatives[0].transcript; setTranscript(transcriptText); onTranscriptUpdate(transcriptText); setIsConverting(false); }; } setIsRecording(false); }; const clearTranscript = ()=>{ setTranscript(""); onTranscriptUpdate(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 text-white rounded ${isRecording ? 'bg-red-500' : 'bg-blue-500'}`, onClick: isRecording ? stopRecording : startRecording, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, isRecording ? "録音をストップする" : "録音"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-gray-500 text-white rounded", onClick: clearTranscript, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "クリア"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 w-[400px] h-[200px] bg-white", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, isConverting ? "テキストに変換中" : transcript)); } function GoogleTranslateIntegration({ inputText }) { const [translatedText, setTranslatedText] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); React.useEffect(()=>{ if (inputText) { handleTranslate(); } }, [ inputText ]); const handleTranslate = async ()=>{ setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputText }, { role: 'system', content: 'Translate the above text into Japanese.' } ] }) }); const data = await response.json(); const translatedContent = data.choices[0].message.content; setTranslatedText(translatedContent); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-gray-300 rounded w-full max-w-md font-roboto", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, isLoading ? 'Translating...' : translatedText)); }