function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [plantDescription, setPlantDescription] = React.useState(''); const [imagePreviewUrl, setImagePreviewUrl] = React.useState(''); const [plantType, setPlantType] = React.useState(''); const handleFileInputChange = async (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = ()=>{ setImagePreviewUrl(reader.result); }; } }; const analyzeImageAndDescribe = async ()=>{ setIsLoading(true); try { const searchResponse = await fetch(`/integrations/image-search/imagesearch?q=Plant`, { method: 'GET' }); const searchData = await searchResponse.json(); setPlantType(searchData.items[0].title); const chatResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: searchData.items[0].title } ], system_prompt: 'Provide information about this plant' }) }); const chatData = await chatResponse.json(); setPlantDescription(chatData.choices[0].message.content); } catch (error) { console.error('Error:', error); setPlantType(''); setPlantDescription(''); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f4ef] p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#3a5a40] my-4 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, "Plant Identifier"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "plantImageInput", className: "py-2 px-4 bg-[#3a5a40] text-white rounded-lg cursor-pointer hover:bg-[#2e4833] transition-colors font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "Upload Image 🌱"), /*#__PURE__*/ React.createElement("input", { id: "plantImageInput", type: "file", className: "hidden", accept: "image/png, image/jpeg", onChange: handleFileInputChange, name: "plantImage", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: analyzeImageAndDescribe, className: "py-2 px-4 bg-[#3a5a40] text-white rounded-lg cursor-pointer hover:bg-[#2e4833] transition-colors mb-4 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, isLoading ? 'Analyzing...' : 'Analyze'), /*#__PURE__*/ React.createElement("img", { src: imagePreviewUrl, alt: "Uploaded plant", className: "mt-4 max-h-[200px] rounded-lg object-cover", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }), plantType && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center p-4 bg-[#ccd5ae] rounded-lg font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, plantType), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, plantDescription))); }