function MainComponent() { const [audioFile, setAudioFile] = React.useState(null); const [imageFile, setImageFile] = React.useState(null); const [text, setText] = React.useState(''); const [response, setResponse] = React.useState('Response will appear here...'); const [loading, setLoading] = React.useState(false); const handleRecordAudio = ()=>{ // Logic to record audio and set audio file }; const handleAudioUpload = async ()=>{ if (audioFile) { setLoading(true); const res = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', headers: { 'Content-Type': 'audio/wav' }, body: audioFile }); const data = await res.json(); setText(data.results.channels[0].alternatives[0].transcript); setLoading(false); } }; const handleImageUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = async ()=>{ setLoading(true); const res = await fetch('/integrations/gpt-vision/', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'image_url', image_url: { url: reader.result } } ] } ] }) }); const data = await res.json(); setResponse(data.choices[0].message.content); setLoading(false); }; reader.readAsDataURL(file); } }; const handleSendToChatGPT = async ()=>{ setLoading(true); const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: text } ], system_prompt: 'この文章を人が歌っているように読み上げてほしい' }) }); const data = await res.json(); setResponse(data.choices[0].message.content); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#f0f0f0] p-8 flex flex-col items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleRecordAudio, className: "bg-indigo-500 text-white font-roboto py-2 px-6 rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Record Audio")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/png, image/jpeg, image/webp, image/gif", className: "mb-2", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white font-roboto py-2 px-6 rounded", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Upload Image")), /*#__PURE__*/ React.createElement("textarea", { className: "w-[400px] h-[200px] p-4 border border-gray-300 rounded mb-8 font-roboto", name: "text", placeholder: "Enter text here...", value: text, onChange: (e)=>setText(e.target.value), __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendToChatGPT, className: "bg-blue-500 text-white font-roboto py-2 px-6 rounded", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, "Send to ChatGPT"), /*#__PURE__*/ React.createElement("button", { onClick: handleAudioUpload, className: "bg-orange-500 text-white font-roboto py-2 px-6 rounded mt-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, "Transcribe Audio"), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-[400px] h-[200px] bg-white p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-gray-700", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, loading ? 'Loading...' : response))); }