function MainComponent() { const [inputText, setInputText] = React.useState(''); const [translatedText, setTranslatedText] = React.useState(''); const [explanation, setExplanation] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleTranslate = ()=>{ setLoading(true); fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: inputText, target: 'bm' }) }).then((res)=>res.json()).then((data)=>{ setTranslatedText(data.data.translations[0].translatedText); setExplanation(`The English text "${inputText}" has been translated to Bamanankan as: "${data.data.translations[0].translatedText}".`); setLoading(false); }).catch(()=>{ setLoading(false); }); }; const handleTextChange = (event)=>{ setInputText(event.target.value); }; const handleSpeech = ()=>{ const speechUrl = `/integrations/text-to-speech/speech?text=${encodeURIComponent(explanation)}`; const audio = new Audio(speechUrl); audio.play(); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "englishInput", className: "block text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Enter English Text:"), /*#__PURE__*/ React.createElement("textarea", { id: "englishInput", name: "englishInput", rows: "4", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", value: inputText, onChange: handleTextChange, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-4", onClick: handleTranslate, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "Translate and Explain"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", onClick: handleSpeech, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Listen"), loading ? /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 45, columnNumber: 18 }, __self: this }, "Processing...") : null, /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "Translated Text (Bamanankan):"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, translatedText)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Explanation in English:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, explanation))); }