function MainComponent() { const [inputValue, setInputValue] = React.useState(''); const [loading, setLoading] = React.useState(false); const [audioSrc, setAudioSrc] = React.useState(''); const [transcript, setTranscript] = React.useState(''); const handleTextChange = (e)=>{ setInputValue(e.target.value); }; const handleTextToSpeech = async ()=>{ setLoading(true); const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(inputValue)}`, { method: 'GET' }); const audioBlob = await response.blob(); setAudioSrc(URL.createObjectURL(audioBlob)); setLoading(false); }; const handleTranscribeAudio = async (audioFile)=>{ setLoading(true); const response = await fetch('/integrations/transcribe-audio-2/listen', { method: 'POST', body: audioFile }); const data = await response.json(); setTranscript(data.results.channels[0].alternatives[0].transcript); setLoading(false); }; const handleFileChange = (e)=>{ const file = e.target.files[0]; if (file) { handleTranscribeAudio(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f5]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#333] mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "AI Voice Assistant on Raspberry Pi"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center md:items-start justify-center gap-8", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./raspberry_pi_ai_voice_assistant.jpg", alt: "Raspberry Pi with AI Voice Assistant setup", className: "w-[300px] h-[200px] md:w-[400px] md:h-[266px] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-[400px]", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-[#333] mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Interact with Your AI Voice Assistant"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-[#666] mb-2", htmlFor: "text-input", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Enter Text for Voice:"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-[#ccc] rounded", type: "text", id: "text-input", name: "text", placeholder: "Type something...", onChange: handleTextChange, value: inputValue, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-6 bg-[#4CAF50] text-white font-medium rounded hover:bg-[#46a049] transition-colors", onClick: handleTextToSpeech, disabled: loading, __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, loading ? 'Converting...' : 'Convert to Speech')), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-lg font-medium text-[#666] mb-2", htmlFor: "audio-input", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Upload Audio for Transcription:"), /*#__PURE__*/ React.createElement("input", { className: "w-full p-2 border border-[#ccc] rounded", type: "file", id: "audio-input", name: "audio", onChange: handleFileChange, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), loading && /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg font-medium text-[#666]", __source: { fileName: "", lineNumber: 52, columnNumber: 25 }, __self: this }, "Transcribing..."), transcript && /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg font-medium text-[#666] mt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 28 }, __self: this }, "Transcript: ", transcript)), audioSrc && /*#__PURE__*/ React.createElement("audio", { controls: true, src: audioSrc, className: "mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 24 }, __self: this })))); }