function MainComponent() { const [documentImage, setDocumentImage] = React.useState(''); const [extractedDocument, setExtractedImage] = React.useState(''); const [translationText, setTranslationText] = React.useState(''); const [translatedText, setTranslatedText] = React.useState(''); const [speechAudio, setSpeechAudio] = React.useState(''); const [loadingState, setLoadingState] = React.useState({ scanning: false, translating: false, convertingTextToSpeech: false }); const handleDocumentUpload = (e)=>{ setLoadingState((prevState)=>({ ...prevState, scanning: true })); const data = new FormData(); data.append('image', e.target.files[0]); fetch('/integrations/scan-document/', { method: 'POST', body: data }).then((response)=>response.json()).then((data)=>{ setExtractedImage(data.extractedDocument); setLoadingState((prevState)=>({ ...prevState, scanning: false })); }); }; const handleTranslation = ()=>{ setLoadingState((prevState)=>({ ...prevState, translating: true })); fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: translationText, target: 'en' }) }).then((response)=>response.json()).then((data)=>{ const translated = data.data.translations[0].translatedText; setTranslatedText(translated); return translated; }).then((translated)=>{ const encodedText = encodeURIComponent(translated); return fetch(`/integrations/text-to-speech/speech?text=${encodedText}`); }).then((response)=>response.blob()).then((blob)=>{ const audioUrl = URL.createObjectURL(blob); setSpeechAudio(audioUrl); setLoadingState((prevState)=>({ ...prevState, translating: false })); }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-lg p-6 w-full max-w-4xl", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Document Scanner & Translator"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Upload Document"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "file:py-2 file:px-4", onChange: handleDocumentUpload, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }), extractedDocument && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: extractedDocument, alt: "Extracted document", className: "mt-4 w-64 h-64 object-contain", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-4 bg-blue-500 text-white font-semibold rounded hover:bg-blue-600 transition", onClick: ()=>setDocumentImage(extractedDocument), __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Use Extracted Image"))), documentImage && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Extracted Text"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border border-gray-300 rounded", rows: "3", value: translationText, onChange: (e)=>setTranslationText(e.target.value), __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-2 px-4 bg-green-500 text-white font-semibold rounded hover:bg-green-600 transition", onClick: handleTranslation, __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Translate and Convert to Speech"), translatedText && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }, translatedText), /*#__PURE__*/ React.createElement("audio", { src: speechAudio, controls: true, className: "mt-4", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, loadingState.scanning && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 102, columnNumber: 37 }, __self: this }, "Scanning document..."), loadingState.translating && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 103, columnNumber: 40 }, __self: this }, "Translating text and converting to speech...")))); }