function MainComponent() { const [uploadedImage, setUploadedImage] = React.useState("/sample-image.png"); const [explanation, setExplanation] = React.useState(""); const [explanationJP, setExplanationJP] = React.useState(""); const [showExplanation, setShowExplanation] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const [count, setCount] = React.useState(0); const [estimatedTime, setEstimatedTime] = React.useState(0); React.useEffect(()=>{ let interval = null; if (isLoading) { interval = setInterval(()=>{ setCount((prevCount)=>prevCount + 1); if (estimatedTime > 0) { setEstimatedTime((prevTime)=>prevTime - 1); } }, 1000); } else if (!isLoading && count !== 0) { clearInterval(interval); setCount(0); setEstimatedTime(0); } return ()=>clearInterval(interval); }, [ isLoading, count, estimatedTime ]); const fetchExplanation = async ()=>{ setIsLoading(true); setEstimatedTime(10); // Assuming it takes approximately 10 seconds to get an explanation const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: "Explain this image" } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); setExplanation(data.choices[0].message.content); const responseJP = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: data.choices[0].message.content } ], system_prompt: 'Translate this content to Japanese' }) }); const dataJP = await responseJP.json(); setExplanationJP(dataJP.choices[0].message.content); setShowExplanation(true); setIsLoading(false); }; const handleConvert = ()=>{ fetchExplanation(); }; const onChangeImageHandler = (e)=>{ const file = e.target.files[0]; setUploadedImage(URL.createObjectURL(file)); setShowExplanation(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "p-10 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "image", className: "block mb-2 text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Upload Image"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "image", accept: "image/*", className: "block w-full text-sm font-roboto text-[#333] bg-gray-50 rounded-lg border border-gray-300 cursor-pointer focus:outline-none", onChange: onChangeImageHandler, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Uploaded content or a sample image to initiate analysis", className: "w-[300px] h-[300px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this })), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, `Processing... ${count}s (${estimatedTime}s left)`)) : showExplanation && /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#333] mb-2", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, explanation), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, explanationJP)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center", onClick: handleConvert, __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Convert")))); }