function MainComponent() { const [word, setWord] = React.useState(''); const [sourceLang, setSourceLang] = React.useState('English'); const [targetLang1, setTargetLang1] = React.useState('Japanese'); const [targetLang2, setTargetLang2] = React.useState('French'); const [loading, setLoading] = React.useState(false); const [translation1, setTranslation1] = React.useState(''); const [translation2, setTranslation2] = React.useState(''); const [examples1, setExamples1] = React.useState([]); const [examples2, setExamples2] = React.useState([]); const fetchExamples = (translation, targetLang, setExamples)=>{ fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `how can we say "${word}" in "${targetLang}", and please give me 3 one line examples with the translated word` } ] }) }).then((response)=>response.json()).then((data)=>{ setExamples(data.choices[0].message.content.split('\n')); }); }; const handleTranslate = ()=>{ setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `how can we say "${word}" in "${targetLang1}", and please give me 3 one line examples with the translated word` } ] }) }).then((response)=>response.json()).then((data)=>{ const translatedWord1 = data.choices[0].message.content.split('\n')[0]; setTranslation1(translatedWord1); fetchExamples(translatedWord1, targetLang1, setExamples1); return fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `how can we say "${word}" in "${targetLang2}", and please give me 3 one line examples with the translated word` } ] }) }); }).then((response)=>response.json()).then((data)=>{ const translatedWord2 = data.choices[0].message.content.split('\n')[0]; setTranslation2(translatedWord2); fetchExamples(translatedWord2, targetLang2, setExamples2); setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Dictionary Translations"), /*#__PURE__*/ React.createElement("input", { type: "text", value: word, onChange: (e)=>setWord(e.target.value), name: "word", placeholder: "Enter word to translate", className: "border p-2 mb-4 w-full", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: sourceLang, onChange: (e)=>setSourceLang(e.target.value), name: "sourceLang", className: "border p-2 mb-4 w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "English", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "Japanese", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "French", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "French")), /*#__PURE__*/ React.createElement("select", { value: targetLang1, onChange: (e)=>setTargetLang1(e.target.value), name: "targetLang1", className: "border p-2 mb-4 w-full", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "English", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "Japanese", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "French", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "French")), /*#__PURE__*/ React.createElement("select", { value: targetLang2, onChange: (e)=>setTargetLang2(e.target.value), name: "targetLang2", className: "border p-2 mb-4 w-full", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "English", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "Japanese", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "French", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, "French")), /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, className: "bg-blue-500 text-white p-2 w-full", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, "Translate"), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 111, columnNumber: 19 }, __self: this }, "Loading..."), !loading && translation1 && translation2 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, targetLang1, ":"), ' "', translation1, '"'), examples1.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, examples1.map((example, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this }, index + 1, ". ", example))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, targetLang2, ":"), ' "', translation2, '"'), examples2.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, examples2.map((example, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 130, columnNumber: 17 }, __self: this }, index + 1, ". ", example))))); }