function MainComponent() { const [convertedText, setConvertedText] = React.useState(''); const [translatedText, setTranslatedText] = React.useState(''); const handleConvert = async ()=>{ const imageInput = document.getElementById('image'); if (imageInput.files.length === 0) { return; } const formData = new FormData(); formData.append('file', imageInput.files[0]); const response = await fetch('https://api.ocr.space/parse/image', { method: 'POST', headers: { 'apikey': 'YOUR_OCR_API_KEY' }, body: formData }); const result = await response.json(); const parsedText = result.ParsedResults[0].ParsedText; setConvertedText(parsedText); const translationResponse = await fetch('https://api.mymemory.translated.net/get', { method: 'GET', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ q: parsedText, langpair: 'en|ja' }) }); const translationResult = await translationResponse.json(); setTranslatedText(translationResult.responseData.translatedText); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "OCR Text Converter"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image", className: "block text-sm font-medium text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", id: "image", className: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleConvert, className: "w-full py-2 px-4 bg-blue-600 text-white rounded-md font-roboto hover:bg-blue-700", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Convert to Text")), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mt-6 font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Converted Text"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-4 border border-gray-300 rounded-md h-[150px] overflow-y-auto font-roboto", id: "convertedText", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, convertedText), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mt-6 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Translated Text (Japanese)"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 p-4 border border-gray-300 rounded-md h-[150px] overflow-y-auto font-roboto", id: "translatedText", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, translatedText))); }