function MainComponent() { const [selectedFile, setSelectedFile] = React.useState(null); const [extractedText, setExtractedText] = React.useState(''); const [translatedText, setTranslatedText] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [selectedLanguage, setSelectedLanguage] = React.useState('en'); const audioRef = React.useRef(null); const handleFileChange = (event)=>{ setSelectedFile(event.target.files[0]); }; const handleLanguageChange = (event)=>{ setSelectedLanguage(event.target.value); }; const handleScanDocument = async ()=>{ if (!selectedFile) return; setIsLoading(true); setExtractedText(''); setTranslatedText(''); if (audioRef.current) { audioRef.current.src = ''; } try { const formData = new FormData(); formData.append('image', selectedFile); const scanResponse = await fetch('/integrations/scan-document/', { method: 'POST', body: formData }); const scanResult = await scanResponse.json(); setExtractedText(scanResult.extractedDocument); setSelectedFile(null); } catch (error) { console.error('Error scanning document:', error); } setIsLoading(false); }; const handleTranslate = async ()=>{ if (!extractedText) return; setIsLoading(true); try { const translateResponse = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: extractedText, target: selectedLanguage }) }); const translateResult = await translateResponse.json(); setTranslatedText(translateResult.data.translations[0].translatedText); } catch (error) { console.error('Error translating text:', error); } setIsLoading(false); }; const handleTextToSpeech = async ()=>{ if (!translatedText) return; setIsLoading(true); try { const encodedText = encodeURIComponent(translatedText); const speechResponse = await fetch(`/integrations/text-to-speech/speech?text=${encodedText}`); const blob = await speechResponse.blob(); const audioUrl = URL.createObjectURL(blob); if (audioRef.current) { audioRef.current.src = audioUrl; audioRef.current.play(); } } catch (error) { console.error('Error converting text to speech:', error); } setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#F5E6F4] font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-4xl text-center text-[#333] my-8", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, "Document Translation Tool"), /*#__PURE__*/ React.createElement("main", { className: "flex-1 px-4 md:px-0", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8 bg-white shadow-lg rounded-md mx-auto max-w-4xl p-6", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Scan & Translate Document"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "w-full h-12 p-4 mb-4 border border-[#D9A8D8] rounded-md", onChange: handleFileChange, name: "documentFile", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `w-full px-4 py-2 mb-2 text-lg ${isLoading ? 'bg-[#D9A8D8]' : 'bg-[#D291BC] hover:bg-[#BA7CA8]'} text-white font-bold rounded-md transition duration-300`, onClick: handleScanDocument, disabled: isLoading, __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, isLoading ? 'Processing...' : 'Scan Document'), extractedText && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-[#333] mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "Extracted Text"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-[#D9A8D8] bg-[#FAE8FA] rounded-md mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 118, columnNumber: 17 }, __self: this }, extractedText)), /*#__PURE__*/ React.createElement("select", { className: "w-full h-12 p-4 mb-4 border border-[#D9A8D8] rounded-md", value: selectedLanguage, onChange: handleLanguageChange, name: "targetLanguage", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "zh", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, "Chinese")), /*#__PURE__*/ React.createElement("button", { className: `w-full px-4 py-2 mb-2 text-lg ${isLoading ? 'bg-[#D9A8D8]' : 'bg-[#D291BC] hover:bg-[#BA7CA8]'} text-white font-bold rounded-md transition duration-300`, onClick: handleTranslate, disabled: isLoading, __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, isLoading ? 'Translating...' : 'Translate Text')), translatedText && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl text-[#333] mb-2", __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, "Translated Text"), /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-[#D9A8D8] bg-[#FAE8FA] rounded-md mb-4", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 147, columnNumber: 17 }, __self: this }, translatedText)), /*#__PURE__*/ React.createElement("button", { className: `w-full px-4 py-2 mb-2 text-lg ${isLoading ? 'bg-[#D9A8D8]' : 'bg-[#D291BC] hover:bg-[#BA7CA8]'} text-white font-bold rounded-md transition duration-300`, onClick: handleTextToSpeech, disabled: isLoading, __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, isLoading ? 'Converting...' : 'Convert to Audio'), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, controls: true, className: "w-full mt-4", hidden: true, __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }))))); }